Full Transcript Below:
This is Episode 2 of the Certified Accessible Podcast.
In this episode, I will cover the following two bullet points:
- First, exactly how to make your website accessible
- And second, what items are critical, what items are essential, and what items are helpful to accessibility
If you consume enough web accessibility content, you’ll notice a reocurring theme:
An article might tell you how to make your website more accessible.
A podcast guest might tell you somethings you can do to make your website more accessible.
And then you’ll be given a quick list of five or so accessibility tips such as
- Add alt text to your images
- Structure your headings correctly
- And so on.
The quick list is certainly understandable as a comprehensive breakdown does take several minutes.
And in this episode, we’re going to invest in that time so that you know exactly how to make your website accessible and therefore ADA compliant.
We’re going to use the Web Accessibility Standards or WAS for a list of what to do. If you’re wondering about WCAG 2.0 Conformance Level AA, WAS incorporates all of the same fundamental items found in WCAG 2.0 AA. Think of WAS as a simplified, non-technical alternative to WCAG.
And if you need a technical reference, refer to WCAG.
By the way, you can get read the Web Accessibility Standards at accessible.org/was.
Back to your website’s accessibility. We’ll first go over the 10 bullet points that are the most critical to removing barriers to access – ones that I would address first.
Next, we’ll talk about 10 more bullet points that I consider essential.
And last, we’ll cover the final 10 bullet points that can be extremely helpful and allow your website to exceed basic accessibility requirements.
One more thing before we get started, for context, try to imagine how you would access a website if you could not:
- see the screen
- hear any audio
- navigate a website using a mouse or touch
- or you couldn’t distinguish between colors, or
- you had difficulty maintaining focus such that a distraction made you lose track of what you were doing
By keeping these limitations in mind, it may help you understand the motivation behind the accessibility measures below.
And with that intro, let’s dive into website accessibility.
Below are the 10 critical components of website accessibility. For each item, I will start with a quick introduction label and then add a description.
- Keyboard only: All functions and content of a website must be accessible by keyboard only.
- Clear forms: Forms must have coded labels for fields, clear instructions on fields and provide how to fix errors, clear error indications, and example formats (e.g. 10/12/1980).
- Descriptive alt text: All meaningful images on a website must have alt text. Any images, charts, infographics, etc. that require over 30 words of description must have a descriptive caption beneath them and alt text that identifies the image and refers to the caption.
- Descriptive text: Clear, descriptive text is used for page headings, titles, and link anchor text. This text must accurately convey the page or content that follows.
- Text transcripts: All audio and video files must be accompanied with a text transcript directly below the file. Text transcripts must accurately convey the full meaning and content in the audio or video.
- Closed captioning: All video with meaningful sound contains accurate, synced closed captioning.
- Nested Headings: For each page, headings start with one <h1> tag and optionally then flow down to <h2>, <h3>, and so on down to <h6> based on the hierarchy of subheadings within the page content.
- Color contrast ratio: All text must have a color contrast ratio of 4.5:1 against its background.
- Color alone does not convey meaning: Color cannot be the only means used to convey information or instructions. If color is used, an alternative must be provided.
- No images of text: No images of text are permitted when actual text can readily be substituted. Exceptions: logos, branding, and graph labels
That takes care of the critical components. Now, let’s address the 10 essentials:
- Important submissions: For websites that require the submission of critical financial/personal/scheduling information (e.g. credit card number, social security number, reservation date, etc.), users must be provided with an opportunity to review and correct information submitted before finalizing the submission.
- Skip navigation: A skip navigation link is available at the top left of every page on a website. This does not have to be visible.
- Focus indicator: A focus indicator box shows on all links and fields.
- No blinking or flashing content. No content (gifs, videos, animations, etc.) may blink or flash.
- Zoom text: Text must be able to be increased by up to 200% without negatively affecting the readability of a website.
- Consistent layout and navigation: A consistent layout framework and header and footer navigation must be maintained throughout the website.
- No unexpected changes: No part of a website may change unexpectedly.
- Adjustable time limits: All but necessary time limits (e.g. auction bids) must provide a warning before time expires and the ability to extend the time limit by up to 8x the original time limit before the time limit begins.
- No automatic video or audio: Video and/or audio may not play unless a user clicks or selects to play the media.
- Extraneous documents: All documents such as PDFs, PowerPoint presentations, Excel files, Microsoft Word documents, etc. must meet basic respective document accessibility requirements.
Okay, we’re down to the final bullet points. Here are 10 very helpful and still extremely important things you can do to make your website accessible:
- Section labels: Websites should contain landmark and iframe labels to indicate and describe different sections and content.
- Uniform labels: All images and elements (e.g. icons, frames, fields, etc.) that are identical should have identical labels and alt text sitewide.
- Distinctive links: Text links inside a body of text (not inside header or footer navigation menus) must stand out from the normal text through at least two of the following markups: underline, bold, italics, color.
- Pause updating/refreshing content: Any content that automatically updates or refreshes (e.g. sports scores, scrolling news, etc.) can be paused by the user.
- No automatic pop-ups: Unless to provide instructions or assist website users (e.g. how to correct an error, time limit warning, etc.), no pop-ups are allowed.
- Search function: A search function must be provided for, at a minimum, on the homepage. If placed on additional pages, the search function found on the homepage must remain in the same place.
- Sitemap: A link to a sitemap must be provided for, at a minimum, on the homepage.
- Table data: If a table contains a large amount of data such that it would be difficult to understand when read aloud, either 1) an alternative version of the table is provided that breaks up the table into manageable columns and/or rows or 2) a caption is provided that accurately conveys the data. Both methods may be used.
- Language: A default language is set for the website.
- Clean code: The website is free of error pages, broken links, and HTML errors.
And that’s it. Now you know what you need to do to make your website accessible.
You can read the Web Accessibility Standards at accessible.org/was.
This marks the end of episode 2.
If you have any questions, feel free to contact me at email@example.com.
This episode of the Certified Accessible podcast is presented by Accessible.org and ADABook.com.
You can get your website Certified Accessible at Accessible.org.
To learn how to reduce your risk of an ADA Website Compliance lawsuit, get The ADA Book. The ADA Book is written by me and can be purchased at ADABook.com.
My name is Kris Rivenburgh. Although I am an attorney, the contents of this podcast do not constitute legal advice. Thank you for listening.