When we create websites, documents, and media with accessibility in mind, we not only provide access for those with disabilities but improve the overall experience for all users. We will provide a basic overview of digital accessibility, why digital inclusion matters, and how to incorporate best practices into your day-to-day content creation. Presentation for the 2020 College Media Association Conference Created by Jodi Goldberg and Katie Santo

1. Access For All
Digital Accessibility 101
@jodiarlyn @heyjustkatie #AccessForAll

2. Nice to meet you. 👋

3. What is digital
accessibility?

4. Wait... ✋

5. What is disability?

6. Ability(plus)
+
Barrier
=
Disability

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

17. Ability
+
Barrier
=
Disability

18. Digital accessibility
benefits everyone.

19. What can I do?

20. Is it poor content?

21. Is it P.O.U.R. content?

22. Perceivable
Operable
Understandable
Robust

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

39. Instagram example

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! 🙌