A half day workshop walks people through common accessibility issues on the web, including good reasons why to accessible. Great for web designers, developers, teachers and IT trainers.

1. Web Accessibility

2. Web Accessibility
UD attribute through which people with
disabilities can perceive, understand, navigate,
and interact with the web, and they can
contribute to the web
Access
&
Function

3. Web Content Accessibility Guidelines
(WCAG 2.0)
P O U R

4. Web Content Accessibility Guidelines
(WCAG 2.0)
P O U R
Perceivable
Operable
Understandable
Robust

6. MAKE NAVIGATION SIMPLE,
CONSISTENT & ACCURATE
ONE

7. Navigation - Structure
• Hierarchical view of a
page
• Instead of changing font
size and color
• Each section of a page
• Screen reader users
navigate by heading
• Meaningful Heading text
• H1 - H6
• Jim Thatcher Tutorials

8. WebAIM Survey: New Webpages
61%17%
13%
2%
7%
Method of finding information on lengthy web
page
Navigate through
headings on the page
Use the Find feature
Navigate through the
links on the page
Navigate through
landmarks
Read through page

9. Headings Facilitate Skimming

10. Where Should The Headings Go?

11. Navigation - Clutter
• Be consistent throughout your
course. Use various templates.
Give users a choice.
• Avoid requiring students to drill
down through multiple items
to reach content.
– Multiple links
– New windows
– White space
– Blank lines
– Provide a TOC to modules

12. WebAIM Survey: Skip To Content
Links
18%
17%
28%
19%
15%
3%
Usage of ‘skip to content’ links
Whenever they're
available
Often
Sometimes
Seldom
Never
No Response

13. Skip To Content Links
• Visible so
everyone can
benefit – AT &
Keyboard users
• To main content
• To navigation
• To quick links
• Breadcrumb

14. Menu System
Objects like menus NEED visual indicator for
mouse hover and keyboard focus
• No focus
• Focus

15. Drop Down Menus
• In CSS most menus are “display:none”
• Revealed by changing that to display:block using
JavaScript triggered by a hover event)
• A few menus position the sub-menus off-screen rather
than hiding them. Both presents issues for visual users
and screen reader users.
• Terrill's Menu Test Page
• Simply Accessible CSS Dropdown Menu the cleanest
consisting purely of <ul>, <li>, and <a> elements, with a
single class="nav" applied to the root <ul>. All the ARIA
markup is added using JavaScript

16. ARIA
• The things we create are too complex
• AT needs help so users can predict what
to do
• ARIA makes it possible to supplement
HTML with attributes that explicitly
communicate the roles, states, and
properties of the various parts that make
up a menu system

17. MEANINGFUL INFORMATION
TWO

18. Naming Practices
• Links
• Headings
• Capitalization - 980 MB &
980 mb (millibar) are not
the same. When in doubt
use abbr element.
• Discussion Thread
Etiquette

19. Examples
• Use concise, meaningful text for links.
Like this: Writing Good Link Descriptions
Not this: Click here for information on writing good
link descriptions
• Indicate if a link opens a new window or
application
Like this: Module 1 Assignment PDF rather than
symbols (or both)

20. DON’T RELY ON SENSORY CUES
THREE

21. Provide Good Color Contrast
• Black text on a white or light
background is the most
readable.
• Patterns and images behind
text make it more difficult to
read.
• If you are creating an HTML
document to post in your
course, consider using CSS to
assign colors. This allows the
user to change the way
colors are viewed if desired.

22. Do Not Use Color to Convey Meaning
• The use of color to convey meaning may result
in your images or information not being
perceivable to students who are color blind or
blind.

25. • Bings
• Screen Flashes
• Floating timers
Ex: “At the tone begin typing”, “The quiz indicator
will turn green”
No Auditory or Visual Cues

26. Is there a Better Way?
There are two ways to get things done around here. The preferred
method is shown in red.
– your way
– my way
There are two ways to get things done around here. The second
method, also shown in red, is preferred.
1. your way
2. my way
someone may not see color, has a monochrome display, poor
lighting, mobile device, custom browser settings

27. Its OK to use Colour

28. Colour Contrast Analyzer
• Colour Contrast Analyzer
http://www.visionaustralia.org/business-and-
professionals/digital-access/resources/tools-to-
download/colour-contrast-analyser-2-2-for-web-pages
• Fujitsu Colour Selector application for use on any files not just
web pages.
http://www.fujitsu.com/global/accessibility/assistance/cs/
• Juicy Studio Luminosity & Contrast Analyzer & Firefox Toolbar
http://juicystudio.com/services/luminositycontrastratio.php
• Juicy Studio Colour Toolbar for Firefox
https://addons.mozilla.org/en-US/firefox/addon/juicy-studio-
accessibility-too/

29. CHOOSE FONTS
FOUR

30. Choose Fonts Carefully.
• Choose a sans serif font such as Arial
or Helvetica for your text.
• Make sure font sizes are large
enough to read comfortably.
• Limit the amount of text provided in
graphics because images may not
magnify gracefully enough to be
readable by students using
magnification software.
– "Homework Corner" is clear but
when magnified, it becomes
pixilated
• When coding font size in
HTML, choose relative sizes (% or
ems) instead of absolute sizes
(pixels).

31. APHont, OpenDyslexic Fonts
APH APHont:
American Printing
House for the Blind
OpenDyslexic font
http://www.bbc.co.u
k/news/technology-
19734341

32. ALTERNATIVES FOR NON-TEXT
OBJECTS
FIVE

33. What is non-text?
• Captions & Transcripts for video clips.
WebAIM Tutorial: Captions
• Audio Descriptions for visual elements in
video clips that aren’t described well.
NCAM Tutorial: Creating Audio Descriptions
for Rich Media
• Detailed Descriptions of charts, photos, and
images that are vital to course.
– Example Describing Graphs for Accessibility

35. Alt Text – the Decision
• Does text adequately describe the image?
• Captions are not duplication

36. Alt Text – the Decision
“Diagram of the Carbon Cycle”
• Scientists & students need more

37. This graphic combines several disability-related
images into a single collage. Braille dots, an eye
chart, finger spelled "508", and a side view
outline of a person's head with a glowing spot
for the brain make up the top portion of the
collage. Several symbols/icons are
superimposed in a strip over the lower part of
the collage to represent the following
disabilities and/or assistive measures:
• sign language interpretation
• assistive listening devices
• sound
• wheelchair (for accessible entrances, etc.)
• vision, no or low vision
• brain/cognition.
Go Big!

38. Multiple Methods of Access:
Download, Stream, Text

39. Video index

40. Animation - PHYS 204

41. Transcript

42. Captions
• Most players allow
playing of captions
• Easy to do
• Modules for most Web
Conferencing Tools
• Record it so Transcripts
are the minimum
• Avoid flashing or
flickering content

43. Students on Captioning/Decription
Students on Captioning URL - Australia

44. Captioning Tools & Formats
TTML (e.g., DFXP) is a standard format that is supported by Flash, YouTube,
and various other players. SMIL and SAMI are not as widely supported.
For media players, we usually recommend the JW player which has excellent
support for accessibility -
http://www.longtailvideo.com/support/jw-player/22/making-video-
accessible
Most video, however, is moving to HTML5 formats. HTML5 has it's own
captioning format called WebVVT. This format is still in development, but
has some support among browsers already. I'd certainly look into it if
you're moving away from Flash video to HTML5 (something I'd strongly
recommend).
• Camtasia
• MAGPie (FREE)
• YouTube

45. AID UNDERSTANDING &
ORGANIZATION
SIX

46. Plain Language
• Helps people with
– Low literacy skills & language proficiency
– Cognitive impairments
– Dyslexia
• Principles
– Direct instructions
– Positive terms
– Limited use of double negatives
– Complete and short sentences
– Point form
– Limited use of parenthetical statements

47. Chunking Assists Organization/Recall
System concept descriptions provide:
• The missions, features, capabilities and functions of the
system
• Major system components and interactions
• Operational environment including manual procedures
required
• Operational modes such as production, backup and
maintenance
• Interfaces with other systems
• Required performance characteristics such as response
time, throughput and data volumes
• Quality attributes such as availability, reliability and usability
• Other considerations such as security, audit, safety and
failure modes in emergency situations
• Deployment considerations such as acquisition of business
data to support the system including data cleansing and
loading
• The classes of users that will interact with the system
• Requirements for support of the system such as maintenance
organization and help desk.
System concept descriptions provide:
Functional requirements
• The missions, features, capabilities and functions of the
system
• Major system components and interactions
• Operational environment including manual procedures
required
• Operational modes such as production, backup and
maintenance
• Interfaces with other systems
Non-functional requirements
• Required performance characteristics such as response time,
throughput and data volumes
• Quality attributes such as availability, reliability and usability
• Other considerations such as security, audit, safety and
failure modes in emergency situations
Deployment and Operational Requirements
• Deployment considerations such as acquisition of business
data to support the system including data cleansing and
loading
• The classes of users that will interact with the system
• Requirements for support of the system such as maintenance
organization and help desk.

48. 1st Year Geology Course
Needs Improvement

49. Flexible Use
• Design accommodates a wide range of
individual preferences and abilities
– Change viewing preference (CSS or remove
images) without loss of information.
– Online discussions can be conducted via voice or
text
– Disable java, zoom font (% instead of px),
– Class lectures have both text and voice versions
– Asynchronous recordings

50. Forced Design

51. CSS Disabled

52. Browser Zoom

53. Reduce Possibility Of Seizures
• Use flickering sparingly as it make affect
people with photosensitive epilepsy
• Ensure user controls are available for items
that blink at more than 3 times/second
• There are tools for checking the Flicker rate
– TRACE Photosensitivity Analysis Tool
http://trace.wisc.edu/peat/

54. 100% KEYBOARD FUNCTIONALITY
SEVEN

55. Usable from the Keyboard
• Make all functionality usable from the keyboard for
– alternative mice & keyboards
– Voice dictation
– Screen readers
• Visual Keyboard focus
• Visual Mouse hover large target
• Avoid JavaScript unless you can do it right
• Provide list of keyboard shortcuts to users
• Ensure that keyboard controls do not depend on
mouse over or conflict with browser hotkeys

57. GETTING HELP
EIGHT

58. Getting Help
• clear statements about the institution’s
commitment to accessibility
• Provide a mechanism for students to report
inaccessible design
• Provide links to disability services office

59. Refer to DSO for Accommodations

60. ACCESSIBLE DOCUMENTS
NINE

61. Who uses Alternate Formats?
• If materials are ineffective how are you going to
use them to teach someone who has challenges
in:
– vision
– Mobility
– LD
– Attention
– Deaf – many students who use ASL have reading level
of gr 5
– ESL & low literacy

62. HTML
• HTML is ideal for providing accessible
documents if done right.
• The use of Cascading Style Sheets (CSS) for
formatting and design enhances usability even
further.
– Dreamweaver has many features built into it.
– Your knowledge after this workshop will help you
in whatever tool you use.
– Search for the feature “alt text”, “Description”

63. Recent WebAim Survey (2013)

64. Most Problematic - VI

65. Most Benefit – Mobility
• http://webaim.org/

66. Table Use
• DO NOT use tables for layout use CSS
• Data Tables need Table headings <TH>
• Add Captions at the top and a Table Summary
Name Telephone
Bill Gates 555 77 854
Mr. Bean 44 106 555 1563

67. Forms
• Proximity
• AT uses label to find form field
– Screen reader
– TTS
– Voice dictation
• Keyboard accessible (TAB, ENTER, ARROW
keys)
• 2 ways to make a form accessible (label, title)

68. • A Form

69. Zoomed

70. Proximity/instruction

71. Required/Instruction
• Instructions are more useful when in label

74. Errors/Alerts
• Usability
• Proximity
• Placement
• ARIA Alerts

76. Widgets
• dominant paradigm used to be tab to
everything
• much more sophisticated & complex keystroke
requirements required for working with
widgets
• tab to widget, use arrows keys within
widget, tab or other action out of widget
• escape closes widget

77. Derek Featherstone

78. ARIA
• We’ve been creating things that are
semantically meaningless because we don’t
have the things we want to express natively.
• Most widgets we create are nothing more
than a collection of divs, spans and other
(often abused) markup with CSS.
• We often express MEANING with CSS

79. Why ARIA
• The things we create are too complex
• AT needs help so users can predict what
to do
• ARIA makes it possible to supplement
HTML with attributes that explicitly
communicate the roles, states, and
properties of the various parts that make
up a menu system

80. HTML 5
• www.html5accessibility.com
• Using ARIA is a technology that helps AT
provide meaning like a bridge between past &
future
• Derek Featherstone Article
http://www.sitepoint.com/real-world-
accessibility-html5-aria-and-the-modern-web/

81. Identify Web Accessibility Issues
• Use WAVE Tool or FF Toolbar http://wave.webaim.org/?lang=en
• Navigate without a mouse, use the tab key, shift tab, enter key (Safari Activate:
Preferences > Advanced > Check "Press Tab to highlight each item on a webpage
– Visual indicator
– Follows reading order
• Skip to links work
• Pop Ups navigation & close (ESC) – date pickers, slide shows, warnings
• Zoom a page 250% – CONTORL +/-/0 , Cmd +/-
– Safari: View > Zoom Text Only
– Firefox: View > Zoom > Zoom Text Only
– Internet Explorer: View > Text size
• Check videos for captions
• Look for links with generic link text such as "click here" or "more info."
• Check page Title (the text that appears in your browser tab) , make sure that it is
unique and descriptive.
• NCDAE Tutorials www.ncdae.org

82. Testing HTML
• Browser Plug Ins
• Firefox Web Developer Extension
http://chrispederick.com/work/web-developer/
• Firefox Accessibility Extension
http://www.accessfirefox.org/Firefox_Accessibility_Extension.php
• Firefox WAVE Accessibility Toolbar http://www.wave.webaim.org
• Internet Explorer Web Accessibility Toolbar
http://www.visionaustralia.org/business-and-professionals/digital-
access/resources/tools-to-download/web-accessibility-toolbar-for-
ie---2012
• Functional accessibility evaluator:
http://appserv.rehab.uiuc.edu/fae

83. Good Originals Make Good PDF
Similar guidelines apply
• Use Styles in original documents (Word,
PowerPoint)
• When you convert good originals to a PDF
the accessibility features transfer (headings,
links, lists and image alt text)
• Don’t use image only PDF
• Ensure PDF files are searchable

85. Tagging an Untagged Document
• To add tags to an untagged document, choose
Tools from the right-hand menu.
• Select Accessibility > Add Tags to Document.

87. Tags Tree

88. Other PDF tasks
• Adding alternative text
• Add/Change Tags
• Touchup Reading Order
• Table Inspector
• Form Labels

89. Convert to PDF (MS Office)
• Proper original - alternative text for images, headings & lists via
Styles, appropriate link text, table headings
• Export Correctly - If a file is created by printing to PDF, it will not be
correctly tagged.
• Office 2007 users - Acrobat or the Microsoft PDF add-in
• Office 2010 users - can create tagged PDF files natively or with the
Adobe add-in.
Word 2007 Adobe Add-in
• The Adobe Add-in, also called PDF Maker, is the best choice to
create high-quality tagged PDF files.
• To export a PDF, click on the Office button > Save As > Adobe PDF
(or use shortcut Alt+F, F, A).
• http://www.microsoft.com/en-us/download/details.aspx?id=7

90. MS Office 2010 Accessibility Checker
identifies & repairs
accessibility issues
• Select File> Info>
Check for Issues>
Check Accessibility.
– The checker presents
accessibility errors,
warnings, and tips on
how to repair the
errors.

91. Flash
Provide an alternative format – (mp3, HTML)
Or you need to:
• Associate text equivalents with graphic elements
& overall movie element.
• Expose/hide objects, child objects from a screen
reader
• Make text dynamic or input
• Control speaking order of elements – tab index
(Action Panel)

92. Before
• Before

93. After
• After

94. CHOOSE CMS/LMS TOOLS
CAREFULLY
TEN

95. CMS/LMS Accessibility Issues
• Historically LMS do not incorporate UDL (flexible, easy to
use, consistent design, etc.)
• Translation not transformation of Print to e-course
• Often mouse driven
• Inflexible user customization
• Rely on colour and images without alternatives
• Unfriendly forms
• Modules inaccessible (blogs, wikis, quiz, embedded items)
• DropBoxes for assignment upload are inaccessible
• Incapable of adding captions/transcripts for multimedia
• Incapable to add alternative text for images
• Meaningless link text “click here”
• http://projectone.cannect.org/online-education/lms-
accessibility.php

96. Ohio, Illinois, Indiana 2012
• Ilinois State – Hadi Rangin Blog
http://blog.bargirangin.com/2013/03/a-
comparison-of-learning-management.html
• Blackboard 9.1 SP 6 & 8
• Desire2Learn 10
• Moodle 2.3
• SAKAI 2,8

97. • Login, Configuration, and
Compatibility Testing
• Personalization and
Customization
– Layout Customization
– Styling
– Session Time Out
– Saving Current State
– Default Page
– Selecting Editor
– Alerts
• Navigation
– Page Title
– Breadcrumbs
– Navigation Bars & Menus
– Navigation Technique
– Linearization and Tab
Order
– Link Type and Link Text
– Visible Indication of Cursor
Focus
– Tooltips Technique
• Forms
– Form Control Labels
– Form Submission
• Help and Documentation
– Inline Help
– Tutorials and Guides
• Common Student Facing
Modules/Tools
– Announcements
– Discussion
– E-mail
– Chat
– Assignments, Activities, Co
urse Content, Learning
Modules
• Navigation
• Up/Downloads
– Grade Book
– Quizzing/Testing
Components
• Navigation Features
• Question Types
• Saving Quiz
Progress/Draft
• Notification and
Verification
• Authoring Tools & Content
Creation
– File Uploading
– Authoring Tool
– Grade Book (Instructor
Level)
– Multimedia Content
Handling

98. Other Studies
North Carolina State U – Moodle 2.1
http://accessibility.oit.ncsu.edu/reports/moodle
-2-1/
AccessDL, U of Washington DO-IT
http://www.washington.edu/doit/Resources/acc
essdl.html
OSU & U of Guelph
http://www.uoguelph.ca/tss/projects/LMSacces
sibilitytips.pdf

99. Beware
• Quiz Modules
• Embedded frames/New windows – modules are
frames, printer friendly, TTS need to reset, other apps
open like Adobe Reader plug in
• Whiteboards – not readable, interactable
• Real time chat – literacy
skills, ESL, deaf, pressure, screen reader incompatible
• CMS based e-mail – screen reader
incompatible, mouse driven, have option to use their
private e-mail
• Synchronous challenges of schedule & reaching

100. Neil Squire Foundation: TTS in Moodle
(with pronunciation)
Moodle 2.2, 2.3, 2.4 released 12/14/2012
https://moodle.org/plugins/view.php?plugin=block_tts

101. Web Conferencing
• Chat
• Whiteboards
• Tools
• Navigation & Pod use
• Video/audio content
• Moderator training

102. Conferencing Tools
One Vendor upgrades (Yippee!)
• Menu navigation
• Keyboard shortcuts
• Custom colour of focus frame
• Enhanced log in page
• Focus on dialogue boxes
Screen Reader users can read browser based (HTML) presentations -
Adobe Connect presentations (not stand alone Adobe add
in), GoToMeeting browser presenter provide an alternate link.
Talking Communities.
* Be sure to have
alternatives &
record lectures.

103. Web Conferencing

104. Top 10 is Over
What Have We Learned

105. OTHER CHALLENGES

106. It’s a Process
• Become a knowledgeable Champion
– Accessibility reviews, contribute
• Have at least one executive on board
• Build values built into corporate documents
– UD/UID/Accessibility Policies
– Best practice/guideline documents
• Implementation
– Promote guidelines, provide resources &
examples, train faculty and staff differently

107. Resources
• W3C (WAI-WCAG 2) http://www.w3.org/WAI/
• National Center on Disability & Access to
Education (NCDAE) http://ncdae.org/
• WebAIM http://webaim.org/
• Center for Applied Special Tech (CAST-UDL)
http://cast.org
• Mobile Web Best Practice 1.0 (W3C)
http://www.w3.org/TR/mobile-bp/#TESTING
• National Center for Accessible Media (NCAM)
http://ncam.wgbh.org/

108. My Guru’s
• Simply Accessible
http://simplyaccessible.com/
• SSBBart Group
https://www.ssbbartgroup.com/
• Accessibil-IT Inc. http://www.accessibilit.com/
– Karen McCall & Adam Spencer
• Terrill Thompson & U of Washington DO-IT
http://terrillthompson.com/blog/
• http://www.washington.edu/doit/

109. The longer you wait, the more it costs
to change your mind…
Derek Featherstone, Accessibility Conference 2013, Guelph, ON