A January update of the regulation governing website accessibility has caused a buzz in the industry. The regulation, ADA Section 508, is now Section 508 Refresh. It refreshes 10-year-old regulations that haven’t kept up with technology. It also brings Section 508 into line with WCAG 2.0 A and AA, the international web accessibility standard.
ADA 508 is intended to serve users who are blind, deaf, colorblind, unable to use their arms or hands, or have cognitive disabilities. ADA 508 compliance helps them use keyboards or screen readers, or helps them view a website outfitted with different colors and font sizes.
How does Section 508 Refresh apply to you? It likely it doesn’t directly affect your website design and development. Legally, it applies only to federal agencies’ information and communication technology, which does include websites – but, most likely, not yours.
Still, you should pay attention. Section 508 Refresh is the only current federal website accessibility regulation. It ties in with physical accessibility regulations, such as the Americans with Disabilities Act (ADA). It sets a standard for adopting the WCAG 2.0 guidelines in the United States. The advantages of a single, widely-adopted standard are obvious.
In the United States, users and their lawyers have filed a rising tide of suits and demand letters against businesses and schools with inaccessible websites. These suits cite ADA physical space accessibility regulations. Various circuit courts have interpreted the ADA’s application to web accessibility differently. But the June 13, 2017, decision on the Winn-Dixie case found that if the ADA’s Title III public accommodation rule applies to you in terms of physical space, it also applies to your website. The court further found that the standard to follow for website accessibility should be WCAG 2.0 A & AA.
Legal obligations aside, accessibility matters in any website design and development.
You can retrofit your website for ADA Section 508 compliance without much difficulty. But accessibility is easier to achieve and maintain throughout the life cycle when designers and developers build it in as they update a site or build from scratch. Write an ADA 508 compliance checklist and an ongoing plan to comply with WCAG 2.0 and maintain high accessibility throughout the project’s lifecycle. Your company style guide is the ideal home for these documents.
I usually break up the tasks of creating an accessible website into three areas: Visual Design, Content, and Functionality, because of the specific skill sets and role responsibilities each requires.
Certain aspects of visual design impact accessibility. Color contrast ratio, between the text and the background behind it, figures significantly. During the composition phase, in which we design the look and feel of a website, we choose colors and make sure that the background/text contrast meets WCAG 2.0 AA compliance. Such tools as Color Safe website, Colorable, and WebAim can help your visual designer pick color combinations early in the comp phase.
Color should not be the sole indicator of a state change of an element.
Imagine a medium blue background that, in hover, changes to a medium green background. Now imagine how that would look it you saw both colors as grey. You might not be able to see the difference. Adding a shape -- underlines, boxes, borders, icons -- can help indicate that the state of an element has changed and thus improve accessibility for the visually impaired.
Another example involves required fields on forms. Often, the required text is in red. But with no other indicator, many won’t see that the text has special meaning. A person with colorblindness would generally see all the text as greys. An icon or extra character reinforces the special import of the required text.
An icon or extra character reinforces the required text
Good, logical structure of the content helps both search engines and people who need to use screen readers. For present purposes, structure simply means headers and labels that define and order your content.
Heading 1 is usually a descriptive title that conveys the broad scope of the page. Below it, headings 2, 3 and 4 establish a hierarchy of information and help readers understand how pieces of content relate to one another. For example, several H4s beneath the same H3 show that all the H4s elaborate on the same subject matter.
Images on a website often work with text to give the content additional meaning. Users with screen readers can miss the images. Adding descriptive alt text to images will help those users grasp that additional meaning. Alt text isn’t a visual thing; it’s content behind the scenes. It is one of the easiest and most useful accessibility compliance requirements to meet.
“Click here.” Over 20 years since the birth of the internet, we should all know this is not useful link text. Link text should describe content to be found on the linked page.
Link text should provide additional meaning
Designers and developers often overlook some content types – notably video, audio and downloadable PDFs – that are relevant to web accessibility.
Video is appearing on more and more websites, but those with cognitive and hearing disabilities will miss the important content within your videos. Give these users captions or audio transcripts.
Youtube makes it easy to add automatic captions and also lets you add your own captions. For people with visual disabilities, audio transcripts can convey the essence of the action of the video. This is especially valuable for instructional or step-by-step videos.
PDF files can be nightmares for people who use screen readers. Just like content on the web page, content within a PDF should be properly structured, reading order should make sense, and images should have alt text.
Make sure the website can be used without a mouse or touch screen. This means screen reader and keyboard-only access. Developers take care of this, but content authors must attend to the structure of the content on the website. Do headers flow in a logical reading order? Keyboard and screen reader users take special keyboard shortcuts to navigate through those headers to find needed content. They navigate from header to header to read the page.
Page interactions, such as accordions and content sliders that require the user to click or hover, can be inaccessible to many disabled users. They don’t just automatically work for screen reader or keyboard users. Developers must program accessibility for these interactions. We test these areas thoroughly; we want to make sure that whatever is interactive for a mouse or touch screen user is fully interactive for other users.
An example is this interactive calendar on the Milwaukee Public Schools website. Someone using only a keyboard has the same access to the full functionality as someone using a mouse.
One of the simplest accessibility pieces for functionality is the Skip to Content button. When most people hear this, they think about those ugly websites with a big sore thumb of a button.
Oh, times have changed. Those buttons no longer need to be visible. For example, on the Milwaukee Public Schools website, the skip to main content button didn’t show up until I hit the tab key -- a keyboard shortcut for accessibility.