Accessibility

Overview

What is Section 508, W3C, WAI and WCAG?

Section 50 was made part of the Rehabilitation Act of 1973 in 1998. Its purpose is to “…require Federal agencies to make their electronic and information technology (EIT) accessible to people with disabilities.”

There are several laws related to Section 508, including laws that prohibit discrimination against individuals with disabilities. When talking about communications, the three most relevant related laws are:

• Americans with Disabilities Act (ADA): prohibits discrimination against individuals with disabilities.
• Section 255 of the Communications Act: requires telecommunications products and services to be accessible to people with disabilities.
• 21st Century Communications and Video Accessibility Act of 2010: requires advanced communications services and products to be accessible by people with disabilities. *

World Wide Web Consortium (W3C) is an international community that develops open standards to ensure the long-term growth of the Web. https://www.w3.org/

Web Accessibility Initiative (WAI) develops standards and support materials to help you understand and implement accessibility. https://www.w3.org/WAI/

Web Content Accessibility Guidelines (WCAG) are a series of guidelines for improving web accessibility. Produced by the World Wide Web Consortium (W3C).

• Web Content Accessibility Guidelines (WCAG), https://www.w3.org/WAI/standards-guidelines/wcag/
• Authoring Tool Accessibility Guidelines (for web developers, designers, writers, etc.), https://www.w3.org/WAI/standards-guidelines/atag/
• User Agent Accessibility Guidelines (UAAG) (for browsers, media players, and other “user agents”), https://www.w3.org/WAI/standards-guidelines/uaag/

Who needs to be 508 compliant and why?

If you work with federal agencies, then you need to be 508 compliant. Being 508 compliant ensures that all of our readers have equal access to Seattle Times digital products.

How does it relate to the WCAG and our company?

In January 2017, the Access Board updated accessibility requirements for Web Content Accessibility Guidelines (WCAG) 2.0 AA standard for web content and information communication technology (ICT). The Americans with Disabilities Act (ADA) safeguards equal opportunities for individuals with disabilities, while Section 508 furthers that equality by requiring electronic and information technology to be made accessible to people with disabilities.

Accessibility is meeting all users wherever they are.

Following accessible best practices will benefit all users as people creatively adapt assistive tech to get things done – regardless if it’s due to a disability or situation. Here are a few examples:

• Good contrast helps users with low vision or anyone in bright sunlight.
• Enabling users to change the text size helps low vision and well as normal sighted users do tasks hands free such as reading song lyrics from a distance.
• Because responsive layouts require text wrap, low vision users don’t have to scroll horizontally when zoomed in.     

Clear headings, lists, paragraphs, data tables, and form labels help both sighted and non-sighted users. Voiceover best practices apply to:

• Sighted users with cognitive disabilities to better process content.
• Emerging tech like smart speakers, autos, etc. 
• Keyboard navigation, speech input or switch controls (i.e. mouth apparatus to navigate).

Keyboard navigation. From WebAIM’s keyboard guidelines, “Keyboard accessibility is one of the most important aspects of web accessibility. Many users with motor disabilities rely on a keyboard. Blind users also typically use a keyboard for navigation. Some people have tremors which don’t allow for fine muscle control…”

• When you review the design on staging, put down the mouse to test the keyboard navigation. Make sure the visual focus indicator (outline, underline, etc.) is visibile – a slight color change on an active button is not compliant. Test in all the browsers. NOTE: You may need to check the browser settings (i.e. Firefox) to allow keyboard navigation.

Alternative text. All images and icons must have an alt attribute assigned. Alt text is the copy that is input for the screen reader to read. This might be a brand logo on a button in place of a text label. Designers, include the alt text wording in your spec. If the image is not relevant to the content, spec the alt attribute to be blank [alt=””] so screen readers are not reading the image filename. WebAIM guide to alternative text.

Hover. Do not use hover states. Non-sighted users cannot get to the content.

Modals (pop up, flyout, etc.): Make sure the focus moves to the modal. Designers, include copy that explicity indicates to the user where they are going.

Language matters. Clear labeling is one of the most important aspects for voiceover users. Here are just a few of the things to be aware of:

• Don’t use link copy such as learn more, click here, or read more. They don’t help with context.
• “Click here” is redundant for voice because it’s identified as a link.
• Positional language like above/below, right/left are irrelevant with speech and responsive layouts.

Accessibility tools. Check your browser for extensions and plugin tools for testing. Here are a few:

• WAVE - online accessibility checker, https://wave.webaim.org/extension/
• aXe, https://www.deque.com/axe/
• Funkify disability simulator, https://www.funkify.org/ NOTE: Simulators are only a fraction as effective as bringing in a real user to test or help you co-create.