How Many Hours Will It
Take to Make Our Sites Accessible?
Michael Muzzie, Web Development Services PADAWAN, November 21, 2014
All Federal agencies and institutions that
receive federal funding are subject to the 1998 revision of the Section 508 (29 U.S.C. § 794d) Amendment to the Rehabilitation Act of 1973 According to the Department of Justice,
Americans with Disabilities Act (ADA) of 1990
applies to websites of private entities that meet
the definition of “public accommodations.”
Higher Ed Accessibility Lawsuits
2013
2012
2011
2010
2009
2009
(Law School
Admission Council)
webaim.org
w3.org/WAI
WCAG 2.0
(Web Content Accessibility Guidelines)
Perceivable
Operable
Understandable
Robust
WAI-ARIA 1.0
(Web Accessibility Initiative - Accessible Rich Internet Applications)
Types of disabilities
•
auditory
•
cognitive
•
neurological
•
physical
•
speech
•
visual disabilities
Diversity of abilities
•
Disabilities from birth
•
Age-related impairments •
Multiple disabilities
•
Health-related impairments
•
Changing abilities
•
Temporary impairments
•
Situational limitations
Normal vision
Simulation of age-related macular
degeneration (National Eye Institute)
Provide text equivalent for non-text content
•
Provide every image that conveys information with an alt attribute.
•
The alt descriptions should describe the purpose of the objects.
•
If an image is also used as a link, make sure the alt attribute
describes the graphic and the link destination.
•
Use empty alt attributes for purely decorative images.
•
Don’t use images for text when @font-face styled text can achieve the
same result.
•
Complex graphics should be accompanied by machine-discoverable detailed text descriptions (longdesc).
Recreate complex graphics (or tables) with HTML or SVG if possible.
Some examples:
Contrast
•
Sometimes a battle between usability advocates and
designers… Use WebAIM’s Color Contrast Checker as
ammunition.
•
WCAG 2.0 level AA requires a contrast ratio of 4.5 to 1 for normal text and 3 to 1 for large text.
•
Level AAA requires a contrast ratio of 7 to 1 for normal
text and 4.5 to 1 for large text. Difficult to achieve.
•
Use common sense.
Contrast
•
Sometimes a battle between usability advocates and
designers… Use WebAIM’s Color Contrast Checker as
ammunition.
•
WCAG 2.0 level AA requires a contrast ratio of 4.5 to 1 for normal text and 3 to 1 for large text.
•
Level AAA requires a contrast ratio of 7 to 1 for normal
text and 4.5 to 1 for large text. Difficult to achieve.
•
Use common sense.
Color Contrast Checker Home > Resources > Color Contrast Checker
Foreground color: #1sas39
•
lighten I darken
Background color:# 6a8dc9
•
lighten I darken
Contrast Ratio: 1.32:1
Normal Text
WCAG AA: Fail
WCAG AAA: Fail
Sample: I am normal text
Large Text
Readable Text tl;dr
•
Line height should be at least 1.5 times the font size.
•
Use real text rather than text within graphics.
•
Avoid small font sizes.
Make sure text is resizable without destroying the layout.
•
Limit the use of font variations such as bold, italics, and
ALL CAPITAL LETTERS.
•
Color Blindness: Do not rely on color to convey meaning (example: Items in red are required.)
Free Screen Readers
•
Voiceover
built in to OS X and iOS
•
NonVisual Desktop Access (NVDA) nvaccess.org
Windows (runs great in VirtualBox)
Structured HTML
•
Page can be linearized (no CSS), but still understandable.
•
Use hierarchical heading tags to structure content.
•
Bulleted items, numbered items, or lists of links should use the list item (li)
element, along with ul or ol.
•
Use an anchored link that allows users to skip navigation (can be made invisible
with CSS).
•
Use HTML5 sectioning elements, if possible. Or use WAI-ARIA landmark roles.
•
The purpose of each link can be determined from the link text alone (AA) or its
surrounding context (A). Success Criterion 2.4.4
•
Modern guidelines allow you to require JavaScript, but the scripted content or
interactions must be compliant with the guidelines.
HTML5 Sectioning Elements
•
The body element
•
•
The section element
•
The header element
•
The nav element
•
The footer element
•
The article element
•
The address element
•
The aside element
•
The hgroup element
The h1, h2, h3, h4, h5, and h6 elements
WAI-ARIA Landmark Roles
•
Progressive enhancement for HTML or HTML5
•
Example opening tags:
•
<header role="banner">
•
<div id="footer" role="contentinfo">
•
<footer role="contentinfo">
•
<form role="search">
•
<nav id="main-menu" role="navigation">
•
<div id="rightnav" role="navigation" aria-label=“Secondary">
•
<div id="highlights" role="navigation" aria-labelledby="highlightsheading">
<h2 id="highlightsheading">Website Highlights</h2>
Accessible Tables
•
Use table header tags and scope attributes.
•
Content should still make sense when linearized.
•
Keep It Simple…
<th scope="row">Sunday</th>
<th scope="column">Day</th>
Day
Info
Session
Tours
Intineraries
MondayFriday
10 a.m
Clio Hall
11:15 a.m
Clio Hall
Info then
Tour
Saturday
10 a.m
Whig Hall
11:15 a.m
Whig Hall
Info then
Tour
Sunday
none
1 p.m.
Frist
n/a
Accessible Forms
•
Use label tag with for attribute (explicit labels). •
Use fieldset and legend tags to group related
form elements.
•
Proper notification for required and invalid fields •
Progressive enhancement with WAI-ARIA
•
Don’t use tables to lay out your form. CSS along with the <label> tag can do the same thing.
Forms: Explicit Labels
Explicit label (preferred)
<label for="fullname">Name: </label>
<input type="text" name="fullname" id="fullname">
Implicit label (still okay)
<label>
Name: <input type="text" name="fullname">
</label>
No, not that.
No label (sort of okay…)
As long as you use title or aria-­‐label
<strong>Name: </strong>
<input type="text" name="fullname">
Identifying form inputs
Watch movie on YouTube:
Identifying form inputs using NVDA
Source: “Accessible Forms 1: Labels and identification”
Forms: fieldset and legend
•
Useful for grouping checkboxes or radio buttons
that each have their own labels.
•
Breaks up a complex form into digestible
chunks.
•
Most browsers have default styling for legend
and fieldset, but that can be overridden.
Forms: fieldset and legend
<fieldset>
<legend>Choose a shipping method:</legend>
<input id="overnight" type="radio" name="shipping" value="overnight">
<label for="overnight">Overnight</label><br>
<input id="twoday" type="radio" name="shipping" value="twoday">
<label for="twoday">Two day</label><br>
<input id="ground" type="radio" name="shipping" value="ground">
<label for="ground">Ground</label>
</fieldset>
Forms: Using HTML and/or WAI-ARIA
Extra information (help text)
•
HTML (add the help text inside the label tag)
<label for="enddate">End date:
<input type="text" name="course" id="enddate">
(dd/mm/yyyy)
</label>
•
WAI-ARIA (aria-describedby)
<label for="enddate">End date:</label>
<input type="text" name="enddate" id="enddate"
aria-­‐describedby="dateformat">
<span id="dateformat">(dd/mm/yyyy)</span>
Forms: Using HTML5 and/or WAI-ARIA
Required fields
•
HTML5
<label for="lastname">Last Name:</label>
<input type="text" name="lastname" id="lastname" required>
•
WAI-ARIA
<label for="lastname">Last Name:</label>
<input type="text" name="lastname" id="lastname"
aria-­‐required="true">
•
Both
<label for="lastname">Last Name:</label>
<input type="text" name="lastname" id="lastname"
aria-­‐required="true" required>
Indicating required form inputs
Watch movie on YouTube: Indicating required form inputs
Source:
“Accessible Forms 2: Required Fields and Extra Information”
Is your CMS accessible?
•
Is the admin and editing interface accessible?
•
Are the front-facing site pages accessible?
•
Does your CMS have a posted accessibility statement or
accessibility guidelines?
•
Your CMS might not be accessible out of the box, but it might
be extendable with modules or plugins.
•
Your CMS might be accessible, but what about your theme?
•
Even if your CMS has tools to encourage creation of accessible
content, you have to actually use them.
So Drupal? Accessible, right?
•
Drupal 7 is designed to support development of sites that comply with
WCAG 2.0 and ATAG (Authoring Tool Accessibility Guidelines) 2.0.
•
Drupal 8 will be even better. Extensive testing with screen readers.
•
Be careful when configuring Drupal. For example:
•
If you use the WYSIWYG Filter, don’t strip out accessible HTML tags like
scope attribute. Consider whitelisting ARIA attributes.
•
Don’t forget to add buttons for structured HTML to your WYSIWYG editor (list items, heading tags). •
If a theme overwrites core templates, use an accessibility checker to make sure inaccessible markup not introduced.
•
Enable the “alt” attribute field for image fields.
Drupal modules
•
drupal.org/project/eim
Extend Image Module Can force alt attribute to be required for image fields.
•
drupal.org/project/block_aria_landmark_roles
Block ARIA Landmark Roles
Allows assigning ARIA landmark role to a block.
•
drupal.org/project/html5_tools
HTML5 Tools
Adds new elements for use in the Views module, etc.
•
drupal.org/project/accessibility
Accessibility
Suite of tools to ensure site is as accessible as possible
•
drupal.org/project/webform_aria
Webform ARIA
Adds aria-required support to forms created using the Webform module.
Video captioning
•
WCAG 2.0 single A requires at least a text
transcript.
•
WCAG 2.0 double A requires timed captions.
•
YouTube has a great caption authoring tool. It can
even export captions for use with other video
hosting providers.
•
Third-party vendors, like 3PlayMedia, can caption a 3-minute video for 8 bucks (4-day turnaround).
Questions?
The presentation slides and a link to the recorded video will be posted to the PADAWAN SharePoint site.