pixel MENU
0845 303 9394hello@e-techuk.com

Web Accessibility Tips

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.

accessible images

The better option giving the user the below code which allows the text in the title tag to be read by the screen reader.

accessible images

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)

accessible forms

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.

accessible forms

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

accessible navigation

 which points to the ID name of the content, so if the content has a reference ID called “maincontent”, then it would link to

accessible navigation

Photo Credit: itjil via Compfight cc

12th of June 2013 By Simon

contact us direct on 0845 303 9394 or complete our online quote

get in touch today
Privacy Policy & CookiesTerms © Copyright 2018 - Eadetech Limited | Company Registration No: 04770510
103 Daventry RoadRomfordEssexRM3 7RD
0845 303 9394