Breaking Down ADA Compliance Guidelines for Websites
By Andrew Delossantos on September 12, 2023 in ADA and Bar Rule Compliance Web Design Tips and Tools
Creating an accessible website and inclusive marketing materials requires a well-informed team. With a little practice, ensuring website accessibility can be done quickly. The following guidelines should be kept in mind:
Content Compliance Rules
When creating content for webpages, emails, and social media, it is essential to make it accessible for individuals with visual, hearing, motor, and cognitive disabilities.
Structure:
To aid users with screen readers or visual impairments, proper utilization of headings is crucial. This involves using appropriate heading tags (such as H2) instead of merely altering the font size or style.
Maintain a logical hierarchy by following the sequence of H1, H2, and H3 headings, which enhances the clarity and importance of the content. Without a proper heading structure, users may be confused or have difficulty navigating the content.
Readability:
Enhancing readability is important for individuals with cognitive disabilities, as well as for all users. Employ short and concise sentences, utilize bulleted lists, summary sections, and bold keywords for easy scanning. Arrange information in a descending order of importance and avoid complex language.
Ensure that all text, including headings, are left-aligned. Avoid the use of justified text – large blocks of justified text can greatly reduce readability due to unequal spacing between words.
Link Text:
When incorporating links to other webpages, refrain from using phrases like “click here.” Instead, use descriptive link text that clearly indicates the destination and purpose of each link, aiding users with screen readers and visual impairments.
Ensure that the appearance of links are not altered through CSS. Links, by default, are underlined and should have a 3:1 contrast ratio from the surrounding non-link text.
Accessible Files:
Ensure that any linked files, such as PDFs, PowerPoints, or Word documents, are also made accessible to cater to the needs of all users.
ADA Guidelines for Your Site’s Design
Accessible design aims to improve usability for everyone, including individuals with disabilities. Consider the following factors when designing for accessibility:
Videos:
Enhance video accessibility through the inclusion of subtitles, benefiting those with hearing impairments and users in noisy environments. Provide transcripts that offer a textual version of the video’s speech content. For an optimal experience, employ audio descriptions, enabling blind individuals or those with visual impairments to comprehend the video’s context.
Images:
All images should possess alt text, which provides a concise and neutral description of the image. This description is read by screen readers, and irrelevant information or file numbers can hinder usability for visually impaired users. For decorative images, the alt attribute should be left empty (e.g., alt: “”).
Color:
Considering that approximately 4% of the global population experiences some form of color blindness, relying solely on color to convey information can pose challenges for users. Incorporate patterns, fillings, sizing, borders, icons, or whitespace in addition to color to communicate effectively. Maintain sufficient contrast in color usage to ensure readability and differentiate elements. For example, meeting WCAG 2.0 level AA compliance requires a contrast ratio of 4.5:1 for text. Utilize color contrast checkers to verify combinations.
Avoid the use of background images behind text if possible as this can negatively impact the color contrast and readability of the text. If needed, use background contrast checkers to strategically place your text on top of the image to ensure that the text has adequate contrast.
Fonts:
Sans serif fonts are the easiest to read since they lack decorative markings. Limit the number of fonts used, such as one for body text and one for headlines. Use a minimum font size of 12 and employ bold formatting for emphasis, rather than italics.
Overall Tips for Website Compliance
To create an accessible website that enhances conversions, consider all four disability types: visual, hearing, motor, and cognitive. The following areas are particularly important:
Keyboard Navigation:
Enable keyboard navigation for users with visual and motor disabilities. Ensure that users can navigate through menus, buttons, and other elements easily. Provide indicators or visual cues to show the current position of the user on the page.
The first tab press on a website should be to a skip-to-content button. This will allow the user to scroll past the navigation.
Form and Table Labels:
Labels are crucial for form accessibility. Assign labels to each form field using the <label> element, allowing screen readers to read the field names accurately. Avoid using placeholder text for critical information about a field; instead, place such instructions beneath the field label.
CTA Buttons:
Ensure that all call-to-action buttons are accessible. Provide an accessible name for each button, usually matching the button text. Use aria-label attributes to provide appropriate information to screen readers. Collaborate with the website development team to implement button accessibility best practices.
By considering these guidelines and implementing accessibility features, websites can become inclusive, catering to a wider range of users and improving overall user experiences.
Remember to Have Periodic Checks of Your Site
Even if you have a team completely update your site to fulfill the compliance guidelines, the rules become modified every so often and small changes you make to your site could make a larger impact than you think. Accordingly, remember to schedule checks every two years at a minimum. If you need PaperStreet to run a free ADA audit, don’t hesitate to reach out.
