7 quick tips to make your site more accessible for disabled users

By May 5, 2014 Uncategorized No Comments

Making your web site more accessible to disabled and visually impaired users isn’t hard, but it’s often an area where web designers and site owners let themselves down. These are a few simple steps that will definitely make your site a little friendlier for all users.

Use correct h1, h2 and p tags

Many visually impaired users don’t browse a web page in the traditional sense with a web browser like Firefox, Internet Explorer or Chrome. They may use screen reading software or other bespoke interpretive programs to enable them to access web content. Therefore, your HTML and CSS mark-up has got to be spot on. You need text to flow correctly on the page and be split-up into paragraphs with appropriate h1, h2 and h3 headings. This means that when software interprets a page for the disabled user it can understand and follow the structure of the content.

Use appropriate title tags on pages

The title tag of a page is not just an opportunity to tell search engines what’s on the page, but also users. Try and make sure the title is a clear and accurate description of the page content.

Use descriptive alt text on images

Make sure you use the alt text tag on any images you insert on your site. Many WYSIWYG editors like Dreamweaver may automatically insert an alt text based on the image name. This can result is an alt text of something like Image12b, which is pretty much useless to everybody.

Image 12b

Think of this as opportunity to provide a short description off the image to someone who might not be able to see it. A visually impaired user may not be able to see the image, but they will be able to understand the context of the image within the page content.

This is an image of the Birmingham skyline at dusk.

It’s also a good opportunity to get some good keywords associated with the image so your site will appear in Google image search results.

Try not to use text in images

Screen readers can’t read text when it’s embedded into an image and will not be able to interpret the text for a visually impaired user. An alternative is to Use HTML and CSS to float the text over the image. It may take a bit longer to code, but it means the text can be read by a screen reader.

Use appropriate title tags on links

When you add a link to another page on your site or to an external web site make sure you include an appropriate title for the link.

Click here to go to the BBC news site

This should be a brief description of the site and content of where you’re sending the user.

Use easy to read and appropriate colour schemes

It’s nice to have a colourful and distinctive web site, but be careful of the colour combinations your using. They may make it really hard for a colour blind or visually impaired user to read the text or navigate around your site.. Stick to simple and proven colour schemes and if possible give the users the ability to change the colour scheme.

Provide users with the ability to switch colour schemes

With a little bit of JavaScript and a few different CSS files you can give a disabled user the ability to change the way the site looks for them. This enables colour blind or visually impaired users to change the colour scheme or increase the text size on the fly. You may have seen this on this feature on many government or NHS wen sites.

Thanks to David Amsler for the picture of the disabled sign. Used under Attribution 2.0 Generic

About Tom

Reformed "black hat" SEO, self-made affiliate marketeer and classically trained web developer with a 2.1 BSc Hons in Computer Science . I also spend way too much time on tumblr.

Leave a Reply

Your email address will not be published.