Thread by @PatrickMGarvin

Was one of your resolutions to learn more about web accessibility for people with disabilities? You're in luck: I'm making a 2022 thread for people who would like to learn more about accessibility. I plan to add tips and resources throughout 2022.

#a11y #a11y2022

Thread 🧵 1/x

2/x The word a11y is a numeronym using numbers to shorten words. This shortens "accessibility" to "a11y," with the 11 representing the 11 letters between a and y.

On Twitter and LinkedIn, #a11y can be used to find several helpful accessibility resources.

#a11y2022

3/x If you feel like you don't know what you don't know about accessibility, then it can help to follow people who tweet a lot about it. I've put together a list of people who tweet about it a fair amount of the time, if not most of the time.
twitter.com/i/lists/134667…

4/x @webaim is a non-profit organization based at the Institute for Disability Research, Policy, and Practice at Utah State University. This WebAIM primer introduces some basic web accessibility concepts, standards, and laws.

#a11y
#a11y2022

webaim.org/intro/

5/x If you feel overwhelmed by the volume of accessibility info, remember: The goal isn't rote memorization of every standard and technique. Accessibility isn't a checklist you can check off and be done with. Complying with standards is the beginning, not the end.
#a11y
#a11y2022

6/x One misconception people might have with web accessibility is to think of it purely as a technical, code-related endeavor. This allows non-coders to assume nothing they do affects accessibility. They can continue bad habits they don't know are bad habits.
#a11y2022
#a11y

7/x In a company that produces online content, everyone has a role to play in making things accessible to people with disabilities. Conversely, if they're not trained, everyone has the chance of adding accessibility barriers without knowing they're doing it.
#a11y2022
#a11y

8/x These accessibility guidelines from @voxmedia are broken down by role/job. This shows how everyone has a role in the process. Everyone! They each have different things to consider depending on their role, but everyone is on the hook for ensuring accessibility.
#a11y2022
#a11y

9/x Forgot to include the link for the guidelines from @voxmedia so here they are. Each guideline and tip includes the WHY behind it, which can be helpful for those who are for are newly considering how to bake in accessibility.
#a11y2022

accessibility.voxmedia.com

10/x One misconception people might have with web accessibility is to think of it purely as a technical, code-related endeavor. This allows non-coders to assume nothing they do affects accessibility. They will continue bad habits they don't know are bad habits.
#a11y2022
#a11y

11/x In a company that produces online content, everyone has a role to play in making things accessible to people with disabilities. Conversely, if they're not trained, everyone has the chance of adding accessibility barriers without knowing they're doing it.
#a11y2022
#a11y

12/x Sheri Byrne-Haber's "Giving A Damn About Accessibility" is available both in accessible PDF and audio formats. She has some great advice on how to deal with people who will try to challenge or dismiss the need for accessibility.
#a11y2022
#a11y
accessibility.uxdesign.cc

13/x To combat dismissiveness and help people realize we all have a role to play, I often share @merylkevans' post about links, hashtags, emoji use, alt text, video, and podcasts, and a lot more. We can all do these, regardless of our role.
#a11y2022
#a11y
meryl.net/digital-conten…

14/x One thing that everyone who works with online content needs to understand is plain language. It is language a user can understand the first time they read or hear it. @govplainlang has a great intro, with techniques and tips.

plainlanguage.gov/about/definiti…
#a11y2022
#a11y

15/x @18F has a great tip sheet that includes tips and tricks for plain language, including words to avoid or use sparingly.

#a11y2022
#a11y

content-guide.18f.gov/our-approach/p…

16/x Accessibility for Teams, from the GSA, is another good primer for those looking to understand the concepts of plain language.

#a11y2022
#a11y

accessibility.digital.gov/content-design…

17/x @HemingwayApp and @ReadableHQ allow you to test the readability of your content. Run your content through either tool to get suggestions of where to change words, where to break up long sentences, etc.

#a11y2022
#a11y

hemingwayapp.com

readable.com

18/x As you and your team dig into accessibility, check out and bookmark @A11YProject, which is a great resource, and a great place to find additional resources.

a11yproject.com

#a11y2022
#a11y

19/x One of the easiest things you can do to get started with accessibility is start adding alt text to the images you add on Twitter. This requires no coding knowledge or expertise! Absolutely no coding knowledge needed whatsoever!
#a11y2022
#a11y

help.twitter.com/en/using-twitt…

20/x Facebook also makes it possible to add alt text to the images you share. And unlike Twitter, Facebook lets you go back and add the alt text if you forgot it.

#a11y2022
#a11y

facebook.com/help/214124458…

21/x Here's how to include alt text with your posts on Instagram:

#a11y2022
#a11y

businessinsider.com/what-is-alt-te…

22/x Here's how to add alt text on your WordPress site:

#a11y2022
#a11y

businessinsider.com/what-is-alt-te…

23/x Some platforms use object recognition technology to generate alt text if you don't add it. It's wildly unreliable, inaccurate, and incomplete. An ornate picture with lots of details is reduced to "Might be a picture of standing." Always add your own instead.
#a11y2022
#a11y

24/x When you neglect to add alt text, you leave people out and force them to do a lot of work. It's not just an oversight or inconvenient, as this thread from @CatchTheseWords demonstrates.

#a11y2022
#a11y

https://twitter.com/CatchTheseWords/status/1459126621089185808

25/x Not sure how to dig into alt text? Alt-Text as Poetry is a good resource that helps you think of alt text not just as a bland or clinical writing exercise, but as a creative endeavor.

#a11y2022
#a11y
#altText

alt-text-as-poetry.net

26/x As you make your way through learning about #altText, Alt-Text as Poetry also has a robust and detailed workbook of exercises to try.

#a11y2022
#a11y

docs.google.com/document/d/15o…

27/x Alt text is not the only consideration for screen readers. Emojis are read aloud with their descriptors, which means that if you use the "Face with tears of joy" emoji 13 times, then "Face with tears of joy" is read 13 times. Three emojis per tweet, max.

#a11y2022
#a11y

28/x In October 2021, people on Twitter joined in on the "red flag" meme. They would quote a phrase that's a “red flag” for someone to say, then add a bunch of red flag emojis. Screen reader users were clear on this: this is terrible.

#a11y2022
#a11y

https://twitter.com/stevesaylor/status/1448410404745580548

29/x The red flag emoji meme was such a bad experience that it prompted tech outlets to write about the widespread complaints. @TechCrunch summed up the debacle with insight on why this was bad UX and what to do instead.

#a11y2022
#a11y

techcrunch.com/2021/10/20/the…

30/x Emojis that are grouped together to form an image are cute and clever for sighted users. Screen reader users have no idea what that image is supposed to be. So it sounds like "black large square, large green square, large yellow square, black large square…"

#a11y2022
#a11y

31/x As Wordle rose in popularity, sighted users flooded Twitter and Facebook with "black large square, large green square, large yellow square…" Users of screen readers have been open and clear about this experience.

#a11y2022
#a11y

https://twitter.com/ChanceyFleet/status/1482058643201744898

32/x Some of the same people who went viral for tweets about the red flag meme being inaccessible also went viral for tweets about Wordle emojis being inaccessible.

#a11y2022
#a11y

https://twitter.com/stevesaylor/status/1480573306692681729

33/x One solution to the inaccessibility of long strings of emojis: Don't share your Wordle results as emojis, but rather as an image, with alt text.

#a11y2022
#a11y

https://twitter.com/madalynrose/status/1480934954733297680

34/x Don't share anything that must be seen to be understood. If you're tempted to make images of hearts using spaces and emojis, don't. It will be a bad experience for people who have to listen to it. They won't get that it is a heart.

#a11y2022
#a11y

https://twitter.com/HashtagHeyAlexa/status/1445840751724843008

35/x Twitter gives you the option to put your name or text in unique fonts and characters. But each letter is read out separately, meaning screen reader users won't hear it as one word, but rather as a string of separated characters.

#a11y2022
#a11y

https://twitter.com/kentcdodds/status/1083073242330361856

36/x The "Not Wordle" posts are just as bad for screen readers as Wordle, because of the strings of emojis.

This Weather Channel art is meant to be a snowflake, but it will sound like, "blue square, white large square, blue square…"

#a11y2022
#a11y

https://twitter.com/weatherchannel/status/1486837063752237056

37/x When you encounter text art and emoji art like this, you can tag @asciiArtHelpBot to help you decipher what the art says. Or, to help explain why these text art is a terrible experience for users of screen readers.

#a11y2022
#a11y

https://twitter.com/asciiArtHelpBot/status/1486876502511685636

38/x But there are ways to include emoji art in your tweets, whether it's a Wordle score or something else. As @HashtagHeyAlexa said, "Screenshot your Wordle results and apply alt text to that image before tweeting it."

#a11y2022
#a11y

https://twitter.com/HashtagHeyAlexa/status/1478759777404694533

39/x There were a few accounts who got the "Not Wordle" posts right. @WestVirginiaU included an image with alt text rather than a string of emojis.
#a11y2022
#a11y

https://twitter.com/WestVirginiaU/status/1487118916136677382

40/x Similarly, @SyracuseU got the "Not Wordle" tweet right. Instead of a string of emojis, the tweet was an image with alt text.

#a11y2022
#a11y

https://twitter.com/SyracuseU/status/1487142000277213189

41/x The @RareLtd game @SeaOfThieves also approached the "Not Wordle" trend in the right way: No strings of emojis, but a picture of the emoji art, with alt text.

#a11y2022
#a11y

https://twitter.com/SeaOfThieves/status/1487088583697702916

42/x Some accounts used images instead of strings of emojis, but didn't use alt text. When you don't add alt text to your tweeted images, screen reader users will just hear "image." Add alt text on tweeted images. Always.
#altText
#a11y2022
#a11y

43/x Reminder: Alt text is a substitute for images. It helps screen reader users, including people who are blind, have low vision, and/or have cognitive disabilities. Alt text shows up if an image fails to load on a page, and alt text also helps search engines.

#a11y2022
#a11y

44/x Image descriptions are any description of an image, whether in the body of a post or the caption field of an image. You might see these in the text of a social media post. Alt text is a type of image description, so the terms are not interchangeable.

#a11y2022
#a11y

45/x Alt text refers to a specific type of image description, one that is a metadata associated with an image in HTML. It is NOT seen by sighted users on a website. It is embedded in the site code, read by screen reading technology.

#a11y2022
#a11y

46/x @webaim's alt text page is a good resource for beginners. It includes some exercises to help you practice, and delves into best practices for complex images, image maps, logos, form image buttons, CSS images, and more.
#a11y2022
#a11y

webaim.org/techniques/alt…

47/x If you're not familiar with HTML or how it works, but you're curious to see what alt text looks like in code, @MozDevNet has some good documentation about images in HTML, and that includes what the alt attribute looks like in HTML.

developer.mozilla.org/en-US/docs/Lea…

#a11y2022
#a11y

48/x You can (and should) add alt text to other documents besides HTML, including Word documents, PowerPoint presentations, and more. @Microsoft has put together a resource on how to add alt text to files made using Microsoft products.

support.microsoft.com/en-us/office/e…

#a11y2022
#a11y

49/x @Microsoft makes it possible to add alt text to shapes, pictures, charts, SmartArt graphics, or other objects in any document, not just Word. This primer breaks down the processes to take, depending on the program.

#altText
#a11y2022
#a11y

support.microsoft.com/en-us/office/a…

50/x This article by @lifeofablindgrl for @ScopeBigHack explains some common alt text mistakes, and how to avoid them.

bighack.org/avoid-these-mi…

#altText
#a11y2022
#a11y

51/x This @ScopeBigHack article gives additional tips on alt text, including some tips and advice that will probably answer questions you've had for a while.

#altText
#a11y2022
#a11y

bighack.org/how-to-write-b…

52/x For beginners, it can be difficult to know what to put in the alt attribute, and when to leave the alt attribute empty. This decision tree from @w3c helps you determine what to do, based on specific situations.

#altText
#a11y2022
#a11y

w3.org/WAI/tutorials/…

53/x @veron4ica has created a robust resource with more than 600 posts about low vision, assistive technology, vision loss, how to use assistive technology, and how assistive technology works.

veroniiiica.com

#altText
#a11y2022
#a11y

54/x @veron4ica's post "Seven Myths About Alt Text" is a great rebuttal to common misperceptions people have about alt text.

#altText
#a11y2022
#a11y

veroniiiica.com/2021/02/11/sev…

55/x @veron4ica's post "How To Write Alt Text For Gifs" explains why writing alt text for GIFs is different than writing alt text for images or writing image descriptions for videos.

veroniiiica.com/2020/02/03/how…

#altText
#a11y2022
#a11y

56/x @veron4ica's post "How To Write Alt Text For Memes" gives you great tips for how to describe a whole range of memes you might share on social media.

veroniiiica.com/2018/11/29/how…

#altText
#a11y2022
#a11y

57/x This @webaim message thread has good food for thought on whether it's appropriate to include or leave out characteristics like race, gender, and other traits.

#altText
#a11y2022
#a11y

webaim.org/discussion/mai…

58/x @tolu_xyz recently wrote a @Shopify post that made compelling cases for describing race in alt text: "Giving users as much relevant information as possible gives them the context to fully understand the story around images."

ux.shopify.com/the-case-for-d…

#altText
#a11y2022
#a11y