Category Archives: Best Practices

How Accessible is Your Website?

For those of us blessed with sight, we sometimes forget that is a significant portion part of the population that have limited or no ability to see the elements on a page. Screen readers help to make websites accessible, but only if web developers follow best practices.

Making Images Accessible

Turning text into graphics can be a bad idea for multiple reasons. For one, search engines can’t read images. So if your headings are images, that hurts search engine optimization (aka SEO).

Similarly, screen readers cannot read or describe images either. So if your call to action is embedded in an image, people using screen readers to explore your website are missing the call and won’t respond.

The alt Property

However, there is a solution that makes things easier. The img tag (used for images) has an “alt” property that allows you to put a small amount of text describing the image. For example:

<img src="myfabulousimage.jpg" alt="Photo of me saving the world">

Now people using screen readers know what the image is about.

Use Web Fonts rather than Images for text

If you want to do something funky with a bit of text to give it some character, there are thousands of web fonts (many of them free) that will allow you to do it in a screen-reader-friendly way. This also helps SEO. Check out Google Fonts and Squirrel Fonts for their selections.

Use Sufficient Contrast for People Who are Color Blind

A significant portion of the population (as much as 10% by some estimates) is born with a form of color blindness, limiting the range of colors they can see.  When pages lack sufficient contrast between foreground color (like text) and background color, then the resulting content can be unreadable to those who are color blind.

One way to check to see if your website lacks sufficient contrast is to take a screenshot of your site, open it up in Photoshop or some other image manipulation software and convert it to grayscale. If the text is unreadable, then you may need to increase the contrast by making foreground or background darker (or lighter).

Resources for a More Accessible Website

These are just a few of the issues and solutions regarding the accessibility of websites. Check out WordPress.org’s Accessibility page which provides a number of plugins and other tools to keep your website as accessible as possible.

Need More Help?

If you liked this article, be sure to sign up for your FREE subscription to the Nickel's Worth of Free Advice newsletter where we send helpful articles every Tuesday and Friday. You can either fill out the form on the right side of this page or visit the Nickel's Worth of Free Advice signup page.

We're also happy to provide assistance directly. Just send an email to dharma@zenpunkwebworks.com.