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

2012. Some Rights Reserved.

Trainer

Denis Boudreau

11+ yrs experience - Web Accessibility

President, AccessibilitéWeb

Co-editor, SGQRI 008 standards

Invited Expert, W3C

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

HTML Overview

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

Web Standards 101

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

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

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

Web Accessibility 101

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!

Why is accessibility important?

•Legalities of accessibility

•Potential markets

•Search engines

•Mobile Web

•Ethics and branding

Web Accessibility 101The WAI’s business case for accessibility

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

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

Features of an accessible web page

•Semantic structure of content

•Alternative versions of content

•Interaction levels as building blocks

•Progressive enhancement concept

Web Accessibility Standards

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

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?

Web Accessibility StandardsWCAG 2.0 – Layers of guidance

WCAG 2.0 - Overview

•Four principles

•Twelve guidelines

•Sixty-one success criteria

•Three conformance levels

Web Accessibility StandardsWCAG 2.0 - General organization

WCAG 2.0 - Principles

•Perceivable

•Operable

•Understandable

•Robust

WCAG 2.0 - Guidelines

•Perceivable (4 guidelines)

•Operable (4 guidelines)

•Understandable (3 guidelines)

•Robust (1 guideline)

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

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

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

WCAG 2.0 – Robust (1 guideline)

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

•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

Web Accessibility StandardsWCAG 2.0 documents overview

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

Web Accessibility StandardsThe accessibility guidelines

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

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/

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/

Accessibility Best Practices

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

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

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

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

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

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

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

Accessibility Best PracticesLanguage identification

•language attributes on the html element

•language attributes to identify changes in content

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

Putting It All Together

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/

Accessibility Testing

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

Accessibility Testing1st - Using NVDA to Evaluate Web Accessibility

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

Accessibility Testing2nd - Web accessibility checker

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

Accessibility Testing3rd - Roger Hudson’s WCAG 2.0 checklist

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

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

Microsoft Internet Explorer• Web accessibility toolbar

Other useful tools• Color contrast analyzer• FireEyes extension

Other W3C Resources

Other W3C ResourcesGetting started with web accessibility

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

Other W3C ResourcesFinding Your WAI ("way”)

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

Other W3C ResourcesWeb Standards Curriculum

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

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: dboudreau@accessibiliteweb.com

Web: www.accessibiliteweb.com

Blog: www.accessiblogue.com

Twitter : @AccessibiliteWb / @dboudreau

Attribution NonCommercial ShareAlike 2.5 Canada

Documents

A presentation by Robin Upton (2009-03-12) latest version at Attribution – NonCommercial - ShareAlike FF 404

This work is licensed under a Creative Commons Attribution …ocw.jhsph.edu/courses/reproductiveperinatal/PDFs/Lecture... · 2016-06-13 · Creative Commons Attribution-NonCommercial-ShareAlike

Scientific Taiwan Unless noted, the course materials are licensed under Creative Commons Attribution-NonCommercial-ShareAlike 2.5 Taiwan (CC BY-NC-SA 2.5)Attribution-NonCommercial-ShareAlike

Photo by Andy_BB - Creative Commons Attribution-NonCommercial-ShareAlike License N04Created with Haiku Deck Broadening

Attribution ⬌ NonCommercial ⬌ ShareAlike 2.5 Canada

Photo by Justin in SD - Creative Commons Attribution-NonCommercial-ShareAlike License with Haiku Deck

Photo by raindog - Creative Commons Attribution-NonCommercial-ShareAlike License N00Created with Haiku Deck Letia

Photo by supershaggy - Creative Commons Attribution ...eventipa.formez.it/sites/default/files/allegati_eventi/Dar_voce_al_web... · Photo by -Reji - Creative Commons Attribution-NonCommercial-ShareAlike

This work is licensed under a Creative Commons Attribution ...€¦ · Creative Commons Attribution-NonCommercial-ShareAlike License. ... or small for gestational age (SGA)] • Multiple

Tefko Saracevic This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 United States License Creative Commons Attribution-NonCommercial-ShareAlike

This work is licensed under a Creative Commons Attribution ...ocw.jhsph.edu/courses/BiostatMedicalProductRegulation/biomed_lec… · Creative Commons Attribution-NonCommercial-ShareAlike

A presentation by Robin Upton (2009-10-04) Latest version at Attribution – NonCommercial - ShareAlike FF106:

A presentation by Dr. Robin Upton (2008-11-02). Available for download at Attribution – NonCommercial - ShareAlike

Prof Peter Hartley From: 1 Licensed under a Creative Commons Attribution- NonCommercial-ShareAlike 3.0 Unported LicenseCreative

Personas & Scenario Mapping This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License.Creative Commons Attribution-NonCommercial-ShareAlike

Cette création est mise à disposition selon le Contrat Attribution- NonCommercial-ShareAlike 2.0 France disponible en ligne

FatMax 2007. Licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 2.5 LicenseCreative Commons Attribution-NonCommercial-ShareAlike 2.5

Attribution-NonCommercial-ShareAlike 4.0 International (CC

Adapted from: FatMax 2007. Licensed under a Creative Commons Attribution-NonCommercial- ShareAlike 2.5 LicenseCreative Commons Attribution-NonCommercial-

ZOO405 by Rania Baleela is licensed under a Creative Commons Attribution- NonCommercial-ShareAlike 3.0 Unported LicenseRania BaleelaCreative Commons Attribution-