SACRAMENTO STATE
Web Accessibility
SACRAMENTO STATE
Plan
•
Foundations of accessibility•
Best practices•
Understanding a report•
ResourcesSACRAMENTO STATE
Foundations
•
What is accessibility?•
The Accessible Technology InitiativeSACRAMENTO STATE
What is accessibility?
•
Accessible webpages make it possible for people with disabilities to access your content•
Disabilities can be visual, auditory, motor, or cognitiveSACRAMENTO STATE
Facilitate assistive technologies
•
Screen readers (JAWS)•
Text enlargers (ZoomText)•
Alternative input devices•
Video captioningSACRAMENTO STATE
Assistive Technology Demos
SACRAMENTO STATE
Accessible Technology Initiative
•
Chancellor’s Office created the AccessibleTechnology Initiative in 2006.
•
All new administrative sites must be accessible•
More immediately, all administrative sites critical to university access must be accessible by 6/2009•
By Fall 2012, all websites must be accessibleSACRAMENTO STATE
Guidelines
•
ATI requires Section 508 of the Rehabilitation Act (1998)•
Some requirements can be checked automatically, but most require a manual inspection.SACRAMENTO STATE
Sac State and Accessibility
•
Exceed expectationsSACRAMENTO STATE
Other guidelines
•
Web Content Accessibility Guidelines (WCAG)•
Sac State’s custom guidelines508
WCAG
Sac State
SACRAMENTO STATE
Measuring progress
•
Testing Tools•
AccMonitor (Sac State server)•
WAVE Toolbar (FF Extension)•
Web Developer Toolbar (FF Extension)SACRAMENTO STATE
What do we do?
•
ALT Text•
Page Structure•
Data Tables•
Unambiguous Links•
Multimedia•
Fonts•
Color•
Layout•
Menus•
FormsSACRAMENTO STATE
ALT text
SACRAMENTO STATE
Example
Department of Widgeteering Home Page - Sacramento State
Lesson: If there is text in the image, that text should be in the alt text
SACRAMENTO STATE
Example
Search
Lesson: if the image represents an action, that action is the alt text
SACRAMENTO STATE
Images that are links
•
ALT text is used as link text when an image is a link•
Use best linking practices•
Never use <empty> ALT text when the image isSACRAMENTO STATE
Example
<empty>
Lesson: Decorative images (bullets, lines, etc.) get <empty> alt text
SACRAMENTO STATE
Example
Ruby lying down
Lesson: Restrict alt text to the subject of the photo
SACRAMENTO STATE
Traps
•
Don’t preface with “image of” or “picture of”•
A filename is not alt text•
Don’t get too long; alt text is short and to the point•
Spacer images = <empty> alt text•
Titles overwrite altSACRAMENTO STATE
Page Structure
•
Use headings, lists, and paragraphsSACRAMENTO STATE
Headings
•
Like a document outline•
No empty levels•
Each indent is at most one further in than its parent•
Structure a page semantically - h3s under an h2 are semantically related to that h2•
Hide headings via CSS to add structure that’s clear visuallySACRAMENTO STATE
<h1> .. <h6>
•
Heading 1 - Major sections. Should only be one or two, and one should correspond to the page title.•
Heading 2 - Sections.•
Heading 3 - Subsections•
Heading 4-6 - Generally not used, but you see the ideaSACRAMENTO STATE
Paragraphs
•
Paragraphs should be wrapped by <p> tags, not separated by <br />•
A paragraph is set of sentences that support some main idea.SACRAMENTO STATE
Lists
•
Numbered lists•
Auto-number their items; never number lists again!•
Bulleted lists•
Great for menusSACRAMENTO STATE
Data Tables
•
Always use the <th> tagSACRAMENTO STATE
Headers
•
The top row is usually a header row•
Sometimes, the first column is a header columnSACRAMENTO STATE
Captions and Summaries
•
Table titles = captionsSACRAMENTO STATE
Table Example
Name Miles Walked Miles Run Total Miles Andy Barbara Cleo Dan 5 16 21 3 4 7 12 3 15 13 13 26
Caption: Marathon Training Results, Week 3 Summary: Miles walked and run by
marathon trainers. Dan has walked the most and has the most total miles, but Andy has
SACRAMENTO STATE
Complex Tables
Morning
Afternoon
Teacher Boys
Girls
Boys
Girls
Jones
Smith
Carey
Blue
14 16 21 10 13 16 15 13 10 9 18 15 7 15 8 14SACRAMENTO STATE
Data Tables vs Layout Tables
•
Assistive technology uses <th> to determine if a table is data or layout.SACRAMENTO STATE
Unambiguous Links
•
No more “click here”!•
Links describe where they lead•
No popups (without a warning)SACRAMENTO STATE
Adding Context to Links
•
Problem: Newsletter page with multiple “Read More” links•
Solution: In code, wrap <span class=”hidden”> around context inside link.•
e.g. <a href=”some/path”>Read more<spanclass=”hidden”> about My Sac State 2.0</span></ a>
SACRAMENTO STATE
Multimedia
•
Captions must be provided for any multimedia (audio/visual) content•
Transcripts for audio (e.g. podcasts)SACRAMENTO STATE
Fonts
•
Use ems or %•
Not pixels or points•
Avoid italics and all caps•
line-heightSACRAMENTO STATE
Color
•
Color can’t be used as a “sole indicator of meaning”•
e.g. a “required” label on a form might be red, but would also need an asterisk indicatingrequirement.
•
Text must have sufficient contrast (5:1, 7:1 if possible)•
Contrast has to hold for colorblindness as wellSACRAMENTO STATE
Layout
•
No more tables•
“Skip to content”•
<span style="position:absolute;"><a id="content" name="content"></a></span>SACRAMENTO STATE
Stylesheets Off
•
What happens when stylesheets are off?SACRAMENTO STATE
Menus
•
Keyboard accessible•
Unordered lists•
Put headings/paragraphs before lists•
Avoid dropdowns with onchange eventsSACRAMENTO STATE
Forms
•
Every <input> needs a <label> or a “title”•
Avoid implicit linking•
Use <fieldset>s when appropriate•
Show progress•
Avoid tables for layout•
Specify <input> heights in ems, not px.SACRAMENTO STATE
Understanding a report
•
Types of reports•
What does a report mean?SACRAMENTO STATE
Types of Reports
•
Preliminary (from AccMonitor)SACRAMENTO STATE
What does a report mean?
•
They don’t mean that you’ve done something badSACRAMENTO STATE
Developing an Action Plan
•
Seek support•
Be meticulous•
Separate template issues vs. authorship issues•
Look at http://www.csus.edu/web/accessibility/ process.htmlSACRAMENTO STATE
