Technical training session CSUN 12 Access U Build
Technical training session – CSUN 12 / Access. U Build Accessible HTML Structures Knowbility’s Access. U - CSUN 2012 Denis Boudreau, AccessibilitéWeb San Diego – February 27 th, 2012 Brought to you by
2012. Some Rights Reserved. ü Attribution ü Non. Commercial ü Share. Alike 2. 5 Canada Brought to you by /
Trainer Denis Boudreau ü 11+ yrs experience - Web Accessibility ü President, AccessibilitéWeb ü Co-editor, SGQRI 008 standards ü Invited Expert, W 3 C Brought to you by /
Summary General overview 1. 2. 3. 4. 5. 6. 7. 8. HTML overview Web standards 101 Web accessibility standards Web accessibility best practices Putting it all together Web accessibility testing Other W 3 C resources Brought to you by /
HTML Overview Brought to you by /
HTML Overview Learning (knowing? ) the ropes Basics of HTML • Doctypes and markup styles • The <head> and <body> elements • Using the HTML toolbox • HTML examples: http: //is. gd/2 x 1 we. T • HTML code generator: http: //is. gd/3 v 7 c. Bb Brought to you by /
Web Standards 101 Brought to you by /
Web Standards 101 The web standards model HTML, CSS and Java. Script – the developer’s toolbox • HTML markup - the basis of every web page • CSS markup - the presentation layer • Java. Script - adding behaviour to pages Three-legged stool of modern web development • Separating structure, presentation and behaviour • Benefits from efficiently separating the layers Brought to you by /
Web Standards 101 Why web standards matter General benefits • Interoperability with other systems • Portability with other platforms • Faster loading and better user experience • Semantic order and higher search engine indexing • Future proofing and reducing the need for a redesign • Implementing changes far quicker Brought to you by /
Web Standards 101 Optimizing 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 Brought to you by /
Web Accessibility 101 Brought to you by /
Web Accessibility 101 The 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! Brought to you by /
Web Accessibility 101 The fundamental basics Why is accessibility important? • Legalities of accessibility • Potential markets • Search engines • Mobile Web • Ethics and branding Brought to you by /
Web Accessibility 101 The WAI’s business case for accessibility Resource Developing a Web Accessibility Business Case for Your Organization: Overview http: //www. w 3. org/W AI/bcase/ Brought to you by /
Web Accessibility 101 The 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 Brought to you by /
Web Accessibility 101 The fundamental basics Features of an accessible web page • Semantic structure of content • Alternative versions of content • Interaction levels as building blocks • Progressive enhancement concept Brought to you by /
Web Accessibility Standards Brought to you by /
Web Accessibility Standards Accessibility 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 W 3 C standards and documents Brought to you by /
Web Accessibility Standards Web 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? Brought to you by /
Web Accessibility Standards WCAG 2. 0 – Layers of guidance WCAG 2. 0 - Overview • Four principles • Twelve guidelines • Sixty-one success criteria • Three conformance levels Brought to you by /
Web Accessibility Standards WCAG 2. 0 - General organization WCAG 2. 0 - Principles • Perceivable • Operable • Understandable • Robust Brought to you by /
Web Accessibility Standards WCAG 2. 0 - General organization WCAG 2. 0 - Guidelines • Perceivable (4 guidelines) • Operable (4 guidelines) • Understandable (3 guidelines) • Robust (1 guideline) Brought to you by /
Web Accessibility Standards WCAG 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 Brought to you by /
Web Accessibility Standards WCAG 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 Brought to you by /
Web Accessibility Standards WCAG 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 Brought to you by /
Web Accessibility Standards WCAG 2. 0 - General organization WCAG 2. 0 – Robust (1 guideline) • 4. 1 Maximize compatibility with current and future user agents, including assistive technologies Brought to you by /
Web Accessibility Standards WCAG 2. 0 - General organization WCAG 2. 0 – 61 Success criteria • Organized under the different principles as: • • • Organized under the conformance levels as: Perceivable – 22 sc • Level A – 25 sc • Level AA – 13 sc • Level AAA – 23 sc Operable – 20 sc Understandable – 17 sc Robust – 2 sc Brought to you by /
Web Accessibility Standards WCAG 2. 0 documents overview Resource The WCAG 2. 0 Documents http: //www. w 3. org/ WAI/intro/wcag 20 Brought to you by /
Web Accessibility Standards The accessibility guidelines Resource Web Content Accessibility Guidelines (WCAG) 2. 0 http: //www. w 3. org/TR /WCAG/ Brought to you by /
Web Accessibility Standards The WCAG 2. 0 mindmap Resource The WCAG 2. 0 Map: A visual guide to understanding web accessibility http: //www. stamfordi nteractive. com. au/thewcag-2 -0 -map/ Brought to you by /
Web Accessibility Standards The WCAG 2. 0 documents Resource How to Meet WCAG 2. 0 http: //www. w 3. org/WAI /WCAG 20/quickref/ Resource Understanding WCAG 2. 0 http: //www. w 3. org/TR/U NDERSTANDINGWCAG 20/ Brought to you by / Resource Techniques and Failures for WCAG 2. 0 http: //www. w 3. org/TR/ WCAG-TECHS/
Accessibility Best Practices Brought to you by /
Accessibility Best Practices A 80/20 accessibility proposal Starting somewhere • Text equivalents for non-text content • Content structure and semantics • Color use and contrasts • Form fields and labels • Keyboard navigation • Significant hyperlinks • Language identification • A few more things to consider Brought to you by /
Accessibility Best Practices Text equivalents for non-text content Providing • short text alternative for non-text content • long descriptions for non-text content • alternatives for time based media Managing • informative images • images used as buttons • decorative images Brought to you by /
Accessibility Best Practices Content structure and semantics Providing • descriptive titles for Web pages • descriptive headings for content • headings at the beginning of each section of content Using • semantic elements to mark up structure • h 1 -h 6 elements to identify headings • (x)HTML according to specifications Brought to you by /
Accessibility Best Practices Color 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 Brought to you by /
Accessibility Best Practices Form fields and labels Providing • text descriptions to identify required fields • descriptive labels to form fields • explicit associations between labels and fields Using • title attributes to identify form controls Brought to you by /
Accessibility Best Practices Keyboard navigation Ensuring • keyboard control for all functionalities • a logical tab order through content • users are not trapped in content Providing • keyboard-triggered event handlers • content organized in a meaningful sequence Brought to you by /
Accessibility Best Practices Significant hyperlinks Providing • link text describing the link’s purpose (in context) • link text describing the link’s purpose (out of context) • link text that describes the purpose of an anchor • title attribute to supplement link text Using • target attribute to open a new window • a described icon to announce a new window Brought to you by /
Accessibility Best Practices Language identification Using • language attributes on the html element • language attributes to identify changes in content Brought to you by /
Accessibility Best Practices A 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 • attributes to associate data and header cells in tables • valid HTML to cater for relevant accessibility concerns Brought to you by /
Putting It All Together Brought to you by /
Putting It All Together The WAI’s before and after demo Resource Overview - Before and After Demonstration: Improving a Web site using WCAG 2. 0 http: //www. w 3. org/W AI/demos/bad/ Brought to you by /
Accessibility Testing Brought to you by /
Accessibility Testing Adopting 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 Brought to you by /
Accessibility Testing 1 st - Using NVDA to Evaluate Web Accessibility Resource Using NVDA to Evaluate Web Accessibility http: //webaim. org/arti cles/nvda/ Brought to you by /
Accessibility Testing 2 nd - Web accessibility checker Resource Web Accessibility Checker http: //achecker. ca/c hecker/ Brought to you by /
Accessibility Testing 3 rd - Roger Hudson’s WCAG 2. 0 checklist Resource WCAG 2. 0 Checklist http: //www. usability. c om. au/resources/wcag 2 checklist. cfm Brought to you by /
Accessibility Testing Easy to use tools to get the job done Mozilla Firefox Microsoft Internet Explorer • • Web accessibility toolbar Web developer toolbar Accessibility evaluator Juicy studio a 11 y toolbar Fire. Bug Headings. Map No. Squint Fangs Other useful tools • Color contrast analyzer • Fire. Eyes extension Brought to you by /
Other W 3 C Resources Brought to you by /
Other W 3 C Resources Getting started with web accessibility Resource Getting Started with Web Accessibility http: //www. w 3. org/W AI/gettingstarted/ Brought to you by /
Other W 3 C Resources Finding Your WAI ("way”) Resource Finding Your WAI ("way”) to New Web Accessibility Resources http: //www. w 3. org/W AI/your. WAI Brought to you by /
Other W 3 C Resources Web Standards Curriculum Resource Web Standards Curriculum - Web education community group http: //www. w 3. org/co mmunity/webed/wiki/ Main_Page Brought to you by /
Thank You! Denis Boudreau, President Coopérative AccessibilitéWeb 1751 Richardson street, suite 6111 Montreal (Quebec), Canada H 3 K 1 G 6 Toll Free: +1 (877) 315 -5550 Email: dboudreau@accessibiliteweb. com Web: www. accessibiliteweb. com Blog: www. accessiblogue. com Twitter : @Accessibilite. Wb / @dboudreau Brought to you by /
- Slides: 54