CMS 115: Creating Accessible MSU Web Content
Download as PPTX, PDF1 like580 views
The document provides an introduction to web accessibility and universal design, emphasizing the importance of creating websites that allow access for all users, including those with disabilities. It outlines various categories of disabilities, best practices for web accessibility, and the use of assistive technologies, along with guidelines for implementing universal design principles. The document also details practical tips such as using descriptive alt text, proper headings, meaningful link text, and ensuring high color contrast.
CMS 115: Creating Accessible MSU Web Content
- 1. Introduction to Universal Design and Web
- 2. Your website Your potential visitor
- 3. You have just excluded this person from seeing your website.
- 4. Accessibility is our moral imperative What if… …they need the information on your site for a life- or-death reason? …they cannot complete their required homework without this website? …this is your big donor to save your lab?
- 5. Training Overview What we’ll discuss today: 1. What is Web Accessibility and Universal Design? 2. Best practices you can use everyday to make your content accessible to all. 3. How to use our new Accessibility Scanner to fix your accessibility errors.
- 6. Web Accessibility “The inclusive practice of removing barriers that prevent interaction with, or access to websites, by people with disabilities.” Wikipedia
- 7. Question What categories of disabilities do you know? (Hint: there are 4 main categories)
- 8. 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
- 9. Percentage of disabled users in the USA? 20%
- 10. Assistive technology “Assistive technology promotes greater independence by enabling people to perform tasks that they were formerly unable to accomplish, or had great difficulty accomplishing.” Wikipedia
- 11. 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 • Transcripts • Captions Motor/Mobility Disabilities • Alternative keyboards/input devices • Eye gaze tracking • Voice Activation Cognitive Disabilities • Screen readers • Screen overlays • Augmentative communication aids
- 12. Why Universal Design? Designing for everyone from the beginning, not accommodating as an after thought. Accommodation vs Universal Design
- 13. Accommodation
- 14. Universal Design
- 15. Why Universal Design? Designing for everyone from the beginning, not accommodating as an after thought. How?
- 16. The Universal Design Cheatsheet 1. Image description (alt text) on images = “what would you tell someone if you could not show the image?” 2. Headings are important! Don’t fake them with bold text 3. Link text should make sense on its own. click here = FAIL 4. Color. Do not rely on color alone to establish meaning 5. Convert documents to webpages. Use HTML pages, not PDFs, DOCX, PPT… 6. Transcripts must be used on videos and audio 7. Color contrast greater than 4.5 to 1. Contrast FAIL.
- 17. Image Description (alt text) • Read by a screen reader when the image is selected. • Displays if an image does not load.
- 18. General Alt Text Rule What would you tell someone if you could not show the image? (The “show-and-tell rule”)
- 19. What would you write as the image description?
- 20. What about this image?
- 21. Or this? Hint: Adding text to the actual page can be a good idea, too.
- 22. Headings are important • Headings create a natural nesting of content on a web page. An Example Heading 1 (your page title!) • Heading 2 – Heading 3 • Heading 2 – Heading 3 • Heading 4 – Heading 3
- 23. • Over 65% of people using assistive technologies use headings! • Using headings, all users can "scan" a webpage by the headings and quickly find their desired content.
- 24. 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.
- 25. Links: write good ones! BAD LINKS YOU SHOULD NEVER EVER DO. • Click here • here • Follow this link • Link • Go • …others?
- 26. Links: write good ones! • Screen reader users scan by links only, so they must make sense on their own out of context. • All users give pause before following links which aren't clear of their operation or destination.
- 27. Bad 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.
- 28. Bad 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.
- 29. That was not very helpful. Let’s try some alternative content and link text!
- 30. Good 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.
- 31. Good 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.
- 32. Color • Don't rely on color alone to convey meaning.
- 33. • 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.
- 34. Sample Color Blindness Test
- 35. Normal
- 36. Protanopia (red - green)
- 37. Tritanopia (blue - yellow)
- 38. 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.
- 39. Converting Documents to Webpages • Web pages are accessible when created in our CMS – Documents could be a download link on the page. • Documents cannot just be stuck on a webpage as a download. • Some Document formats: – PDF – DOC – EXCEL – POWERPOINT
- 40. Video and Audio 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.
- 41. 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.
- 42. • 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.
- 43. Color Contrast 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. 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.
- 44. • Favor high-contrast web designs. – 4.5 to 1 is a good benchmark • (3 to 1 for large text) – How do I know? Use WebAIM Color Contrast Checker • Those who have trouble with colors can convert or switch to high-contrast color schemes in their browsers.
- 45. USING MSU'S NEW ACCESSIBILITY SCANNER
- 48. What questions do you have?
- 49. Thank you! Justin W. Arndt email: justin.arndt@montana.edu Open Support Sessions in our office each week on our website montana.edu/web