Accessibility 101: An Introduction
Accessibility appears to go in cycles where interest surrounding it rises and falls. It’s not that people forget about the importance of web accessibility, but that it’s viewed as such a large undertaking. It’s not simply about the implementation of an accessible website, but also the testing and design phases which make a fully accessible website a costly and daunting task.
Image Credit: Andrew Mason
Although accessibility should be given the same consideration as both design and usability it’s often an afterthought, or implemented only on the clients request. For some freelancers and agencies the time and cost involved is something they cannot afford and a feature that many smaller clients are unwilling to pay for. All this combines to create a minefield for any web professional. So maybe it’s time to break it down a little and try a different approach.
Disabilities to Consider
Before you consider how to build an accessible website it's best to try and understand what disabilities can affect a person's experience on the web. By understanding a little better the challenges that particular individuals face, we can make better choices as to what solutions we can implement to counter them.
Most disabilities tend to fall into one of the following three categories:
- Sensory: Any disability that affects a person's senses. Primarily for the web we would be concerned with those people affected by blindness or deafness. Blindness in itself isn't such a clear cut thing either as you have to consider different degrees of blindness as well as colour blindness which is a separate concern in itself.
- Motor: A disability that affects a person's ability to move parts of their body. The way this equates to the web is usually a difficulty in using a standard mouse or keyboard. In these cases, alternative input devices exist to make the lives of those with such disabilities a little easier. However, these devices rarely give an individual the same level of control as an able-bodied person.
- Cognitive: Any form of cognitive disability will affect a person's mental capability; this would include a learning disorder or dyslexia. This really is the most difficult group to cater for as the degree and type of disability can be far ranging as well as very specific to a given individual. The best solution is to ensure the website is usable and accessible. Consider how obvious web conventions you use would be for others.
Once you understand how a person's experience is affected by their disability where do you start learning what it takes to implement an accessible website? There are many guides and articles like this one that talks about web accessibility, and most are based on the Web Content Accessibility Guidelines.
WCAG is a set of recommendations from the World Wide Web Consortium written to guide website designers and developers. The guidelines detail instances where it may be necessary to provide accessible alternatives as well as how these may be achieved.
Web Accessibility isn't just the idea of a few web evangelists within the W3C, politicians have also gotten involved. In the UK, the Disability Discrimination Act, and in the US, Section 508 of the Rehabilitation Act, are just a couple of examples of laws that now make mention of websites in relation to the disabled.
Image Credit: unjamedoan
Although these laws exist, they are targeted more towards the public sector, service based or employee used websites. These laws aren't empty threats either as legal proceedings have been brought against companies over their website, though all cases reported have been settled out of court.
For more information on these laws check out the RNIB for more information.
Quick Fixes on the Web
An accessible website isn't all about text only or high contrast versions of your website, in fact implementing these solutions should be a last resort. When you view these as your solution to an accessible website you face a monolithic task. Rather than seeing accessibility as black and white where your site is either accessible or not, try introducing a few shades of grey.
Below are some of the quickest and easiest tips you can pick up in regards to making an accessible website. Some of which you may already use, and some you may not. By slowly integrating more accessible techniques into your workflow, in time you will start producing more accessible websites.
This is the most widely adopted element of accessibility. For many designers and developers, using alt tags has become second nature, but sometimes, alt tags can be used wrongly. The purpose of alt tags is to provide an explanation of what an image shows primarily for screen readers to interpret, but they also have SEO implications. Any Alt tag should simply repeat any text contained within an image, describe correctly the subject of the image or be null.
A null alt tag would look like
alt="", and would be used when the image is used only for the design of the site and has no context within the content of the page. By leaving the alt tag null you ensure that screen readers ignore the image so that users are not frustrated by information they have no need for.
The Tabindex allows the developer to create a predefined sequence of elements, irrespective of their position in the code, for users to move through sequentially using the tab key. Once this predefined sequence has been completed then a user would continue through any other elements that support Tabindex which consists primarily of links and form elements.
The most prominent use of the Tabindex is to provide keyboard navigation through form fields, but it is also used for navigation. It is important to not overcook the page with the Tabindex and select only a few highly important links rather than defining the whole of your navigation.
Access keys are essentially shortcut keys for your website, similar to how Ctrl+C means copy, you could use Alt+0 to navigate the user to a website’s homepage.
Image Credit: alcomm
In this short description, access keys appear to be a simple idea to implement, but it's not so simple when users come to use them. Although we define an access key in the html using accesskey="0", the keys required to access this differ from browser to browser, so to active the link you would use the following:
- Google Chrome: Alt + 0
- Firefox: Alt + Shift + 0
- Internet Explorer: Alt + 0
- Safari 4 on Mac: Ctrl + Option + 0
All these combinations actually leave you with only a few characters to use as access keys. This is because the shortcuts used for access keys are the same as the one the browser uses. This limits you to a few punctuation and number keys. In truth, this is all you should need as you would only ever want to link to a few resources such as Home, Contact, Sitemap and possibly an Accessibility page.
The basic idea of skip links is to provide keyboard users a quick way of skipping some of the common elements of the site to get straight to the information they need. Depending on how you build your website, you would either use a 'Skip to Content' or 'Skip to Navigation' link placed below the opening body tag.
Of course this doesn't need to be visible to standard users so CSS can be used to hide this link, then adding a Tabindex of 1 will ensure this is the first object those using Tabindex keyboard navigation will arrive at. For those using the keyboard to navigate for reasons other than blindness, it's good practice to make the link visible on
:focus, which would be triggered in conjunction with the Tabindex.
Font Size is very much a concern for users of older browsers. Where the page zoom feature of modern browsers mainly ensures that pages don't break on resize or that we have to specify fonts using relative sizes such as em's or percentages, there are still users with old browsers where the problem still exists.
Within some browsers you can simply change page zooming to text resizing to test your site and it's inevitable that at some stage the site will break when using the feature. It’s fine that your site’s design will break, but it's important that all content is still readable. The text should not become hidden somehow or flowing into areas coloured the same as the font.
Link padding isn't just an accessibility thing. It's also good for usability. In certain cases, websites will have links that act as buttons, placed somewhere on the page alone rather than being within a line of text. When used in this way, it allows for the developer to make the link area larger than the actual text of the link. By using padding, you can create an area around the text that also activates the link. This creates a much larger region for the user to aim for than just the text, something that becomes even more useful when small font sizes or small icons are used as links.
Used in conjunction with text, icons are a valuable resource to reinforce the meaning of the associated text. It also creates a clearer visual identifier for that resource. However, when used in isolation, they can adversely affect usability and accessibility. Although there are web conventions most of us will know, there are times when designers are looking for an icon to represent something where a clear representation doesn't exist. This can confuse even the most web savvy designers, but even what may appear obvious to some, are not to others. Take for example the home icon; it is primarily used to represent a link to the homepage. Used in isolation, this may not convey the same meaning to all.
Where possible, it's best to use text with icons to communicate meaning; either by displaying both at the same time, or using rollover effect such as tool tips.
Colour is often used to convey information. However, it should never been used in isolation because those with colour blindness are not able to accurately distinguish certain colours. When choosing to use colours, they should also be used to reinforce meaning in instances where that meaning would still exist without the use of any colour.
Image Credit: photos8.com
Checking for sufficient colour contrast is also important. Often colour contrast on a website can be such where even able sighted people find it difficult, much less for those with poor eye sight or colour blindness; it would be even more problematic. When designing a website, it's essential to ensure important information has sufficient contrast to its surroundings, otherwise the two colours could bleed into the other. This would be a major issue for any content on the site.
noscript tag where appropriate is important.
For videos to be truly accessible, you should provide a full transcript for the deaf and an audio description for the blind to communicate not only the spoken words but the actions as well.
Image Credit: jsawkins
In truth, a video is an immense task to make accessible. Going along with the article’s idea of small fixes, these are simpler solutions you can consider:
- Do Nothing. If the video already communicates information that already exists on the website, instead of repeating the information, provide links to that content.
- Edited Highlights: If the video contains important information that doesn't exist elsewhere, write a few paragraphs that provide this information in a short and succinct way.
Audio has the same effect as video except for the fact that it only affects the deaf or people who are hard of hearing. Most audio on the web is primarily in the guise of podcasts where you would expect a full transcript to be provided. Again, when this is too big a task, try to cut it down a little. Rather than a full transcript, provide headings of the main points discussed and links to where they might find information about this subject elsewhere. This obviously doesn't take into account anything said that is new or personal opinion, so providing overviews of this might be useful.
Image Credit: Fe llya
For both Audio and Video, these are really cut down solutions and the ideal solutions should be those at the top of your list when going the extra mile to create an accessible website. Video and audio are some of the most inaccessible content on the web, however, its popularity on the web is still growing.
Some elements we include in a website need no explanation; they simply work and allow a more user friendly experience. On the other hand there are elements that require some explanation. One feature in particular would be the access keys. Without explanation somewhere as to what access keys are in use on the website, a user is unlikely to know that they are in fact in use, and there is no standard approach as to what access keys should be used on a website.
Adding an accessibility page also helps reinforce that the site is attempting to be accessible. If you add a statement asking for feedback and questions, you can gain valuable feedback on how well you are doing in creating accessible websites, as well as information on how to improve.
Adding a statement asking for feedback and questions is always useful. It is incredibly difficult to get a website to be fully accessible, and unfortunately it can be rather expensive to effectively user test a website. By asking for feedback, you may come across invaluable information about the accessibility of your site and get tips on how to improve this and any future sites you build.
Build it Right
All the above suggestions are pointless if you don't start with a good base point. One of the largest barriers to those using assistive technologies like screen readers is the code itself. Your websites should be semantically built using CSS based layouts; tables are a taboo. By structuring your website correctly right from the beginning, you create a great point on which to start, adding on the above features. Without this, all your efforts would be wasted.
Image Credit: Claus Rebler
Try looking at your website in lynx, a text only browser, to check to see that your website is structured in a way that still communicates the correct message without any images or design.
Online Tools & Plugins to Help
There are a number of online tools that can be extremely helpful when checking to see how accessible your website is. Online tools are a good starting point. But they can only test certain parts of the guidelines. They are no replacement for manually checking the site yourself or getting proper user testing.
- Web Developer Toolbar: This not only provides you with a lot of tools that helps you in create good websites, but it also allows you to test whether your website is accessible.
- Web Accessibility Toolbar: Similar to the web developer toolbar, it is however more tailored to Accessibility.
- Cynthia Says: An online checker that provides tests against Section 508 and the now aged WCAG 1.0 Guidelines.
- WAVE: A more visual online checker that provides indications of where some errors might exist on page.
Web Accessibility isn't about being the hero that sets out to create a fully accessible website first time out. Instead, it's best to start with the basics like the small changes you can make in order to help some users out. Gradually, over time, you can add more techniques that become part of your normal workflow. This might mean that you never get a fully accessible website by default, but when the client indicates this as a requirement, you have the building blocks on which to start with and you can add in the finishing touches to ensure the website is accessible.
Doing it this way might not give you a fully accessible website straight away. It does, however, allow you the opportunity to learn and implement the small details that help improve a website for those where the Internet was always supposed to be the vehicle that liberated them from their constraints.
What do you think of accessibility when designing and developing a website? Please share your views and opinions with us!