Archive for Accessibility

Making your website accessible

// January 28th, 2010 // No Comments » // Accessibility, Development, SEO

Accessibility can be checked automatically and can pass, however, to be more thorough a manual process of checking pages will be necessary. Manually checking will enable you to identify and rectify any accessibility and usability issues with your pages.

I don’t think most issues these days are that bad because most development is done using XHTML, CSS, and semantically. In order of importance, I would say these are the main points to cover:

  1. Manual testing by disabling images, CSS, standard use of headings and lists, testing the functionality without JavaScript
  2. Automated AA validation
  3. Adding multimedia transcripts (captions and auditory descriptions would be good too)
  4. Image contrast tests and necessary revisions, using ColorDoctor to test for Protanopia, Deuteranopia, Tritanopia and Greyscale

Our end goal then is: To make every page in your website and/or micro site standards compliant

Plan of action

  1. List all pages within the entire structure of your website
  2. Check each page in turn (using the tools mentioned later):
    1. If it validates, skip to next page in list #1
    2. If invalid, modify page, or script
  3. Repeat #2 until goal has been met

Once the above has been completed, the next goals would be focussed on if necessary, namely adding transcripts for multimedia presentations and movies.

Implementation

Condensing AA guidelines into a clear checklist

It is pointless checking each point of the AA checklist, as a lot of the sections are regarding things such as contrast of images, the semantic structure and making sure your pages are written in plain English.

Tools and Guides

A great resource giving an outline of how Mozilla Firefox and the Web Developer Toolbar can help with these manual checks can be found here http://www.webaim.org/articles/evaluatingwithfirefox/. This gives a detailed step-by-step checklist of how to test accessibility. Another good resource is http://www.w3.org/WAI/eval/ which gives an overview of evaluating a website for accessibility.

Doc type

Making sure doc type is correct is essential. It was originally set to XHTML 1.0 Strict, but because of certain elements we are using it was bringing up incompatibilities. Therefore I have set it to Transitional (see http://www.w3.org/QA/2002/04/valid-dtd-list.html).

HTML

Font size

Pages should be testing for issues regarding font size increase.

Images

Alt tags are standard attributes and would have been added to each image that has been uploaded. If images are used only as part of a design, or a layout spacer, they should be marked up with an empty alt attribute. However, testing must be done using the Firefox developer toolbar selecting the following options:

  • Outline images without alt attributes
  • Outline images with empty alt tag
  • Replace images with alt attributes
  • Disabling all images

Links

There are issues with the links SharePoint generates, however this is mentioned later in this document.

Lists

Mark up lists and list items properly using “ul”, “ol”, and definition lists as necessary.

Tables

For data tables, identify row and column headers. For data tables that have two or more logical levels of row or column headers, use mark-up to associate data cells and header cells.

IFrame

Each IFrame should have a title.

Headers

Headers and sub headings should be used correctly; this is standard practice for web developers.

Deprecated elements

Using the developer toolbar elements should be found and removed that are deprecated.

Keyboard Navigation

The access key list is already in place; however, it is hidden with CSS – even on focus state. With keyboard navigation these will not be visible. I suggest placing these links near the logo, when tab focus is on each of these links in turn, they will become visible and also have a contrasting background colour or border.

For each text links, a “focus” attribute must be added to the relevant a CSS file. The focus can be the same as the “hover” state.

For each image link, the focus attribute should either add a border, outline, or a hover state image. Again, this should be the same or similar definition as the “hover” state.

Style

Pages CSS styles should be disabled to verify if content is legible.

Scripts

To make scripts compatible with validation it was necessary to wrap embedded scripts with CDATA:

//<![CDATA[
//]]>

See http://www.w3.org/TR/xhtml1/#h-4.8 for more information.

The standard attributes for java script is “type” which should be set as:

<script language="javascript" type="text/javascript">

Pages will also be tested with JavaScript disabled.

Automated validation tools

I would suggest using http://validator.w3.org for single pages. There are others available:

Free accessibility validation tools

Other tools

ColorDoctor – http://www.fujitsu.com/global/accessibility/assistance/cd/download.html – a colour tool from fujitsu which takes an image of a webpage and can render the image as those with Protanopia, Deuteranopia, or Tritanopia would see it.

Summary

Focus here has been on validating to AA standard. Things to also consider is having a CSS file for print, as well as Screen mode.

Resources

WAI Guideline checklist: http://www.w3.org/TR/WAI-WEBCONTENT/full-checklist.html

Sample Accesskey List

// November 2nd, 2009 // 1 Comment » // Accessibility, Development, User Experience, XHTML

Access keys are simply keyboard shortcuts. They are defined combinations of keys, Alt + a key which allows the user to access that field or section of a webpage.

You impliment accesskeys using the accesskey attribute on links and forms fields. If the access key is defined on a link, the browser will follow the link. If defined on a form field, the browser will set focus on that field.

To use accesskeys on Windows, press ALT + an access key. On a Mac press Control + an access key.

There are no access key standards, so here are some commonly-used keyboard shortcuts:

  • Alt + 1 – Home (yourdomain.com)
  • Alt + 2 – Skip Nav
  • Alt + 3 – Site Map
  • Alt + 4 – Search
  • Alt + 5 – Products
  • Alt + 6 – Forums
  • Alt + 7 – Blogs
  • Alt + 8 – Privacy
  • Alt + 9 – Feedback
  • Alt + 0 – Accesskey List