Accessibility, when it comes to web applications, should be at the forefront of any planning. It is the new mobile first approach.

The power of the Web is in its universality.

Access by everyone regardless of disability is an essential aspect.

Tim Berners-Lee, W3C Director and inventor of the World Wide Web

What we mean by accessibility

In a nutshell, accessibility is removing any barriers that may prevent a person of disability from accessing a website, app or web application.

Accessibility can also mean how accessible is the website for search engines and screen readers as they both read content in a similar way. If a search engine can’t crawl your content then it won’t be indexed and if a screen reader can’t scan it then it won’t be read.

Publishing documents as HTML

Rather than just sticking a number of PDF’s on your website, because it was easier to export them out of your favourite word processing software, serving them up as HTML content would be a huge improvement.

The benefits of serving documents as HTML content:

  • Index for search engines
  • Easy for screen readers
  • Responsive to your website
  • Styling reflects your websites brand, thus leaving it more trustworthy
  • Sharing a link will be much easier than a potentially large document

Adding ALT tags to images

You hear this all the time but it’s surprising how many people leave this to the last minute and just add basic descriptions. ALT tags are important for individuals who use screen readers as they add a richer context when an image has been described fully.

If however an image is just used for decorative purposes then we ourselves often omit these as they don’t add to the content directly.

Keyboard friendly

While the figures for websites being viewed by mobile and tablet devices are going up, there are still a significant amount of using still using desktop computers. With desktops come keyboards. For many users navigating with keyboards is very important and in some cases can be much quicker then a standard mouse or trackpad.

We would recommend using the useful tabindex and prioritise links this way. If you feel all links may be relevant then setting this to tabindex=”0″ will allow the browser to tab through links in order of the HTML code that has been rendered.

Default settings for forms

Yes, I know many designers want to reinvent the wheel but when it comes to form elements, often times the browsers defaults just do the job. They’ve already been through rigorous testing and respond will to keyboards shortcuts and commands. They also look more familiar to the larger population when using their preferred browser.

First published: June 7, 2019