TechAccessOK: How to Create Accessible Social Media and Website Content

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

Image shows meryl.net digital marketing logo with M inside an imperfect roundish shape