How Accessible is Your Website? 3 Simple Accessibility Tips to Keep In Mind

Web accessibility refers to the inclusive practice of making websites usable by people of all abilities and disabilities. When sites are correctly designed, developed and edited, all users can have equal access to information and functionality. (source)

Accessibility is nothing new, there are countless of accessibility articles that cover everything from the basics to the more complex issues. But I wanted to revisit a couple of the simpler ones that we web designer need to be reminded off regularly.

Writing clean and useful page titles

If your ultimate goal is to give your visitors a good experience and a overall impression of your site, then construct your page titles for humans and not for search engine spiders. Keep your titles clean, descriptive and to the point, avoid the urge to overstuff your page titles with keywords.

As web designers we often times tend to focus too much on SEO, due to pressure from our clients or boss, and forget all about accessibility and good practices, it is our job to inform and do it right.

Use simple character separators between your title and your website name such as (-) or (|). Anything more than that makes page titles difficult to read and plain unnecessary.

Example of a title: “How Accessible is Your Website? - Your Website Name”

Keyboard accessibility

Even thought the majority of internet users use the mouse as their main form of navigation, there is a small group of internet users that find using a keyboard a lot easier either by choice or due to a disability, and we need to start designing with that in mind. This is something I am guilty of, and constantly working on making this site and all other projects I am working on more accessible.

1. Make sure all your a elements have a non-empty href attribute, i.e. <a href=”#”>Link</a> . Without that your links will not be able to be focused and activated from a keyboard.

Example of non-focusable link: <a class=”link”>Link</a>

Make sure all interactive objects such as buttons, links, drop downs etc. can be accessed using a keyboard alone. By using the :focus CSS pseudo-class you can highlight objects that receive focus with the keyboard.

Another thing you can do to bring more attention to your links and making it easier for your readers to find their position on your page is to use enhanced focused styles for your a:focus and a:active attributes.


Example: a:focus, a:active {background-color : yellow;}

You can do a similar thing for all your linked images.

Choose your colors wisely

We all do it, we get so wrapped up with the design and the color combinations that sometimes we overlook the fact that our website or application might be difficult to use by people that are color blind, older, or have other visual impairments.

No matter what your core user base is; it is always a good idea to design for a broader audience including the visually challenged. If the usable elements on your website such as links, buttons, images etc. don’t have enough contrast from the background, then you are creating possible usability problems for your readers.

If you are ever questioning if something is hard to read or not, it probably is. Bring the contrast up a notch.

Some great tools to check for contrast:

• GrayBit
• Colour Contrast Check
• Colour Blindness Simulator
• Firefox Accessibility Extension

A couple of great accessibility resources

• 456 Berea St
• Accessible Culture
• A list of accessibility resources and tools