1 / 54

Attribution NonCommercial ShareAlike 2.5 Canada

Technical training session – CSUN12 / AccessU Build Accessible HTML Structures Knowbility ’ s AccessU - CSUN 2012 Denis Boudreau, AccessibilitéWeb San Diego – February 27 th , 2012. Attribution NonCommercial ShareAlike 2.5 Canada. 2012. Some Rights Reserved. Trainer. Denis Boudreau

ivor-cochran
Download Presentation

Attribution NonCommercial ShareAlike 2.5 Canada

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Technical training session – CSUN12 / AccessUBuild Accessible HTML StructuresKnowbility’s AccessU - CSUN 2012Denis Boudreau, AccessibilitéWebSan Diego – February 27th, 2012

  2. Attribution • NonCommercial • ShareAlike 2.5 Canada 2012. Some Rights Reserved.

  3. Trainer Denis Boudreau 11+ yrs experience - Web Accessibility President, AccessibilitéWeb Co-editor, SGQRI 008 standards Invited Expert, W3C

  4. SummaryGeneral overview HTML overview Web standards 101 Web accessibility 101 Web accessibility standards Web accessibility best practices Putting it all together Web accessibility testing Other W3C resources

  5. HTML Overview

  6. HTML OverviewLearning (knowing?) the ropes Basics of HTML Doctypes and markup styles The <head> and <body> elements Using the HTML toolbox HTML examples: http://is.gd/2x1weT HTML code generator: http://is.gd/3v7cBb

  7. Web Standards 101

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

  9. Web Standards 101Why 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

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

  11. Web Accessibility 101

  12. 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!

  13. Web Accessibility 101The fundamental basics Why is accessibility important? Legalities of accessibility Potential markets Search engines Mobile Web Ethics and branding

  14. Web Accessibility 101The WAI’s business case for accessibility Resource Developing a Web Accessibility Business Case for Your Organization: Overview http://www.w3.org/WAI/bcase/

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

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

  17. Web Accessibility Standards

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

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

  20. Web Accessibility StandardsWCAG 2.0 – Layers of guidance WCAG 2.0 - Overview Four principles Twelve guidelines Sixty-one success criteria Three conformance levels

  21. Web Accessibility StandardsWCAG 2.0 - General organization WCAG 2.0 - Principles Perceivable Operable Understandable Robust

  22. Web Accessibility StandardsWCAG 2.0 - General organization WCAG 2.0 - Guidelines Perceivable (4 guidelines) Operable (4 guidelines) Understandable (3 guidelines) Robust (1 guideline)

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

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

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

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

  27. 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 WCAG 2.0 – 61 Success criteria • Organized under the conformance levels as: • Level A – 25 sc • Level AA – 13 sc • Level AAA – 23 sc

  28. Web Accessibility StandardsWCAG 2.0 documents overview Resource The WCAG 2.0 Documents http://www.w3.org/WAI/intro/wcag20

  29. Web Accessibility StandardsThe accessibility guidelines Resource Web Content Accessibility Guidelines (WCAG) 2.0 http://www.w3.org/TR/WCAG/

  30. Web Accessibility StandardsThe WCAG 2.0 mindmap Resource The WCAG 2.0 Map: A visual guide to understanding web accessibility http://www.stamfordinteractive.com.au/the-wcag-2-0-map/

  31. Web Accessibility StandardsThe WCAG 2.0 documents Resource How to Meet WCAG 2.0 http://www.w3.org/WAI/WCAG20/quickref/ Resource Understanding WCAG 2.0 http://www.w3.org/TR/UNDERSTANDING-WCAG20/ Resource Techniques and Failures for WCAG 2.0 http://www.w3.org/TR/WCAG-TECHS/

  32. Accessibility Best Practices

  33. Accessibility Best PracticesA 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

  34. Accessibility Best PracticesText 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

  35. Accessibility Best PracticesContent 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 h1-h6 elements to identify headings (x)HTML according to specifications

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

  37. 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 title attributes to identify form controls

  38. Accessibility Best PracticesKeyboard 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

  39. Accessibility Best PracticesSignificant 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

  40. Accessibility Best PracticesLanguage identification Using language attributes on the html element language attributes to identify changes in content

  41. 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 attributes to associate data and header cells in tables valid HTML to cater for relevant accessibility concerns

  42. Putting It All Together

  43. Putting It All TogetherThe WAI’s before and after demo Resource Overview - Before and After Demonstration: Improving a Web site using WCAG 2.0 http://www.w3.org/WAI/demos/bad/

  44. Accessibility Testing

  45. Accessibility TestingAdopting an assessment method Three-step accessibility evaluation testing the web page with a screen reader using an automatic checker for basic problems running manual testing to complete the audit

  46. Accessibility Testing1st - Using NVDA to Evaluate Web Accessibility Resource Using NVDA to Evaluate Web Accessibility http://webaim.org/articles/nvda/

  47. Accessibility Testing2nd - Web accessibility checker Resource Web Accessibility Checker http://achecker.ca/checker/

  48. Accessibility Testing3rd - Roger Hudson’s WCAG 2.0 checklist Resource WCAG 2.0 Checklist http://www.usability.com.au/resources/wcag2checklist.cfm

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

  50. Other W3C Resources

More Related