Graphic Designer's Guide to ADA Compliance
Introduction
In the dynamic realm of graphic design, ADA compliance stands as both a legal obligation and a large growth opportunity. Rooted in adherence to the Americans with Disabilities Act standards, ADA compliance offers graphic designers the chance to seamlessly integrate accessibility into their creative processes to create an inclusive online space for everyone.
What does it mean to be, or not be, ADA compliant?
Being ADA compliant ensures that your website is accessible to everyone, following the Americans with Disabilities Act (ADA) Standards for Accessible Design. Failure to comply with ADA standards can lead to fines ranging from $55,000 to $150,000, and may also result in legal action from users who are affected. However, it's not just about avoiding penalties; it's about creating an inclusive online space for all individuals.
Our audiences are diverse and your designs should accomodate that
Web Content Accessibility Guidelines
The Web Content Accessibility Guidelines (WCAG) are universally accepted standards describing how to make online materials more accessible to disabled people.
The A, AA, and AAA ratings are a system used to indicate compliance to WCAG, with A being the minimum level and AAA the maximum level.
Visit WebAim for the full checklist
WCAG 2.0 guidelines are categorized into three levels of conformance in order to meet the needs of different groups and different situations: A (minimum or lowest), AA (recommended or mid range), and AAA (highest). Conformance at higher levels indicates conformance at lower levels.
Designer To-do’s
Typography and Readability
Opt for fonts that are both clear and legible. Pay attention to font size and contrast to enhance readability, especially for those with visual impairments. Consider providing alternative formats for content-heavy sections.
Accessible Infographics and Charts
When crafting infographics or charts, ensure information is understandable without relying solely on color or intricate visuals. Include alternative text or descriptions to maintain accessibility.
Interactive Elements and Navigation
Design interactive elements like buttons and links with clarity, ensuring easy navigation via keyboard inputs. Implement skip navigation links for users relying on screen readers.
Video and Multimedia Accessibility
Incorporate captions and transcripts for videos, ensuring compatibility with assistive technologies. Provide user controls for adjusting volume or pausing/playback options.
Alt Text for Images
Embed descriptive alt text for images, aiding individuals with visual impairments and boosting search engine optimization. Provide accurate descriptions of the image's content and purpose.
Testing with Assistive Technologies
Regularly test your designs using assistive technologies to identify and rectify potential accessibility barriers. This hands-on approach ensures your designs genuinely embrace inclusivity.
Helpful Tip
If you are using Figma, download a free plug-in to help you check your accessibility as you go.
Our favorite Figma accessibility plug-ins:
A11y: A popular plugin that ensures text is readable for users by adhering to Web Content Accessibility Guidelines (WCAG). It also checks the contrast ratio of your entire Figma artboard.
Adee Comprehensive Accessibility Tool: A complete accessibility plugin that can generate alt-text, simulate 8 color-blind scenarios, check for contrast, and test your touch target size.
Color Contrast Checker: A plugin that displays the color contrast ratio, the accessibility level, and the colors selected for the two objects you selected.
