The Importance of Accessibility

28th December 2014 The Importance of Accessibility

Accessibility has always been a huge topic of discussion when talking about web design. When Berners-Lee created the Web, it was part of his original vision, pages were meant to be accessible. Being accessible on the web isn't just about people with disabilities, it’s about everyone being able to get all of the information that they can out of the pages they are looking at. Web designers see accessibility in many different forms though as it's not something ingrained into all website developers. To some, it is just adding alt tags to images, as that’s what they were taught many years ago (or not taught correctly), and so that’s as much as they will do. Others see accessibility to be considered as an afterthought, and so it isn't properly embedded into the site. And there are others that see it in completely different ways still.

What many people don't realise is that accessibility is important when creating websites, and also for the long-term vision in order to have a well-constructed site. Disabled people with vision problems for example, frequently have to overcome additional obstacles in order for them to enjoy a full range of information, entertainment or social interaction offered to them via the web. Should they not enjoy your site as much as someone who can see fine? Is your website not there for everyone to enjoy?

The web was designed for everyone. If you don't have a mouse connected to your PC, you should still be able to navigate through a site almost as well as if you did. Even if you are completely blind, you should still be able to get all the information you want out of a page. The web was explicitly designed so that this could be done without any problems. Everyone when looking at a site should be able to reach, perceive, operate and understand the content that is being displayed to the screen.

Key Issues

Accessibility isn't just for the blind or disabled, and this is a common mistake to make when thinking about accessibility. Having an accessible site does help blind people see your site and disabled people navigate around the page, but having a fully accessible site can increase its overall usability dramatically. A lot of the work done in making your site accessible is related to providing for people who are blind, and it is because of this that it is sometimes viewed as only being for the blind. But the fact of the matter is that blind people do use the Internet and so they need sites to provide things such as alternative text for images so that screen readers can pick them up and proper page headings throughout.

There are still some designers out there that believe that sites designed to be accessible are going to be either dull or boring, and this is a myth that comes from the olden days of web design. The reason that most sites that focused on accessibility in the past were viewed as dull and boring, was because of the limitations of accessibility and because of the amount of time and resources that companies were putting into it. CSS is so much more advances now than it was previously thought that you could easily make a fully accessible site look as good as a site that was built with just the look in mind.

The most commonly known accessible feature is the use of the 'alt tag on images. Just by adding an 'alt' tag to an image can surprisingly go a long way in helping to make a site accessible if used correctly. Although blind people wouldn't be able to see an image, they would be able to know that the image is there and what the image is showing because of the 'alt' tag, and so it is important to use the tag correctly so that people who are blind don’t miss out on everything that other people can see. Just having an 'alt' tag isn't enough, it's there to say what the image actually is so that everyone knows.

The use of relative font sizes can be useful for many people, and what needs to be remembered when designing a site is that old people and partially sighted people do use the Internet, and they could be reliant on large-format text and effective colour contrasts. By using a relative font size like ems (the height of an elements font) or the predefined keywords for size (xx-small, x-small, small, medium, large, x-large and xx-large), people can view sites easier as they can make their browser change the font size to something that they can actually read. Despite this, there are many sites that still use px (an absolute value) for their fonts, which some browsers can’t enlarge. With advances in Web Browsers though, if you're site is responsive, using px to measure font sizes isn't a real issue as the zoom feature on the browser will work, moving the site around as you've told it to in your responsive stylesheet. Older browsers like Internet Explorer 6 (yes, some people still use it), 7 and 8 can be very funny with stylesheets and zooming just zooms in on the page meaning some pages end up with horizontal and vertical scrolling - not good. There are some arguments that web developers shouldn't cater for old internet browsers, and there are many good reasons for it. it all depends on whether you're okay with alienating users that still use majorly outdated web browsers.

Tables used to be a major issue, and they still are and all for the wrong reasons. To get a good layout for a website, tables were used and this was awful from an accessibility point of view. The good news is that web developers have moved away from using tables to layout their websites, and that's because stylesheets and web browsers have given us better methods of layout out a page. The bad news is that because of how tables have been mistreated in the past, some developers are not keen on using them anymore when they should be. I've seen some developers questioning why a framework is using tables to display data instead of divs. Tabular data should be displayed in tables. If tables are used correctly then there's nothing wrong with them at all, and they can even be responsive. When used correctly, tables are very accessible and it's concerning to hear some developers who want to show tabular data in divs instead of a table because they think tables shouldn't be used.


Where coding a few years ago to be accessible, it used to be a pain. The introduction of HTML5 has improved this drastically. Tables were improved greatly in HTML4, where the <thead> and <tbody> tags were introduced making a clear definition between a tables header and body, and this also came with benefits for styling as well. HTML5 has taken tags to a new level of accessibility though, and if used properly will give people that need an accessible site a much better experience - this is one of the reasons why some developers will not develop for older browsers such as IE6-9 where you have to put in additional work to get HTML5 tags to work anything like how they should, and even then it's not as accessible as on a modern browser that accepts HTML5 tags. The argument is that they should be keeping up with the modern browsers to get the best experience for themselves since accessibility has improved so much.

HTML5 brought in some great new tags with semantic meaning. The problem is that Internet Explorer is still so far behind with it. Semantic elements such as <article>, <header>, <footer>, <nav> & <section> all have a clear meaning which is great for anyone who relies upon assistive technology (AT) to browse the internet. Using IE though gives you no semantic data at all. So if a screen reader user interacts with pages containing the elements mentioned, using Firefox or Chrome, or Safari on OSX/IOS typically they'd be able to navigate to each of them, as they are identified to you. This is because the semantics of the elements are exposed via the accessibility APIs in the browser. IE does not expose this information, so typically the information is not conveyed to users. Basically, IE breaks the pages for some disabled users, rendering content structure less understandable.

HTML5 is definitely a step in the right direction, and it's great not just for accessibility but for developers as well. Unfortunately, relying upon browsers is still an issue - looking at you Microsoft!

The important thing is to not get dissuaded from using these HTML5 elements because of browser support. They're great in so many ways. Sometimes there are better choices, and you might have to add a little extra to make the feature useful or usable, and some elements (40 new elements were released with HTML5) have simply not been implemented by any browser or only by browsers that do not yet support assistive technologies. As a consequence, it may not yet be practical to use a particular HTML5 feature.

What developers need to remember is that the web is for everyone, and to navigation through a site should not be a chore. If a visually impaired person can't find something on your site that others can, that's a future visitor lost, and no one wants to be losing visitors.