Fundamentals of Web AccessibilitySHARON TRERISE & KARA PATTEN

RESOURCES CONTRIBUTED BY PAM THOMAS, THE LIBRARIES AT SU

GRAPHICS FROM WEBAIM.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 PerspectiveLEGAL / POLICY PERSPECTIVE

Federal laws Americans with Disabilities Act (1990) Section 504 of the Rehabilitation Act (1973)

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.”

SAMPLE OF CASES INVOLVING HIGHER ED California Community Colleges (1996) California State University (1999) Ohio State Univ. (2010) Florida State (2012) Univ. of Kentucky (2012) 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 AccessibilityREACTIVE APPROACH

Provide a document in alternate format when requested

Provide CART or sign language interpreter for movie or video when requested

Blind student is excluded from participating in class exercise using clickers

PROACTIVE APPROACH

Make all documents accessible before posting on web or in online course

Videos must be captioned before scheduled to be shown or before posting on web

Clickers are chosen which have an option for Braille labeling

SU Information and Communication Technology (ICT) Accessibility PolicyWeb 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 wandMouth 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: openingWhen 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

[Ctrl] [Home] – top of page

[↓] / [↑] – read next / previous line

[Ins] [↓] – start reading from current position

[Tab] – move to next link

[Shift] [Tab] – move to previous link

[Ins] [F7] – list all links on page

Headings

[H] – read next heading

[Ins] [F6] – list all headings

Forms

[Tab] – navigate to next form control

[Enter] – forms mode to enter text field

[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: SimulationMap 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

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%)

OFCON Study: 80% of people who use captions are not hard of hearing*Source: http://stakeholders.ofcom.org.uk/binaries/consultations/accessservs/summary/access.pdf

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.)

ContentPost 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 checksEnsure 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