Web Accessibility Tips
When designing websites, it’s key to be aware of the WCAG (Web Content Accessibility Guidelines) which provides a guideline for how to implement web content for people with disabilities. If you are a designer, developer, content writer, then you will need to be aware of the WCAG guidelines.
Tip 1: Accessible Images
When adding images into your web content, standard code would be as per below, but this tells the user nothing at all, and from an accessibility point of view the disabled user won’t see anything and this tells the user nothing about the image.
The better option giving the user the below code which allows the text in the title tag to be read by the screen reader.
Tip 2: Forms
In any web forms we should group form fields together to associate the form field with the related tags. The example below shows how to structure this with the label tag before the input tag.
Observations:
title tag (This can be spoken by screen readers to speak the text or display as a tooltip. This is used in forms where there is no text displayed in the label)
for attribute(this relates the label to the related I'd of a form tag)
Grouping Form Fields
Next we are going to look at grouping form fields can help the screen reader to be given a clear description to read with the related items in the form group.
Example: The form shows a question with related choice of answers.
Observations:
- The checkboxes are wrapped within a fieldset HTML tag which wraps the fields in a border.
- The legend HTML tag gives a title or description of what this fieldset contains.
Tip 3: Navigating a user to content
Add an HTML anchor link to the top of the page labelled as “skip to content” so the user can skip over the main navigation area and be directed to the main body content of the page.
Doing this provides help to people using screen readers.
Mark-up
You can achieve this by linking to the main content area with the below HTML
which points to the ID name of the content, so if the content has a reference ID called “maincontent”, then it would link to
Photo Credit: itjil via Compfight cc
12th of June 2013 By Simon