Web accessibility is a hot topic right now, with lawsuits, a Section 508 refresh, and the impending requirements of WCAG 2.0 fresh on people's minds. However, web accessibility is nothing new, and there are a lot of actionable ways to make your content compliant. A quote from World Wide Access says, "If you can design a website, you can design an accessible one." In this webinar, Janet Sylvia, Web Accessibility Group Leader (founded at the University of Georgia) and Web Accessibility Trainer, will walk you through 10 tips for creating accessible websites following the international standard WCAG 2.0. Her in-depth presentation, designed for content managers, designers, and developers, focuses on steps that you can take now to make your websites and online learning content accessible. In this webinar, you'll learn about: - Legal requirements for web accessibility - Repercussions of not complying with web accessibility laws - An overview of Web Content Accessibility Guidelines (WCAG) 2.0 - 10 tips for creating accessible websites and online learning content - Tools for evaluating the accessibility of your website

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

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

3. Janet Sylvia
Web Accessibility Group, Leader
Web AccessibilityTrainer

4.  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

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

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

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

9.  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

10.  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.

12.  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

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

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

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

18.  <title>

19. 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…..

21.  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

23.  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

25.  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

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

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

29.  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

30.  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

32.  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

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

34.  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

36.  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

37. a)
b)

38. a)
b)
*c)

40.  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

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

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

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

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