CMS 210: Introduction to Web Accessibility
Download as PPTX, PDF2 likes874 views
This document provides an introduction to web accessibility. It discusses what web accessibility is and how universal design makes things easier for everyone by reducing fatigue, increasing speed, decreasing errors and learning time. It notes that 8.5% of the population has a disability affecting computer use and how lack of internet access can negatively impact lives. It then covers various categories of disabilities and assistive technologies. The rest of the document discusses specific accessibility guidelines for images, color, contrast, video and audio, headings, links, tables and PDFs. It emphasizes the importance of alternative text, high contrast, captions, transcripts, proper HTML structure and making sure content is understandable without its visual design.
![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!](https://image.slidesharecdn.com/cms210-introtowebaccessibilityv1-170131175041/85/CMS-210-Introduction-to-Web-Accessibility-42-320.jpg)
![• 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.](https://image.slidesharecdn.com/cms210-introtowebaccessibilityv1-170131175041/85/CMS-210-Introduction-to-Web-Accessibility-51-320.jpg)
CMS 210: Introduction to Web Accessibility
- 1. CMS 210 Introduction to Web Accessibility One web for all!
- 2. INTRODUCTION What is web accessibility?
- 3. Web accessibility refers to removing barriers that prevent people from successfully reaching and interacting with web material.
- 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. To think about • 8.5% of the population has a disability that affects computer use. – Excluding cognitive/learning disabilities, color blindness, etc.
- 8. • How could not having access to the internet have a negative impact on lives?
- 9. Experiences of students with disabilities The students in the following video share some of their experiences with the web and accessibility. Youtube
- 10. Assistive technology • Who here uses assistive technology?
- 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. 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. 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. Mac OSX VoiceOver Demo Demo of UCSR Student Affairs homepage. Youtube
- 15. IMAGES Let's start with the obvious: blind people can't see images.
- 16. • By itself, an image is meaningless to a blind person because screen readers can read only text.
- 17. Image description (alt text) • Read by a screen reader when the image is selected. • Displays if an image does not load.
- 18. Rule of thumb • What text would you use if you could not use the image in 255 characters or less.
- 19. What is the image description?
- 20. What about for this?
- 21. Or this?
- 22. COLOR Unfortunately not all people can see colors.
- 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. Sample Color Blindness Test
- 25. Normal
- 26. Protanopia (red - green)
- 27. Tritanopia (blue - yellow)
- 28. Moral of the story • Don't rely on color alone to convey meaning.
- 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. CONTRAST Colors should be chosen that don't make reading difficult.
- 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. Is the text below easy to read?
- 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. Normal
- 35. Inverted
- 36. High contrast (yellow on black)
- 37. VIDEO & AUDIO Not every user can see video or hear audio.
- 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. • Watch out for YouTube’s auto-captioning. • Enter your own captions on YouTube. Source: PEATWorks
- 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. 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. 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. • 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. HEADINGS Web pages need to be easily navigable.
- 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. • 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. • Headings create a natural nesting of content on a web page. • Heading 2 – Heading 3 • Heading 2 – Heading 3 • Heading 4 – Heading 3
- 48. • Heading 1 is reserved for the page title. – Use 2, 3, 4, 5, 6. • Do not fake a heading, make a heading!
- 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. LINKS Where does the link go?
- 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. 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. 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. • That was not very helpful. Let’s try some alternative content and link text!
- 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. “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. TABLES Tabular data isn’t just for the sighted.
- 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. Moral of the story • Building accessible tables is complicated. • Use the available table snippets!
- 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. • 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. PDF DOCUMENTS PDF files need to be accessible too.
- 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. • It is a lot of work to make a PDF accessible.
- 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. • More Information on PDFs: – Accessibility and PDFs (Adobe) – WebAIM cheatsheets – Rich Media Accessibility
- 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. Accessibility Principles According to the WCAG 2.0, web content must be the following in order to be accessible: • Perceivable • Operable • Understandable • Robust
- 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. 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. 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. 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. 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.