Why check for Accessibility?
To ensure website content can be used by the widest audience possible. Disabilities may exist from birth, accident, or aging. Some may be temporary or situational.
Can help individuals who are blind, low-vision, color blind, deaf/hard of hearing, have a mobility issue, or cognitive disabilities.
First thing - Run an automated checker
Free browser based tools:
Use the Keyboard
Use the Tab key to navigate page (links, buttons, form fields)
- If you cannot see where your focus is at when using Tab key, this is also an accessibility issue
- Should be able to activate links with Enter key
- Should be able to activate buttons with Enter or Spacebar key
Is using a Mac, then you need to enable global keyboard use from the System Preferences > Shortcuts > Use Keyboard Navigation to move between controls
Check your Content Structure
- WAVE tool can reveal structure on page (eg., headings, lists, etc.)
- The Structure tab shows the general structure/order of the page
- The Details tab will provide information about overall structure.
Review Links
- Does the link have descriptive text?
- “Read more” and “Click Here” and “See More” links don’t really provide a description of where you will go if you activate the link.
Form Fields Include Labels
- Form fields should have a visible label
- If you click on the field label text, then focus should jump to the correct field
- Does the label always remain visible? If it disappears, this could be problem for what you were supposed to enter if label disappears.
Check Color Contrast
- Need contrast between foreground and background colors
- Ratio of 4.5:1 is minimum for regular sized text
- Text 18pt font and larger or bold text 14pt and larger can have ratio of 3:1 (or more)
- Tool is Colour Contrast Analyzer
Information Conveyed by Color
- Is color the only method being used to convey information?
- Problem for individuals who are color blind
- Example: Page errors only identified by color red.
- Example: Bar chart with color only being used to differentiate between values
Resize Text Options
- Want text to be able to reflow and resize when using browser zoom
- Able to zoom to 200% with functionality being retained; interface can look different, but do not want content cut-off or missing when zooming.
Images with Text
- Best to avoid having images with text embedded in the image
- Can’t manipulate or edit the text - user is restricted to exactly how the text is rendered in the image
- Images with text can become pixelated when zoomed; problem for low-vision user
Review Audio and Video
- Audio-only means transcript
- Video-only means transcript OR audio track describing
- Video+audio means captions
- Not auto-generated captions, but actual captions
- Complex video+audio may require additional descriptions of what is happening on-screen
- Media players should not start the video automatically
- Example: Can be a problem with screen-readers competing
- Media players need to be accessible from the keyboard
There can be some limitations of automated testing tools with manual accessibility testing. Important to conduct some manual testing along with automated tools.
Demo of using the WAVE tool in the browser to review a web page
- Helpful to turn everything off except for Errors. Makes it easier to see what is an actual error.
- Turn on Structural Elements to see the structure of page content (e.g., what is the actual heading vs. text stylized to just appear as a heading).
Demo of using Access Assistant in browser
- Can choose a node to review or the entire page
- Click Run to test out a page to see if there are issues
- Some of the content to be checked may require a manual check to verify if issue is really an issue
Demo of using AXE in browser
- Runs from the Dev Tools interface; need to open the Dev Tools window and then AXE tool is available
- Click Analyze button to review a single page
Demo of Colour Contrast Analyser
- Has eye-dropper tool that allows you to select different colors on a page
- Will show the results of the color contrast levels
