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 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 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 code 3.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: – Skip to Main Content Insert anchor tag before content –

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 tags – Welcome to the Department of Nonlinear Applications – Events

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 Year Department Head

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 – Add a caption element – Past directors

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

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

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 – 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 here 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 8 th -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