Transcript Creating Accessible Web

Fundamentals of
Web Accessibility
S HA RON T R E RISE & K A R A PAT T EN
R ES OURCES CON T R I BUTED BY PAM T HOMAS, T HE LI BR AR IES AT S U
G R A PHI CS F ROM W E BA I M .ORG
Topics
 Web accessibility – The Legal Perspective
 Federal mandate & SU ICT Accessibility policy
 WCAG 2.0 AA Guidelines
 Web accessibility – The User’s Perspective
 Design considerations
 Manually evaluating your site for accessibility (WAVE tool)
 Video captioning resources
 Evaluating the accessibility of your site
 Manual evaluation
 Automated evaluation – HiSoftware Compliance Sheriff
Why does the SU website need to be
accessible? – The Legal Perspective
LEGAL / POLICY PERSPECTIVE
SAMPLE OF CASES INVOLVING HIGHER ED
California Community Colleges (1996)
Federal laws
 Americans with Disabilities Act (1990)
 Section 504 of the Rehabilitation Act (1973)
California State University (1999)
Ohio State Univ. (2010)
Florida State (2012)
Univ. of Kentucky (2012)
Office for Civil Rights says accessible means:
“a person with a disability is afforded the
opportunity to acquire the same information,
engage in the same interactions, and enjoy the
same services as a person without a disability in an
equally effective and equally integrated manner,
with substantially equivalent ease of use.”
UC Berkeley (2013)
Penn State Univ. (2013)
Univ. of Montana (2014)
Youngstown State Univ. (2014)
Univ. of Cincinnati (2014)
MIT and Harvard Captioning Lawsuit (2015)
Office for Civil Rights: IT Accessibility
REACTIVE APPROACH
 Provide a document in alternate format
when requested
PROACTIVE APPROACH
 Make all documents accessible before
posting on web or in online course
 Provide CART or sign language interpreter for  Videos must be captioned before scheduled
movie or video when requested
to be shown or before posting on web
 Blind student is excluded from participating
in class exercise using clickers
 Clickers are chosen which have an option for
Braille labeling
SU Information and Communication
Technology (ICT) Accessibility Policy
 Web content must comply with W3C Web Content
Accessibility Guidelines (WCAG 2.0 AA)
 Compliance time frames
 New and redesigned web pages published six months or more
after the effective date of the policy must:
 Be in compliance with WCAG 2.0 AA
 Indicate in plain text a method of contact for users with disabilities having trouble
accessing content within the site
SU ICT Accessibility Policy
 Compliance time frames
 Legacy pages – 1 year after policy effective date – must:
 In compliance with Section 508 Standards
 indicate in plain text a method of contact for users with disabilities having trouble accessing content
within the site
 Priority on core institutional information pertaining to students, faculty, staff, alumni, retirees and
visitors
 Phase-in or upon request
 25% in compliance in 1st year, 50% in 2nd year, 75% in 3rd year, 100% in 4th year
 More information in ICT Accessibility Toolkit
WCAG 2.0 AA Guidelines
World Wide Web Consortium (W3C)
◦ Web Accessibility Initiative (WAI)
◦ Web Content Accessibility Guidelines (WCAG) 2.0 AA
WebAIM’s WCAG 2.0 Checklist
Why does the SU website need to be
accessible? - The User’s Perspective
How do people with disabilities use the web?
◦ People with mobility impairments
◦ People who are blind or visually impaired
◦ People who are color blind
◦ People with cognitive impairments
◦ People who are deaf or hearing impaired
 How does accessibility affect their
experience?
People with mobility impairments
May use only the
keyboard for navigation
May use voice
recognition software
May not have fine motor
control
Head wand
Mouth Stick
Keyboard navigation
 [Tab] to move to next link
 [Shift][Tab] to move to previous link
 [Enter] to select the link
Try it:
◦ New York Times (nytimes.com) vs Wall Street Journal (wsj.com)
◦ Styleguide.syr.edu (look for Tab focus, Skip to Content link)
Mac: If you are using Safari, enable this preference: Safari > Preferences > Advanced >
Check "Press Tab to highlight each item on a webpage".
Manual Checklist: Your site
All content is accessible from the keyboard only
 [Tab] focus is visible
 There is a logical [Tab] order; matches the visual order
 All links and form elements are usable from the keyboard only
 There is a visible Skip Navigation / Skip to Main Content link
 Test dialog boxes that pop open. You should be able to navigate and close these using a
keyboard. Esc should also close these boxes.
Manual dexterity is not required for someone using a mouse
 No exceptionally small or moving links
People who are blind
Do not use a mouse
May use a screen reader to
listen to the content read
May use a refreshable Braille
display
Example
Screen reader cannot interpret images
 All images have appropriate, equivalent alternative text (alt text)
 Images that do not convey content are decorative and given null
alt text (alt=“”)
When is alt text required?
 An alt Decision Tree (W3C WAI Web Accessibility Tutorials)
Informative Hyperlinks: link text
 The visible part of the link (text to display) should describe the purpose of the
link.
Bad examples:
◦ Visit Syracuse University Parking Services website here.
◦ See http://suevents.syr.edu/main.php?view=event&eventid=1393623700688 for info.**
◦ More…
Better examples:
◦ Visit Syracuse University Parking Services website for parking information.
◦ See Carnegie Library Reading Room Dedication article.
Informative Hyperlinks: document type
Document links should indicate the document type in the visible part of the link
(link text).
 Let users know if the link will open something other than a webpage.
Bad examples:
◦ There is a PDF here for our room policy.
◦ Instructions for use
Better examples:
◦ Read our Room Policy [PDF]
◦ Instructions for use [Word]
Hyperlinks: opening
When to open the hyperlink in a new window.
There are no hard and fast rules, just keep it consistent and considerate.
 Open in the SAME tab or window if the link goes to a site where the content is controlled by
Syracuse University EXCEPT for document links, full size image links, and email address links.
 Open in NEW tab or window if the link goes to a site where the content is NOT controlled by
Syracuse University.
 Open in NEW tab or window for any email address link, any documents such as PDF, Excel
spreadsheet or Word document, video/audio files to avoid disrupting the natural working flow
of the website.
Tables
 Tables are used for tabular data, not
layout
 Keep table structure simple
 No merged columns or rows
 Designate column headers and row
headers where appropriate
 Provide data table captions and
summaries where appropriate
 webAIM.org (search for ‘Tables’)
Manual Checklist: Your site
Page can be read effectively with screen reader (wave.webaim.org)
 Graphics have meaningful descriptions (alt text)
 Link text is descriptive
 Headings are used and nested appropriately
 All content can be accessed using the keyboard alone
 Page has logical read order (disable CSS)
 There is a Skip Navigation or Skip to Main Content link
 Data tables have simple structure (merged columns or rows are avoided)
Experience a screen reader (JAWS & IE)
Navigation
Headings
[Ctrl] [Home] – top of page
[H] – read next heading
[↓] / [↑] – read next / previous line
[Ins] [F6] – list all headings
[Ins] [↓] – start reading from current position
Forms
[Tab] – move to next link
[Tab] – navigate to next form control
[Shift] [Tab] – move to previous link
[Enter] – forms mode to enter text field
[Ins] [F7] – list all links on page
[Spacebar] – select & deselect checkboxes
[↓] & [↑] – select & deselect radio buttons
People with low vision
People with Low Vision
May use screen
magnification software
May override font &
background colors
Limit text within graphics
Fonts: type, size, color
 Legible, web standard fonts (sans serif) such as Arial, Verdana, Franklin Gothic
 Avoid condensed or narrow fonts
I like my funky font! Makes my page look great even though it’s hard to read.
 Minimum font size = 10pt
 Use relative font sizing (% or em rather than px)
 Use text colors appropriate for text and hyperlinks.
I’m going to make my links really stand out.
Contrast: text and background
Meet or exceed the minimums
 4.5:1 contrast ratio - Smaller text (18 pt or smaller, 14 pt Bold or smaller )
 3.0:1 contrast ratio – Larger text (over 18 pt, over 14 pt Bold)
Contrast checker
 Contrast checker or WebAIM contrast checker if you know the hex#
 WAVE tool
 SU Styleguide***
 Print on a grayscale printer to test contrast and color.
Manual Checklist: Your site
Content maintains clarity when magnified
 Graphics do not contain important text
 Page is usable when font size is doubled
 Horizontal scrolling is enabled when magnified.
Font and color choices promote readability
 High contrast colors are used for text and background (wave.webaim.org)
 4.5:1 for smaller text
 3:1 for larger or bolded text
 Font is simple and well-spaced
Color Blindness
Approximately 8-10% of the male population and about
0.5% of the female population experience some form of
color deficiency
Reds & greens are often indistinguishable
Color Blindness: Simulation
Map of Hurricane Isabel (with color)
Color Blindness: Simulation
Map of Hurricane Isabel (with simulated red/green colorblindness)
Simulated using Vischeck
Avoid using color alone to convey content
Dairy
Beverages
Confections
Meat/Poultry
Seafood
Grains/Cereals
Condiments
Produce
Manual Checklist: Your site
Color alone is not used to convey important information
 Information contained in charts, graphs and color-highlighted text
uses additional means for conveying important information
(patterns or textures)
 Examine text within graphic images for sufficient color
differentiation (print on black & white printer to see if information
is lost)
People who are deaf or hearing impaired
Videos
Podcasts
Simulation
Audio and Video Content
Audio
 Provide / link to a transcript
 Example: Nature.com
Video
 Provide synchronized captions
 Example: AccessibleSU
Information about transcripts and captioning in ICT Accessibility Toolkit
Benefits of Captioning
Increased comprehension
◦
◦
◦
◦
◦
People whose primary language is not English
Instructor has accent or speaks quickly
Complicated subject matter
Video with poor sound quality
Visual learners
Transcript useful as study aid
OFCON Study:
80% of people who
use captions are not
hard of hearing*
Source:
http://stakeholders.ofcom.org.uk/binaries/consu
ltations/accessservs/summary/access.pdf
Interactive video search useful as study aid (Interactive Captions)
Easily translated to another language
Easily viewed in noise sensitive environment
Improves Search Engine Optimization (found to increase inbound traffic by 7.3%)
Manual Checklist: Your site
Audio and video are usable by people who are deaf or hard of
hearing
 Audio content has an accompanying transcript
 Videos have synchronized captions
People with cognitive impairments
Users may have difficulty focusing on or comprehending
lengthy sections of text
Complex layouts or inconsistent navigational schemes may
be confusing
May benefit from content in multiple forms (visual, text,
auditory, etc.)
Content
Post clear, concise content.
Write clear, short sentences.
“Chunk” content using headings, paragraphs, bullet points
whenever possible.
Use plain English and avoid unspecified acronyms and institutional
jargon.
Which would you rather read?
THIS…
We are here to help you with your research
needs. We also have a lot of services
available online. If you want to request a book
on the library website, click here. It’s easy. To
return a book, drop it off at the Circulation
desk. You can renew a book online or in
person. Be sure to renew before the book is
due to avoid late fees. Fines and late fees are
here. You can pay your fines at the BSO in
Bird.
OR THIS…
Request a book online.
Return books to the Circulation desk.
Renew books online or in person at the
Circulation desk.
View fines and late fees.
Fines and late fees can be paid at the Business
Services Office (BSO) in Bird Library.
Manual Checklist: Your site
Page layout promotes readability
 Font is well-spaced and simple
 Navigation is consistent throughout the site
 Page elements are consistently located throughout the site
 e.g. search element
 Large blocks of text are broken with headers or graphics
No distracting elements
 There are no moving or blinking or otherwise animated images
People with photoepileptic seizures
Flickering and strobe-like effects that occur between 2 and
55 flickers per second may induce seizures
1. Flash more than 3 times per second (note that Section 508 specifies
2 times per second).
2. Be sufficiently large. A very small flashing image, such as a cursor,
will not cause a seizure.
3. Bright. There must be significant contrast between the flashes
External documents
MS Word, PPT, & Excel, Adobe PDF, etc.
 Test the accessibility using the build-in accessibility checkers
 If unable to make them accessible, post an accessible alternative
See ICT Accessibility Toolkit
Manual Checklist: Your site
What documents are linked from your site?
 Word, Excel, PowerPoint
 PDF
 Other
Are they accessible?
Other manual checks
 Ensure the page <title> is unique and descriptive.
 Make sure instructions do not rely on shape, size, or location.
 Ensure that animating or updating content or media can be paused and
stopped.
 Look for strobing content that could cause seizures.
Automated Evaluation
HiSoftware Compliance Sheriff
 50 high traffic sites scanned in May 2015 (benchmark)
 Sites will be re-scanned every quarter
 Additional sites added weekly
Automated Evaluation Checkpoints
 Presence of page title, language
 Presence of alt text
 Text and background contrast
 Font sizing (proportional vs fixed sizing)
 Headings nested properly
 Tables have column headers, summary and caption
 Presence of labels for form elements
25 Year Anniversary of ADA
….we must now work together to make disability inclusion seen as a resource gain, not a
resource drain.
Providing the accommodations mandated by the A.D.A. can be difficult, expensive and
challenging at times for the non-disabled to understand. Keep in mind, though, that all of us will
be disabled at some point, either by injury, age or illness. Disability is not a problem to fix, but a
part of the human experience. These accommodations that allow proud disabled people to
flourish, and fully participate in the privileges and obligations of citizenship, benefit us all.
The New York Times, July 26, 2015, Disabled People Must Make Themselves Visible, Rosemarie Garland-Thomson, a professor of English
and bioethics at Emory University and co-director of the Emory Disability Studies Initiative.
Everyone benefits from accessible
technology
• People using mobile devices
• Improved search engine optimization for web content
• Text-based PDF vs image PDF
• Captioned video vs no captions
• People whose primary language is not English
• Students who benefit from information in >1 type of media
(visual, audio, plain text vs graphical representation, etc.)
• Aging population
• Independence for people with disabilities
Resources
Information and Communication Technology (ICT)
Accessibility Toolkit
webAIM.org
*Web developers listserv – get help from others on campus who are
using the same tools and facing the same challenges