Handmade
CSS Design

We couldn´t do it all by ourselves!

Over time we have become a team
of six people who all share
the eagerness to develop
outstanding websites
while still having fun.
We believe in thorough
planning and organisation,
hard work, transparency and
communication.

accessibility

Introduction

Accessibility is not only good for a company’s image but it also helps with SEO and Google ranking and is often one of the most important factors in making or breaking companies Google Rank.

This document briefly outlines the technical techniques, gives further information and briefly outlines the validation tools used by Handmade CSS Design during the development of all the handmade signature web applications we develop.

Markup

  • Separate structure from presentation (by use of external styling) and ensuring at all times the proper use of markup for that structure.
    e.g. mark up lists as lists (<ul>, <ol>, <dl>) rather than text with a <br /> tag after each list item.
  • XHTML headings (e.g. <h1>, <h2>, <h3> etc.) are a requirement for visually impaired visitors.
  • Properly marked up sections of a “page” and “body” with XHTML headings rather than something such as a <p> tag with external CSS styling that makes it look like a heading.
  • Give pages meaningful and accurate titles using the <title> tag.
  • Indicate the primary human language of the document using the “lang” attribute in the <html> tag, and indicate any passages in a secondary language using the “lang” attribute on other tags wrapping the relevant text.
    e.g. “<span lang=”es”>Hola</span> means Hello”
  • “Skip to content” links are provided at the top of the markup order in pages with large numbers of navigational links before the main content.
  • Headers are always provided in data tables using <th> tags, and associate all data cells with their header.
  • Tab order is developed logical using a tabindex, if necessary.

Note: If the HTML is in the proper order, then using tabindex isn’t necessary.

Visual Appearance & Content

  • Ensure all pages are still usable when images are turned off.
  • Note: This may include making sure that contrast of the text is still sufficient if the background image is removed and you were left with only the standard browser white background.
  • Ensure all pages remain usable when users enlarge text up to twice its original size.
  • Ensure each element on a page is reachable and can be manipulated via the keyboard.
  • Whenever possible, write descriptive headings and link texts which can be understood when read out of context.
    e.g. no “click here” links
  • For color-vision deficiency and low-vision visitors, we ensure that the content and background have sufficient contrast.
    Note: Full testing information supplied later in the document. We do not use content that flashes or blinks more than three times a second this is so as to prevent Epileptic Seizures and other medical conditions.
  • We do not hide the focus indicator. When a user uses the keyboard to tab from element to element, it should always be apparent where they are.
  • We do not require users to perceive font, color, or other styling changes in order to understand meaning. For instance, we don’t use, “The highlighted word in the previous paragraph is the most important,” or “Items marked in red are errors and need to be corrected,” unless the word or items are indicated in some other way.

Dynamic Content

We do not use JavaScript events that radically alter the page or load a new page when fired.

Images & Multimedia

  • Ensure all images have an “alt” attribute, leaving the text for decorational images blank (e.g. alt=””).
  • Always add alt text when images are also links.
  • In general, we are brief when using “alt” text (e.g. “Notre Dame Cathedral”), but provide detail when it conveys meaning (e.g. “Son standing at his father’s graveside with mother in arms”).
  • Provide a transcript, sub-titles, captions, and/or sign language translation for all audio and video with speech.
  • Provide a “described” version of a video when description is necessary for visually impaired visitors to understand content. (The described audio track can either be distributed with the video content, or as an audio only file.)
  • Ensure all videos, if they don’t “auto play”, have, at the very least, an accessible “Play” control.
  • When text can be rendered just as well by the browser as it can in an image, we avoid using images for text. (Image replacement techniques are often an acceptable alternate, but we also have to consider translation requirements when using text in or as images.)

Forms

  • Ensure all form fields with the <label> tag. If a form field has no specific text label on the page, we add one, and hide it with CSS or use the <title> attribute.
  • Use “field sets” ( <fieldset> ) with “legends” ( <legend> ) to associate prompts with “radio buttons” and “check boxes”. For instance, a form asks “Gender:” and offers radio buttons that say “Male” or “Female”. then e.g. <legend>Gender:</legend> should be used for the tag, and all three elements ( <legend> and the two radio buttons with their label text) should be enclosed in a <fieldset> tag.
  • We Identify all input errors in text (in addition to any images or icons), and place the error notification either next to the affected field or in a prominent location such as the top of the page with an anchor link to the affected field.
  • Provide help links or inline instructions for completing fields when necessary.
  • Do not permit users to complete important actions without a confirmation or a way to undo.
  • Avoid using HTML elements in nonstandard ways.
    e.g. form elements for navigation, links for form submission, etc.

Accessibility Testing

  • We strictly follow the guidelines set out for color vision deficiency using simulators or browser plug-ins.
    We use and recommended:
    http://colororacle.cartography.ch
    http://www.vischeck.com
  • We test all pages for accessibility validation using the following evaluation tool at http://wave.webaim.org, but only after we have done all we can to ensure that a page is as accessible as can be by using the all the above steps.
  • We test all pages using “IBM’s Accessibility Speech Interface version 1.20” which read the content of a page out loud for visually impaired visitors to our site. Further information regarding this technology can be found here:
    http://www.ibm.com/accessibility/us/en/
  • An evaluation copy of this technology is available for download here:
    http://www-03.ibm.com/able/dwnlds/index.html
  • We have all the pages individually reviewed by an accessibility expert.
Image of the back button

You may remain informed as to all of our latest news and events via the RSS 2.0 feed that you will find here!

top