Retrofitting Websites for Accessibility David Mulder, Academic Technology Services

Retrofitting Websites for Accessibility

David Mulder, Academic Technology Services

First, a video

• Introduction to the Screen Reader

http://www.doit.wisc.edu/accessibility/video/intro.asp

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

http://www.msu.edu/user/dlm/retrofit/

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


#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


#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



• 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


#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



• Forms are an integral part of using the Web

Remediation• Add labels• <label>

<input … /></label>

Labels are explicitly associated with form controls


#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


#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



• 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


#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


#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



• 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


– 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

Documents

Retrofitting Websites for Accessibility David Mulder, Academic Technology Services