ADA Compliance For Websites

rom the halls of Congress comes the latest bane of online businesses - ADA compliance. Why does this exist? Who does it pertain to? Why are we mentioning it in our web development blog? As it turns out that more and more visually impaired people are using the internet, which means that websites need to be more accessible for them. There are many tools available to the visually impaired to traverse the web already, but some websites are not set up correctly resulting in their programs failing to convey important information. So this new Congress ADA Compliance law requires a website to be legible for these software tools otherwise, non-compliant websites could face lawsuits. Thankfully, most website developers saw this coming months ago and have already prepared their clients for the new guidelines. However, some of you are still taking on web development and SEO on your own, therefore, here are some easy steps to take to ensure the lawyers leave you alone!

Alt tags - This requirement is by far the most important to compliance. when visually impaired visitors to a website use their software to read websites, often pictures will not have captions and just be inserted into the website. Without a label the pictures are unable to be read correctly. Therefore if no captions exist, setting alt tags on photos is the next best thing. These alt tags need to be short but descriptive. If a picture has a lot of text on the image itself, we advise either replacing the image with real website-based text or use a long alt tag.

Icons - Our recommendation is to avoid icons unless they can have a meta tag assigned to them, otherwise you are better of using Font Awesome which allows text to make symbol instead of relying on .svg files. This will ensure software can read symbols and icons without the need for alt tags.

Buttons - Buttons now need to be clearly labeled for their intention or destination. Simply saying "click me!" is not up to the standards of ADA Compliance. For example "buy now" or "Subscribe" are good but "learn more about us" is the most correct. Additionally, do not make pictures into buttons without some type of label or alt tag.

Links - As with buttons, all links need to be more than a simple icon or picture. These now need to be clearly defined. Instagram photos now need an Instagram label rather than just an icon or feed.

Contrast - Be careful with how you place your text over certain photos or background patters. Even some lighter text on a lighter background can cause issues and the same is true for the inverse. We always recommend using text shadows, larger thicker fonts and avoiding placing large text chunks on an image unless that image is darkened/lightened to make the text more legible.

Closed Captioning - All videos featured on a website need to the option for closed captioning unless they lack sound to begin with.

Static Menus - If you own a restaurant or business which displays their menu/service list as an image with no alt tag, this should promptly be replaced with website text and photos or simply a readable pdf. Keep in mind this means a pdf which is not a static image, but has text which can be highlighted and copied.

Sign up forms lacking labels - Ensure all website forms such as a newsletter or contact form have their fields clearly labeled and not too faded. If a box lacks a clear defining attribute such as a text field for more details, label it so visitors know what to add to it.

PDFs with a lot of content - We stated above that pdfs can be on the website as long as they are readable by devices with highlightable text, but we also recommend adding pdfs sparingly to the website. Stick to text and photos that are made by the website rather than just embedding documents.

Organization - A website should always be easily navigated, but now more than ever. If a website is presenting information in a disorganized way or is hiding pages without adequate ways to reach them, the website will not only be outside of ADA Compliance, but also difficult to use normally. Keep it simple and readable from top to bottom or right to left. The menu at the top of the site should be clear and easy to use.

Heading Levels - Lastly, heading levels should be displayed in order form top to bottom without skipping heading levels or putting them out of order. This means that H1 and H2 should be at the top of the page labeling the most important content, while H3-H6 are used in order to accompany content of lesser importance.