10 tips for creating accessible web content with wcag 2.0
TRANSCRIPT
1
10 Tips for Creating Accessible Web Content with WCAG 2.0
Janet Sylvia (Presenter)Web Accessibility GroupLeader
www.3playmedia.comtwitter: @3playmedialive tweet: #gaad
Type questions in the window during the presentation
Recording of presentation will be available for replay
To view live captions, please click the link in the chat window
Lily Bond (Moderator)3Play MediaMarketing [email protected]
OLC Workshops
Special discounts available for OLC Members!http://onlinelearningconsortium.org/join/
July 22 – 24: Designing with Accessibility in Mind
October 7 - 9: Exploring Interactive Video Tools
http://onlinelearningconsortium.org/learn/workshops
10 Tips for Creating Accessible Web Content
with WCAG 2.0
Janet SylviaWeb Accessibility Group, Leader
Web Accessibility Trainer
Agenda
Introduction to Web Accessibility
Overview of the Web Content Accessibility Guidelines (WCAG) 2.0
10 Tips for Creating Accessible Web Content
Accessibility Checking, as we cover content
Introduction to Web Accessibility
Why Web Accessibility?
Section 508 - Rehabilitation Act Amendments of 1998 “Electronic and Information Technology must be equally
accessible to people with and without disabilities”. Section 508 Refresh….forthcoming
U.S. Department of Education Assistive Techn0logy Act
Americans with Disabilities Act (ADA) Places of public accommodation Courts have ruled intent of the law includes internet
International Laws (Province, Territory, Country)
If we don’t comply?
Loss of equivalent (or equally effective) access to your website, web-based content and online courses for people with disabilities.
Recourse in U.S.: US Department of Education, Office of Civil Rights US Department of Justice, Office of Civil Rights
Civil Rights Complaint
Lawsuit in State or Federal Court
Web Accessibility Standards and Guidelines
Standards = legal requirements
WCAG 2.0 = international guidelines
Accessibility best practices
Together, ensure accessible delivery of electronic, information and communication technology
Section 508 Refresh and WCAG 2.0
Section 508 Refresh (as written) Incorporates by Reference WCAG 2.0, Levels A and
AA
Higher Education Civil Rights Complaints and Lawsuits Remediation Plans Require conformance with WCAG 2.0 Levels A and
AA
WCAG 2.0 (alone) – not enough!
Section 508 and the Refresh Cover more than web-based content Procurement Polices Hardware and Software Telecommunications Devices
We will always comply with Section 508. The Section 508 Refresh is expected to direct us to conform with WCAG 2.0 for accessibility
of web-based content.
Web Content Accessibility Guidelines (WCAG) 2.0 –
What’s it all about?
WCAG 2.0 for Web Accessibility
4 Principles (P.O.U.R.) 12 Guidelines
▪ 61 Success Criteria▪ Level A + Level AA and Level AAA
WCAG 2.0 Documentation How to Meet WCAG 2.0 Techniques Understanding Success Criteria
Beginners: WebAIM’s WCAG 2.0 Checklist
WebAIM’s WCAG 2.0 Checklist
Important Concept:Section 508 Refresh & WCAG 2.0
Usable Accessibility
Functional vs. Technical Accessibility
Website may pass an accessibility checker, but is the content actually usable by the intended audience?
Example: Technical ALT text
<img src=“234.jpg” alt=“Logo”>
Technical: accessibility
requirement has been met through the use of ALT text
Functional: Does the word “logo”
fully convey the meaning or contents of this image?
What is this logo for?
Example: Usable ALT text
<img src=“234.jpg” alt=“Global Accessibility Awareness Day”>
Functional goes beyond merely meeting a technical requirement; actually usable by the website visitor.
10 Tips for Creating Accessible Web
Contentwith WCAG 2.0
1) Page Titles, Headings, and Semantic Structure
<title>
Headings
Heading 1 <h1>
Heading 2 <h2> Heading 3 <h3> Heading 4 <h4> Heading 5 <h5> Heading 6 <h6>
Only 1 per page, same as <title> text
All Section Titles All Sub-section
Titles
All Sub-sub section…
All Sub-sub-sub section…
All Sub-sub-sub-sub section…..
Web Accessibility Toolbar (WAT): Structure>Heading Structure
Semantic Structure
Ordered lists <ol> Progression, sequence
Unordered lists <ul> No sequence
Avoid using either for indent or layout; always a defined purpose
<strong> instead of bold <em> instead of italics
Web Accessibility Toolbar (WAT): Tables>Linearize
2) Descriptive Hyperlinks
Link text should: make sense out of context describe the destination (website or
document title) be unique for each unique destination
Avoid Click here Email me URL text http://www.ugallo-b59-
go2376c.html
Web Accessibility Toolbar (WAT): Doc Info>List Links
3) Alt Text for Non-text Content
Every image requires alt text!
Alt text: Clear, concise description approx. 120 characters
or less Conveys function, meaning or purpose of image
Long Description (in addition to alt text): When alt text alone isn’t enough Surrounding text or link to a separate, accessible
document
Example: Long Description
<img src =“123.jpg” alt=“Map to Student Center”><img src=“123.jpg” alt=“”>
In text surrounding the image: The Student Center is
centrally located on the main campus. From Five Points, take S. Lumpkin for 4.5 miles. Take a right at Clark Howell Hall into the Tate Center Parking lot. The Student Center is located on the east side of the lot.
Web Accessibility Toolbar (WAT): Images>List Images
4) Accessible Documents
HTML PDF Word Excel PowerPoint Etc.
Resources available on Handout
5) Accessible Multimedia
Audio-only Text Transcript (of the spoken word)
Video-only Video Description (text description of key
visual elements)
Audio+Video Closed Captions Text Transcript + Video Description
Accessible Media Player
6) Don’t Auto-play Video
Provide option to turn off multimedia Pause/Stop buttons must be keyboard
accessible
Ensure media player is accessible YouTube
▪ Default Player – not accessible▪ Instruct site visitors to request HTML5 player
Embed YouTube▪ YouTube HTML5 player▪ JWPlayer
Request YouTube HTML5 Player
7) Ensure JavaScript is Device Independent
Functionality does not rely on mouse-only or keyboard-only
JavaScript can increase accessibility Prompts for warnings, instructions, additional
information
No easy fix for all JavaScript Evaluate each page and devise unique
solutions
WebAIM: Accessible JavaScript
8) Ensure Keyboard Accessibility
Often overlooked but significant aspect of website accessibility
Test Unplug mouse Tab (forward) Shift+Tab (backward) Enter (activate links, buttons, controls,
etc.)
Keyboard – 5 Accessibility Requirements
1. Focus Indicators visible via Tab To experience, visit WebAIM and use tab key
2. Navigation Order - logical and intuitive
3. Interactive elements accessible via keyboard
4. Scripted elements and widgets accessible via keyboard
5. Lengthy navigation needs Skip to Main Content, Headings, ARIA landmarks
Web Accessibility Toolbar (WAT): Structure>Tab Order Indicator
9) Sufficient Color Contrast
Choose high contrast color scheme between foreground and background colors
Avoid large blocks of text with dark background and light text
Ensure background does not overpower text
Also, avoid color coding
Which provides better contrast?
a)
b)
Remediate: Always compare to best* option for high contrast
a)
b)
*c)
Colour Contrast Analyseravailable from The Paciello Group
10) Accessibility Statement
The [organization name] complies with Section 508 and endorses conformance with the WCAG 2.0 Guidelines for accessibility of web-based content. Please contact us if you cannot access information on this website. Email Phone Number
Respond to request within 24-hours or 1 business day
Summary: 10 Tips
1. Page Titles, Headings, Semantic Structure
2. Descriptive Hyperlinks
3. Alt Text for all Non-text Content
4. Accessible Documents
5. Accessible Multimedia
6. Don’t auto-play video
7. JavaScript functionality is device independent
8. Keyboard accessibility
9. Sufficient color contrast
10. Accessibility Statement and contact information
Quote from World Wide Access
“If you can design a website, you can design
an accessible one.”
University of Washington, Do-IT
44
Presenters
Janet SylviaWeb Accessibility GroupLeader
Lily Bond
3Play Media
Marketing Manager
Q&A
Upcoming Webinars:
May 27: CVAA Legal Requirements for Video Programming
July 23: DIY Workflows for Captioning/Transcription
August 6: Quick Start to Captioning
You can register for these free webinars at: www.3playmedia.com/how-it-works/webinars/
A recording of this webinar will be available for replay