IMD09117 and IMD09118 Web Design and Development

Accessibility.

Usability

Last week we examined usability and discussed our role in making artefacts that people are able to use.

This week we will concentrate on Accessibility and the challenge of making artefacts for everyone.

What is Accessibility?

Web Accessibilty means access to the Web by everyone, regardless of ability.

This means:Web sites and applications.Web browsers and media players.Web authoring tools and evolving web

technologiesText from http://www.w3.org/Talks/WAI-Intro/slide3-0.html

Revisiting our model

It is key to remember the right hand side of our model., Web as Hypertext System. The World Wide Web is primarily a source of information.

For a disabled person the internet can provide many opportunities and is an important resource for:

•News, information, commerce, entertainment.•Distance Learning.•Job searching, workplace interaction, the workplace itself.•Civic participation, government services.

What type of disabilities should we consider

Visual - The Web is used regularly by many visually impaired people.

Hearing - The RNID estimates that there are 8,945,000 deaf and hard of hearing people in the UK.

Physical, Speech - Many people are unable to use a mouse and navigate by keyboard.

Cognitive, Neurological – Language should be kept at an appropriate level. No flickering or strobing designs.

Why does it matter?

Legal – Disability Discrimination Act (DDA) 1995.

Business case – Disabled people are a large market with money to spend.

Most accessibility adaptations benefit everyone.

IT’S THE RIGHT THING TO DO.

Clients and Accessibility

Most clients have some awareness of usability issues.

If they are not you need to approach them with the issue.

If a site is providing a public service, it is legally required to be accessible.

Colour Colour is a subjective experience

we can perceive upward of 16 million colours but can only easily identify about 10 - e.g. red, green, yellow etc.

blue acuity is low (it’s sometimes hard to see) around 8% of males and 1% of females are colour blind

Interface Design Colours should be as distinct as possible and should not

be affected by changes in contrast Use maximum of seven colours if close together - else

limit to four colours Blue should not be used to display critical information Colour should not be used as the sole indicator or cue Adhere to conventions e.g. Red is stop or warning

Unable to see

Your beautiful images are useless if someone can’t see them – using the alt tag is the recommended solution.

The same is true with video but this is more complex.

Screen Readers

Click Here

We now understand how visually impaired people hear our sites so what steps can we take to help them?•Page Title. If the title of the page clearly describes what it’s about then we can clearly work out if we’re interested.

•Page Headings. Page structure should be considered, as a person can jump through the headings to get to the information they’re after. Headings and subheadings should be descriptive.

•Links. Links should describe where they lead to. Never use the term click here as it’s not descriptive.

Click Here

Links

Page Title

Page Headings

Click Here

• Lists. Screen readers announce the number of items in a list before reading them so Screen reader users know what to expect.

• Placement of information. As screen readers start at the top of a page and work their way down, put the most important information right at the top of the page.

• Alt text for pictures. The alt text is a text description of a picture and is read in a screen reader. The alt text should be short, concise and descriptive.

Click Here

• Short, front loaded paragraphs. Start with the conclusion, followed by what, why and when. This makes it easier for users to decide whether to read the paragraph or not.

These tips were adapted from Webcredible, and are available at:

http://www.webcredible.co.uk/user-friendly-resources/web-accessibility/screen-readers.shtml

POUR

Although no-one is in charge of the Web, the W3C sets standards and best practice for designing websites. They have 4 guidelines for accessibility:

Perceivable: Available to the senses (vision and hearing primarily) either through the browser or through assistive technologies (e.g. screen readers, screen enlargers, etc.)

Operable: Users can interact with all controls and interactive elements using either the mouse, keyboard, or an assistive device.

Understandable: Content is clear and limits confusion and ambiguity.

Robust: A wide range of technologies (including old and new user agents and assistive technologies) can access the content.

Motor Impaired Users

If someone is using a keyboard only, how can we help them?

•Include Image links: Large images are easier to click than text.

•Try to make link areas as large as possible, either in the style sheets (more on this later) or by padding around the text.

•Provide a “skip to content link”.

These tips were adapted from Webcredible, and are available at:

http://www.webcredible.co.uk/user-friendly-resources/web-accessibility/motor-impaired.shtml

Cognitive Impaired Users

Keep language simple, this also helps those whose first language is not English (or the language the site is written in).

Shorten sentences and be succinct.

Age

We all get older and as we get older we lose abilities. The most common thing to go is our sight, making small text hard to read.

Text on websites should be adjustable, allowing those with weaker eyesight the ability to read any page.

Flash

Flash has a poor history in terms of accessibility. Adobe are working on improving this.

http://www.carbonstudio.co.uk/

Accessibility Hampers Design?

If we design well and remember that we are constructing a hypertext system, we will naturally design for accessibility.

CSS- Cascading style sheets allow us to separate design from content. This will be discussed in a later session.