attribution noncommercial sharealike 2.5 canada

Broughtto you byBroughtto you by

Technical training session – CSUN12 / AccessU

Build Accessible HTML Structures

Knowbility’s AccessU - CSUN 2012Denis Boudreau, AccessibilitéWebSan Diego – February 27th, 2012


Attribution NonCommercial ShareAlike 2.5 Canada

2012. Some Rights Reserved.

/ 2


Trainer

Denis Boudreau

11+ yrs experience - Web Accessibility

President, AccessibilitéWeb

Co-editor, SGQRI 008 standards

Invited Expert, W3C

/ 3


SummaryGeneral overview

1. HTML overview2. Web standards 1013. Web accessibility 1014. Web accessibility standards5. Web accessibility best practices6. Putting it all together7. Web accessibility testing8. Other W3C resources

/ 4


HTML Overview

/ 5


HTML OverviewLearning (knowing?) the ropes

Basics of HTML •D

octypes and markup styles•T

he <head> and <body> elements•U

sing the HTML toolbox•H

TML examples: http://is.gd/2x1weT•H

TML code generator: http://is.gd/3v7cBb

/ 6


Web Standards 101

/ 7


Web Standards 101The web standards model

HTML, CSS and JavaScript – the developer’s toolbox

•HTML markup - the basis of every web page

•CSS markup - the presentation layer

•JavaScript - adding behaviour to pages

Three-legged stool of modern web development

•Separating structure, presentation and behaviour

•Benefits from efficiently separating the layers

/ 8


Web Standards 101Why web standards matter

General benefits•I

nteroperability with other systems•P

ortability with other platforms•F

aster loading and better user experience•S

emantic order and higher search engine indexing•F

uture proofing and reducing the need for a redesign•I

mplementing changes far quicker

/ 9


Web Standards 101Optimizing the web development efforts

Code validation benefits

•Valid code is search engine friendly

•Valid code displays consistently

•Valid code is more extensible than invalid code

•Valid code is more accessible than invalid code

•Valid code is good quality control

/ 10


Web Accessibility 101

/ 11


Web Accessibility 101The fundamental basics

What is web accessibility?

•Different people requiring different needs

•Being more aware of the entire audience’s needs

•Catering for the needs of people with disabilities

•But other people as well!

/ 12



Why is accessibility important?

•Legalities of accessibility

•Potential markets

•Search engines

•Mobile Web

•Ethics and branding

/ 13


Web Accessibility 101The WAI’s business case for accessibility

ResourceDeveloping a Web Accessibility Business Case for Your Organization: Overviewhttp://www.w3.org/WAI/bcase/

/ 14



Designing with accessibility in mind

•Accessibility: bolted on versus built in

•Web accessibility responsibility breakdown

•Divide guidelines between various stakeholders

•Planning accessibility from the very beginning

/ 15



Features of an accessible web page

•Semantic structure of content

•Alternative versions of content

•Interaction levels as building blocks

•Progressive enhancement concept

/ 16


Web Accessibility Standards

/ 17


Web Accessibility StandardsAccessibility standards around the globe

Available standards and guidelines

•Web content accessibility guidelines 1.0

•Web content accessibility guidelines 2.0

•Section 508 / localized interpretations

•Other W3C standards and documents

/ 18


Web Accessibility StandardsWeb content accessibility guidelines 2.0

WCAG 2.0 - Overview

•WCAG?

•Who WCAG is for?

•What is in WCAG 2.0?

•WCAG Versions: 1.0 and 2.0?

•Who develops WCAG?

/ 19


Web Accessibility StandardsWCAG 2.0 – Layers of guidance

WCAG 2.0 - Overview

•Four principles

•Twelve guidelines

•Sixty-one success criteria

•Three conformance levels

/ 20


Web Accessibility StandardsWCAG 2.0 - General organization

WCAG 2.0 - Principles

•Perceivable

•Operable

•Understandable

•Robust

/ 21



WCAG 2.0 - Guidelines

•Perceivable (4 guidelines)

•Operable (4 guidelines)

•Understandable (3 guidelines)

•Robust (1 guideline)

/ 22



WCAG 2.0 – Perceivable (4 guidelines)

•1.1 Provide text alternatives for any non-text content so that it can be changed into other forms people need

•1.2 Provide alternatives for time-based media

•1.3 Create content that can be presented in different ways (for example simpler layout) without losing information or structure

•1.4 Make it easier for users to see and hear content including separating foreground from background

/ 23



WCAG 2.0 – Operable (4 guidelines)

•2.1 Make all functionality available from a keyboard

•2.2 Provide users enough time to read and use content

•2.3 Do not design content in a way that is known to cause seizures

•2.4 Provide ways to help users navigate, find content, and determine where they are

/ 24



WCAG 2.0 – Understandable (2 guidelines)

•3.1 Make text content readable and understandable

•3.2 Make Web pages appear and operate in predictable ways

•3.3 Help users avoid and correct mistakes

/ 25



WCAG 2.0 – Robust (1 guideline)

•4.1 Maximize compatibility with current and future user agents, including assistive technologies

/ 26



•Organized under the different principles as:• Perceivable – 22 sc• Operable – 20 sc• Understandable – 17 sc• Robust – 2 sc

• Organized under the conformance levels as:• Level A – 25 sc• Level AA – 13 sc• Level AAA – 23 sc

WCAG 2.0 – 61 Success criteria

/ 27


Web Accessibility StandardsWCAG 2.0 documents overview

ResourceThe WCAG 2.0 Documentshttp://www.w3.org/WAI/intro/wcag20

/ 28


Web Accessibility StandardsThe accessibility guidelines

ResourceWeb Content Accessibility Guidelines (WCAG) 2.0http://www.w3.org/TR/WCAG/

/ 29


Web Accessibility StandardsThe WCAG 2.0 mindmap

ResourceThe WCAG 2.0 Map: A visual guide to understanding web accessibilityhttp://www.stamfordinteractive.com.au/the-wcag-2-0-map/

/ 30


Web Accessibility StandardsThe WCAG 2.0 documents

ResourceHow to Meet WCAG 2.0http://www.w3.org/WAI/WCAG20/quickref/

ResourceUnderstanding WCAG 2.0http://www.w3.org/TR/UNDERSTANDING-WCAG20/

ResourceTechniques and Failures for WCAG 2.0http://www.w3.org/TR/WCAG-TECHS/

/ 31


Accessibility Best Practices

/ 32


Accessibility Best PracticesA 80/20 accessibility proposal

Starting somewhere•T

ext equivalents for non-text content•C

ontent structure and semantics•C

olor use and contrasts•F

orm fields and labels•K

eyboard navigation•S

ignificant hyperlinks•L

anguage identification•A

few more things to consider

/ 33


Accessibility Best PracticesText equivalents for non-text content

Providing •s

hort text alternative for non-text content•l

ong descriptions for non-text content•a

lternatives for time based media

Managing •i

nformative images•i

mages used as buttons•d

ecorative images

/ 34


Accessibility Best PracticesContent structure and semantics

Providing •d

escriptive titles for Web pages•d

escriptive headings for content•h

eadings at the beginning of each section of content

Using •s

emantic elements to mark up structure•h

1-h6 elements to identify headings•(

x)HTML according to specifications

/ 35


Accessibility Best PracticesColor use and contrasts

Ensuring

•information conveyed by color is also available in text

•sufficient color contrast ratios for normal sized text

•sufficient color contrast ratios for enlarged text

/ 36


Accessibility Best PracticesForm fields and labels

Providing

•text descriptions to identify required fields

•descriptive labels to form fields

•explicit associations between labels and fields

Using •t

itle attributes to identify form controls

/ 37


Accessibility Best PracticesKeyboard navigation

Ensuring •k

eyboard control for all functionalities•a

logical tab order through content•u

sers are not trapped in content

Providing •k

eyboard-triggered event handlers•c

ontent organized in a meaningful sequence

/ 38


Accessibility Best PracticesSignificant hyperlinks

Providing •l

ink text describing the link’s purpose (in context)•l

ink text describing the link’s purpose (out of context)•l

ink text that describes the purpose of an anchor•t

itle attribute to supplement link text

Using •t

arget attribute to open a new window•a

described icon to announce a new window

/ 39


Accessibility Best PracticesLanguage identification

Using

•language attributes on the html element

•language attributes to identify changes in content

/ 40


Accessibility Best PracticesA few more things to consider...

Providing •a

link at the top of each page skipping to main content•a

site map and a breadcrumb trail•a

submit button to initiate a context change•a

description of upcoming changes of context

Using •a

ttributes to associate data and header cells in tables•v

alid HTML to cater for relevant accessibility concerns

/ 41


Putting It All Together

/ 42


Putting It All TogetherThe WAI’s before and after demo

ResourceOverview - Before and After Demonstration:Improving a Web site using WCAG 2.0http://www.w3.org/WAI/demos/bad/

/ 43


Accessibility Testing

/ 44


Accessibility TestingAdopting an assessment method

Three-step accessibility evaluation

1.testing the web page with a screen reader

2.using an automatic checker for basic problems

3.running manual testing to complete the audit

/ 45


Accessibility Testing1st - Using NVDA to Evaluate Web Accessibility

ResourceUsing NVDA to Evaluate Web Accessibilityhttp://webaim.org/articles/nvda/

/ 46


Accessibility Testing2nd - Web accessibility checker

ResourceWeb Accessibility Checkerhttp://achecker.ca/checker/

/ 47


Accessibility Testing3rd - Roger Hudson’s WCAG 2.0 checklist

ResourceWCAG 2.0 Checklisthttp://www.usability.com.au/resources/wcag2checklist.cfm

/ 48


Accessibility TestingEasy to use tools to get the job done

Mozilla Firefox

•Web developer toolbar

•Accessibility evaluator

•Juicy studio a11y toolbar

•FireBug

•HeadingsMap

•NoSquint

•Fangs

/ 49

Microsoft Internet Explorer• Web accessibility toolbar

Other useful tools• Color contrast analyzer• FireEyes extension


Other W3C Resources

/ 50


Other W3C ResourcesGetting started with web accessibility

ResourceGetting Started with Web Accessibilityhttp://www.w3.org/WAI/gettingstarted/

/ 51


Other W3C ResourcesFinding Your WAI ("way”)

ResourceFinding Your WAI ("way”) to New Web Accessibility Resourceshttp://www.w3.org/WAI/yourWAI

/ 52


Other W3C ResourcesWeb Standards Curriculum

ResourceWeb Standards Curriculum - Web education community grouphttp://www.w3.org/community/webed/wiki/Main_Page

/ 53


Thank You!

Denis Boudreau,

President

Coopérative AccessibilitéWeb

1751 Richardson street, suite 6111

Montreal (Quebec), Canada H3K 1G6

Toll Free: +1 (877) 315-5550

Email: [email protected]

Web: www.accessibiliteweb.com

Blog: www.accessiblogue.com

Twitter : @AccessibiliteWb / @dboudreau

/ 54