Retrofitting Websites for Accessibility
David Mulder, Academic Technology Services
First, a video
• Introduction to the Screen Reader
Class overview
• Review MSU Web Accessibility Policy• Set up a test website• Remediate the test website• One-on-one help (if you want it)
Intended audience
• Staff• Slightly to moderately technical background• Directly responsible for maintaining or
updating website
MSU Web Accessibility Policy
• Diverse audience• Legal motivation• Continue being a leader
MSU Web Accessibility Policy
• Announced in 2008• All websites: WARF due May 15, 2009– New: Must be compliant– Existing: Submit a plan for becoming compliant
within a reasonable time
• More info: webaccess.msu.edu
Required vs. Recommended
• Required– Section 508 + WCAG 1.0 Priority 1– Minimum level of accessibility to make Web pages
usable
• Recommended– WCAG 1.0 Priority 2 + best practices
Accessibility bleeds into usability
• Many of the remediation steps we’ll take not only benefit users of adaptive technology, but will greatly enhance general site usability as well
The word “user”
• We use it a lot in Web design & development• It may be better to think of “users” as visitors
or even customers
Our test site
How to set up our site
• Go to www.msu.edu/user/dlm/retrofit/• Download the test site ZIP file to your desktop
and follow along with me– Extract files– Open Dreamweaver– Set up a new site– Open up files in a browser
Remediation overview
1. Review your checklist– Triage and prioritize some items
2. Clean up code3. Retrofit!
1. Review your checklist
• See your handout copy of the Web Accessibility Review Checklist
• Alternatively, you can work from one of the evaluation protocol files available on webaccess.msu.edu
• We’ll talk about a triage approach later
2. Clean up your code
• Validate code– In Dreamweaver– Using a web-based tool• (validator.w3.org)
• Convert code (if necessary)– Dreamweaver makes this easy
Convert code
3. Retrofit
• Structure• Content• Presentation• Functionality
Don’t forget
• We’re working from our test website and checklist, which covers common problems
• We won’t be covering every problem on the checklist
Structure
• Navigation• Tables• Forms
Structure > Navigation
• REQ #6: Skip links are on each page
• REC #21: Headers define content areas• REC #22: Related items and sub-navigation
links are contained in lists• REC #25: Page-to-page consistency
Skip links are on each page
Importance & Value• Required guideline #6
– You must do this
• An easy way for screen reader users to skip over redundant content
Remediation• Insert a hyperlink at the to
of the page:– <a href=“#skip_content”>Skip
to Main Content</a>
• Insert anchor tag before content– <a id=“skip_content”
name=“skip_content”></a>
Headers define content areas
Importance & Value• Recommended guideline
#21• Creates an hierarchy of the
page content• Greatly enhances
accessibility; also improves general usability
Remediation• Locate logical breaks in
content• Add <hx> tags
– <h1>Welcome to the Department of Nonlinear Applications</h1>
– <h2>Events</h2>
Related items and sub-navigation links are contained in lists
Importance & Value• Recommended guideline
#22• Lists are easier for screen
reader users to parse• They’re also easier to
visually scan
Remediation• Identify opportunities for
lists– Where do you think we could
add a list on our test site?
• Created unordered or ordered lists as appropriate
Page-to-page consistency
Importance & Value• Recommended guideline
#25• Enhances both accessibility
and usability• If content in global region
changes, people might not see it
Remediation• Where do you see global
inconsistencies in our test site?
Structure > Tables
• REQ #11: Row and column headers are identified in data table
• REC #31: Data table contains summary and caption attributes
A brief history of tables
• Began as something purely for data• Early developers found tables an easy way to
control layout– Things snowballed from there
• Ideally, you want to use CSS to control layout & presentation (more on this later)
• When people say “data table”, they’re referring to an actual data table
Row and column headers are identified in data table
Importance & Value• Required guideline #11
– You must do this
• Clearly identifies row & column headings for screen reader users
• Also provides much more powerful selectors for CSS
Remediation• Identify table headings• Modify table code• <thead>
<tr><th>Year</th><th>Department Head</th></tr></thead>
Data table contains summary and caption attributes
Importance & Value• Recommended guideline
#31• Summaries are seen only by
screen readers, captions are visible to everyone
• Provide information about what’s contained in a data table
Remediation• Add a summary attribute
– <table summary=“ … ”>
• Add a caption element– <table summary = “ … ”>
<caption>Past directors</caption>
Other things to pay attention to with tables
• See if a table makes sense with stylesheets turned off
• Don’t format data tables using structural markup
Structure > Forms
• REQ #14: Forms work properly with assistive technology
• REC #33: Labels are explicitly associated with form controls
• REC #34: Important information is not contained between input fields
Forms work properly with assistive technology
Importance & Value• Required guideline #14
– You must do this
• Forms are an integral part of using the Web
Remediation• Add labels• <label>
<input … /></label>
Labels are explicitly associated with form controls
Importance & Value• Recommended guideline
#33• Makes it clear which input a
label is referring to
Remediation• Add labels with a ‘for’
attribute• <label for=“email”>
<input id=“email” … /></label>
Important information is not contained between input fields
Importance & Value• Recommended guideline
#34• Screen reader users (and
probably everyone) tend to navigate forms by tabbing from one field to the next
• Important information can be missed
Remediation• Do you see any examples of
this problem on our test site?
• Move important information ahead of the form
Other things to pay attention to with forms
• Labels should precede input fields (like text fields)
• Labels should follow checkboxes and radio buttons
Content
• Alt descriptions• Link phrases & titles• Style (headings, sentences, paragraphs,
readability)• Non-HTML documents• Multimedia
Content > Alt descriptions
• REQ #1: Images containing content are described by meaningful alt and longdesc attributes
• Not covered here, but important (and required): alt attributes for image maps
Alt & longdesc attributes
Importance & Value• Required guideline #1
– You must do this
• Screen readers can’t interpret images yet, so they rely on alt text to describe them
• Longdesc attributes are less-used, but another option
Remediation• Add alt attributes
– <img … alt=“Description of image” />
• Make the description meaningful or relevant
• Use “” (blank quotes) to describe purely decorative images
Content > Link phrases & titles
• REC #13: Link text makes sense out of context• REC #14: Text is not repeated for different
links
• Not covered here, but important (and required): meaningful titles for frames
Link text makes sense out of context
Importance & Value• Recommended guideline
#13• Screen reader users will
sometimes navigate a page via a list of links
• Link labels that don’t really describe where they’re going are not helpful
Remediation• Use link phrases that make
sense on their own– Learn more about us by
clicking <a href=“about.html”>here</a>
• Make link phrases distinct• Title attribute can be used,
if necessary
Text is not repeated for links going to different pages
Importance & Value• Recommended guideline
#14• More of a general usability
& cognitive issue• Identical link labels leading
to different pages can be confusing
Remediation• Choose a meaningful and
distinct label for each page and consistently apply it throughout the site
Content > Style
• REQ #10: Clear and simple language is used throughout the site
• Not covered here, but important (and required): Changes in content language should be indicated by HTML code
Clear and simple language is used throughout the site
Importance & Value• Required guideline #10
– You must do this
• Overly-difficult language is a burden to understanding content– Impacts everyone
• This is a bit more subjective, and has been a point of contention– See policy clarification in FAQ
Remediation• Use language & style
appropriate for an 8th-grade reading level
• This will also clean up REC #28
Non-HTML documents
• Not covered here, but …• Provide links to download plug-ins if they are
used (Java, Flash, etc)• Inform users when an action will pop-up a
new page (use a pop-up icon)
Multimedia
• Transcripts and synchronized captioning are burdensome, but required under the policy
• More information about them is available on webaccess.msu.edu
Presentation
• REQ #2: Content is understandable without the use of color
• REC #19: CSS is used to format text• REC #20: Relative units are used for sizing &
positioning• REC #28: CSS is used for page layout and
presentation
Content is understandable without the use of color
Importance & Value• Required guideline #2
– You have to do this
• A color-blind person may struggle to interpret content that only uses color to convey meaning
Remediation• Modify the content to
communicate the same message with alternate means
• Are there any areas on our test site where we might be failing this checkpoint?
CSS & relative units
Importance & Value• Recommended guidelines
#19, #20, #28• CSS is used to separate
content and presentation• This separation makes
content easier for screen readers to parse
Remediation• Varies
Linearization
• Convert a table-based layout to one presented with CSS
• If you’re going to do this, it may be best to do an overall redesign rather than just as part of retrofitting your website
Functionality
• JavaScript should be used in a way that degrades gracefully– Enhances presentation of content– Associated with unobtrusive JavaScript– This is an advanced topic
JavaScript libraries
• Make functionality easier to implement• jQuery – Used on MSU homepage• MooTools, Scriptaculous, etc.
Accessibility triage
• The two most important things you can do– Headings– Alt attributes
Plan of attack
• You can either retrofit or redesign• If you want to retrofit, focus on the required
elements and also headings– Templates make retrofitting easier
• If you’re going to redesign, try to meet both required and recommended elements
Breakout sessions
• If you brought your website, feel free to open it up in Dreamweaver or in a browser
• Go ahead and get started developing a plan of attack