Something that really stood out to me while learning web accessibility was the fact that web crawlers are blind. They're not looking at the front end of websites the way a visually unimpaired people would. I never thought about it that way but it's true!

Also, someone with vision impairment using a screen reader, like JAWS or NVDA, essentially reads through your site the same way a site crawler reads through your site! It reads through the HTML files.

So fixing your site for web accessibility will likely result in a boost to your site's SEO.

Check header tags

Firstly, there should not be more than one H1 tag on a single web page.

Secondly, and just as important, don't skip over header tags. So you shouldn't have an h1 tag, no h2 tags, and some h3 tags.

Header tags don't have anything to do with font sizing, styling or even location of the header. This means h2 tags don't necessarily have to have a larger font size than an h3 tag. To change the styling, use CSS classes.

Ditch vague button and link text

Button and link texts like "Learn more", "Read More", or "Click Here" are not helpful for people using site readers or even those of us that do not have any visual impairments.

Make it obvious what the link/button is for without having to read the text around the button or link for context. So instead of "Read More" use "Case Study: (name of case study)".

Use verbs when you can. So instead of YES and NO buttons, use verbs that make sense for the situation. If you have a pop-up asking if the user wants to save their draft, the buttons can read: DISCARD and SAVE or even DISCARD DRAFT and SAVE DRAFT.

The first two word in the link text are the most important, so try your best to make the first two words count. Most people won't read past that.

While we're talking about links, you also want to use unique link/button text for each unique destination.

Include alt text on (some) images

Alt text stands for alternative text.

Decorative images don't need alt text but images meant to inform the visitor should have alt text.

If the image is meant to be decorative, like a background image, then it doesn't need an alt text. But if you're using something like a relevant image in an article then you should definitely include a descriptive alt text.

For example, let's say you interviewed someone and used their photo in your blog post. Include the alt text describing who is in the picture and possibly what they're doing, if they're doing something.

Let's say you interviewed Elon Musk and you used a photo of him giving a speech somewhere. You can include alt text like "Elon Musk on stage giving a speech to a large audience." You don't have to include the location of the speech because that's not apparent in the photo. Describe what's depicted in the photo.

When adding alt text, don't write something like "photo of". If we take our example above, we shouldn't write: "Photo of Elon Musk on stage giving a speech to a large audience." Screen readers know that it's an image of some kind and will alert the visitor of this.

Don't use alt text as an opportunity to key word stuff hoping to improve your SEO, because it wont. It should read naturally like a sentence or a fragment of a sentence. Don't do something like: "iOS Apple Mac iPad Steve Jobs technology web internet"

This is spam and uninformative. A better alt text would be "Steve Jobs sitting across from an interviewer smiling and holding up an iPod".

Check color contrast

You don't need to check color contrast on everything. If it's important information like text or an icon, then you should.

You can use WebAIM's Contrast Checker to check the contrast between your text and the background color. Getting an AA score is the bare minimum pass score. You don't have to but you can try to shoot for a AAA score. Something I learned is that just because it looks legible to you doesn't mean it has even a minimum score of AA.

If you're in the process of designing your site or app, you can check out this site by a11y that shows a long list of 90 color combinations that pass the contrast test.

If you're wondering what AA Large means on the Color Palette site linked above, it means the contrast passes with fonts 18pts or larger. You can read a more in-depth breakdown of the scores here.

Conclusion

This is clearly not an article on everything you can possibly check for when it comes to accessibility but these are some easier fixes you can make on your own site today. I've linked a few tools you can use throughout the article.

I encourage everyone to consider making their sites as accessible as you can make it. Doing so will benefit everyone.