Having your website open to people with disabilities makes perfect business sense. Use these tips to enhance the website for visually impaired people.
Adding accessibility on your website is the correct thing to do today.
Why?
Because, according to the CDC, 25 percent of adults in the U.S. live with disabilities.
Too many websites, however, do lack accessibility features.
This means that millions of people maybe have problems with the usability of websites.
What Is Web Accessibility?
Online accessibility is about the creation and production of websites, tools and innovations that those with disabilities can use to their advantage. This is according to the World Wide Web Consortium (W3C).
People with certain disabilities such as hearing or visual impairment should be able to view, understand, navigate, communicate and contribute to the web.
Web accessibility refers to any condition that affects access to the internet, including:
- Auditory.
- Cognitive.
- Neurological.
- Physical.
- Speech.
- Visual.
Where Does ADA Stand?
The most important sections of the ADA on web accessibility are Title II and Title III.
Title II allows state and local governments and government agencies receiving federal funds to ensure that all persons with disabilities have equal access to their programs, facilities or activities.
Title III forbids “public accommodation places such as restaurants, hotels, film theatres, museums and hospitals from discrimination on the grounds of disability.”
Although the ADA does not answer the problem of web usability explicitly, websites and apps are also considered to be part of a business.
New Wave of ADA Lawsuits
Recent years have seen a sharp rise in the number of ADA-based online accessibility cases.
There were 2,256 ADA website-accessibility cases brought before federal courts in 2019.
However, the curve seems to be flattening.
How to Optimise Your Website for Disabled Users
Optimising the website to disabled users makes complete business sense.
You will appeal to a wider market segment while creating a positive brand image.
When you have checked your website for web accessibility, you should follow the following steps:
1. Add Images with Alt Text
A photo can be worth a thousand words, but visual elements such as photographs are an accessibility obstacle for blind and visually impaired users.
They also have to rely on assistive devices such as Screen Readers and Braille Readers.
Screen Readers are software programs that use a synthesiser or Braille display to read text on the screen.
Neither one of these technologies, however, can read images or text in pictures.
You need to add Alt Text to explain your photos to disabled users.
Please ensure that the picture is explained as clearly as possible.
You may use the alt attribute for short descriptions and the “Longdesc Suffix” for long descriptions.
2. Allow Users to Enlarge Font Sizes
People with poor vision are also unable to read small text sizes.
So, when browsing your website, they need to use unique font settings.
Offering an alternative style sheet with the ability to expand the font size without breaking the layout of your page should make it easier for them to read your content.
Also, make sure that your CTA buttons have a larger font size.
And, make those buttons visible to people with poor vision.
3. Keep Contrast Sensitivity in Mind
Think about colour and contrast, along with the text size.
People with impaired vision such as retinitis pigmentosa, glaucoma, diabetic retinopathy, and cataract have poor colour contrast sensitivity.
When creating the webpages, make sure you have a strong contrast between the background and the foreground, such as yellow letters on a black background.
Avoid the use of small fonts.
Also, try not to use any JavaScript or CSS features that stop visually impaired users from increasing the contrast.
Much like the size of the text, colour contrast is important for CTAs as well.
Although the black text on a white background is the most readable, you can also use a combo of black text on a yellow background and yellow text on a blue background.
Avoid using variations like green text on a red backdrop, and vice versa as hard to read.
4. Add Keyboard Navigation
Navigation is a difficulty for blind and visually impaired people.
Since you can’t use a mouse to browse the pages, you need to add keyboard navigation to your site.
Blind users can use Braille keyboards to navigate your website.
Make sure disabled users have access to all the interactive features on your website, including:
- URLs.
- Anchor text.
- Drop-down menus.
- Widgets.
- Forms.
- CTAs.
- Dialogue boxes.
Also, make JavaScript widgets available with the keyboard.
Additionally, you can use HTML links, buttons, and form fields on your own to make sure that all elements of your website are keyboard-accessible.
5. Make Video and Multimedia Accessible
Videos and other interactive features on your website play a crucial role in growing user experience on your website.
Although blind and visually impaired users can’t see visuals, deaf and hard-of-hearing users can’t hear audio.
You may use an audio description to illustrate visuals — only sections such as pictures, gestures, and changes in settings, among others. It’s going to help blind users enjoy the video.
However, use your own judgement to add an audio summary.
Make sure you don’t end up with tens of hours of audio explanation, making it a pointless experience for the user.
You may have text captions that are synchronised with video and audio tracks for users who are deaf or hard-to-hear.
Make sure you use the right colour contrast to accurately illustrate the captions.
Finally, you will need to use an interactive multimedia player.
Luckily, HTML5 players offer a better chance of integrating usability.
6. Use Descriptive URLs
Screen readers can easily and accurately interpret informative URLs, providing some context for blind and visually impaired users.
Meaningful explanations also make it easier to skip to the right stuff.
For example, keep the following in mind when explaining the link for the “About us” section.
Low Readability: www.abcmarketing.com./about
Strong Readability: www.abcmarketing.com/about our business
Do not use anchor text like “Read More” or “Press Here” anywhere on the website.
Also, do not add links to photos that can not support Alt Text.
7. Use ARIA Roles
ARIA stands for Accessible Rich Internet Applications.
It helps to make diverse content more available.
ARIA functions and attributes provide more detail or context about the website feature to access readers and other assistive resources.
You can add the ARIA function by using the role=” <ROLE TYPE > “attribute.
The six most popular ARIA categories include:
Landmark: This function is used by screen readers for navigation.
Document Structure: provides a structural overview of the segment.
Widget: defines interactive components that do not have semantic equivalents in HTML.
Abstract: it helps to organise and streamline a text.
Window: Establishes a subcategory or subsection of the main text.
Live Regions: Lets assistive software identify complex content shifts on a web page and warns disabled users.
Nevertheless, only people with access to the source code and knowledge of ARIA and HTML5 can and should make these improvements.
You can contact the creator of your website for more information.
8. Avoid Using Placeholder Text in Forms
Online forms also use placeholder text to explain different space-saving features.
The placeholder document, however, is normally dark.
Visually challenged users are unable to read it due to poor contrast.
It’s also a non-label text, which means that screen readers will usually miss the placeholder text. As a result, blind users would not be able to read this text either.
But instead of the placeholder text, use the < label > tag or the ARIA attribute that that doesn’t go away. Often, use the highest contrast text and background.
These measures would enhance the accessibility of blind and visually impaired users. However, when taking these steps, make sure you do not create a cluttered web form. Try to keep things as straightforward as you can.
9. Minimise the Use of Tables
Typically, screen readers can tell blind users how many rows and columns a table has.
However, it is also difficult for screen readers to read tabular data in the same flow that fits the visual order.
So, if possible, use the CSS to present the data.
If you need to create a table, use the correct headers for each row and column.
You may also use the HTML5 table captions to provide extra background for disabled users.
5 Benefits of An Accessible Website Design
How would you use a computer or a smartphone if you couldn’t see or hear? Using your mouse or keyboard? Touch the computer, huh?
People with disabilities use a wide variety of assistive devices to help them overcome these hurdles, but websites and apps need to be correctly constructed for the technology to function.
1. Avoid Discrimination and Legal Complications
Most companies don’t deliberately discriminate against people with disabilities – they just haven’t thought about it! Your company or organisation can be subject to legal requirements concerning web accessibility, so lift your profile, do the right thing and reduce the possibility of legal action.
2. Build Positive Public Relations
Creating an open website will boost your credibility as well! Why not stand out from your competition by being open to everyone and showing social responsibility?
3. Better SEO (Search Engine Optimisation)
Search Engines are a lot like visually impaired users because they can’t see the contents of your images. When you add usability features to your website (such as alt text for pictures), your Search Engine Optimisation also improves! This is a double victory!
4. Improve usability for all types of visitors
In the course of implementing best practices for web accessibility, you are likely to discover and address usability issues that have impacted all of your guests. You’ll also make things easier for smartphone users and people with age-related accessibility needs – two fast-growing consumer groups that you don’t want to discourage from accessing your content!
5. Broaden Your Market Penetration
Not only does accessible web design boost the accessibility of all users, but it also improves the total number of people who will visit the website, thereby adding more revenue and exposure to the virtual world. If you do not have an accessible website, approximately 15-20 percent of U.S. internet users with disabilities are lacking, including: blind, colour blind, deaf, autistic, dyslexic, learning impaired, elderly, and web users with physical disabilities. This business segment has a cumulative investment capacity of $220 billion.
WordPress Plugins To Help With Accessibility
When it comes to building open websites, WordPress gives you a good head start. Recent default themes such as Twenty Seventeen, for example, are already designed with usability in mind. But installing an accessible theme isn’t all you’ll have to do to ensure usability for everyone.
There are still plenty of things to check off to ensure your site is accessible to everyone. Fortunately, this is one of the fields where plugin functionality comes in. We now have access to a wide variety of resources to help us overcome the problems that come with accessibility. So, without further ado, here’s a selection of some of the best WordPress plugins to improve the accessibility of your website.
WP Accessibility
Joe Dolson developed WP Accessibility, which is a multi-function plugin that addresses common accessibility issues.
It’s most visible feature is a font size and colour contract toolbar that lets users read their content more easily. But it also does a lot of work in the context, such as adding skip-to-content connections, applying an outline to the link-focus state for improved keyboard navigation, using longdesc for images, and much more. — function can be switched on or off via a settings page.
WP Accessibility Helper
WP Accessibility Helper adds to your site a user-friendly toolbar that allows users to pick various colour contrasts (they can choose from a range of colour schemes) and change the font size to fit their needs. But with user options to underline or highlight connections, grayscale images, changing fonts and keyboard navigation, it goes above and beyond that.
The plugin also features a DOM scanner which will search for various accessibility errors on your web. Often there is a pro edition containing even more treats.
Accessibility Widget
To allow users to expand text, Accessibility Widget is a nice choice if you just want a quick way to do it. It is a minimally styled widget which offers links to “Small,” “Medium” and “Big” text. Settings allow you to decide which HTML elements are affected, and how large (or small) fonts are required.
Accessible Poetry
Accessible Poetry introduces a floating icon, which shows a toolbar when pressed to make adjustments to the font and contrast. You can zoom in and out of the page along with clicking on links to the image, and disable flashes on the screen. But within the WordPress Dashboard, the star of the plugin is its ALT Platform area. This screen will display any photos posted to your site which are not assigned an ALT tag. Even better, this listing allows you to set a tag for each picture directly.
Contact Form 7: Accessible Defaults
Another Joe Dolson creation, Contact Form 7: Accessible Defaults can provide an easy point of departure for those of you using the Contact Form 7 on your site.
It is an effective tool since by default, Contact Form 7 is not so easy when used with its default settings. The plugin adds a range of form types that can be accessed to use as the basis for your new form. Notice that it is not impacting pre-existing forms – just new ones. You would have to restore them to existing types using the latest models. It’s why it’s advised that you install this accompanying plugin at the same time as the Contact Form 7 on your site.
Text-to – speech Script Adapter PHP / JS
Text-To – Speech PHP / JS Script Converter is a professional plugin that offers a means of translating the text into a spoken language (including several different “voices”). It is bilingual, with a 44 language assistance and needs no additional framework to operate.
But this is not automatic. For any things you want to allow text-to-speech functionality, you’ll need to add some code to the HTML wrapper components. Under the right situation, this could still be useful.
Divi Accessibility
If you are one of the many Divi theme users, you may want to consider adding Divi Accessibility too. It introduces ARIA attributes, enhances keyboard navigation of different elements and incorporates the tota11y above into the kit. This could be a major help in combating any shortcomings in usability within this theme.
Conclusion
Over the past few years, the value of having an accessible website has been brought to the forefront of everyone’s attention. Although it takes time to ensure you’ve covered all of your bases, the extra effort is very worthwhile. Using the above-profiled tools and guidance is a fantastic way to add (visible or not) functionality that will help every user get the most out of your website.
If we missed something, if you have any feedback based on your own experiences or if there is anything you would like us to cover in more depth then leave us a comment below, we would love to hear from you.
