Is my Website ADA Compliant?
What precisely is web accessibility?
While it's hard to pinpoint every single aspect of what the definition of web accessibility is – the general idea is to create websites that people with disabilities can use.
What exactly does it mean to create websites that people with disabilities can use? Basically, it's to make your website and all of it's content, including images, to be usable for everyone – regardless if they’re deaf, blind, paralyzed, or have any other disability. People have five senses, and it's important to create content that is usable for four of these five senses. It's good to think about these four senses when it comes to accessible websites: Touch, Sight, Hearing and Speech (taste is our fifth sense, which is hard to translate through the web... while the power of perception may be our sixth!)
If you have a disability, your sight, hearing, touch or speech may be affected, so to use the web, you may need tools and technology to help you use and understand the content on websites.. ADA compliant websites should work well with the following accessibility tools that include:
Screen readers: used by individuals who are blind or low-vision. They help these individuals by reading the content of their computer screen.
Text readers: helps people with various learning disabilities that can affect their reading. Text is read through a synthesized voice, and the text is highlighted as the content is read.
Braille readers: There are devices that convert the content of a computer screen and websites to braille, which allows people to read raised rounded pins on a flat surface.
Screen magnification software:
For those with eyesight disabilities, magnification software can help users enlarge text on websites for better legibility.
Reduced motion preference:
We could all use this! Some browsers and software can be used to minimize any non-essential motion on their computer or device. This sure would be helpful in recipe websites that are bombarded with floating and flashing video ads!
Alternative input devices:
A mouse or keyboard doesn't always work for every person, so alternative input devices help them surf the web. Some of these the tools they use for alternative input include:
Speech input software: People who have difficulty typing can use speech input software to speak their queries and use certain words to trigger a mouse or keyboard action.
Head pointers: Head pointers can be used by individuals with limited hand or arm control to interact with a physical keyboard or computer/tablet or a smartphone with a touchscreen.
Motion or eye-tracking software: There is software (even AI software now such as tobii.com or eyeware.tech/track that track eye movement!) Tobii Browse, for example, is a custom-built app for browsing the web that you can use with just your eyes in a familiar way, even without previous eye tracking experience. This type of software is designed for people who cannot use their hands to browse the internet due to conditions such as ALS/MND, cerebral palsy, Rett syndrome, spinal cord injury or traumatic brain injury. With the software, people can scroll, surf and click in an intuitive way using their eye movement.
Switch entry devices: These are usually used with an on-screen keyboard, people can use joysticks, button click switches, or even Sip and Puff Switches that allow them to interact with websites using simple movements or even mouth operation to navigate.
How to Make a Website Accessible:
So, how do you make an ADA compliant website? The good thing is, making a website accessible has many of the same techniques as SEO (search engine optimization), so many websites that are fully optimized for SEO are actually better for accessibility out of the gate. In a way, you could think of Search Engines as disabled robot "people" that can't really understand everything and can't really SEE what images are (although with AI they're certainly getting better and better at that) – but they definitely can read the alt text that is added behind the images by us humans. When we build websites that are SEO optimized, all of the images have alt text coded into them so that the search engines (along with people with disabilities) can still understand what is in the image.
The best way to help make your website accessible to anyone with disabilities is to make sure your website is optimized for everyone (including search engines) to easily access and/or read your content.
Here are specific ways to make your website ADA compliant:
Include Structure on your Pages: Use descriptive meta page titles and H1 header Tags for every page that reflects the content on the page.
Use headings – H1 (heading 1) tags are just for the page titles, whereas H2 tags help identify the secondary content. Heading3 (H3) nestles under H2, and so fort. Basically, you should categorize your content to help differentiate the different sections.
Use Numbered or Bulleted Lists: Numbered lists (<ol>) are best for listing steps in a process, whereas Bulleted lists (<ul>) are best for lists of links or other information (this bullet item is part of a bulleted list)
Use Descriptive Link Text: Rather than say "click here," use links such as "Wix SEO Tips" that describe the destination, topic or action that the viewer will see or initiate when they click on the button or link.
Make sure there is enough contrast: If text is smaller such as less than around 24px (not bold) or 18px (bold), the contrast ratio should be 4.5:1. Larger text has less contrast needs, for example, text as large or bigger than around 24px (not bold) or 18px (bold) should have a contrast ratio of 3:1. Icons should have a contrast ratio of at least 3.1. Not sure what this means? Use this contrast finder tool to see if your colors are high enough contrast for text to be legible (note you will need to have your Hex colors sampled to determine this). To be safe, smaller paragraph text is usually best with black text on a white background for optimal legibility.
Avoid slideshows and sliders: While they are appealing, slideshows and sliders are not very effective for conveying info, and can be overlooked or found annoying by many users. Use them only sparingly, and only for displaying images and not your most important information. Make sure any call outs or important info is listed outside of a slideshow or slider. Not everyone will wait to watch all your slides, so it is important to have the content available in the menu or content of the page in addition to the slideshow.
Be informative! Use descriptive structured text, post detailed photos with good alt text and captions, create quick video explanations with transcripts so people can watch or read your video or both — be generous and inform all of your viewers, listeners and braille readers! The more info you can provide, the more accessible your website will be.
Write well.
Make sure to write structured content and include images that are easy to read. Think about what you learned about writing reports in school!
Make sure that your website copy can be easily read by anyone – shoot for 6th to 8th grade reading levels. EXPLAIN EVERYTHING! A great free tool is the free Hemingway Editor which helps you edit your copy by highlighting lengthy, complex sentences and common errors and helps you avoid meandering, convoluted logic.
Include Alt Text for images: Since many websites today are very image heavy, it is important for every image to be optimized to be read by people with disabilities as well as search engines. Describe every image in detail in captions or in the paragraph above or below it - and also make sure that the alt text also describes the image, so that anyone, even someone who is blind, to be able to understand what the image is showing. It is best for ADA compliance to add alt text for all the non-decorative images on your site.
Develop topics for every paragraph: Divide longer sentences into two. Remove redundant or unnecessary words that do not add anything to a sentence. Use bulleted or numbered lists to make it easier for people to read rather than super long paragraphs with a series of words using commas or dashes.
Be descriptive: Elaborate and teach about whatever you are writing about. Don't be secretive or elusive. Provide all the information your viewer may be looking for. The internet, after all is a hive mind and remember that all flourishing is mutual. Use the web to help, teach, improve, and share knowledge.
Skip abbreviations, jargon, slang, and acronyms (for example: ADA – Americans with Disabilities Act), etc. Explain and elaborate everything. If you do use an acronym, spell it out the first time you use it on the page. Provide definitions of anything you mention (such as SEO - which means Search Engine Optimization.) Then, explain even further. Explain it like you are teaching a child. Don't make people feel left out or feel uneducated simply because they don't know what an abbreviation or acronym means!
More general ADA website compliance guidance:
Slideshows: If you use them, make sure that the controls are prominently displayed so a user can speed up or slow down the slideshow to their needs - allow them to pause, play, or navigate to each slide. And, be sure to use alt text, captions and other text to explain each slide. Additionally it is best to include important content, especially that from any slides other than the first slide, on your page or menu. Many people will not wait or scroll through a slideshow so make sure the important content can be seen outside of the slideshow element on your website.
Don't add flashing elements! I'm really not sure how CNN, New York Times, recipe websites, and local newspapers get away with their flashing ad-ridden websites for accessibility. Our local newspaper, The Denver Post, is practically illegible with ads or subscriber blockers that completely disable anyone who tries to read their articles without a paid subscription. I even subscribed to their paid subscription website for a year to try to get around it, only to be annoyed by having to login every time I wanted to read an article, and then still being bothered by flashing and obtrusive ads when I tried to read an article! And every recipe site is so cluttered with flashing ads, that even myself, a non-disabled person, has a hard time reading them. By the way, flashing ads or elements can induce seizures in some visitors due to photosensitivity. So avoid adding these obtrusive ads or flashing videos or graphics to your websites!
Don't auto-play videos or audio! Audio and video should not play automatically on any page, there should be controls to play, pause or stop audio at anytime.Any background videos should NOT play sound.
Use ADA compliance tools on your website: Website add-ons like UserWay can be used to help achieve ADA compliance on a website – these provide AI-powered accessibility solutions that aim to help websites conform to the standards set by the Americans with Disabilities Act (ADA) and Web Content Accessibility Guidelines (WCAG) by integrating an accessibility widget on websites that can be customized for different disability needs. These tools are simple to install and allow the user to choose what types of customization they need to use the website. While some city governments (like in Denver) are saying these are not acceptable for full compliance, I find that they are extremely helpful and a good quick solution for adding tools to make your website more accessible for anyone who is disabled.
Provide an Accessibility Page to explain what you have done to make your website accessible, and any ways to help users use your website. Provide your contact info for your users to reach out with any questions via email or phone, and provide any tools or tips for the user to be able to use your website more easily. Link to this page in your main menu and/or footer so it is easy to find.
Make it easy for people to contact you: Make your website more ADA compliant is by simply adding an easy-to-find dedicated contact page (link to a page called "Accessibility" in the main menu and footer) and be sure it includes clear and accessible contact information including a simple contact form and a phone number. The contact page should of course have high color contrast (ideally large 14-18px black text, depending on the font type, on a white background), keyboard navigation ability, and alternative text for any images on the page. It is hard to believe that Facebook, X, Google or the other huge companies could ever be considered ADA compliant when it is near impossible to find ANY contact information for any support.
Provide text transcripts for spoken content: If you have a video or audio clip, make sure to have a text transcript for those who are deaf or hard of hearing. Closed captions are crucial for video content! Provide audio descriptions about any video or audio content sot hat people know what is happening in your video or sound clip.
Do you want help with how make your website ADA complaint?
We can help you make sure your website is optimized for ADA compliance and usability. Reach out for a free Accessibility consultation and estimate. I offer Accessibility Consultating packages that start at $2000-$5000+ for websites, depending on the amount of pages and content that needs to be made compliant.
Comments