Web accessibility has been in the news. The Americans with Disabilities Act (ADA) requires companies to make accommodations available for those with disabilities. The big question is if this applies to websites and phone apps. A man is suing Domino's for not making its website accessible to the blind. Thousands of similar cases are currently testing our court system. The legal landscape surrounding web accessibility is complex.
Web Accessibility Tips For The User
Web accessibility encompasses all disabilities that affect access to the Web, including auditory, cognitive, neurological, physical, speech, and visual. It also benefits people without disabilities. Older folks experience changing abilities due to aging. We must consider those with a broken arm or lost glasses. Some experience screen glare from bright sunlight or an environment where they cannot listen to audio. Others may be using a slow Internet connection or different input modes.
It's very difficult to be 100% compliant with the Web Content Accessibility Guidelines (WCAG). I follow a Web Accessibility In Mind (WebAIM) checklist that presents their recommendation for implementing accessibility principles and techniques to conform to WCAG. This includes:
- Semantic structure of the HTML
- Descriptive alt text for the images
- Form inputs with associated text labels.
- Logical and intuitative reading and navigation order.
- Proper contract ratio of foreground and background colors.
- All page functionality is available using the keyboard.
- Skip navigation link provides a convenient way to skip navigation and other page elements that are repeated across web pages.
- Page elements are easily recognized upon receiving focus.
- ARIA
roleand/oraria-*attribute is used appropriately to enhance accessibility when HTML is not sufficient.
Less than 1% of website home pages are likely to meet standard accessibility requirements.
Here are a few ways you can test your website and learn more about web accessibility.
- Try navigating your website using only the keyboard. Press the Tab key to go from link to link. Does the first press activate the "Skip Naviagation Link"? Do successive presses traverse the website in an orderly manner? Use the Enter key to open links, buttons, and dropdowns. Does the link or button change so you know it is the active one?
- Hover over links and buttons. Do they change so you know they can be clicked.
- I use the ARC Toolkit by The Paciello Group to test my web pages for accessibility issues. It's available as a Google Chrome browser extension and it's pretty easy to use.
- Another useful tool is tota11y by Khan Academy. It's another Google Chrome browser extension that's pretty easy to use.
- WebAIM (Web Accessibility In Mind) offers a free online accessibility tool they call WAVE (Web Accessibility Evaluation Tool). Just enter the web page address and the tool lists all kinds of accessibility information about the page.
- The A11Y Project offers a free downloadable Accessibility Checklist as a reference point. They also offer web design best practices for different page elements (navigation, images, accordions, tabs, forms, buttons, links, tables, modal windows, tooltips).
- WebAIM offers a straightforward infographic as well as helpful articles.
- Web Accessibility by Level Access offers tips for best practices when designing a web site.
- Stanford University offers helpful tips and tools on their Office of Digital Accessibility page. Check out the blog posts and useful step-by-step guides.
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. Others have little or no use of their hands..
Web Accessibility Tips For The User
Click/Tap Tips to Open & Close.
1How to zoom into your screen.
Some people like to zoom into the screen or web browser in order to see things better. Here are a few ways of doing it depending on your setup:
- On Windows, press the Windows key and plus sign (+) at the same time to zoom in. You can also use the "Magnifier" application under "Accessories".
- On Mac, go to "System Preferences", open "Universal Access" and select the "Seeing" tab. Check the box under "Zoom" to "On".
- On your Apple device, tap "Settings", then "General", then "Accessibility". Tap the "Zoom" button and toggle it "On".
- Another trick is to use "Ctrl" ("Cmd" on Mac) plus the plus (+) or minus (-) keys when you're in a web browser.
2How to change the colors or fonts on the page
Some people like to change colors or fonts to see words more clearly. Most major web browsers have options to do this:
- In Internet Explorer, go to "Tools", then "Internet Options", on to "General". From here, select "Colors, Fonts, or Accessibility".
- In Mozilla Firefox, choose "Options", then "Content", then finally "Fonts & Colors".
- In Safari, select "Preferences", "Appearance" tab, and then hit the "Select…" button next to the font fields.
3How to find and use a screen reader
Screen readers are text-to-speech software that allow people to read and interact with content in different ways. Many people who cannot perceive what is on the screen will use them to allow audible access to web content. Capital One designs and codes for accessibility. We strive to ensure that our content is accessible to screen readers.
There are free options available including NVDA for Windows and VoiceOver for Mac. What we recommend is JAWS for Windows. You can use this with your favorite web browser.
Screen readers accept input in a variety of ways, but one of the most common forms is through your keyboard. By pressing the down arrow in JAWS, for example, you are able navigate through items on the page. JAWS will also accept Braille input.
4How to use accessibility tools on mobile
There are a lot of great features right on your smart phone. iOS and Android alike provide many tools to help you access what you love. Let’s have a look at a few of those tools.
VoiceOver for iOS and TalkBack for Android are the screen readers that come built-in. To turn on VoiceOver, go to "Settings", then "General", to "Accessibility", and then turn "VoiceOver" on. You can set the “Accessibility Shortcut” to “VoiceOver” from the "Accessibility" page in order to triple-click the "Home" button to toggle VoiceOver on and off. TalkBack has a similar feature.
"Zoom", "Magnifier", "Invert Colors", "Color Filters", and "Reduce White Point" are other features and tools on iOS that you can use. These are also available through the “Accessibility Shortcut”.