Web Accessibility: What, How, and Why

I’ve written a lot about the ways we can make our language more inclusive, such as being aware of the words we use when we talk about disability or gender. There’s another type of language that’s different but equally important when it comes to inclusion: web accessibility.

Making my content more accessible means going beyond the actual content I’m creating (text, images, audio) by translating it in ways that allow more people to perceive and understand it. I’m not an expert on web accessibility by any means, but I thought I’d share some of the information I’ve learned about it, including the what, how, and why.

What is web accessibility?

Web accessibility means giving people with disabilities equal ability to navigate, understand, and interact with websites, platforms, and tools.

The World Wide Web Consortium (W3C) breaks down the differences and overlaps between accessibility, usability, and inclusion:

• Accessibility: addressing the user experiences of people with disabilities, especially regarding discrimination and barriers

• Usability: designing products with all users in mind, regardless of ability and disability

• Inclusion: ensuring that everyone has access to content, which addresses different factors, such as disability, socioeconomic situation, culture, education, and computer literacy

Web accessibility tips

There are a lot of ways to make content more accessible, and I’ve listed seven things as a starting point. For additional information and ideas, see the links at the end of this post.

1. Add alt text to images and GIFs. Alt text is a text description of a graphic element. Adding alt text to images and GIFs makes these elements available to people who may not be able to see them, such as those who are blind or low vision because the text can be read by screen readers.Most social media platforms allow users to add alt text to their images or GIFs directly, whenever they’re inserted or uploaded. Another option is to place alt text near the image. For example, I created a graphic and then posted it on Linkedin, but the LinkedIn alt text function is limited to 120 characters. Therefore, I simply added the alt text to the text in the post. Alt text can also be added to graphics in Word, PowerPoint, and Adobe.Alt text is especially important when the image is the purpose of the content. I see this a lot on Twitter. Because of the platform’s character limit, many users release lengthy statements as images of text. In the comments, there are often requests for the poster to add alt text. The same goes for GIFs when the GIF itself is the message. If I respond to someone only with a GIF of Alexis from Schitt’s Creek saying, “Oh my god. Ew, David!” but don’t add alt text, my message is lost to anyone who can’t see it.So, what should alt text include? It should be concise, for one. An Instagram post by Design Team of One offers these helpful tips on writing alt text (a special thanks to my cousin Jennifer for sharing it with me):

   • Use this simple formula: object (main focus), action (what’s happening), context (surrounding environment).

   • Describe gender and race if it’s relevant to the image, if you know what the person’s identity is, and if the description is consistent with other descriptions.

   • When describing charts or diagrams, “divide it into sections and focus on one section at a time in a logical order.”

   • Transcribe all the text in the image.

2. Use Pascal case for hashtags. Most people write hashtags in all lowercase letters, but these can’t be distinguished by screen readers. All caps hashtags might also be read as individual letters rather than whole words. That’s why it’s recommended to use Pascal case when writing hashtags (#ThisIsAPascalCaseHashtag), where the first letter of each word is capitalized. It also makes the words in a hashtag clearer to anyone reading it. Susan Boyle’s famous misread hashtag could’ve been avoided this way (unless it was purposeful for publicity).

3. Make hyperlinks descriptive. Instead of simply telling someone to click here or to read this article, state in the link text what a user will be clicking on and taken to. For example, compare these two calls to action: “Visit the Shut Up and Take My Money shop to find out more” versus “Click here to find out more.”

4. Provide transcripts for podcasts and audio content. You can transcribe the audio yourself or use a service like Descript.

5. Add captions to videos. Keep in mind that automatically generated captions can be flawed, as illustrated by a tweet comparing captions for Amanda Gorman’s inaugural poem. Here are guides for how to add captions for YouTubeand Vimeo.

6. Allow users to control website audio. On websites that automatically play audio, users should have the option to stop the audio or adjust the volume.

7. Don’t rely only on color to distinguish website elements. This one was new to me, though as soon as I read it, it made sense. People who are color blind may have difficulty distinguishing different colors, especially when there is little contrast between them. When websites use color as the only way to differentiate regular text from hyperlinks or headings, users may not be able to tell the difference. One tool that can be used to test your color contrasts for hyperlinks is WebAIM’s Link Contrast Checker. (My website failed this, which I detail later.) Color Oracle is also a free color blindness simulator that shows “what people with common color vision impairments will see.”

Making my website more accessible

Note: I updated my website in May 2023, so these examples are from my previous website design.

Writing this post and researching more about web accessibility made me realize how much I wasn’t doing for my website. I thought I was doing a good job, but there were areas where I was lacking, either because I wasn’t doing things well or because I didn’t even know I should be doing them at all. Therefore, I reviewed my website for accessibility. This was my process:

1. My website is built by Squarespace, so the first thing I did was find Squarespace’s accessibility guide. (Here are web accessibility guides for WordPress, Wix, and Weebly.)

2. I reviewed Squarespace’s alt text guide and did an audit of the alt text on my website. This was especially important because the links to my blog posts are in image form rather than plain text. I had already written the title of each blog post as alt text, but what I hadn’t done was say that the image linked to the blog post. Therefore, I went into the alt text and added “Links to blog post” after the title of each one.

3. Squarespace recommends that “in addition to social icons, include text links to your social media accounts.” I was using only social icons for my accounts, so I added text links too.

4. I checked keyboard access to see if visitors who use only a keyboard (no mouse) can navigate my website. The answer was yes and no. I have a lot of drop-down menus that lead to additional pages. When using only the Tab key to navigate my site, the drop-down menus didn’t appear, though I was able to get to each link. (I could tell by checking the link that showed up at the bottom of my browser). Getting the drop-down menus to appear is still a work in progress.

5. I checked my design colors. First, I used a11y’s Color Contrast Accessibility Validator to test my website. My colors passed! I also installed the color blindness simulator from Color Oracle because I wanted to see how my website colors would appear to those with different forms of color blindness (see the following image). I felt like everything could still be easily read and distinguished.

6. I used the link contrast checker referenced earlier to see if my link and text colors passed an accessibility check—and they failed. This was especially worrisome because I wasn’t using anything to distinguish my links from the surrounding text except for color. I added underlines to links and removed the underlines in my section headings. (The headings are distinguishable without the underlines because of the different font, size, color, and caps, so I wasn’t worried there.) This is also still a work in progress because I have to manually add all the underlines.

Lessons learned

This process of making my website more accessible taught me several lessons.

• Above all else, web accessibility is about inclusion and equity. This is probably a given for many people, but it’s an important reminder of why this is necessary. By making my content accessible, I’m offering it to everyone, not just those who are like me. As someone who is non-disabled and has privilege in this area, I can do my part in not only recognizing my privilege but taking steps to include those who don’t have it.

• This process has forced me to approach my content with a specific mindset. Once I started thinking about how I could make my website more accessible, I wanted to do it all—and do it right. It caused me to shift my thinking from “I think I should be doing these things?” to “I need to do the work.”

• It’s not about me. I don’t particularly like the look of having all links underlined, which was why I only used color contrast before. I pouted for about a minute, then got over it and added underlines to the links. I reminded myself that my content isn’t for me, it’s for my audience.

• Along those lines, it’s about impact, not intent. Before I made these changes to my website, I wasn’t intentionally trying to exclude people from accessing my content. But that didn’t change the fact that I was still doing so.

• Doing this benefits me, the content creator, too. When I create content, I’m doing it for an audience—and I’m limiting who can receive that message if people can’t access it. Therefore, web accessibility means I’m reaching a wider audience.

• Things can be a work in progress. As I said at the beginning of this post, I’m not a web accessibility expert, and I’m continually learning. I still have changes to figure out, but that isn’t stopping me from making progress. It can be overwhelming to think about everything that should be done, and sometimes the desire for perfection halts our ability to even take the first step. It’s okay to tackle what’s easy and slowly work on the rest.

Final thoughts

I’m still working on ways to make my website and social media platforms accessible for all. That means being intentional with the content I create and how I put it out into the world. Yes, it means I have to spend a bit more time and effort making these conscious changes, but that’s because ensuring access, equity, and, inclusion all take work. I hope you’ll join me.

Additional resources

• Accessibility basics from Usability.gov

• W3C’s checklist of web accessibility

• W3C’s resources on accessibility principles and how people with disabilities use the web

• Accessibility features and guides for Facebook, Twitter, Instagram, LinkedIn, and Pinterest

---

---