This blog introduces some basic considerations to help you get started writing web content that is more accessible to people with disabilities. These tips are good practices to help you meet Web Content Accessibility Guidelines (WCAG) requirements.
Content
- Proper semantics are used for all content.
HTML semantics - Contents & HTML elements are in a logical order: most important at the top.
- Headings are ordered properly.
- Links pointing to different locations should have different text.
- The <em> and <i> tags are not used to make text italic.
- The <strong> and <b> tags are not used to make text bold.
- Tables are only used for tabular data.
Tables - Table cells are associated with their headers using the scope.
- All form elements have an associated label.
Forms - All form error messages are visible and understandable.
- Language is defined on the HTML tag.
- The <title> is descriptive and informative.
- Provide meanings of unusual words and pronunciations of difficult words.
Design
- No primary text is smaller than 16px.
- Elements appear in the same location on every page visually and code-wise.
- Colour is not used as the sole method of conveying information.
- Links are distinguished from surrounding text with more than color.
- Colour contrast issues have been resolved.
Sim Daltonism - The website is readable and functional with a range of font sizes: 2 bigger, 2 smaller.
- Line-length is not too long.
- Justified text isn’t used, or used extremely sparingly.
Usability
- The current page & location are highlighted.
Highlighting the current page - All appropriate elements are accessible by keyboard—the website includes focus styles.
Focus styles - Hit areas, links & buttons, are big enough for thumbs and users with difficulty using the mouse.
- Properly implemented skip links.
Skip links - Call content on the page is contained within WAI-ARIA landmark roles.
Landmark roles - Appropriate elements have ARIA attributes.
JavaScript, jQuery & accessibility - Animations can be stopped.
- No presentational elements are read by accessibility tools.
- Timed functionality can be controlled.
- Required & optional form elements are denoted.
Images & media
- Images have appropriate alt attributes.
Alt attributes - SVGs have titles & descriptions.
SVG accessibility - No audio or video plays automatically.
- Audio files have written transcripts.
- Video files have captions or transcripts.
Testing
- Validated with an accessibility validator.
(Google Chrome Accessibility Developer Tools) - Has been tested with screen readers.
VoiceOver - Tested with images disabled.
- Tested with CSS disabled.
- Tested with keyboard only.
- Tested with a screen magnifier.
- Tested with a text-only browser.
Lynx Viewer Use W3M to testing.
VoiceOver shortcuts
- ⌘ F5 — Turn VoiceOver on/off
- ⌃ — Pause VoiceOver
- ⌃⌥ ➔ — Move to next item
- ⌃⌥ ← — Move to the previous item
- ⌃⌥ U — Open the rotor (Use arrow keys to navigate)
- ⌃⌥⌘ H — Next heading (+ Shift for previous)
- ⌃⌥⌘ L — Next link
- ⌃⌥⌘ G — Next graphic
- ⌃⌥⌘ X — Next list
No comments: