3 Web Accessibility Basics You Should Know

Web accessibility is a very important topic, but it’s in the early stages of awareness. However, with lawsuits abounding almost everywhere (from universities to retailers and even to Domino’s Pizza), being aware of what web accessibility is and how to do it as a marketer is going to be absolutely critical.

Before we begin, I’ll let you know that I am still learning the ins and outs of web accessibility myself. I believe in the mission and understand the importance of it, so I’m doing my best to learn about it and make all the content I personally create accessible. Not only is it the right thing to do, but it will help you as a marketer to reach more people, and will boost your Search Engine Optimization (SEO).

What is it?

Web Accessibility basically encompasses all digital material and it means that those who have impairments can still access the same information as those without.

For instance, a person who is blind and uses a screen reader to tell them what is on a web page would benefit from a written description of an image (called “Alt Text”) rather than either not knowing an image is there at all, or simply knowing the title of the file you uploaded (which, let’s be honest, usually isn’t very helpful).

This 60 second video from Women Techmakers is one of my favorite ways to explain exactly what digital and web accessibility is and why it matters:

Women Techmakers gives a 60 second overview about Web Accessibility.

Rad! I get it! Now…how do I do it?!

So, now that you can see what it is and why it matters…here’s three basic ways to get started!

Use “Heading” tags instead of just making titles bigger, bold, or underlined.

There’s a simple way to communicate to a screen reader that certain text is a title. This helps those who use screen readers because it allows them to do what many of us naturally do – read the title, decide if we want to read the text underneath, and skip ahead if we don’t.

If you don’t use these, the screen reader will think that your entire post or article is just one giant blob of text that has no logical places to skip or go back. The screen reader will force the person to listen to the entire thing. (Ain’t nobody got time for that!)

To avoid that, simply use the “header tags” in your Word document or through your WYSIWYG when creating web content.

A Microsoft word document with the word "Example" highlighted and the Heading 1 tag at the top selected. Below, the text reads: "This is an example of how you can apply the Heading tags in Word."
Applying a heading tag is simple in Microsoft Word. You can highlight the heading you want to indicate, then click on the proper “Heading” selection as shown above on the top right-hand side, and that’s it! Word will indicate to screen readers that the selection is a heading.

Below, you can see how to use the Heading option in WordPress to mark out your headings properly while posting online.

A screen shot of the WordPress development side that shows text "Here is how to do it in WordPress" highlighted and the Transform button selected. From there the "H Heading" option is selected.
You can also create headings in WordPress simply using the WYSIWYG. You simply highlight the text you want to indicate, then click the arrow buttons on the left-hand side (“transform”) then select Heading.

This simple step will make your page much more accessible and user friendly and, as long as they are tagged properly, you can still change the appearance to fit your preferences.

Add “Alt Text” to images

I mentioned this one up above, but it’s really important to add alternative text to images so that those who need it can have a description of the image. The best practice is to explain the image in the context you’re using it. What is a sighted person getting from the picture? For example, you wouldn’t want to post a picture of the president of your university and simply say “man in a suit” in your alt text box – that’s not why the picture is there. You’d more likely want to say “President Marc Johnson.” Give your readers context!

Screenshot of this blog's development side where the image of a Header, used above, is highlighted and to the right you can see the Image Settings option through WordPress. It shows the Alt Text box, which is filled in with a description.
WordPress makes adding Alt Text to images very easy. You simply click the image and to the right-hand side the Image Settings appear. Fill in the “Alt Text” box with a good description of the image and the purpose, adding context for the reader.

Alt text gets more complicated when you’re dealing with charts and tables. Best practice here is to explain in the text what the graph, chart, or table is and why it’s important and then to use extensive text to further explain it, sometimes in a linked document. If you’re really interested in learning more, check out the very in-depth information for Web Content Accessibility Guidelines (WCAG).  There you can also specifically look up Complex Images, which gets into the nitty gritty of how to make sure your complicated images are accessible!

Use “Descriptive Links”

Like you’ll notice in my blogs, I never link to a page by hyperlinking the URL. That can be really annoying and difficult to understand for those using screen readers because the software would read the http:// letter by letter, symbol by symbol. Instead, describe what you’re linking to and create a hyperlink with that.

Also, you never want to use color alone to indicate an action item for a person. Some people are unable to see color, or see different variations of colors, so it can be very confusing to say “click the red button” if they wouldn’t know which button is red. Instead, be very direct by creating buttons with properly titled links.

Hooray!

Now you know some basic web accessibility practices! If you take the tiny bit of time to do these as you create content, it’ll make your site more accessible, give you a wider reach, and will help to keep you ADA compliant (in the USA).

This is just the tip of the iceberg when it comes to digital accessibility. Accessibility spans so many areas of technology because it’s incredibly linked to our daily lives; videos must have captions, webpages should be navigable by keyboards, and tables and charts have to have special formatting with header rows indicated….and that’s just the beginning! I encourage everyone to educate themselves about digital accessibility so we create a more inclusive society.

If you enjoyed this blog, please be sure to “like” it down below! And, if you have any comments or questions, I’d love to hear them.

In my next post I’ll show you how to go back and make some of these changes to a webpage you’ve already created.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.