Making your website accessible for people with disabilities makes sense for any business. Optimize your website for visually impaired users with these tips. Incorporating accessibility on your website is the right thing to do today.
Why?
Because 25% of adults in the U.S. live with a disability, according to the CDC. However, too many websites still lack accessibility features. That means millions of users are struggling to use the web.
What Is Web Accessibility?
Web accessibility is about designing and developing websites, tools, and technologies that people with disabilities can use, according to the World Wide Web Consortium (W3C). People with disabilities should be able to perceive, understand, navigate, and interact with, and contribute to the web. Web accessibility applies to all disabilities that affect access to the web, including:
- Auditory.
- Cognitive.
- Neurological.
- Physical.
- Speech.
- Visual.
Where Does ADA Stand?
The most relevant sections of the ADA to web accessibility are Title II and Title III.
Title II requires state and local governments and governmental entities receiving federal funding to provide qualified individuals with disabilities with equal access to their programs, services, or activities.
Title III prohibits “places of public accommodations such as restaurants, hotels, movie theaters, museums, and hospitals from disability-based discrimination.”
While the ADA does not clearly address the question of web accessibility, websites and apps are often considered as part of a business.
New Wave of ADA Lawsuits
Recent years have seen a spike in the number of ADA-based web accessibility lawsuits. There were nearly over a thousand ADA website-accessibility lawsuits filed in federal courts this year. Below are some notable cases. A number of class-action lawsuits have been filed by plaintiffs alleging that they cannot access the information, products, and services, offered on defendants’ websites.
Robles v. Domino’s Pizza
The Domino case first went to trial more than six years ago. After going through “every level of the judicial system,” parties finally settled the case on June 6, 2022. Terms of the resolution are unknown.
Loadholt v. HSN, Inc.
More recently, Plaintiff Christopher Loadholt has filed a class-action lawsuit for himself and other similarly situated individuals, claiming the Home Shopping Network (HSN) violates both the ADA and the New York City Human Rights Law. Loadholt says he is unable to use the HSN website because it was not designed to be accessible for assistive technology users. Loadholt uses a screen reader to navigate websites and other digital content because he is blind. He alleges that the HSN website failed to label titles properly, includes broken links, and uses vague headings, among other things. According to the lawsuit, “These access barriers effectively denied Plaintiff the ability to use and enjoy Defendant’s website the same way sighted individuals do.” Loadholt seeks declaratory and injunctive relief in addition to compensatory, statutory, and punitive damages for himself and all Class Members.
Brown v. Grocery Delivery E-Services USA, Inc. (HelloFresh)
Plaintiff Lamar Brown alleges that the HelloFresh website (Grocery Delivery E-Services USA, Inc) fails to provide an accessible digital shopping experience for people who use screen reading software. In doing so, he claims HelloFresh violates the ADA, the New York State Human Rights Law, New York State Civil Rights Law, and the New York City Human Rights Law. The lawsuit claims, “The access barriers make it impossible for blind and visually impaired users to even complete a transaction on the website.”
How to Optimize Your Website for Disabled Users
Optimizing a website for disabled users makes perfect business sense. You can cater to a broader market segment while building a positive brand image. Once you have tested your website for web accessibility, you can implement the following steps:
1. Add Images with Alt Text
A picture may be worth a thousand words, but visual elements like images are an accessibility barrier to blind users and those with low vision. They often have to rely on assistive technologies such as Screen Readers and refreshable Braille Readers.
Screen Readers are software programs that read the text on the screen using a synthesizer or Braille display. However, neither of these technologies can read images or the text in the images. So, you need to add Alt Text to describe your images to disabled users.
Make sure to describe the image as clearly as possible. You can use alt attribute for brief descriptions and “Longdesc Tag” for lengthy descriptions.
2. Allow Users to Enlarge Font Sizes
People with low vision often can’t read small text sizes. So, they have to use specific font settings when browsing your website. Offering an alternate style sheet with the ability to enlarge the font size without breaking your page layout should make it easier for them to read your content.
Make sure your CTA buttons have a larger font size. Also, make these buttons visible to people with impaired vision.
3. Keep Contrast Sensitivity in Mind
Along with text size, think about color and contrast. People with vision impairments such as retinitis pigmentosa, glaucoma, diabetic retinopathy, and cataract have low color contrast sensitivity. When designing your webpages, make sure to have a high contrast between the foreground and background, such as yellow letters on a black background. Avoid using thin fonts.
Also, try to avoid using any JavaScript or CSS features that will prevent visually impaired users from increasing the contrast or righ-clicking. Some devices use right-clicking to be able to assist their users.
Just like the text size, color contrast is also critical for CTAs.
While black text on a white background has the highest readability, you can also use a combination of black text on a yellow background and yellow text on a blue background. Avoid using combinations like green text on red background and vice versa as they are hard to read.
4. Add Keyboard Navigation
For blind and visually impaired users, navigation is a challenge. As they can’t use a mouse to browse the site, you have to incorporate keyboard navigation into your website. Blind users will use Braille keyboards to access your site. Make sure disabled users can access all interactive elements of your website, including:
- URLs.
- Anchor text.
- Drop-down menus.
- Widgets.
- Forms.
- CTAs.
- Dialog boxes.
Also, make JavaScript widgets accessible with the keyboard. Alternatively, you can use HTML links, buttons, and form fields alone to make sure all elements of your website are keyboard-accessible.
5. Make Video and Multimedia Accessible
Videos and other multimedia elements on your website play a critical role in increasing the user-engagement on your website. While blind and visually-impaired users can’t see visuals, deaf users and those hard-of-hearing can’t hear audio. You can use an audio description to describe visuals-only parts such as images, gestures, and changes in settings, among others. It will help blind users to enjoy the video. However, use your better judgment when adding an audio description.
Make sure you don’t end up with hours of audio description, making it a meaningless experience for the user. You can provide text captions that synchronize with the video and audio tracks for users who are deaf or hard-of-hearing. Make sure to use the right color contrast to highlight the captions correctly.
Finally, you will have to use an accessible multimedia player. Fortunately, HTML5 players provide a better chance of incorporating accessibility.
6. Use Descriptive URLs
Screen readers can quickly and precisely read descriptive URLs, offering blind and visually-impaired users some context. Meaningful descriptions also make it easier to skip to the right content. For example, when describing the link of the “About” page, keep the following mind.
Low Readability: www.abcmarketing.com/about
High Readability: www.abcmarketing.com/about-our-company
Avoid using anchor text like “Read More” or “Click Here” anywhere on the page. Also, don’t add links to images that can’t support Alt Text.
7. Use ARIA Roles
ARIA stands for Accessible Rich Internet Applications. It helps you make dynamic content more accessible. ARIA roles and attributes provide more information or context about a website element to screen readers and other assistive tools. You can add the ARIA role using a role=”
The six most common categories of ARIA roles include:
- Landmark: Screen readers use this role for navigation.
- Document Structure: It offers a structural description of a section.
- Widget: It describes interactive elements lacking semantic equivalents in HTML.
- Abstract: It helps organize and streamline a document.
- Window: It creates a subcategory or subsection of the main document.
- Live Regions: It helps assistive tools to detect dynamic content changes on a webpage and alert disabled users.
However, only people with access to source code and with the knowledge of ARIA and HTML5 can and should make these changes.
8. Avoid Using Placeholder Text in Forms
Online forms often use placeholder text to describe various elements to save space. However, placeholder text is usually gray.
Visually impaired users can’t read it due to the low contrast. It is also a non-label text, which means screen readers will usually skip place holder text. As a result, blind users won’t be able to read this text either.
So, instead of placeholder text, use the
9. Minimize the Use of Tables
Usually, screen readers will inform blind users of how many rows and columns a table has. However, it is often challenging for screen readers to read the tabular data in the same flow that matches the visual order. So, wherever possible, use CSS for data presentation. If you must create a table, use the correct headers for each row and column. You can also use HTML5 table captions to provide additional context to your disabled users.
Overall
Creating an accessible website not only makes good business sense, it is also the morally right thing to do. So always keep accessibility in mind. Hopefully, these tips will help you as you optimize your website for disabled users. If you need help revamping your website, we are here to help.
Our Marketing Team Is Here To Launch Your Business Forward
Green Monkeys Studio can help you uncover the right strategy for your business to accomplish your goals within your budget. If you want to learn more about what we can do for you, we’d love to talk. At Green Monkeys Studio, we pride ourselves in providing you the best professional services that deliver. We provide top ranking SEO marketing and digital marketing services. Need a new website or update your current one? Our design team is here for you to provide top notch web design services; delivering responsive websites that rank on Google. Reach us at (206) 445-1185 or fill out the form below.