Comp 135 web site design intermediate
This presentation is the property of its rightful owner.
Sponsored Links
1 / 27

COMP 135 Web Site Design Intermediate PowerPoint PPT Presentation


  • 54 Views
  • Uploaded on
  • Presentation posted in: General

COMP 135 Web 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.

Download Presentation

COMP 135 Web Site Design Intermediate

An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -

Presentation Transcript


Comp 135 web site design intermediate

COMP 135Web Site Design Intermediate

Week 9


Accessibility

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

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

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

t


Visual impairment

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


Comp 135 web site design intermediate

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


Mobility or dexterity impairment

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

Auditory Impairment

  • Sure, a deaf person can watch a video, but how meaningful is it without the audio?


Cognitive difficulties

Cognitive Difficulties

  • Memory-related

  • Problem-solving

  • Attention deficits

  • Reading, linguistic and verbal comprehension

  • Math comprehension

  • Visual comprehension


Assistive technologies

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


Comp 135 web site design intermediate

Windows 7 Ease of Access Center


Web content accessibility guidelines wcag 2 0

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

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

AODA 1 January 2014 Deadline

“Accessible Websites

Websites 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

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

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


Comp 135 web site design intermediate

  • 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

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 principles and guidelines summarized from wcag 2 0

Guiding Principlesand Guidelines (summarized from WCAG 2.0)

  • Perceivable

    • Provide text alternatives for any non-text content

    • Provide alternatives to time-based media

    • Create content presentable in different ways without losing structure or information

    • Make it easier to see and hear content (background/foreground contrast)

  • Operable

    • Make all content accessible by keyboard

    • Provide enough time to read content

    • Do not design content that could cause seizures


Comp 135 web site design intermediate

  • Understandable

    • Make text content readable and understandable

    • Make web pages that operate predictably

    • Help users avoid and correct mistakes

  • Robust

    • Maximize compatibility with current and future user agents and assistive technologies


Accessible rich internet applications suite wai aria

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

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

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

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

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

CSS and ARIA

  • You can use CSS attribute selectors to target ARIA attributes and role attributes

    [aria-pressed=true] {background-color: #cfb725;}


  • Login