Web Accessibility
Web Accessibility
UD attribute through which people with
disabilities can perceive, understand, navigate,
and interact wit...
Web Content Accessibility Guidelines
(WCAG 2.0)
P O U R
Web Content Accessibility Guidelines
(WCAG 2.0)
P O U R
Perceivable
Operable
Understandable
Robust
MAKE NAVIGATION SIMPLE,
CONSISTENT & ACCURATE
ONE
Navigation - Structure
• Hierarchical view of a
page
• Instead of changing font
size and color
• Each section of a page
• ...
WebAIM Survey: New Webpages
61%17%
13%
2%
7%
Method of finding information on lengthy web
page
Navigate through
headings o...
Headings Facilitate Skimming
Where Should The Headings Go?
Navigation - Clutter
• Be consistent throughout your
course. Use various templates.
Give users a choice.
• Avoid requiring...
WebAIM Survey: Skip To Content
Links
18%
17%
28%
19%
15%
3%
Usage of ‘skip to content’ links
Whenever they're
available
Of...
Skip To Content Links
• Visible so
everyone can
benefit – AT &
Keyboard users
• To main content
• To navigation
• To quick...
Menu System
Objects like menus NEED visual indicator for
mouse hover and keyboard focus
• No focus
• Focus
Drop Down Menus
• In CSS most menus are “display:none”
• Revealed by changing that to display:block using
JavaScript trigg...
ARIA
• The things we create are too complex
• AT needs help so users can predict what
to do
• ARIA makes it possible to su...
MEANINGFUL INFORMATION
TWO
Naming Practices
• Links
• Headings
• Capitalization - 980 MB &
980 mb (millibar) are not
the same. When in doubt
use abbr...
Examples
• Use concise, meaningful text for links.
Like this: Writing Good Link Descriptions
Not this: Click here for info...
DON’T RELY ON SENSORY CUES
THREE
Provide Good Color Contrast
• Black text on a white or light
background is the most
readable.
• Patterns and images behind...
Do Not Use Color to Convey Meaning
• The use of color to convey meaning may result
in your images or information not being...
• Bings
• Screen Flashes
• Floating timers
Ex: “At the tone begin typing”, “The quiz indicator
will turn green”
No Auditor...
Is there a Better Way?
There are two ways to get things done around here. The preferred
method is shown in red.
– your way...
Its OK to use Colour
Colour Contrast Analyzer
• Colour Contrast Analyzer
http://www.visionaustralia.org/business-and-
professionals/digital-acc...
CHOOSE FONTS
FOUR
Choose Fonts Carefully.
• Choose a sans serif font such as Arial
or Helvetica for your text.
• Make sure font sizes are la...
APHont, OpenDyslexic Fonts
APH APHont:
American Printing
House for the Blind
OpenDyslexic font
http://www.bbc.co.u
k/news/...
ALTERNATIVES FOR NON-TEXT
OBJECTS
FIVE
What is non-text?
• Captions & Transcripts for video clips.
WebAIM Tutorial: Captions
• Audio Descriptions for visual elem...
Alt Text – the Decision
• Does text adequately describe the image?
• Captions are not duplication
Alt Text – the Decision
“Diagram of the Carbon Cycle”
• Scientists & students need more
This graphic combines several disability-related
images into a single collage. Braille dots, an eye
chart, finger spelled ...
Multiple Methods of Access:
Download, Stream, Text
Video index
Animation - PHYS 204
Transcript
Captions
• Most players allow
playing of captions
• Easy to do
• Modules for most Web
Conferencing Tools
• Record it so Tr...
Students on Captioning/Decription
Students on Captioning URL - Australia
Captioning Tools & Formats
TTML (e.g., DFXP) is a standard format that is supported by Flash, YouTube,
and various other p...
AID UNDERSTANDING &
ORGANIZATION
SIX
Plain Language
• Helps people with
– Low literacy skills & language proficiency
– Cognitive impairments
– Dyslexia
• Princ...
Chunking Assists Organization/Recall
System concept descriptions provide:
• The missions, features, capabilities and funct...
1st Year Geology Course
Needs Improvement
Flexible Use
• Design accommodates a wide range of
individual preferences and abilities
– Change viewing preference (CSS o...
Forced Design
CSS Disabled
Browser Zoom
Reduce Possibility Of Seizures
• Use flickering sparingly as it make affect
people with photosensitive epilepsy
• Ensure u...
100% KEYBOARD FUNCTIONALITY
SEVEN
Usable from the Keyboard
• Make all functionality usable from the keyboard for
– alternative mice & keyboards
– Voice dict...
GETTING HELP
EIGHT
Getting Help
• clear statements about the institution’s
commitment to accessibility
• Provide a mechanism for students to ...
Refer to DSO for Accommodations
ACCESSIBLE DOCUMENTS
NINE
Who uses Alternate Formats?
• If materials are ineffective how are you going to
use them to teach someone who has challeng...
HTML
• HTML is ideal for providing accessible
documents if done right.
• The use of Cascading Style Sheets (CSS) for
forma...
Recent WebAim Survey (2013)
Most Problematic - VI
Most Benefit – Mobility
• http://webaim.org/
Table Use
• DO NOT use tables for layout use CSS
• Data Tables need Table headings <TH>
• Add Captions at the top and a Ta...
Forms
• Proximity
• AT uses label to find form field
– Screen reader
– TTS
– Voice dictation
• Keyboard accessible (TAB, E...
• A Form
Zoomed
Proximity/instruction
Required/Instruction
• Instructions are more useful when in label
Errors/Alerts
• Usability
• Proximity
• Placement
• ARIA Alerts
Widgets
• dominant paradigm used to be tab to
everything
• much more sophisticated & complex keystroke
requirements requir...
Derek Featherstone
ARIA
• We’ve been creating things that are
semantically meaningless because we don’t
have the things we want to express na...
Why ARIA
• The things we create are too complex
• AT needs help so users can predict what
to do
• ARIA makes it possible t...
HTML 5
• www.html5accessibility.com
• Using ARIA is a technology that helps AT
provide meaning like a bridge between past ...
Identify Web Accessibility Issues
• Use WAVE Tool or FF Toolbar http://wave.webaim.org/?lang=en
• Navigate without a mouse...
Testing HTML
• Browser Plug Ins
• Firefox Web Developer Extension
http://chrispederick.com/work/web-developer/
• Firefox A...
Good Originals Make Good PDF
Similar guidelines apply
• Use Styles in original documents (Word,
PowerPoint)
• When you con...
Tagging an Untagged Document
• To add tags to an untagged document, choose
Tools from the right-hand menu.
• Select Access...
Tags Tree
Other PDF tasks
• Adding alternative text
• Add/Change Tags
• Touchup Reading Order
• Table Inspector
• Form Labels
Convert to PDF (MS Office)
• Proper original - alternative text for images, headings & lists via
Styles, appropriate link ...
MS Office 2010 Accessibility Checker
identifies & repairs
accessibility issues
• Select File> Info>
Check for Issues>
Chec...
Flash
Provide an alternative format – (mp3, HTML)
Or you need to:
• Associate text equivalents with graphic elements
& ove...
Before
• Before
After
• After
CHOOSE CMS/LMS TOOLS
CAREFULLY
TEN
CMS/LMS Accessibility Issues
• Historically LMS do not incorporate UDL (flexible, easy to
use, consistent design, etc.)
• ...
Ohio, Illinois, Indiana 2012
• Ilinois State – Hadi Rangin Blog
http://blog.bargirangin.com/2013/03/a-
comparison-of-learn...
• Login, Configuration, and
Compatibility Testing
• Personalization and
Customization
– Layout Customization
– Styling
– S...
Other Studies
North Carolina State U – Moodle 2.1
http://accessibility.oit.ncsu.edu/reports/moodle
-2-1/
AccessDL, U of Wa...
Beware
• Quiz Modules
• Embedded frames/New windows – modules are
frames, printer friendly, TTS need to reset, other apps
...
Neil Squire Foundation: TTS in Moodle
(with pronunciation)
Moodle 2.2, 2.3, 2.4 released 12/14/2012
https://moodle.org/plu...
Web Conferencing
• Chat
• Whiteboards
• Tools
• Navigation & Pod use
• Video/audio content
• Moderator training
Conferencing Tools
One Vendor upgrades (Yippee!)
• Menu navigation
• Keyboard shortcuts
• Custom colour of focus frame
• E...
Web Conferencing
Top 10 is Over
What Have We Learned
OTHER CHALLENGES
It’s a Process
• Become a knowledgeable Champion
– Accessibility reviews, contribute
• Have at least one executive on boar...
Resources
• W3C (WAI-WCAG 2) http://www.w3.org/WAI/
• National Center on Disability & Access to
Education (NCDAE) http://n...
My Guru’s
• Simply Accessible
http://simplyaccessible.com/
• SSBBart Group
https://www.ssbbartgroup.com/
• Accessibil-IT I...
The longer you wait, the more it costs
to change your mind…
Derek Featherstone, Accessibility Conference 2013, Guelph, ON
Web Accessibility Top 10 - LCC (1/2 day workshop, August 2013)
Web Accessibility Top 10 - LCC (1/2 day workshop, August 2013)
Web Accessibility Top 10 - LCC (1/2 day workshop, August 2013)
Web Accessibility Top 10 - LCC (1/2 day workshop, August 2013)
Web Accessibility Top 10 - LCC (1/2 day workshop, August 2013)
Web Accessibility Top 10 - LCC (1/2 day workshop, August 2013)
Web Accessibility Top 10 - LCC (1/2 day workshop, August 2013)
Web Accessibility Top 10 - LCC (1/2 day workshop, August 2013)
Web Accessibility Top 10 - LCC (1/2 day workshop, August 2013)
Web Accessibility Top 10 - LCC (1/2 day workshop, August 2013)
Upcoming SlideShare
Loading in …5
×

Web Accessibility Top 10 - LCC (1/2 day workshop, August 2013)

552 views

Published on

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.

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
552
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
6
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide
  • Planning online courses with accessibility AND usability in mind can save hours of time down the line. Here is a suggested process for planning your online course. Determine what elements and content you will include in your course. Use outlines or concept maps to plan flow of content. Familiarize yourself and/or seek training to learn what is possible with the course management system you are using. Develop a navigation scheme that is based on your outline or concept map. Consider the other 9 tips below as you develop your content. After you have completed these steps, begin to post content
  • http://webaim.org/projects/screenreadersurvey/
  • DemographicsN. Am 73.1%, Europe 15.4%, Asia 4.8%, Australia and Oceania 3.4%, 1.7% Africa/MiddleEast 1.7%, South America 0.9%, …ResponseI use &quot;skip to content&quot; or &quot;skip to navigation&quot; linksWhenever they&apos;re available22%Often16%Sometimes28%Seldom19%Never10%No Response4%To update the chart, enter data into this table. The data is automatically saved in the chart.http://webaim.org/projects/screenreadersurvey4/
  • Challenging to render well on mobile devices so navigable with structures that expect
  • Colour blindness is a condition where the eyes have trouble distinguishing certain colours. Most people have either red or green colour blindness. Blue colour blindness and monochromatism, a condition in which a person sees only black, white, and grey, are very rare.Most people have mild forms of colour blindness that don&apos;t interfere much with their daily lives. 8% of Caucasian men and less than 1% of Caucasian women have either red or green colour blindness. This condition is rare among people of Asian, First Nations, or African descent. Colour blindness is divided between inherited and acquired kinds.
  • Zoom exercise
  • Use graphs, charts, drawings and photos whenever possible to augment text.Audio captions and video descriptionsTranscripts are acceptable but not optimalbenefit a diverse group of learners (ESL, LD, deaf and hard of hearing, people in noisy env)Alternative text for images with an instructional purposeDo not rely on decorative images to convey meaningful information
  • Requires a bit of thoughtAny editor, interface that allows you to place an image in your document will have an alt text area to fill in. Description of what image is doing on the page not what it is. It needs to relay context. (blogging, LMS, web designer, html editor) important put something in that description b/c screen readers read it. Many law suits of higher ed but commercial companies. The biggest complaint was alt text was missing so users were not able to make sense of site.
  • 4 ways to interact with this OER video from MITCourse webpagedownload mp3 or iTunesU, and Stream via VideoLectures.net
  • I like this page for many reasons.Headings to quickly get to the various sectionsMost importantly the list of links under the video for About, Subtitle/transcripts, Title Index and downloadIt demonstrates the various ways to use the content. (iTunesU, Mp4 download, stream or the course page url) The transcript is readable by screen readers, the Video index allows user to jump to key learning points and the video plays automatically. The player however is not controllable but again screen reader users could use the video index.
  • PHYS 204/302 MIT and AU transcriptsSome OER have transcripts or captions. MIT admits their content is not up to date. Transcripts arrived a year later.Faculty didn’t want to do the maintenance request to upload the transcriptSome cases are portions of video and others are entire video/transcriptWho&apos;s job is it?
  • Rtf file
  • How captioning helpsLD – use of video and audio along with captions boosted student and Wwrit\ing comprehension, vocabulary and learning motivation. Students with learning disabilities appeared to learn better from captioned videos than from print materials on similar topic.Motivation – students are motivated to find and read books on topics covered in captioned videosESL – students who were shown captioned programs performed better on word recognition. Reinforces language learning. http://www.ericdigests.org/pre-9216/closed.htm
  • Active voice, average reader, simple verb tense and base verbsValue of editors in the process, whole approach to design is inclusive
  • Learning objectives example. May want to categorize them according to the skill that you want students to be developing such as critical thinking skills, psychomotor, writing, etc.
  • Not all students can communicate through speech, deaf or hard of hearing. Provide lectures in both text and voice format to accommodate students who have hearing and vision disabilities.Accommodate different learning styles.Inflection and voice coupled with text can add additional layer of meaning and emphasis.Online discussions/lectures (recorded) can be conducted via voice or textHow would this work in DE &amp; self-paced course? (audio recording, uploading of files to forums) Text chat not accessibleStudents can choose from various methods to demonstrate their mastery of content e.g. flexible assessments
  • Structure of the page is still maintained though CSS is disabled. Provide appropriate reading order.
  • This page is similar to the alt text slide but that the CSS is disabled and the page has been zoomed from within the browser. Demonstrating that the font is scalable, content is not lost because of locked design
  • Accessibility note for screen reader users and those who want to use MathPlayer
  • Keep in mind that UD incorporates those accessibility features to minimize the need for expensive accommodations
  • PDF files are only as accessible as their originalsPDFs mad by scanning, Word, PowerPoint, HTML, Alternative formats be posted (HTML, RTF)If you have a PDF document and do not have it in another format, you can get it converted to text by using the Online Conversion Tools provided by Adobe.
  • Remember spacing for larger pointing targetsColourSound volume
  • ChampionsKnowledgeableWilling to conduct accessibility reviewsAwareness workshops
  • Web Accessibility Top 10 - LCC (1/2 day workshop, August 2013)

    1. 1. Web Accessibility
    2. 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. 3. Web Content Accessibility Guidelines (WCAG 2.0) P O U R
    4. 4. Web Content Accessibility Guidelines (WCAG 2.0) P O U R Perceivable Operable Understandable Robust
    5. 5. MAKE NAVIGATION SIMPLE, CONSISTENT & ACCURATE ONE
    6. 6. 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
    7. 7. 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
    8. 8. Headings Facilitate Skimming
    9. 9. Where Should The Headings Go?
    10. 10. 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
    11. 11. 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
    12. 12. Skip To Content Links • Visible so everyone can benefit – AT & Keyboard users • To main content • To navigation • To quick links • Breadcrumb
    13. 13. Menu System Objects like menus NEED visual indicator for mouse hover and keyboard focus • No focus • Focus
    14. 14. 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
    15. 15. 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
    16. 16. MEANINGFUL INFORMATION TWO
    17. 17. Naming Practices • Links • Headings • Capitalization - 980 MB & 980 mb (millibar) are not the same. When in doubt use abbr element. • Discussion Thread Etiquette
    18. 18. 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)
    19. 19. DON’T RELY ON SENSORY CUES THREE
    20. 20. 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.
    21. 21. 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.
    22. 22. • Bings • Screen Flashes • Floating timers Ex: “At the tone begin typing”, “The quiz indicator will turn green” No Auditory or Visual Cues
    23. 23. 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
    24. 24. Its OK to use Colour
    25. 25. 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/
    26. 26. CHOOSE FONTS FOUR
    27. 27. 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).
    28. 28. APHont, OpenDyslexic Fonts APH APHont: American Printing House for the Blind OpenDyslexic font http://www.bbc.co.u k/news/technology- 19734341
    29. 29. ALTERNATIVES FOR NON-TEXT OBJECTS FIVE
    30. 30. 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
    31. 31. Alt Text – the Decision • Does text adequately describe the image? • Captions are not duplication
    32. 32. Alt Text – the Decision “Diagram of the Carbon Cycle” • Scientists & students need more
    33. 33. 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!
    34. 34. Multiple Methods of Access: Download, Stream, Text
    35. 35. Video index
    36. 36. Animation - PHYS 204
    37. 37. Transcript
    38. 38. 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
    39. 39. Students on Captioning/Decription Students on Captioning URL - Australia
    40. 40. 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
    41. 41. AID UNDERSTANDING & ORGANIZATION SIX
    42. 42. 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
    43. 43. 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.
    44. 44. 1st Year Geology Course Needs Improvement
    45. 45. 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
    46. 46. Forced Design
    47. 47. CSS Disabled
    48. 48. Browser Zoom
    49. 49. 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/
    50. 50. 100% KEYBOARD FUNCTIONALITY SEVEN
    51. 51. 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
    52. 52. GETTING HELP EIGHT
    53. 53. 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
    54. 54. Refer to DSO for Accommodations
    55. 55. ACCESSIBLE DOCUMENTS NINE
    56. 56. 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
    57. 57. 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”
    58. 58. Recent WebAim Survey (2013)
    59. 59. Most Problematic - VI
    60. 60. Most Benefit – Mobility • http://webaim.org/
    61. 61. 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
    62. 62. 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)
    63. 63. • A Form
    64. 64. Zoomed
    65. 65. Proximity/instruction
    66. 66. Required/Instruction • Instructions are more useful when in label
    67. 67. Errors/Alerts • Usability • Proximity • Placement • ARIA Alerts
    68. 68. 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
    69. 69. Derek Featherstone
    70. 70. 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
    71. 71. 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
    72. 72. 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/
    73. 73. 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
    74. 74. 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
    75. 75. 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
    76. 76. Tagging an Untagged Document • To add tags to an untagged document, choose Tools from the right-hand menu. • Select Accessibility > Add Tags to Document.
    77. 77. Tags Tree
    78. 78. Other PDF tasks • Adding alternative text • Add/Change Tags • Touchup Reading Order • Table Inspector • Form Labels
    79. 79. 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
    80. 80. 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.
    81. 81. 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)
    82. 82. Before • Before
    83. 83. After • After
    84. 84. CHOOSE CMS/LMS TOOLS CAREFULLY TEN
    85. 85. 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
    86. 86. 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
    87. 87. • 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
    88. 88. 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
    89. 89. 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
    90. 90. 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
    91. 91. Web Conferencing • Chat • Whiteboards • Tools • Navigation & Pod use • Video/audio content • Moderator training
    92. 92. 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.
    93. 93. Web Conferencing
    94. 94. Top 10 is Over What Have We Learned
    95. 95. OTHER CHALLENGES
    96. 96. 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
    97. 97. 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/
    98. 98. 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/
    99. 99. The longer you wait, the more it costs to change your mind… Derek Featherstone, Accessibility Conference 2013, Guelph, ON

    ×