Woman sitting on the floor with laptop, writing alt text for her website

Don’t forget to add alt text

One important website accessibility standard every website manager should know is that EVERY photo on your site MUST include alt text. Alt text (alternative text), or alt attributes play an essential role in making your site accessible to all visitors.

Here are three tips to ensuring your image descriptions and informative and optimized for screenreaders.

Describe the photo accurately

Computers and e-reading devices can’t analyze images. Alternative text works to inform screen readers and searchbots what’s in the picture. It’s also what will display on the screen should the image fail to load.

When writing alt text for images, make sure you’re describing the image and it’s purpose accurately and succinctly. You need to give enough information so that readers and search engines understands how the image relates to your page.

For example, if you’re writing a blog, revealing the cover of your novel, the alternative text would describe what your book cover looks like.

The surrounding content on your page can also provide the readers additional context around the image, so be sure to make sure the description is original, adding value to the reader instead of being redundant.

In our cover reveal example, including your name/byline in the alt text is like redundant because you’ve already referenced that information within the body of the post.

Screenreaders also know, thanks to the alt text line, that this is an image, so avoid unnecessary words in the description like “image,” “graphic,” etc.

Keep it under 125 characters

It’s like the original Twitter. You don’t need to fluff up the description or be verbose. The more succinct you can be, the better the description. In fact, many screen readers will only read the first 125 characters, so it’s important to keep your alt attributes under that limit.

What about images that are purely for design?

There may be times when an image is purely decorative, and does not add any context or meaning to your page. When this is the case, simply insert “” in the alt text field. This signifies that the value is null, rather than missing/inaccessible.

Related articles…

Mint green, sky blue, rose pink, plum purple paint dabs sit on a white table

Are the colors on your website accessible?

Colors choice is important. It helps sets the tone for what you, your brand/business and your website are all about. If you’re a middle grade or picture book writer, you might use warm, primary colors to evoke a playful sense of youth. If you’re a fantasy writer you might look for more mature, deep colors to strike a serious, adventurous tone. But there’s one more important thing you should consider before selecting your color palette–make sure your color choices are accessible to all users, regardless of visual or cognitive disabilities.

What is web accessibility and why should you care?

Simply put, web accessibility means that your website is designed and developed in a way that allows ALL people to use it, regardless of any chronic or temporary disabilities they may have. Web Content Accessibility Guidelines (WCAG) are developed by The World Wide Web Consortium in collaboration with individuals and organizations. It strives to define a single, shared, international standard for accessibility across all digital content.

From a font perspective, this means that your font needs to have enough contrast between it and its background so that it can easily be read. For example, imagine an individual who is color blind is trying to navigate and read your blog content. Can they see your headlines and the body of your post?

There are a number of benefits to ensuring your color (and your whole website for that matter) are accessible. In addition to building content that all can experience and enjoy, you’re also optimizing your content for search engines (SEO).

Search engines want to be sure they’re delivering the highest quality results to their users. This means search engines not only evaluate WHAT the content on your site is but also HOW it’s built and displayed.

In this regard, there are a number of ways that SEO and accessibility overlap: page structure and heading tags, image alternative text, as well as size and contrast of text, to name a few.

Double-check colors in pre-built website templates

You might be thinking, “I picked a template from Squarespace or WordPress, so I’m good. They must screen or ensure those meet standards right?”

Unfortunately, that’s wrong.

Few sites screen template designs (especially their free ones) to ensure accessibility standards are being upheld. So it’s your responsibility to confirm the colors you want to use are accessible.

How to test contrast and accessibility

How much contrast do you need? WCAG requires a 4.5:1 contrast ratio between the foreground (your text) and the background.

Thankfully there are a number of sites that offer free tools that help you test the accessibility of your colors. I prefer this contrast checker by Web Accessibility In Mind, because it’s easy to see if your color passes or fails WCAG standards, and allows you to manipulate a color’s hue to see if deepening or lightening the color improves the contrast ratio.

A screenshot of WebAIM's contrast checker shows a light purple color on white background fails accessibility test