Attribution NonCommercial ShareAlike 2.5 Canada
-
Upload
ivor-cochran -
Category
Documents
-
view
28 -
download
0
description
Transcript of Attribution NonCommercial ShareAlike 2.5 Canada
![Page 1: Attribution NonCommercial ShareAlike 2.5 Canada](https://reader035.fdocuments.in/reader035/viewer/2022070401/56813627550346895d9da099/html5/thumbnails/1.jpg)
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
![Page 2: Attribution NonCommercial ShareAlike 2.5 Canada](https://reader035.fdocuments.in/reader035/viewer/2022070401/56813627550346895d9da099/html5/thumbnails/2.jpg)
Broughtto you byBroughtto you by
Attribution NonCommercial ShareAlike 2.5 Canada
2012. Some Rights Reserved.
/ 2
![Page 3: Attribution NonCommercial ShareAlike 2.5 Canada](https://reader035.fdocuments.in/reader035/viewer/2022070401/56813627550346895d9da099/html5/thumbnails/3.jpg)
Broughtto you byBroughtto you by
Trainer
Denis Boudreau
11+ yrs experience - Web Accessibility
President, AccessibilitéWeb
Co-editor, SGQRI 008 standards
Invited Expert, W3C
/ 3
![Page 4: Attribution NonCommercial ShareAlike 2.5 Canada](https://reader035.fdocuments.in/reader035/viewer/2022070401/56813627550346895d9da099/html5/thumbnails/4.jpg)
Broughtto you byBroughtto you by
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
![Page 5: Attribution NonCommercial ShareAlike 2.5 Canada](https://reader035.fdocuments.in/reader035/viewer/2022070401/56813627550346895d9da099/html5/thumbnails/5.jpg)
Broughtto you byBroughtto you by
HTML Overview
/ 5
![Page 6: Attribution NonCommercial ShareAlike 2.5 Canada](https://reader035.fdocuments.in/reader035/viewer/2022070401/56813627550346895d9da099/html5/thumbnails/6.jpg)
Broughtto you byBroughtto you by
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
![Page 7: Attribution NonCommercial ShareAlike 2.5 Canada](https://reader035.fdocuments.in/reader035/viewer/2022070401/56813627550346895d9da099/html5/thumbnails/7.jpg)
Broughtto you byBroughtto you by
Web Standards 101
/ 7
![Page 8: Attribution NonCommercial ShareAlike 2.5 Canada](https://reader035.fdocuments.in/reader035/viewer/2022070401/56813627550346895d9da099/html5/thumbnails/8.jpg)
Broughtto you byBroughtto you by
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
![Page 9: Attribution NonCommercial ShareAlike 2.5 Canada](https://reader035.fdocuments.in/reader035/viewer/2022070401/56813627550346895d9da099/html5/thumbnails/9.jpg)
Broughtto you byBroughtto you by
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
![Page 10: Attribution NonCommercial ShareAlike 2.5 Canada](https://reader035.fdocuments.in/reader035/viewer/2022070401/56813627550346895d9da099/html5/thumbnails/10.jpg)
Broughtto you byBroughtto you by
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
![Page 11: Attribution NonCommercial ShareAlike 2.5 Canada](https://reader035.fdocuments.in/reader035/viewer/2022070401/56813627550346895d9da099/html5/thumbnails/11.jpg)
Broughtto you byBroughtto you by
Web Accessibility 101
/ 11
![Page 12: Attribution NonCommercial ShareAlike 2.5 Canada](https://reader035.fdocuments.in/reader035/viewer/2022070401/56813627550346895d9da099/html5/thumbnails/12.jpg)
Broughtto you byBroughtto you by
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
![Page 13: Attribution NonCommercial ShareAlike 2.5 Canada](https://reader035.fdocuments.in/reader035/viewer/2022070401/56813627550346895d9da099/html5/thumbnails/13.jpg)
Broughtto you byBroughtto you by
Web Accessibility 101The fundamental basics
Why is accessibility important?
•Legalities of accessibility
•Potential markets
•Search engines
•Mobile Web
•Ethics and branding
/ 13
![Page 14: Attribution NonCommercial ShareAlike 2.5 Canada](https://reader035.fdocuments.in/reader035/viewer/2022070401/56813627550346895d9da099/html5/thumbnails/14.jpg)
Broughtto you byBroughtto you by
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
![Page 15: Attribution NonCommercial ShareAlike 2.5 Canada](https://reader035.fdocuments.in/reader035/viewer/2022070401/56813627550346895d9da099/html5/thumbnails/15.jpg)
Broughtto you byBroughtto you by
Web Accessibility 101The fundamental basics
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
![Page 16: Attribution NonCommercial ShareAlike 2.5 Canada](https://reader035.fdocuments.in/reader035/viewer/2022070401/56813627550346895d9da099/html5/thumbnails/16.jpg)
Broughtto you byBroughtto you by
Web Accessibility 101The fundamental basics
Features of an accessible web page
•Semantic structure of content
•Alternative versions of content
•Interaction levels as building blocks
•Progressive enhancement concept
/ 16
![Page 17: Attribution NonCommercial ShareAlike 2.5 Canada](https://reader035.fdocuments.in/reader035/viewer/2022070401/56813627550346895d9da099/html5/thumbnails/17.jpg)
Broughtto you byBroughtto you by
Web Accessibility Standards
/ 17
![Page 18: Attribution NonCommercial ShareAlike 2.5 Canada](https://reader035.fdocuments.in/reader035/viewer/2022070401/56813627550346895d9da099/html5/thumbnails/18.jpg)
Broughtto you byBroughtto you by
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
![Page 19: Attribution NonCommercial ShareAlike 2.5 Canada](https://reader035.fdocuments.in/reader035/viewer/2022070401/56813627550346895d9da099/html5/thumbnails/19.jpg)
Broughtto you byBroughtto you by
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
![Page 20: Attribution NonCommercial ShareAlike 2.5 Canada](https://reader035.fdocuments.in/reader035/viewer/2022070401/56813627550346895d9da099/html5/thumbnails/20.jpg)
Broughtto you byBroughtto you by
Web Accessibility StandardsWCAG 2.0 – Layers of guidance
WCAG 2.0 - Overview
•Four principles
•Twelve guidelines
•Sixty-one success criteria
•Three conformance levels
/ 20
![Page 21: Attribution NonCommercial ShareAlike 2.5 Canada](https://reader035.fdocuments.in/reader035/viewer/2022070401/56813627550346895d9da099/html5/thumbnails/21.jpg)
Broughtto you byBroughtto you by
Web Accessibility StandardsWCAG 2.0 - General organization
WCAG 2.0 - Principles
•Perceivable
•Operable
•Understandable
•Robust
/ 21
![Page 22: Attribution NonCommercial ShareAlike 2.5 Canada](https://reader035.fdocuments.in/reader035/viewer/2022070401/56813627550346895d9da099/html5/thumbnails/22.jpg)
Broughtto you byBroughtto you by
Web Accessibility StandardsWCAG 2.0 - General organization
WCAG 2.0 - Guidelines
•Perceivable (4 guidelines)
•Operable (4 guidelines)
•Understandable (3 guidelines)
•Robust (1 guideline)
/ 22
![Page 23: Attribution NonCommercial ShareAlike 2.5 Canada](https://reader035.fdocuments.in/reader035/viewer/2022070401/56813627550346895d9da099/html5/thumbnails/23.jpg)
Broughtto you byBroughtto you by
Web Accessibility StandardsWCAG 2.0 - General organization
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
![Page 24: Attribution NonCommercial ShareAlike 2.5 Canada](https://reader035.fdocuments.in/reader035/viewer/2022070401/56813627550346895d9da099/html5/thumbnails/24.jpg)
Broughtto you byBroughtto you by
Web Accessibility StandardsWCAG 2.0 - General organization
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
![Page 25: Attribution NonCommercial ShareAlike 2.5 Canada](https://reader035.fdocuments.in/reader035/viewer/2022070401/56813627550346895d9da099/html5/thumbnails/25.jpg)
Broughtto you byBroughtto you by
Web Accessibility StandardsWCAG 2.0 - General organization
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
![Page 26: Attribution NonCommercial ShareAlike 2.5 Canada](https://reader035.fdocuments.in/reader035/viewer/2022070401/56813627550346895d9da099/html5/thumbnails/26.jpg)
Broughtto you byBroughtto you by
Web Accessibility StandardsWCAG 2.0 - General organization
WCAG 2.0 – Robust (1 guideline)
•4.1 Maximize compatibility with current and future user agents, including assistive technologies
/ 26
![Page 27: Attribution NonCommercial ShareAlike 2.5 Canada](https://reader035.fdocuments.in/reader035/viewer/2022070401/56813627550346895d9da099/html5/thumbnails/27.jpg)
Broughtto you byBroughtto you by
Web Accessibility StandardsWCAG 2.0 - General organization
•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
![Page 28: Attribution NonCommercial ShareAlike 2.5 Canada](https://reader035.fdocuments.in/reader035/viewer/2022070401/56813627550346895d9da099/html5/thumbnails/28.jpg)
Broughtto you byBroughtto you by
Web Accessibility StandardsWCAG 2.0 documents overview
ResourceThe WCAG 2.0 Documentshttp://www.w3.org/WAI/intro/wcag20
/ 28
![Page 29: Attribution NonCommercial ShareAlike 2.5 Canada](https://reader035.fdocuments.in/reader035/viewer/2022070401/56813627550346895d9da099/html5/thumbnails/29.jpg)
Broughtto you byBroughtto you by
Web Accessibility StandardsThe accessibility guidelines
ResourceWeb Content Accessibility Guidelines (WCAG) 2.0http://www.w3.org/TR/WCAG/
/ 29
![Page 30: Attribution NonCommercial ShareAlike 2.5 Canada](https://reader035.fdocuments.in/reader035/viewer/2022070401/56813627550346895d9da099/html5/thumbnails/30.jpg)
Broughtto you byBroughtto you by
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
![Page 31: Attribution NonCommercial ShareAlike 2.5 Canada](https://reader035.fdocuments.in/reader035/viewer/2022070401/56813627550346895d9da099/html5/thumbnails/31.jpg)
Broughtto you byBroughtto you by
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
![Page 32: Attribution NonCommercial ShareAlike 2.5 Canada](https://reader035.fdocuments.in/reader035/viewer/2022070401/56813627550346895d9da099/html5/thumbnails/32.jpg)
Broughtto you byBroughtto you by
Accessibility Best Practices
/ 32
![Page 33: Attribution NonCommercial ShareAlike 2.5 Canada](https://reader035.fdocuments.in/reader035/viewer/2022070401/56813627550346895d9da099/html5/thumbnails/33.jpg)
Broughtto you byBroughtto you by
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
![Page 34: Attribution NonCommercial ShareAlike 2.5 Canada](https://reader035.fdocuments.in/reader035/viewer/2022070401/56813627550346895d9da099/html5/thumbnails/34.jpg)
Broughtto you byBroughtto you by
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
![Page 35: Attribution NonCommercial ShareAlike 2.5 Canada](https://reader035.fdocuments.in/reader035/viewer/2022070401/56813627550346895d9da099/html5/thumbnails/35.jpg)
Broughtto you byBroughtto you by
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
![Page 36: Attribution NonCommercial ShareAlike 2.5 Canada](https://reader035.fdocuments.in/reader035/viewer/2022070401/56813627550346895d9da099/html5/thumbnails/36.jpg)
Broughtto you byBroughtto you by
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
![Page 37: Attribution NonCommercial ShareAlike 2.5 Canada](https://reader035.fdocuments.in/reader035/viewer/2022070401/56813627550346895d9da099/html5/thumbnails/37.jpg)
Broughtto you byBroughtto you by
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
![Page 38: Attribution NonCommercial ShareAlike 2.5 Canada](https://reader035.fdocuments.in/reader035/viewer/2022070401/56813627550346895d9da099/html5/thumbnails/38.jpg)
Broughtto you byBroughtto you by
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
![Page 39: Attribution NonCommercial ShareAlike 2.5 Canada](https://reader035.fdocuments.in/reader035/viewer/2022070401/56813627550346895d9da099/html5/thumbnails/39.jpg)
Broughtto you byBroughtto you by
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
![Page 40: Attribution NonCommercial ShareAlike 2.5 Canada](https://reader035.fdocuments.in/reader035/viewer/2022070401/56813627550346895d9da099/html5/thumbnails/40.jpg)
Broughtto you byBroughtto you by
Accessibility Best PracticesLanguage identification
Using
•language attributes on the html element
•language attributes to identify changes in content
/ 40
![Page 41: Attribution NonCommercial ShareAlike 2.5 Canada](https://reader035.fdocuments.in/reader035/viewer/2022070401/56813627550346895d9da099/html5/thumbnails/41.jpg)
Broughtto you byBroughtto you by
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
![Page 42: Attribution NonCommercial ShareAlike 2.5 Canada](https://reader035.fdocuments.in/reader035/viewer/2022070401/56813627550346895d9da099/html5/thumbnails/42.jpg)
Broughtto you byBroughtto you by
Putting It All Together
/ 42
![Page 43: Attribution NonCommercial ShareAlike 2.5 Canada](https://reader035.fdocuments.in/reader035/viewer/2022070401/56813627550346895d9da099/html5/thumbnails/43.jpg)
Broughtto you byBroughtto you by
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
![Page 44: Attribution NonCommercial ShareAlike 2.5 Canada](https://reader035.fdocuments.in/reader035/viewer/2022070401/56813627550346895d9da099/html5/thumbnails/44.jpg)
Broughtto you byBroughtto you by
Accessibility Testing
/ 44
![Page 45: Attribution NonCommercial ShareAlike 2.5 Canada](https://reader035.fdocuments.in/reader035/viewer/2022070401/56813627550346895d9da099/html5/thumbnails/45.jpg)
Broughtto you byBroughtto you by
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
![Page 46: Attribution NonCommercial ShareAlike 2.5 Canada](https://reader035.fdocuments.in/reader035/viewer/2022070401/56813627550346895d9da099/html5/thumbnails/46.jpg)
Broughtto you byBroughtto you by
Accessibility Testing1st - Using NVDA to Evaluate Web Accessibility
ResourceUsing NVDA to Evaluate Web Accessibilityhttp://webaim.org/articles/nvda/
/ 46
![Page 47: Attribution NonCommercial ShareAlike 2.5 Canada](https://reader035.fdocuments.in/reader035/viewer/2022070401/56813627550346895d9da099/html5/thumbnails/47.jpg)
Broughtto you byBroughtto you by
Accessibility Testing2nd - Web accessibility checker
ResourceWeb Accessibility Checkerhttp://achecker.ca/checker/
/ 47
![Page 48: Attribution NonCommercial ShareAlike 2.5 Canada](https://reader035.fdocuments.in/reader035/viewer/2022070401/56813627550346895d9da099/html5/thumbnails/48.jpg)
Broughtto you byBroughtto you by
Accessibility Testing3rd - Roger Hudson’s WCAG 2.0 checklist
ResourceWCAG 2.0 Checklisthttp://www.usability.com.au/resources/wcag2checklist.cfm
/ 48
![Page 49: Attribution NonCommercial ShareAlike 2.5 Canada](https://reader035.fdocuments.in/reader035/viewer/2022070401/56813627550346895d9da099/html5/thumbnails/49.jpg)
Broughtto you byBroughtto you by
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
![Page 50: Attribution NonCommercial ShareAlike 2.5 Canada](https://reader035.fdocuments.in/reader035/viewer/2022070401/56813627550346895d9da099/html5/thumbnails/50.jpg)
Broughtto you byBroughtto you by
Other W3C Resources
/ 50
![Page 51: Attribution NonCommercial ShareAlike 2.5 Canada](https://reader035.fdocuments.in/reader035/viewer/2022070401/56813627550346895d9da099/html5/thumbnails/51.jpg)
Broughtto you byBroughtto you by
Other W3C ResourcesGetting started with web accessibility
ResourceGetting Started with Web Accessibilityhttp://www.w3.org/WAI/gettingstarted/
/ 51
![Page 52: Attribution NonCommercial ShareAlike 2.5 Canada](https://reader035.fdocuments.in/reader035/viewer/2022070401/56813627550346895d9da099/html5/thumbnails/52.jpg)
Broughtto you byBroughtto you by
Other W3C ResourcesFinding Your WAI ("way”)
ResourceFinding Your WAI ("way”) to New Web Accessibility Resourceshttp://www.w3.org/WAI/yourWAI
/ 52
![Page 53: Attribution NonCommercial ShareAlike 2.5 Canada](https://reader035.fdocuments.in/reader035/viewer/2022070401/56813627550346895d9da099/html5/thumbnails/53.jpg)
Broughtto you byBroughtto you by
Other W3C ResourcesWeb Standards Curriculum
ResourceWeb Standards Curriculum - Web education community grouphttp://www.w3.org/community/webed/wiki/Main_Page
/ 53
![Page 54: Attribution NonCommercial ShareAlike 2.5 Canada](https://reader035.fdocuments.in/reader035/viewer/2022070401/56813627550346895d9da099/html5/thumbnails/54.jpg)
Broughtto you byBroughtto you by
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