COMP 135Web Site Design Intermediate

Week 9

Accessibility

Definition, policies, standards Continuum of abilities

As defined by Derek Featherstone in his chapters on accessibility in Interact With Web Standards: A holistic approach to web design. New Riders. 2010.

What is Web Accessibility?

The practice of making web sites usable by people of all abilities and disabilities

Accessibly designed web sites should provide everyone with equal access to information and functionality

Usability and accessibility are closely related Need both for users with disabilities If it’s not accessible it cannot be usable It may be accessible but it may not be usable

It is a human right and a moral obligation

Understanding Accessibility Visual Impairment

Ranges from complete blindness, to low vision, to colour blindness

Mobility or Dexterity Impairment Severe: paraplegia/quadriplegia, cerebral palsy, multiple

sclerosis Difficulty with fine-motor: arthritis, Parkinson’s Disease Old age

Auditory Impairment Deaf, hard of hearing

Cognitive Impairment Severe learning disabilities, low literacy or numeracy skills,

dyslexia, cultural or language differences

Visual Impairment People who are blind can use computer but

they can’t see the screen People with low vision may only see the

screen partially People with colour blindness cannot

distinguish some colour combinations because of low contrast

Example of Macular Degeneration. (http://webaim.org/simulations/lowvision-sim.htm)

Mobility or Dexterity Impairment

Limited arm movement Use of only one hand Difficulty controlling fine movements Difficulty holding a mouse Tremors, shaking hands

Auditory Impairment Sure, a deaf person can watch a video, but

how meaningful is it without the audio?

Cognitive Difficulties Memory-related Problem-solving Attention deficits Reading, linguistic and verbal comprehension Math comprehension Visual comprehension

Assistive Technologies Hardware

Touch screens Head- and mouth-wands Switches Customized keyboards Large mice trackballs

Software Screen readers High contrast colour schemes Text and icon magnification

Windows 7 Ease of Access Center

Web Content Accessibility Guidelines (WCAG 2.0)

W3C standard, approved December 2008 Provides set of principles and guidelines for

attaining accessible sites Consists of four principles and broken down

into 12 guidelines Each guideline has several “success criteria” Accessibility advocates (Joe Clark in particular)

have argued WCAG 2.0 is unattainable:http://alistapart.com/article/tohellwithwcag2

Levels of Conformance Priority 1 / Level A – This is the lowest level

and means you’ve met the minimum level of accessibility in WCAG 1.0

Priority 2 / Level AA *This is often the minimum level of accessibility required in WCAG 2.0

Priority 3 / Level AAA**

* Most government legislation specify this checkpoint** In practice this is impractical and unattainable

AODA 1 January 2014 Deadline“Accessible WebsitesWebsites and their content must meet the Web Content

Accessibility Guidelines (WCAG) 2.0, an internationally accepted standard for web accessibility developed by the World Wide Web Consortium. WCAG 2.0 contains guidelines regarding writing web content in clear language, providing alternate text for images, and ensuring that individuals can navigate the website using only a keyboard.

WCAG 2.0 contains three levels of accessibility: A; AA; and AAA (being the highest). By January 1, 2014, large organizations must ensure that their new public websites and web content conform with WCAG 2.0 Level A.”

http://www.lexology.com/library/detail.aspx?g=826ada93-1010-46b4-a073-ac4399f18424

Guidelines Checkpoints for attaining conformance Can be machine tested Some require human interpretation and action

14 Guidelines with checkpoints in WCAG 1.0 4 Principles with 12 Guidelines in WCAG 2.0

Some WCAG 1.0 Guidelines that most websites don’t attain 1. Provide Equivalent Alternatives to Auditory

and Visual Content alt attribute on all img elements Captioning and/or descriptive content for audio

and video content 2. Don’t Rely on Colour Alone

Red/Green colour blindness in males significant Monochrome devices such as Amazon Kindle

3. Use Markup and Style Sheets and Do So Properly Accessible websites are valid, but valid websites

aren’t necessarily accessible

5. Create Tables That Transform Gracefully Use row and column headers in data tables Use thead, tfoot, and tbody to group rows and col

and colgroup to group columns Use axis, scope and headers attributes to show

relationship between cells and headers 9. Design for Device-Independence

Websites must be usable with keyboard or voice-input devices and not just with a mouse

WCAG 1.0 Conformance Checkers Cynthia Says – www.cynthiasays.com HERA – www.sidar.org/hera/index.php.en WAVE from Webaim – wave.webaim.org Total Validator – www.totalvalidator.com ATRC Accessibility Checker (also WCAG 2.0) – www.achecker.ca/checker/index.php

Guiding Principlesand Guidelines (summarized from WCAG 2.0)

1. Perceivablea. Provide text alternatives for any non-text contentb. Provide alternatives to time-based mediac. Create content presentable in different ways

without losing structure or informationd. Make it easier to see and hear content

(background/foreground contrast)2. Operable

a. Make all content accessible by keyboardb. Provide enough time to read contentc. Do not design content that could cause seizures

3. Understandablea. Make text content readable and understandableb. Make web pages that operate predictablyc. Help users avoid and correct mistakes

4. Robusta. Maximize compatibility with current and future

user agents and assistive technologies

Accessible Rich Internet ApplicationsSuite (WAI-ARIA) A set of HTML extensions to annotate

elements Used to identify an element’s role, state and

properties to increase page accessibility (an ontology of roles)

Accessibility software and devices make use of this to provide users with appropriate information regarding the role, usage or function of an element, widget, structure or behaviour of a web application

Keyboard Access Some elements can have focus and the tab

key can be used to provide access or focus to them, e.g. a, area, button, input, and select

Tab order determined by source order in HTML or presence of tabindex attribute

ARIA allows developers to use tabindex on any element to make it accessible and most modern browsers now support this method

Roles Developers have used id and class attributes

to provide semantic meaning to elements e.g. <ul class=“navigation”> is often used to

describe some unordered lists that serve a role as a navigation element

ARIA extends the role attribute with new values to allow it to describe the function of an element

www.w3.org/TR/wai-aria/roles

Role Categories Landmark roles

Describes regions on page for navigation application, banner, main, navigation, search

Document structure roles Describes part played by element in the document’s

structure navigation, section, note, heading

Application structure roles Describes part play by element in structure of an application alert, alertdialog, progressbar, status

User interface elements treegrid, toolbar, menuitem

User input roles checkbox, slider, option

States and Properties A state or property describes a dynamic piece of

information about an element, e.g. pressed or unpressed, checked or unchecked

There are no state or property attributes as in role Therefore we use a aria- prefix to create one Example usage

Define whether a button has been pressed: <input type=“image” alt=“font-weight: bold” src=“./images/bold-unpressed.png” role=“button” aria-pressed=“false”>

A JavaScript can then be used to create an action for this state

CSS and ARIA You can use CSS attribute selectors to target

ARIA attributes and role attributes [aria-pressed=true] {

background-color: #cfb725;}