Introduction to Web Accessibility
.jpg)
What is Accessibility?
Some people use assistive technology such as screen readers, Braille displays or magnification, and access the internet on a variety of platforms including desktop computers, laptops, mobile phones and other devices. Accessibility is about making sure as many people as possible are able to access and interact with your website, regardless of disability or the restrictions of their browsing environment.
There are several guidelines and standards in place to ensure websites conform to a decent level of accessibility, most notably, the Web Accessibility Initiative (WAI) Web Content Accessibility Guidelines (WCAG). In the UK, the Disability Discrimination Act makes it a legal requirement for service providers to take reasonable steps to allow disabled people to access their services - and that includes websites.
Page structure and CSS
HTML is designed to describe content, not to dictate styling. Traditionally, some web designers may have used a combination of text size and colour alone to distinguish headings and other page elements. While this may look correct visually, there is nothing in the HTML code to actually identify the different levels of headings, paragraphs and lists.
Assistive software such as screen readers rely on semantic HTML markup to correctly convey information to the user and to provide easy navigation methods to those who are unable to use a mouse. For example, many systems allow users to skip between headings – this only works if headings have been correctly identified in the source and not simply given a special colour or size.
Using correct markup and implementing Cascading Style Sheets (CSS) to dictate styling, keeping content and appearance separate, means that each content element has true meaning, regardless of its appearance. This separation allows the appearance of a web page to be customized to suit the user, and in addition to aiding accessibility, has the added benefit of providing search engines with useful information about the web page and again, allows for easier maintenance.
Links and navigation
Imagine you find a link that says "click here", without any surrounding text or explanation. Where will that link take you? Why should you click on it? Many users of assistive technology navigate web pages by 'tabbing' through the links on each page or by viewing a separate list of all the links, in a similar way to how sighted users can scan the page visually to look for what they want. "Click here" may make sense when read within a sentence, but when you encounter it out-of-context, there is no way to identify the target.
All text links must be descriptive and must clearly identify the target when read without the surrounding content. This technique has equally beneficial results for search engine optimization when keywords are included. Where images also act as links, the image alt attribute should be used to both describe the image and identify the target of the link.
Keyboard navigation
Not everyone is able to use a mouse. Blind people cannot see where the mouse pointer is on the screen and users with mobility problems, including older users, don’t always have enough control in their hands to operate a mouse. Many of these usergroups will use their keyboard as an alternative and most tasks can be achieved using this method if the website is designed with these people in mind.
It should be possible to navigate to every page of the website using only the keyboard. If navigation systems are used that require mouse control, as is the case with some drop-down menus, an easily identifiable and accessible alternative route must be provided. It is also important that users are able to navigate through each page, in a logical order, and without triggering unexpected results such as popup-windows or causing the keyboard focus to be lost.
The title attribute
Often abused and misunderstood, the title attribute can be used with most HTML elements to provide additional information which is normally rendered by web browsers as a 'tooltip' when hovering over the element. Screen Reader support for the title attribute varies and they are often not announced if using the software’s default verbosity settings. For this reason, only additional, non-essential information should be provided in the title.
A common misconception is that every link must have a title. In the case of text links where the link phrase is descriptive enough, a title is unnecessary and simply repeating the link text in the title is worthless, particularly for screen reader users who may have to listen to the phrase twice.
The alt attribute
The alt attribute is used to give alternative textual content for non-textual elements, such as images. Users with screen readers or Braille displays cannot 'see' images - screen readers will announce and image when it finds one, but it cannot tell what the image shows or what its meaning is within the context of the page.
The alt attribute allows us to provide a description of the image, which can then be announced by a screen reader, transcribed into Braille or displayed in place of the image. As with the title attribute, there are situations where alt text should be omitted. Where images are used purely for decoration or layout and have to real meaning or impact on the page content, alt text is often more of a hindrance than a help.
Forms
One of the major benefits of a website is the ability to collect information from your visitors and the easiest way to achieve this is by using online forms. However, forms can present several barriers to accessibility if incorrectly implemented. Form fields should be correctly labelled with correctly positioned and associated 'label' lags – this allows screen readers, for example, to announce the correct name when interacting with each field and has the added benefit of providing a larger clickable area for mouse users.
Mandatory fields (those that require information to be entered before the form can be submitted) must be clearly identified in the field label – simply highlighting these fields with a different colour or other visual clue is insufficient for users who are able to see the screen. Similarly, if a form is returned with errors, it should be made obvious to which field the error applies and what the user has to do to correct their mistake.
Javascript
Another common misconception is that users of screen readers and other assistive systems browse the internet with JavaScript disabled, or in a special browser that does not support JavaScript. In reality, the majority of these people use standard browsers such as Microsoft Internet Explorer and Mozilla Firefox and have no need to alter their basic configuration.
If JavaScript is used, it should not cause the user’s browser to behave unexpectedly such as spawning new windows without warning or causing the page to refresh or redirect. Equally, the website should remain usable if JavaScript is disabled.
Useful resources
This blog post was written by Matt
If you would like to discuss this post why not follow us on twitter?
.jpg)
.jpg)
