Web Teacher (webteacher.ws) @vdebolt
URL for this presentation: vdebolt.com/interlab/
Why Make the Web Accessible
- Provide equal access and equal opportunity to people with diverse abilities
- Support social inclusion for people with disabilities as well as others, such as older people, people in rural areas, and people in developing countries
- Accessibility overlaps with other best practices such as mobile web design, device independence, multi-modal interaction, usability, design for older users, and SEO.
Diversity of Abilities
- Cognitive and neurological
Components of Web Accessibility
WCAG uses POUR
Here's a checklist for WCAG 2 from WebAIM.
- Provide text alternatives for non-text content so that it can be changed into other forms people need, such as large print, braille, speech, symbols or simpler language.
- Provide captions and other alternatives for multimedia.
- Create content that can be presented in different ways, including by assistive technologies, without losing meaning.
- Make it easier for users to see and hear content. This includes separating the foreground from the background, color choice, and zoom.
- Maximize compatibility with current and future user tools, including assistive technology.
- ARIA roles that act as navigation landmarks
- ARIA has been around since HTML4 and works with HTML4, XHTML and HTML5.
Adding Navigation Roles
Roles used in ways like these examples are navigation aids for machine readers and for assistive devices such as screen readers.
ARIA landmark roles in action
- Here's an example layout using ARIA roles.
- banner, main, and contentinfo can only be used once per page
- Other landmark roles can be used multiple times per page.
- The example pages uses divs for everything. There are semantic HTML 5 elements that make more sense that could be used instead.
- Ensure all content resides in a landmark region so no content is orphaned. This way a screen reader user can safely use landmark navigation without missing content.
Screen Reader Support for HTML5 Sections
Since this table was made, a <main element> has been added to HTML5. The ARIA role="main" should be used with it.
Using an Existing Design
- The Before and After Demo from the W3C
- The whole site doesn't need a redesign.
- Accessibility features can be added behind the curtain
10 Fast Tips
- Add Alternative Text to Your Logo
- Add Basic Landmarks
- Enhance Focus Indicators using a:focus rules to highlight location
- Identify Required Form Fields using ARIA: <input type="text" name="username" aria-required="true">
- Make Your Page Title an <h1>
HTML5 has a required attribute
A required attribute is available in HTML5 for form fields. It looks like this:
<label for="first_name">First Name</label>
<input name="FirstName" type="text" id="first_name"
For now, using aria-required="true" with this HTML5 attribute is a good idea.
Be sure you identify form fields with a <label> element.
10 Fast Tips, cont
- Identify Table Headers
- Avoid "click here"
- Identify Table Captions
- Remove tabindex
- Check Your Page in WAVE
Testing with the WAVE tool
Questions and Discussion
- Do you have a specific need I haven't mentioned?
- Any questions?