A visitor walks through “Luminarium”, a multicolored art installation at the UN Office in Geneva by British artist Alan Parkinson. UN Photo/Jean-Marc Ferré

Design

Websites are not experienced the same way by everyone who visits them. Someone with disabilities may not see the images on a page. Or they may not recognize color. This is why you should design your website to make it accessible. This ensures that every element of the site is recognized, and your content is clearly understood.

Images

Explanation

Images make websites come to life, and add meaning to content. To make an image accessible for those who cannot experience it fully, descriptive "alt text" must be chosen for each image. In doing this, you want to decide what information is the most important in order to convey the meaning of the image to the user. "Alt text" is always required. Most screen reader softwares announce there is an image on the page by using a word like "graphic". Therefore, do not use words like "image", "graphic" and "photo" in your alt text unless it conveys something additional to the description.

Avoid using images to display text, for example in a navigation menu. Use HTML styled with CSS instead.

Visually-impaired users may have more difficulties to read text in an image because it cannot be altered to fit user preferences: font size cannot be increased; the level of contrast cannot be modified.

Furthermore, an image does not convey structural information. If an image is used to display a title, a blind user will not know that this particular image is to be considered as a title because it will not be enclosed in a heading tag (<h1>, <h2>).

How to use

Use an "alt" and/or a "longdesc" attribute on every "img" element or other non-text object inserted in the HTML code.

The "alt" attribute gives a short description of the image. It is the most common way of providing an alternative text description.

<img src="ny.jpg" ... alt="Picture of New York City" />

 

The "longdesc" attribute provides a link to a longer description of the image. This is particularly useful for images that convey a lot of information such as charts.

<img src="budget_chart.jpg" ... alt="Pie chart of the 2006 budget" longdesc="chart.htm" />

 

If an image does not convey any information and only serves a decorative purpose, add an empty "alt" attribute. Decorative elements can be defined in a CSS style sheet.

<img src="line.gif" alt="" /> (there should be no space between the quotes)

 

When an image is used in a form to replace a submit button, use the "alt" attribute.

<input class="img_button" type="submit" name="Submit" value="Submit" alt="submit">

 

Complementing images with text
CSS
#hiddentitle, #hiddentitle span {
  margin: 0;
  padding: 0;
  background-image: url(images/idptop.jpg);
  background-repeat: no-repeat;
  height: 135px;
}
#hiddentitle span {margin-bottom: -75px;}
HTML
<div id="banner">
  <h1 id="hiddentitle"><span></span>International Day of Peace, Portal 2007</h1>
</div>

Testing

Subject Method Description Success Criteria

Images

Firefox Plugin

Go to Images > Outline images without "alt" attribute
Go to Images > Replace images with "alt"

No image exists without an "alt" attribute. The information conveyed through the use of images is replaced by descriptive "alt" attribute. No information is missing. There are no "alt" attribute with meaningless information (such as "spacer" or "blue line"). "Meaningless information" is considered information that is not fully descriptive of the element.

Colour

Explanation

The two most important things to keep in mind while using colour on a website are information and contrast. The various combinations of colour you use on your website should contrast well with each other, so those with low vision can distinguish one element from another. Many people have lack of contrast sensitivity as they get older. WCAG 2.0 AA, recommends contrast of at least 4.5:1. Tools exist to check this mathematical formula.

colour should not be relied upon to give meaning to content. Users who are blind, low-vision or colourblind cannot differentiate between items you are distinguishing from each other through colour. Therefore, you should not use colour to identify fields in forms, key ideas and concepts, or charts.

How to use

Give additional clues textual clues to compliment colour. See examples below: /p>

  1. Buttons using colour as the only descriptive label.
    "Click on the green button to continue. Click on the red button to stop the registration process."
    Red and green buttons
    Complement the colour cues with text:
    Red Stop, Green Continue Buttons
  2. Avoid similar statements: "All fields marked in red are obligatory". Instead use other visual clues: "All fields marked with * are obligatory"
  3. Do not rely on colour alone to highlight links outside of navigation elements. The best practice is to underline links. Alternatively, links could be bold.

Testing for Colour

Subject Method Description Success Criteria

Images

Firefox Plugin

  1. Go to Disable > Disable page colours
  2. Go to Images > Disable all images

There is no critical information missing when colours and/or images are disabled. Links in the text are clearly identified and underlined.

Testing for Colour Contrast for text and images with flat colours

Subject Method Description Success Criteria

Images

Juicy Studio colour Analyzer

and

Firefox Plugin

Test colour contrast requirements with Juicy Studio.

Firefox plugin allows for the testing of all colours on a page (with the exception of colours in images).

All the colour combinations in the page pass level AAA or AA for regular text size.

Testing for Colour Contrast for images without flat colours

Subject Method Description Success Criteria

Images

Vischeck

Run the image through Vischeck to simulate how the page will look if viewed by a colour-blind person.

The information conveyed by the image is still understandable.

Carousels and Animations

Explanation

Carousels, also known as "slideshows" or " sliders" are a simple way to animate a static page, and create movement and interest in a website and web page. However, in creating carousels, it is important to remember that in order for the slideshow to be accessible, the user needs to have control over it. They must be able to stop the slideshow, and move to the next slide at their own pace. Only by giving users control, can all users experience the content at a speed suitable for them. Because carousels are often placed on the homepage of websites and serve as introductions to the website, it is doubly important that they are accessible, so all users can understand the content of the website, by being able to experience its introduction.

Avoid visual elements which can cause the screen to flicker, move or blink.

Screen flickering and blinking can trigger epileptic seizures in people suffering from photosensitive epilepsy.

Furthermore, it is difficult to read some text that is flashing or moving, or to read the content of a page when something else is flashing or moving on that page. Users read at different speeds and moving text does not accommodate those differences. Blinking or moving text will frequently distract visitors from what is important on the site.

How to use

Provide structural markup for the carousel and its items, and later enhance these structures with styling and scripting. This ensures that the content of the carousel has meaning on its own, without styling and scripting, and can be rendered and used in more situations.

Allow full control of the slider. Provide functionality using scripting.

See full explanation on how to build accessible carousels.

Do not create elements that flicker or blink.

Testing

Subject Method Description Success Criteria

Carousels and Animations

Manual/Firefox Plugin

Make sure there are no flickering elements on the page. Checck that users have full control of the carousel with keyboard and mouse. Check how the page looks when styles and images are disabled using the Firefox plugin

No elements on the page should flicker. Carousel should be fully controled via keybaord or mouse. Carousels should gracefully degrade and function when images are disabled.

Designing with HTML

Explanation

Support for style sheets is not consistent across all browsers and platforms. Furthermore, users have the ability to override the original style sheet with one of their own which might be better suited for their needs (for example, with larger fonts or a different colour scheme).

Organize documents so that they may be read without style sheets. For example, when an HTML document is rendered without associated style sheets, it must still be possible to read the document. Create documents with valid HTML or XHTML.

Document layout should be organized in a comprehensible format in order to be legible without style sheets. When style sheets are turned off, all content and links should be accessible and functional to the user.

How to use

The structure of the document should be reflected in the HTML: titles should be tagged with heading tags (<h1>, <h2>), menus and lists should be in list tags (<li>), quotations should be in blockquote tags (<blockquote>).

Testing

Subject Method Description Success Criteria

Designing with HTML

Firefox Plugin

Go to CSS > Disable styles> All styles

The document is still readable. Elements such as headings or lists can be recognised as such.

Designing with HTML

Firefox Plugin

Go to Tools > Validate HTML.

The code passes validation. No errors are found.

Designing with HTML

Firefox Plugin

Go to Tools > Validate CSS.

The code passes validation. No errors are found.

Notes

The W3C validator only checks if the page is coded according to defined standards. It does not validate other aspects of accessibility.

If your server cannot be accessed by the W3C validator in a test or intranet environment, in Tools, select Display Page Validation and check the icons in the toolbar, or in Tools, select Validate Local CSS and Validate Local HTML.

Relative Size Units

Explanation

Use relative rather than absolute units in markup language attribute values and style sheet property values.

Define the size of elements with relative units such as "em" and "%". Do not use absolute or fixed units such as "pixels" or "points".

If the font size is fixed, the user can't scale the text in order to facilitate legibility. If the width of the page is designed to display well in a fixed browser window size and the user enlarges the text, it could become too large to display on screen. This affects users who are viewing content on a small screen, such as a mobile device or laptop, or users with poor eyesight. Relative sizing also means that the website can be used on a wider selection of devices.

How to use

Use CSS to format elements with relative units (em).

CSS, using "em" to set font sizes
h1 {font-size: 3em;}

 

CSS, using percentages to set width and margins
div#main {
  width: 75%;
  margin-left: 15%;
  margin-right: 10%;
}

Testing

Subject Method Description Success Criteria

Designing with HTML

Firefox Plugin

Go to CSS > View CSS.

All sizes are set in "%" or "em".

Notes

Margin and padding values can be set using absolute units ("px").

This requirement for relative units does not apply to print style sheets.