Breakdown of ADA Compliance Guidelines
ADA Compliance is actually two parts:
Website/ Page Structure
Website structure can often be fixed once. then checked quarterly to ensure the design and layout are still compliant. Meanwhile content will be updated regularly. The best way to approach content updates is not as one-time fixes but instead as a new process moving forward.
A basic web page is similar in structure to a newspaper article: Table of contents, Title, subtitle, description, and perhaps an image or graph.
Visual website builders allow you to design your pages layout by drag-and-drop, use a grid system. You take pieces of information (image, text box, button) and place them on the grid to create a webpage, not unlike the newspaper layouts of yesterday. Behind the scenes, computer languages such as HTML provide the grid structure, instructing how information flows top to bottom, and when/how it appears. Each of these pieces has a label that tells software and computers in which order to “read” the page. This is why it’s so crucial that each piece has proper labels!
For Level A compliance, the most common structural changes include:
Headers (size 1- 4)
Alternate Text for images and illustrations
Color contrast between backgrounds, buttons, titles and links
Hidden Labels or Tags and Directions for Forms
Navigation and Text Links being descriptive
How much of this structure you can control (and edit yourself) depends on what platform you use to build and host your website:
Squarespace, Wix or Weebly: If using “all-in-one” platforms, most of the structure has been pre-built for you and the access you have to make changes is limited. These platforms are using industry standard methods and up to date code languages which will cover the basic structure:
Alt text for images
But you, the individual, will be responsible for setting correct font style, size and website color contrasting. You also need to make accessible any external items you add, such as newsletter sign ups or video links, which may require custom CSS additions.
Note: These platforms do not necessarily provide accessible-friendly themes and layouts for those with accessibility issues who create websites.
Wordpress, Joomla, Drupal: With these open source platforms, you will have complete access to all code and can make any edit required. However, for Wordpress, be certain to use a child theme for code editing. This will ensure your theme updates (new security patches, improved performance, bug fixes) do not overwrite your code additions.
There are no rules regarding writing style for your website’s content, however these best practices create easier to read and engaging content. Here are content structure common areas that are often overlooked but will have the greatest impact in making a website more accessible.
For Level A-AA compliance, the most common content changes include:
Language (clear and concise, jargon or industry vocabulary should be explained if their use is needed, otherwise plain language)
Abbreviations (add periods between letters, and acronyms should be explained, for example U.S.A)
Links (use text that communicates clearly what action is being taken, for example Click Here to Enroll in Cooking 101 Class)
Headings (helps both able and disabled people skim and group information for better comprehension)
Lists (Like this one organize information to process quickly)
Accessible Writing (short line lengths with frequent breaks, or white space and headings)
While alternate text descriptions are important, so is the relevancy of the images and the need for them in the first place. If you must use them, be certain that there is an alternate page or way to access the same information non-visually/without a mouse.
Specific people or places (relevant to content on the page and detailed description)
Idea, fact or representing a subject (relevant and detailed description)
Infographics (can create a written summary of infographic on a separate page, with a link to that page in the alt text or caption)
Graphs & charts (summarized content can be written next to, or as a caption, helping assistive technology read them correctly)
There is a special label for “button” which tells assistive technology to present the option to follow the link, or access the content the button contains (button, drop down, menus, check boxes, etc.). This is why it is essential the label on the button be descriptive, to understand the action available.
This is only necessary when these images represent a key action to be taken on a page. Decorative Ornaments (e.g. lines, icons) or Symbols relating to linked text or form fields (e.g. an envelope icon next to an email address, ✉️Hello@world.com) are an exception and do not need to be labeled, as they are not critical for understanding the content on the page.
For Level A compliance
Captioning: Text transcript synchronized with the video recording, in a separate file. Should be overlaid on the video.
For Level AA compliance
Transcripts: Include a complete transcript of the recording, in a separate attached file. Can be used for audio or video.
Audio Description: Provides summary or description of content and key points of an audio file.
PDFs: A PDF is seen by computers as an image. For the content in these documents to be accessible and be “read” by assistive technology as more than just an image, they should be embedded with text, tags and alt text.
Forms: A form fields, usually created with blank spaces, are read by the computer as a blank object, similar to an icon. For people using assistive technology, these objects need to have instructional tags, labels and navigation embedded so they recognize these as fields that need to be filled out and can be navigated using a keyboard.