Accessibility tips and tricks

What are the seven most common accessibility mistakes?

1. Forgetting it’s all about people

Before we get started, one of the most common mistakes is forgetting that accessibility is all about people and their experience. The ability to access the content and functionality of a website - to understand and take action on the information presented, easily and without frustration or challenges - is exactly what “web accessibility” is.

Everyone has the right to an easy and usable experience.

When you design experiences on a website, in documents, videos, PowerPoint presentations, please keep in mind:

People have the right, by law, to access information and services online across in all industries. People have the right do so freely, with ease and without barriers to their experience.  People with disabilities are actually enabled by the technologies and adaptations they make to their behavior or expectations to account for exclusive designs in life, and on websites. Therefore, if they arrive at your website or document and it’s inaccessible, you are the one causing the barrier, causing them to be disabled.

Guidance for all The W3C has published seven videos (about 1-2 minutes long) that outline people’s experiences with design on desktop and mobile. Web Accessibility Perspectives

three people with phones

2. Forgetting that accessibility and inclusive design are achievable

Development If you’re developing a website, use HTML5 wherever you can and keep things clean and simple. Semantic code – that is, tags and other attributes provided by HTML – most are inherently accessible to screen reader software. For instance, code a button as a <button>. Use <h1> to <h6> for headings. Similarly, there are certain elements that have been created over the years that go beyond HTML and need the Accessibility Rich Internet Applications (ARIA) markup language to operate.

Guidance for developers W3C WCAG Quick Reference Guide with Techniques WAI-ARIA Authoring Practices 1.2 WAI Web Accessibility Tutorials (Page Structure, Menus, Images, Tables, Forms, Carousels) Content authoring Plain, simple language on a spacious page layout; headings, labels and helpful instructions, alerts and warnings for all interactions on the page. Structured documents and web pages; closed captioning for videos and a descriptive text transcript; social media posts that are simple and easy to understand for all audiences. The guiding principles are “perceivable” and “understandable” – that all users perceive the expected behavior or action on the screen (whether they are sighted or non-sighted, whether they have dyslexia, or are elderly), and they understand the next step or action to take. There is no confusion or frustration. Guidance for content authors ● Alt Decision Tree (for text alternatives for images and graphs) ● Writing for Accessibility

UX and design Remembering that layout of content is important; where items are placed – making the design logical and sequential, and using as many simple elements as possible that are easily made accessible - links, buttons, text, images, input fields, dropdowns, etc. Additional interactive elements like carousels, sliders, toggles and complex tables should be avoided if possible, or consider very carefully how to make these interactive elements easy to use, accessible, understandable and operable for everyone. Sometimes it takes additional instructional text.

Don't rely on color alone to convey a message; text must be clear for instructions, errors, etc. Color contrast must be high for all text, icons, and images – anything that provides meaning to users. Guidance for Designers ● Designing for Accessibility

3. Not understanding the needs of people with visual disabilities

Mistakes when designing people with visual disabilities: Images, controls, and other structural elements that do not have equivalent text alternatives. Text, images, and page layouts that cannot be resized, or that lose information when resized. Missing visual and non-visual orientation cues, page structure, and other navigational aids. Video content that does not have text or audio alternatives, or an audio-description track. Inconsistent, unpredictable, and overly complicated navigation mechanisms and page functions. Text and images with insufficient contrast between foreground and background color combinations. Websites, web browsers, and authoring tools that do not support the use of custom color combinations. Websites, web browsers, and authoring tools that do not provide full keyboard support.

Instead, to use digital properties effectively, people with visual disabilities rely on: Zoom by browser / Magnification software. The ability to enlarge or reduce text size and images. Colour contrast. And allowing for customizing settings for fonts, colors, and spacing. Screen readers. Listening to text-to-speech synthesis of the content. Screen readers. Listening to audio descriptions of video in multimedia; Braille display hardware compatibility. Reading text using refreshable Braille Nested page structure so screen reader users can use tools to navigate, external to the page navigation. For these web browsing methods to work, developers need to ensure that the presentation of web content is independent of its underlying structure and that the structure is correctly coded so that it can be processed and presented in different ways by web browsers and assistive technologies. Making design responsive for the mobile and tablet sizes. Some people are only seeing small portions of the content at a time or are perceiving the colors and design differently. Some people are using customized fonts, colors, and spacing to make the content more readable, or they are navigating through the content using keyboard only because they cannot see the mouse pointer. An accessible design supports different presentations of the web content and different ways of interaction.

4. Not understanding the barriers with people with physical disabilities

Mistakes when designing for those with physical disabilities: Websites, web browsers, and authoring tools that do not provide full keyboard support. Insufficient time limits to respond or to complete tasks, such as to fill out online forms. Controls, including links with images of text, that do not have equivalent text alternatives. Missing visual and non-visual orientation cues, page structure, and other navigational aids. Inconsistent, unpredictable, and overly complicated navigation mechanisms and page functions. Instead, to use digital properties effectively people with physical disabilities rely on: Keyboard accessibility. Ergonomic or specially designed keyboard or mouse and on-screen keyboard with trackball, joysticks, or other pointing devices Switch control accessibility (covered by keyboard accessibility). Switches operated by foot, shoulder, sip-and-puff, or other movements Large buttons, large text, spacious page design. Head pointer, mouth stick, and other aids to help with typing Additional technologies compatibility. Voice recognition, eye tracking, and other approaches for hands-free interaction

5. Not understanding the barriers for people with cognitive, learning, and neurological disabilities

Mistakes when designing for those with cognitive disabilities: Complex navigation mechanisms and page layouts that are difficult to understand and use.  Complex sentences that are difficult to read and unusual words that are difficult to understand.  Long passages of text without images, graphs, or other illustrations to highlight the context.  Moving, blinking, or flickering content, and background audio that cannot be turned off.  Web browsers and media players that do not provide mechanisms to suppress animations and audio. ● Visual page designs that cannot be adapted using web browser controls or custom style sheets. Instead, to use digital properties effectively people with cognitive disabilities rely on:  Clearly structured content that facilitates overview and orientation ● Consistent labeling of forms, buttons, and other content parts ● Predictable link targets, functionality, and overall interaction  Different ways of navigating websites, such as hierarchical menu and search ● Options to suppress blinking, flickering, flashing, and otherwise distracting content ● Simpler text that is supplemented by images, graphs, and other illustrations

6. Not understanding the barriers for people with auditory disabilities

Mistakes when designing for those with auditory disabilities:

Audio content, such as videos with voices and sounds, without captions or transcripts. ● Media players that do not display captions and that do not provide volume controls. ● Media players that do not provide options to adjust the text size and colors for captions. ● Web-based services, including web applications, that rely on interaction using voice only. ● Lack of sign language to supplement important information and text that is difficult to read.

Instead, to use digital properties effectively people with auditory disabilities rely on:

● Transcripts and captions of audio content, including audio-only content and audio tracks in multimedia. ● Media players that display captions and provide options to adjust the text size and colors of captions. ● Options to stop, pause, and adjust the volume of audio content (independently of the system volume). ● High-quality foreground audio that is clearly distinguishable from any background noise.

7. Not understanding the barriers for people with speech disabilities

Mistakes when designing for people with speech disabilities:

● Web-based services, including web applications, that rely on interaction using voice only.  Websites that offer phone numbers as the only way to communicate with the organizations.

Instead, to use digital properties effectively people with speech disabilities rely on:

● Text-based chat. People with speech disabilities encounter barriers with voice-based services, such as automated web-based hotlines and web applications that are operated using voice commands. To use services that rely on voice, people with speech disabilities need alternative modes of interaction such as a text-based chat to interact with hotline representatives and keyboard commands to operate web applications.  Email and feedback forms, not just phone. Also, websites that provide telephone numbers as the only means of communicating with an organization pose barriers for people with speech disabilities. Alternative means of communication include e-mail and feedback forms.