Accessing the accessibility
Part 2 for Accessibility
The World Health Organization states that one billion people live with disabilities. And estimates put internet usage with a screen reader as high as 3.4% of all internet traffic around the world. Web accessibility can help.
The best way to test accessibility to turn on assistive software to check what users might run into. I use mac voice-over for checking accessibility, it like a sanity check to make sure the screen reader land on controls and announce things they should.
MAC Voice over Shortcuts mentioned:
- CMD+F5 to turn on VoiceOver
- Normal keyboard operation (TAB, Shift+TAB, arrow keys etc.) work as normal with VoiceOver running
- CMD+L to jump to address bar
- CTRL+Option+U to open Web Rotor
- Type search term with Web Rotor open to search within Web Rotor
- CTRL + Option + ← ↑ ↓ → to explore content
- CTRL + Option + CMD + H to move forward by heading
- CTRL + Option + CMD + Shift + H to move backward by heading
WebAIM’s article on Using VoiceOver to Evaluate Web Accessibility has a full introduction to VoiceOver from the point of view of evaluating accessibility, including most keyboard commands available.
If you don’t have a Mac device, NVDA is a free, open-source screen reader available for Windows. WebAIM’s introduction to NVDA covers the basics of using NVDA to check accessibility.
If you only use Linux, Orca is available in the Gnome desktop manager, although this screen reader is much more rarely used and suffers from poor support by web browsers.
3.2 Meaningful sequence
The reading and navigation order(determined by code order) is logical and intuitive
<button style=“float:right”>Heading 3<button>
<button > Heading 1 </button>
<button> Heading 2 </button>
Heading list follows the Dom order rather than the visual order in the page
2.4.10 Section Heading
Beyond providing an overall document structure, individual sections of content are designated using heading, where appropriate
1.3.1 Info and relationships
Semantic markup is used to designate headings(<h1>),lists(<ul>,<ol> and <dl>), emphasised or special text (<strong>,<code>, <abbr>, <blockquote>), etc.
2.4.1 Bypass Blocks
If a page has a proper heading structure, this may be considered a sufficient technique instead of a “skip to main content” link, Note that navigating by headings is
not yet supported in all browsers.
2.4.6 Headings and labels
Page headings and labels for form and interactive controls are informative. Avoid duplicating headings (e.g, “More Details”) or label text (e.g, “First Name”) unless the structure provides adequate differentiation between them.
Link Text
For anything which behaves like a link, you should absolutely use an anchor tag with an href attribute
Then it would automatically show up in page links list
2.4.9 Link Purpose (Link Only)
The purpose of each link (or form image button or image map hotspot) can be determined from the text alone
Link text should be descriptive for accessibility to know what action this would perform
like click here for privacy policy rather than click here
Landmarks
<Header><Nav><Main ><Article><Aside><Section><Footer>
using semantic elements provides a more terse way to express the same info while also potentially providing more information for screen reader users
WebAIM’s article on accesskey: http://webaim.org/techniques/keyboard/accesskey
WebAIM’s articles on VoiceOver and NVDA:
Useful links:
https://www.youtube.com/watch?v=TomOQYxFnrU
https://www.youtube.com/watch?v=cOmehxAU_4s
https://www.youtube.com/watch?v=56zCnwj58e4