Howdy, I’m Meryl
Photo of Meryl as a toddler wearing a hearing aid on her chest with cords that connect to the earpieces in her ear. She’s cute. What happened to that cutie?
- She / her
- Native Texan 🤠
- Deaf since birth
- Caption Pusher
- Digital marketing
What Are the Takeaways?
- Why #a11y matters
- Images
- Content
- Videos and audio
- Stay vigilant
Accessibility is everyone’s job
Image: A graphic showing heads and shoulders of a diversity of people all connected by lines.
Image source: Pixabay.
Curb Cut Effect
Image is black and white showing an old-timey Ice Cream Good Humors truck with a man in uniform including a hat standing on a curb cut in front of three children.
Accessibility Beyond Disability
- Others use accessibility
- Temporary and situational impairment
- Injuries
- Cognitive
- Atmosphere
- Aging
Accessibility is for EVERYONE
Image: A graphic showing heads and shoulders of a diversity of people all connected by lines.
Image source: Pixabay.
What About Overlays?
No
Nope
No way
Nyet
Nein
Non
いいえ (īe)
לא (loh)
Cha
Ne
OverlayFactSheet.com
Image of Oreo website with an Accessibility Adjustments overlay on top of it.
How to Make Images Accessible
Alternative Text aka ALT Text
<img src=”image.png” alt=”description” />
Img src tells you where the image is located.
Alt description tells you about the image.
Bad Automatic ALT Text
The first photo is from my backyard that’s filled with rocks and dead branches surrounded by snow and a snow person. Automatic ALT text suggested “Tree and snow.” Baloney.
The second image shows two tables with jigsaw puzzle pieces. Automatic ALT text was general with “Indoor.” Not acceptable.
Good ALT Text
- Descriptive yet concise
- What’s relevant?
- Skip “This is an image or GIF of”
- Decorative
ALT Text Example
The image is a screenshot of a Slate headline with clap emojis after every word in the headline that says to stop emphasizing the point by putting clap emojis after every word.
Linked Images
- Treat as link first, not images
- Logos
- Location
- Purpose of link
Caution! Animated GIFs
- Seizures
- Migraines
- Vertigo
- Distraction
Image of caution sign. Image credit: Pixabay.
Animated GIF Example on LinkedIn
Short clip from LinkedIn notifications. One showing “mentioned you in a comment”. The next one showing “liked your comment”. Both have the same animated GIF of a bagel on a moving laptop on repeat.
Animated Avatar Example on LinkedIn
Short clip from LinkedIn of Weekly Search Appearances with different company’s avatars. One company’s avatar is animated. It’s a green circle with a white L that pans in over and over.
Optimize Content Accessibility
Emojis: Love — Hate
😄 🙏🏽
Party Time!
It’s party time! 🎉🎉🎉
Names
🍕✨Jane😘🌍
Tweet Example
Short clip of a Tweet that begins with “10 countries where teachers are paid the most:” and it lists the 10 countries plus their flags.
I’m Sorry for This Slide
Thankfully 🙏 I 🙏 never 🙏 do 🙏 this.
#Hashtags aka Number
#cowboysuk
Use Camel Case
#CowboysUK
Another example
#penismighty
#PenIsMighty
Image: Hashtag drawn out on a sandy beach. Iamge credit: Pixabay
<title>Title</title>
Image: Here are three tabs from different pages on one website. They all start with the same thing: “Social media Management Sof …”
Headers
A. Fruit 1. Apples a. Gala b. Honeycrisp 2. Oranges B. Vegetables
<h1>Headers</h1>
<h1>Fruit</h1> <h2>Apples</h2> <h3>Gala</h3> <h3>Honeycrisp</h3> <h2>Oranges</h2>
Links
- Underline
- Color and contrast
- Skip linking full URLs
- Click here. Read more.
- Duplicated linked text
Screen Reader Image
Image: This image shows a screen reader “Elements list: Links” in front of a webpage. The list of links contains many duplicates. Two of everything and at least four “Learn more” links.
On the webpage, you can only see the bottom as the screenreader has the rest of it covered. There are three services in boxes:
“Emergency Services” and “Learn More” appear in the same box.
“Finance” and “Learn More” appear in the same box.
“Health” and “Learn More” appear in the same box.
Colors
- Convey information 🚫
- Contrast
Image showing “Pink” highlight in pink, “Grey” highlighted in grey, “Blue” highlighted in blue, and “Yellow” highlighted in yellow.
Hodgepodge
- Alignment
- Whitespace
- Short paragraphs
- Blank lines between paragraphs
- Bullets
- $5 words
Justified Text
Image showing example text that’s justified.
Left-Aligned Text
Image showing the same example text from the previous image. In this case, the text is left-aligned and broken into two readable paragraphs.
Ensure Video and Audio Is Accessible
Accessible Video and Audio
- Skip autoplay
- Forgo sliders and slideshows
- Add player controls
How to Caption: CliffsNotes
- Two files: Video and caption text file
- Captioning options
- Quality captions matter
- Open vs. closed-captions
- #Captioned when posting
Resource: Guide to Captioning Videos
Audio and Video
- Audio description (AD)
- YouDescribe.org
- Transcripts
Testing
- Screen readers
- Contrast checkers
- Ask actual users
Screenshot of Colour Contrast Analyser displaying the foreground color as #1B75BC and the background color as #FFFFFF. It has a sample preview and WCAG 2.1 results. It passes all tests except 1.4.6 Contrast (Enhanced) (AAA) as it fails the regular text test.
Stay Vigilant
- Never one and done.
- Baked-in process
- Rewarded
Image shows freshly baked round chocolate cookies with crackled powdered sugar.
Contact
- merylk@gmail.com
- @MerylKEvans
Image shows meryl.net digital marketing logo with M inside an imperfect roundish shape