comp 135 web site design intermediate n.
Skip this Video
Download Presentation
COMP 135 Web Site Design Intermediate

Loading in 2 Seconds...

play fullscreen
1 / 27

COMP 135 Web Site Design Intermediate - PowerPoint PPT Presentation

  • Uploaded on

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.

I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
Download Presentation

PowerPoint Slideshow about 'COMP 135 Web Site Design Intermediate' - abiba

Download Now 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
  • 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


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

Example of Macular Degeneration. (

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
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:
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.”

  • 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

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 –
  • HERA –
  • WAVE from Webaim –
  • Total Validator –
  • ATRC Accessibility Checker (also WCAG 2.0) –
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


    • 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
  • 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
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
  • You can use CSS attribute selectors to target ARIA attributes and role attributes

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