Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
CMS 210
Introduction to Web Accessibility
One web for all!
INTRODUCTION
What is web accessibility?
Web accessibility refers to
removing barriers that
prevent people from
successfully reaching and
interacting with web
mate...
Accommodation
Universal design
• Addresses the larger issues of usability by
making things easier for everyone.
– Reduce fatigue
– Increase speed
– Decre...
To think about
• 8.5% of the population has a disability that
affects computer use.
– Excluding cognitive/learning disabil...
• How could not having access to the internet
have a negative impact on lives?
Experiences of students
with disabilities
The students in the following video
share some of their experiences with
the web...
Assistive technology
• Who here uses assistive technology?
Categories of disabilities (WebAim)
• Visual
– Blindness, low vision, color-blindness
• Hearing
– Deafness and hard-of-hea...
Assistive Technologies and the Web
Disability Assistive Technologies
Blindness • Screen readers
• Refreshable Braille devi...
What are screen readers?
“Screen readers are audio interfaces. Rather
than displaying web content visually for users in
a ...
Mac OSX VoiceOver Demo
Demo of UCSR Student Affairs
homepage.
Youtube
IMAGES
Let's start with the obvious: blind people can't see images.
• By itself, an image is meaningless to a blind
person because screen readers can read only
text.
Image description (alt text)
• Read by a screen reader when the image is
selected.
• Displays if an image does not load.
Rule of thumb
• What text would you use if you could not use
the image in 255 characters or less.
What is the image description?
What about for this?
Or this?
COLOR
Unfortunately not all people can see colors.
• Completely blind people cannot see any
colors.
• People with low vision may be able to see
some or most colors but they ...
Sample Color Blindness Test
Normal
Protanopia (red - green)
Tritanopia (blue - yellow)
Moral of the story
• Don't rely on color alone to convey meaning.
Example
Bad Example Good Example
Important: Midterms are due
on my desk by 5pm Thursday
February 26, 2017.
Midterms are du...
CONTRAST
Colors should be chosen that don't make reading difficult.
• It is hard for some people to view text content
if the color and brightness of the text are too
similar to the backgroun...
Is the text below easy to read?
• Highest contrast is white against black or black
against white.
– Favor high-contrast web designs.
• Many people invert ...
Normal
Inverted
High contrast (yellow on black)
VIDEO & AUDIO
Not every user can see video or hear audio.
Closed captioning
• If you are deaf you won't be able to hear what
people are saying or what is going on.
• Fortunately, y...
• Watch out for YouTube’s auto-captioning.
• Enter your own captions on YouTube.
Source: PEATWorks
Closed Caption Example
If captions are not already turned on in
your browser, you may need to click on
the "CC" (Closed Ca...
Transcripts
• The only way to make video or audio content
accessible to someone who is both deaf and
blind is via a video ...
Video Transcript Example:
[Skiing guide (Jeff) calling out as he skis down the hill with a blind skier following him]: Tur...
• If you must choose between captions and
transcripts do transcripts.
• A transcript can be:
– Read by a screen reader.
– ...
HEADINGS
Web pages need to be easily navigable.
• When trying to find information on a lengthy
web page, what are you most likely to do first?
– Use “Find”
– Use Headings...
• Over 65% of people using assistive
technologies use headings!
• Screen reader users must listen to web
content and can't...
• Headings create a natural nesting of content
on a web page.
• Heading 2
– Heading 3
• Heading 2
– Heading 3
• Heading 4
...
• Heading 1 is reserved for the page title.
– Use 2, 3, 4, 5, 6.
• Do not fake a heading, make a heading!
Examples
Bad Example
Manually Bolded Text:
Lorem ipsum dolor sit amet,
consectetur adipiscing elit.
Manually Bolded Text:
...
LINKS
Where does the link go?
• Before clicking on a link, do you know where it
will take you?
– Make sure that the link text accurately describes
the d...
Example (sighted person)
Data from the prototype, which bears a
logo Bozeman second-graders designed, is being
transmitted...
Example (screen reader)
Data from the prototype, which bears a
logo Bozeman second-graders designed, is being
transmitted ...
• That was not very helpful. Let’s try some
alternative content and link text!
“Fixed” Example (sighted person)
Data from the prototype, which bears a
logo Bozeman second-graders designed, is being
tra...
“Fixed” Example (screen reader)
Data from the prototype, which bears a
logo Bozeman second-graders designed, is being
tran...
TABLES
Tabular data isn’t just for the sighted.
• Blind users can't see a table’s visual
organization.
• Without using header cells and data cells
screen readers will jus...
Moral of the story
• Building accessible tables is complicated.
• Use the available table snippets!
Example
Exam 1 Midterm Exam 3 Final
John 79 98 92 84
Jane 87 85 81 75
Mary 56 76 82 91
Henry 33 32 33 39
Spring 2017 Exam ...
• This is how a screen reader would read the
previous example:
– With proper header markup:
• “John, Exam 1 79, Midterm 98...
PDF DOCUMENTS
PDF files need to be accessible too.
Tagged PDF
• PDFs are far more accessible than MS Office
docs such as Word and PowerPoint.
• Add markup to PDF files in mu...
• It is a lot of work to make a PDF accessible.
Remember
• Web pages are infinitely more accessible and
you already know how to make one!
– PDF could be a download link o...
• More Information on PDFs:
– Accessibility and PDFs (Adobe)
– WebAIM cheatsheets
– Rich Media Accessibility
ADDITIONAL INFORMATION
Testing
• The Web Accessibility Evaluation Tool (WAVE)
can help audit a site after an initial
development pass is complete...
Accessibility Principles
According to the WCAG 2.0, web content must
be the following in order to be accessible:
• Perceiv...
• Perceptible, but
also
comprehensible
content.
• Compatible
across multiple
platforms
• Mouse,
keyboard, and
other input
...
The Web Accessibility Initiative
• The World Wide Web Consortium, or W3C, is
the group that manages the technical
specific...
Legal Requirements and Laws
• The Americans with Disabilities Act (ADA)
– Language regarding "places of public
accommodati...
Takeaways
• Write sensible image descriptions.
• Do not fake a heading, make a heading.
• Use headings in order 2, 3, 4, e...
Thank you
• Be sure to check out our Web Accessibility
Help docs.
Try for yourselves: When you get back to your
desks try ...
Upcoming SlideShare
Loading in …5
×

CMS 210: Introduction to Web Accessibility

277 views

Published on

Slides for the web accessibility training offered by Web & Digital Communications.

Published in: Education
  • Be the first to comment

CMS 210: Introduction to Web Accessibility

  1. 1. CMS 210 Introduction to Web Accessibility One web for all!
  2. 2. INTRODUCTION What is web accessibility?
  3. 3. Web accessibility refers to removing barriers that prevent people from successfully reaching and interacting with web material.
  4. 4. Accommodation
  5. 5. Universal design
  6. 6. • Addresses the larger issues of usability by making things easier for everyone. – Reduce fatigue – Increase speed – Decrease errors – Decrease learning time – Etc. Source: UsabilityFirst
  7. 7. To think about • 8.5% of the population has a disability that affects computer use. – Excluding cognitive/learning disabilities, color blindness, etc.
  8. 8. • How could not having access to the internet have a negative impact on lives?
  9. 9. Experiences of students with disabilities The students in the following video share some of their experiences with the web and accessibility. Youtube
  10. 10. Assistive technology • Who here uses assistive technology?
  11. 11. Categories of disabilities (WebAim) • Visual – Blindness, low vision, color-blindness • Hearing – Deafness and hard-of-hearing • Motor – No mouse, slow response time, limited fine motor control • Cognitive – Learning disabilities, distractibility, inability to remember or focus on large amounts of information
  12. 12. Assistive Technologies and the Web Disability Assistive Technologies Blindness • Screen readers • Refreshable Braille devices Low Vision • Screen enlargers • Screen readers Color Blindness • Color enhancement overlays or glasses Deafness • Captions • Transcripts Motor/Mobility Disabilities • Alternative keyboards/input devices • Eye gaze tracking • Voice Activation Cognitive Disabilities • Screen readers • Screen overlays • Augmentative communication aids
  13. 13. What are screen readers? “Screen readers are audio interfaces. Rather than displaying web content visually for users in a "window" or screen on the monitor, screen readers convert text into synthesized speech so that users can listen to the content.” WebAIM
  14. 14. Mac OSX VoiceOver Demo Demo of UCSR Student Affairs homepage. Youtube
  15. 15. IMAGES Let's start with the obvious: blind people can't see images.
  16. 16. • By itself, an image is meaningless to a blind person because screen readers can read only text.
  17. 17. Image description (alt text) • Read by a screen reader when the image is selected. • Displays if an image does not load.
  18. 18. Rule of thumb • What text would you use if you could not use the image in 255 characters or less.
  19. 19. What is the image description?
  20. 20. What about for this?
  21. 21. Or this?
  22. 22. COLOR Unfortunately not all people can see colors.
  23. 23. • Completely blind people cannot see any colors. • People with low vision may be able to see some or most colors but they may be difficult to distinguish. • People with color-blindness – May be able to see most colors just fine. – May not be able to distinguish certain combinations of colors, such as reds and greens.
  24. 24. Sample Color Blindness Test
  25. 25. Normal
  26. 26. Protanopia (red - green)
  27. 27. Tritanopia (blue - yellow)
  28. 28. Moral of the story • Don't rely on color alone to convey meaning.
  29. 29. Example Bad Example Good Example Important: Midterms are due on my desk by 5pm Thursday February 26, 2017. Midterms are due on my desk by 5pm Thursday February 26, 2017.
  30. 30. CONTRAST Colors should be chosen that don't make reading difficult.
  31. 31. • It is hard for some people to view text content if the color and brightness of the text are too similar to the background behind the text.
  32. 32. Is the text below easy to read?
  33. 33. • Highest contrast is white against black or black against white. – Favor high-contrast web designs. • Many people invert or switch to high-contrast color schemes in their browsers.
  34. 34. Normal
  35. 35. Inverted
  36. 36. High contrast (yellow on black)
  37. 37. VIDEO & AUDIO Not every user can see video or hear audio.
  38. 38. Closed captioning • If you are deaf you won't be able to hear what people are saying or what is going on. • Fortunately, you can add video closed captioning.
  39. 39. • Watch out for YouTube’s auto-captioning. • Enter your own captions on YouTube. Source: PEATWorks
  40. 40. Closed Caption Example If captions are not already turned on in your browser, you may need to click on the "CC" (Closed Caption) icon after the video starts to see the captions. Youtube
  41. 41. Transcripts • The only way to make video or audio content accessible to someone who is both deaf and blind is via a video transcript. • If you already have captions use them to start building your transcript.
  42. 42. Video Transcript Example: [Skiing guide (Jeff) calling out as he skis down the hill with a blind skier following him]: Turn a left! Turn a right! Turn a left! Turn a right! Turn a left! Turn a right! [Blind Skier (Erik Weihenmayer)]: I think in a blind person's daily life they don't get speed and that's what I think the most exciting part of skiing is when you're blind is that you're really moving fast When you're blind, you're reacting to what you're feeling under your feet So you're literally reacting instantaneously It's very exciting or terrifying depending on how you look at life [Music begins; Jeff and Erik skiing down the hill] [Jeff]: Turn a left! Turn a right! Turn a left! Turn a right!
  43. 43. • If you must choose between captions and transcripts do transcripts. • A transcript can be: – Read by a screen reader. – Converted into Braille, to be read on a refreshable Braille output device. – Translated into other languages.
  44. 44. HEADINGS Web pages need to be easily navigable.
  45. 45. • When trying to find information on a lengthy web page, what are you most likely to do first? – Use “Find” – Use Headings – Read the page – Etc.
  46. 46. • Over 65% of people using assistive technologies use headings! • Screen reader users must listen to web content and can't just glance at a page.
  47. 47. • Headings create a natural nesting of content on a web page. • Heading 2 – Heading 3 • Heading 2 – Heading 3 • Heading 4 – Heading 3
  48. 48. • Heading 1 is reserved for the page title. – Use 2, 3, 4, 5, 6. • Do not fake a heading, make a heading!
  49. 49. Examples Bad Example Manually Bolded Text: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Manually Bolded Text: Donec sem nisi, condimentum id lorem accumsan, imperdiet. Manually Bolded Text: Fusce at nisi pellentesque, lobortis sapien sed, vehicula ipsum. Manually Bolded Text: Maecenas in nulla sit amet nunc cursus pulvinar et. Good Example Heading 2 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Heading 3 Donec sem nisi, condimentum id lorem accumsan, imperdiet. Heading 2 Fusce at nisi pellentesque, lobortis sapien sed, vehicula ipsum. Heading 3 Maecenas in nulla sit amet nunc cursus pulvinar et.
  50. 50. LINKS Where does the link go?
  51. 51. • Before clicking on a link, do you know where it will take you? – Make sure that the link text accurately describes the destination or purpose of the link. • Many screen reader users will use the [ Tab ] key to go through and read the links on the page out of context.
  52. 52. Example (sighted person) Data from the prototype, which bears a logo Bozeman second-graders designed, is being transmitted to MSU on a weekly basis, allowing LaMeres and his team to measure the computer's performance. The prototype will return to MSU for final analysis after six months of being tested on the ISS. More information can be found here.
  53. 53. Example (screen reader) Data from the prototype, which bears a logo Bozeman second-graders designed, is being transmitted to MSU on a weekly basis, allowing LaMeres and his team to measure the computer's performance. The prototype will return to MSU for final analysis after six months of being tested on the ISS. More information can be found here.
  54. 54. • That was not very helpful. Let’s try some alternative content and link text!
  55. 55. “Fixed” Example (sighted person) Data from the prototype, which bears a logo Bozeman second-graders designed, is being transmitted to MSU on a weekly basis, allowing LaMeres and his team to measure the computer's performance. The prototype will return to MSU for final analysis after six months of being tested on the ISS. Read more on LaMeres and the ISS tests.
  56. 56. “Fixed” Example (screen reader) Data from the prototype, which bears a logo Bozeman second-graders designed, is being transmitted to MSU on a weekly basis, allowing LaMeres and his team to measure the computer's performance. The prototype will return to MSU for final analysis after six months of being tested on the ISS. Read more on LaMeres and the ISS tests.
  57. 57. TABLES Tabular data isn’t just for the sighted.
  58. 58. • Blind users can't see a table’s visual organization. • Without using header cells and data cells screen readers will just read the content of a data cell without adding any context.
  59. 59. Moral of the story • Building accessible tables is complicated. • Use the available table snippets!
  60. 60. Example Exam 1 Midterm Exam 3 Final John 79 98 92 84 Jane 87 85 81 75 Mary 56 76 82 91 Henry 33 32 33 39 Spring 2017 Exam Scores
  61. 61. • This is how a screen reader would read the previous example: – With proper header markup: • “John, Exam 1 79, Midterm 98, Exam 3 92, Final 84…” – Without proper header markup: • “John 79, 98, 92, 84…”
  62. 62. PDF DOCUMENTS PDF files need to be accessible too.
  63. 63. Tagged PDF • PDFs are far more accessible than MS Office docs such as Word and PowerPoint. • Add markup to PDF files in much the same way that you add markup to HTML files. – Use Adobe Acrobat Pro. • Mark text as headings, paragraphs, lists, tables, and other semantic elements, etc.
  64. 64. • It is a lot of work to make a PDF accessible.
  65. 65. Remember • Web pages are infinitely more accessible and you already know how to make one! – PDF could be a download link on the page.
  66. 66. • More Information on PDFs: – Accessibility and PDFs (Adobe) – WebAIM cheatsheets – Rich Media Accessibility
  67. 67. ADDITIONAL INFORMATION
  68. 68. Testing • The Web Accessibility Evaluation Tool (WAVE) can help audit a site after an initial development pass is complete. • Try using the site with a screen reader and the monitor turned off.
  69. 69. Accessibility Principles According to the WCAG 2.0, web content must be the following in order to be accessible: • Perceivable • Operable • Understandable • Robust
  70. 70. • Perceptible, but also comprehensible content. • Compatible across multiple platforms • Mouse, keyboard, and other input devices. • Some users rely on hearing or touch. Perceivable Operable UnderstandableRobust
  71. 71. The Web Accessibility Initiative • The World Wide Web Consortium, or W3C, is the group that manages the technical specifications for HTML, XML, and other web technologies. • In 1996, the W3C formed the Web Accessibility Initiative (WAI) to create technical guidelines for making web content more accessible to people with disabilities.
  72. 72. Legal Requirements and Laws • The Americans with Disabilities Act (ADA) – Language regarding "places of public accommodation." • Section 508 of the Rehabilitation Act – 1194.21 — Software applications and operating systems. – 1194.22 — Web-based intranet and internet information and applications. • 21st Century Communications and Video Accessibility Act (CVAA).
  73. 73. Takeaways • Write sensible image descriptions. • Do not fake a heading, make a heading. • Use headings in order 2, 3, 4, etc.. • Make link text that makes sense when read alone.
  74. 74. Thank you • Be sure to check out our Web Accessibility Help docs. Try for yourselves: When you get back to your desks try using your website with a screen reader and the monitor turned off.

×