10 Tips for Creating Accessible Web Content with WCAG 2.0

1
10 Tips for Creating Accessible Web
Content with WCAG 2.0
Janet Sylvia (Presenter)
Web Accessibility Group
Leader
www.3playmedia.com
twitter: @3playmedia
live 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 Media
Marketing Manager
lily@3playmedia.com

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

Janet Sylvia
Web Accessibility Group, Leader
Web AccessibilityTrainer

 Introduction to Web Accessibility
 Overview of the Web Content Accessibility Guidelines
(WCAG) 2.0
 10Tips for Creating Accessible Web Content
 Accessibility Checking, as we cover content

 Section 508 - Rehabilitation Act Amendments of 1998
 “Electronic and InformationTechnology must be equally accessible
to people with and without disabilities”.
 Section 508 Refresh….forthcoming
 U.S. Department of Education
 AssistiveTechn0logy Act
 Americans with Disabilities Act (ADA)
 Places of public accommodation
 Courts have ruled intent of the law includes internet
 International Laws (Province,Territory, Country)

 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

 Standards = legal requirements
 WCAG 2.0 = international guidelines
 Accessibility best practices
 Together, ensure accessible delivery of electronic,
information and communication technology

 Section 508 Refresh (as written)
 Incorporates by ReferenceWCAG 2.0, Levels A andAA
 Higher Education Civil Rights Complaints and Lawsuits
 Remediation Plans
 Require conformance with WCAG 2.0 Levels A and AA

 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
withWCAG 2.0 for accessibility of web-based content.

 4 Principles (P.O.U.R.)
 12 Guidelines
▪ 61 Success Criteria
▪ Level A + Level AA and Level AAA
 WCAG 2.0 Documentation
 How to MeetWCAG 2.0
 Techniques
 Understanding Success Criteria
 Beginners:WebAIM’s WCAG 2.0 Checklist

 Usable Accessibility
 Functional vs.Technical Accessibility
 Website may pass an accessibility checker, but is the
content actually usable by the intended audience?

 <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?

 <img src=“234.jpg” alt=“Global
AccessibilityAwareness Day”>
 Functional goes beyond
merely meeting a
technical requirement;
actually usable by the
website visitor.

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 SectionTitles
 All Sub-sectionTitles
 All Sub-sub section…
 All Sub-sub-sub section…
 All Sub-sub-sub-sub
section…..

 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

 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

 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

<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 theTate Center Parking
lot. The Student Center is located
on the east side of the lot.

 HTML
 PDF
 Word
 Excel
 PowerPoint
 Etc.
 Resources available on Handout

 Audio-only
 TextTranscript (of the spoken word)
 Video-only
 Video Description (text description of key visual elements)
 Audio+Video
 Closed Captions
 TextTranscript +Video Description
 Accessible Media Player

 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
 EmbedYouTube
▪ YouTube HTML5 player
▪ JWPlayer

 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

 Often overlooked but significant aspect of
website accessibility
 Test
 Unplug mouse
 Tab (forward)
 Shift+Tab (backward)
 Enter (activate links, buttons, controls, etc.)

 1. Focus Indicators visible viaTab
 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

 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

 The [organization name] complies with Section 508 and
endorses conformance with theWCAG 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

1. PageTitles, Headings, Semantic Structure
2. Descriptive Hyperlinks
3. AltText 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

“If you can design a website,
you can design
an accessible one.”
University ofWashington, Do-IT

Janet Sylvia
Web Accessibility Group, Leader
Web AccessibilityTrainer
jsylvia@uga.edu

44
Presenters
Janet Sylvia
Web Accessibility Group
Leader
Lily Bond
3Play Media
Marketing Manager
lily@3playmedia.com
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

10 Tips for Creating Accessible Web Content with WCAG 2.0

More Related Content

What's hot (20)

Viewers also liked (17)

Similar to 10 Tips for Creating Accessible Web Content with WCAG 2.0 (20)

More from 3Play Media (20)

10 Tips for Creating Accessible Web Content with WCAG 2.0