COMP 135 Web Site Design Intermediate

1. COMP 135Web Site Design Intermediate Week 9

2. 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.

3. 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

4. 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

5. 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

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

7. Mobility or Dexterity Impairment • Limited arm movement • Use of only one hand • Difficulty controlling fine movements • Difficulty holding a mouse • Tremors, shaking hands

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

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

10. 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

12. Windows 7 Ease of Access Center

13. 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

14. 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

15. 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

16. 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

17. 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

18. 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

19. 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

20. 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

21. 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

22. 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

23. 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

24. 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

25. 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

26. 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

27. CSS and ARIA • You can use CSS attribute selectors to target ARIA attributes and role attributes [aria-pressed=true] {background-color: #cfb725;}