Next Meeting: Thursday, October 22. The topic will be captioning videos
Your Keyboard – Unplug Your Mouse and Don’t Touch Your Touchpad
Navigating With Your Keyboard (from http://uw.edu/acccessibility/checklist/keyboard/)
- Tab – move to the next link, form element or button.
- Shift+Tab – move to the previous link, form element, or button.
- Enter – activate the current link or button.
- Space – check or uncheck a checkbox form element. Will also activate a button that currently has focus.
- Up/Down arrow keys – move between radio buttons or, in some cases, menu links.
- Right/Left arrow keys – in some cases, move between menu links or adjust sliders in audio and video plugins.
- Escape – Close the current modal dialog or dropdown menu and return focus to the element that spawned it.
Just exploring a webpage or website with your keyboard (no mouse, no touchpad) can reveal the following:
- Is the location of focus indicated somehow, such as by a change in color or a border around the element with focus?
- Is the sequence of content coherent?
- Are the link texts understandable and not repetitive?
- Is the menu navigable by the keyboard (tabs, arrow keys, escape key)
Colour Contrast Analyser – Paciello Group
- Available for Mac and Windows at http://www.paciellogroup.com/resources/contrastanalyser/
- Goal (level AA): Text (and images of text) have a contrast ration of at least 4.5:1, except where the text is pure decoration. Large scale test (at least 18 point or 14 point bold) or images of text can have a contrast ratio of 3:1.
The Colour Contrast Analyser (note the Aussie spelling) is a very capable tool for assessing color choices
- Contrast between text color and its background; the smaller the text, the greater should be the contrast
- Color choices that may not be very discernable by people with color blindness
- Developing an understanding of the relationship between design ideas and visibility for people with various kinds of visual limitations
- Information on Contrast can be found at http://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html
Web Developer Toolbar – Chris Pederick
- Available for Chrome, Firefox, and Opera at http://chrispederick.com/work/web-developer/help/)
- Use the Toolbar to evaluate the use of headings in the page, the presence and use of ARIA roles, the sequence of text in the page, and the division structure of the page.
The Toolbar has a whole set of tools you can use to figure out what is going on on a webpage
- Use "Information -> View Document Outline" to see the structure of headings in the page. Are there appropriate headings and subheadings and are they hierarchical?
- Use "Outline -> Headings" to draw outlines around headings on the page. Are all headings on the page outlined? Headings that are not outlined have been created without using the <h> tags and will not be interpreted as headings by assistive software.
- Use "Information -> Display ARIA roles" to see how ARIA attributes have been used on the pages. Are there any ARIA attributes? If so, have they been used to identify the role of each of the major segments of the page?
- Use "CSS -> Disable All Styles" to see what the page content is like without the color, font and layout provided by CSS. Is the text in a coherent sequence?
Free Voice Browsers
- Apple VoiceOver screen browser is on every Apple desktop, laptop, tablet, and smartphone. Learn it. Use it to experience listening to and navigating your pages by feel alone.
- VoiceOver Getting Started - https://www.apple.com/voiceover/info/guide/
- VoiceOver for OSX - http://www.apple.com/accessibility/osx/voiceover/
- VoiceOver for iOS - http://www.apple.com/accessibility/osx/voiceover/
- NVDA Screen Reader (http://www.nvaccess.org/) is free and quite capable screen reader for Windows
- VoiceOver Getting Started - https://www.apple.com/voiceover/info/guide/
- VoiceOver for OSX - http://www.apple.com/accessibility/osx/voiceover/
- VoiceOver for iOS - http://www.apple.com/accessibility/osx/voiceover/
