Access for All: Digital Accessibility 101 (updated)
2 likes103 views
The document discusses digital accessibility, highlighting its importance for individuals with various disabilities and how it benefits everyone. It outlines key considerations for ensuring content is perceivable, operable, understandable, and robust (POUR), and provides practical tips for improving accessibility, such as using appropriate contrast, clear structure, and captions. Additionally, it addresses social media accessibility practices, emphasizing the need for descriptive text and proper media handling.
![@jodiarlyn @heyjustkatie #AccessForAll
Social Media Best Practices
● Hashtag using camel case, for example: #AccessForAll
● Most popular platforms have features to manually add
alternative text to images… but you may have to turn it on!
● Add context before media links, for example: [VIDEO]
● Avoid flashing or fast moving animated GIFs or videos
● Open captions work best for social media sharing](https://image.slidesharecdn.com/accessforalldigitalaccessibility1011-201102210203/85/Access-for-All-Digital-Accessibility-101-updated-38-320.jpg)
Access for All: Digital Accessibility 101 (updated)
- 1. Access For All Digital Accessibility 101 @jodiarlyn @heyjustkatie #AccessForAll
- 2. Nice to meet you. 👋
- 4. Wait... ✋
- 7. What does disability look like?
- 8. Using voice over features on a mobile device
- 9. Using sign language to communicate.
- 10. It may not look like anything at all.
- 11. Persona Spectrum © Microsoft Design 2016 (CC BY-NC-ND)
- 12. How can people interact with digital content?
- 13. @jodiarlyn @heyjustkatie #AccessForAll Visual Impairment ● Screen readers ● Screen magnifiers ● Contrast changes ● Braille devices
- 14. @jodiarlyn @heyjustkatie #AccessForAll Motor Impairment ● Keyboard navigation ● Voice input ● Eye control
- 15. @jodiarlyn @heyjustkatie #AccessForAll Auditory Impairment ● Video captions ● Audio transcripts
- 16. @jodiarlyn @heyjustkatie #AccessForAll Cognitive Impairment ● Clear and organized content ● Text-to-speech ● Captions and transcripts ● Font type and sizing ● Controls for animated content
- 19. What can I do?
- 20. Is it poor content?
- 21. Is it P.O.U.R. content?
- 23. @jodiarlyn @heyjustkatie #AccessForAll Is it P.O.U.R. Content? ● Are you using appropriate alternative text, sufficient color contrast, and not using color to convey meaning? ● Can users interact with all parts of your content? ● Is your content clearly written and presented following an organized structure? ● Does your content work across multiple devices?
- 24. Where do I start?
- 25. @jodiarlyn @heyjustkatie #AccessForAll Check These First... ● Color and contrast ● Contextual links ● Content structure ● Image descriptions ● Media captions and transcripts
- 26. @jodiarlyn @heyjustkatie #AccessForAll Color and Contrast ● Contrast ratio for text elements should be 4.5:1 ● Looking good together is not the same as being accessible ● Don’t rely on color alone to convey meaning
- 27. Red-green color vision defects
- 28. @jodiarlyn @heyjustkatie #AccessForAll Contextual Links ● Avoid non-descriptive text like “click here” or “read more” ● Avoid links with too much text ● When linking to digital media, use the file type and size, for example: accessibility best practices (PDF: 3.2 MB)
- 29. Multiple “click here” links is like having multiple unlabeled doors
- 30. @jodiarlyn @heyjustkatie #AccessForAll Content Structure ● Use headings for documents, webpages, and emails to apply readable structure for users and screen readers ● Headings should always descend in numerical order ● Heading styles should never be applied for aesthetics only
- 31. The Avengers Director Joss Whedon’s 2012 film depicts Earth’s mightiest heroes who come together and learn to fight as a team to stop the mischievous Loki and his alien army from enslaving humanity. The Six Original Avengers The six original Avengers are: 1. Iron Man 2. Captain America 3. Black Widow 4. Thor 5. The Hulk 6. Hawkeye Cast Robert Downey Jr. as Tony Stark/ Iron Man A self-described genius, billionaire, playboy, and philanthropist with an electromechanical suit of armor of his own invention. Chris Evans as Steve Rogers/ Captain America A World War II veteran who was enhanced to the peak of human physicality by an experimental serum and frozen in suspended animation before waking up in the modern world. Scarlett Johansson as Natasha Romanoff/ Black Widow Romanoff is a spy and an expert hand-to-hand combatant, trained in the Red Room from childhood. She eventually becomes part of the counter-terrorism agency S.H.I.E.L.D. (Strategic Homeland Intervention Enforcement and Logistics Division) as a highly trained spy. Chris Hemsworth as Thor The crown prince of Asgard, based on the Norse mythological deity. Thor is known as the “God of Thunder,” and is one of the most powerful of the Asgardians, an alien civilization with long ties to Earth, who are therefore considered by some on Earth to be gods. Mark Ruffalo as Bruce Banner/ The Hulk A genius scientist who, because of exposure to gamma radiation, transforms into a monster when enraged or agitated. Jeremy Renner as Clint Barton/ Hawkeye A master archer working as an agent for S.H.I.E.L.D. H2 Heading H3 Heading H1 Heading Example of properly nested headings
- 32. ● The Avengers ○ The Six Original Avengers ○ Cast ■ Robert Downey Jr. as Tony Stark/ Iron Man ■ Chris Evans as Steve Rogers/ Captain America ■ Scarlett Johansson as Natasha Romanoff/ Black Widow ■ Chris Hemsworth as Thor ■ Mark Ruffalo as Bruce Banner/ The Hulk ■ Jeremy Renner as Clint Barton/ Hawkeye Example of using an outline to organize headings
- 33. @jodiarlyn @heyjustkatie #AccessForAll Image Descriptions ● Don’t use images of text ● All images should have alternative text that conveys image meaning in relation to the content ● Decorative images can be marked as null (how this is done may vary depending on the platform you use)
- 34. © Gage Skidmore 2014 (CC BY-SA 2.0)
- 35. @jodiarlyn @heyjustkatie #AccessForAll Media Captions and Transcripts ● Videos should have closed or open captions ● Captions should indicate speakers, what is said, and any relevant audio cues ● Audio-only files should have a full transcript
- 36. Example of good video captioning
- 37. But what about accessibility and social media?
- 38. @jodiarlyn @heyjustkatie #AccessForAll Social Media Best Practices ● Hashtag using camel case, for example: #AccessForAll ● Most popular platforms have features to manually add alternative text to images… but you may have to turn it on! ● Add context before media links, for example: [VIDEO] ● Avoid flashing or fast moving animated GIFs or videos ● Open captions work best for social media sharing
- 40. Digital accessibility benefits everyone.Not just those with disabilities.
- 41. Please be a good digital citizen.
- 42. What questions do you have?
- 43. Thank you! 🙌