What's This? Another Introduction to Web Accessibility? PSEWeb 2014

528 views

Published on

An introduction and ideas to get started with accessible web coding.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
528
On SlideShare
0
From Embeds
0
Number of Embeds
22
Actions
Shares
0
Downloads
7
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

What's This? Another Introduction to Web Accessibility? PSEWeb 2014

  1. 1. #a11y #PSEWEB #siteimprove What’s this? Another introduction to Web Accessibility?
  2. 2. #a11y #PSEWEB #siteimprove What is the most popular and widely used assistive device ever created? Glasses!
  3. 3. #a11y #PSEWEB #siteimprove Web accessibility refers to “the practice of making websites usable by people of all abilities and disabilities.”
  4. 4. #a11y #PSEWEB #siteimprove Which standards do I use? What are the benefits of accessible coding standards? Nuts and Bolts Assistive Technology Getting Started Questions
  5. 5. #a11y #PSEWEB #siteimprove Marketing staff Web developers Web designers Content managers IT staff Non-technical stakeholders
  6. 6. #a11y #PSEWEB #siteimprove WCAG 2.0 Section 508 Web Standards for the Government of Canada AODA (Ontario) BS 8878 (UK) Website Accessibility National Transition Strategy (AU) Which Standards Do I Use?
  7. 7. #a11y #PSEWEB #siteimprove W3C • Perceivable • Operable • Understandable • Robust
 • Three levels, A, AA, and AAA WCAG 2.0
  8. 8. #a11y #PSEWEB #siteimprove • Mobile Devices (New) • Interoperability • Usability • Accessibility • Web Experience Toolkit • http://www.tbs-sct.gc.ca/ws-nw/index-eng.asp Web Standards For The Government Of Canada
  9. 9. #a11y #PSEWEB #siteimprove • Employment • Information and Communications • Transportation • Design of Public Spaces (Built Environment) • Based on WCAG 2.0 • AODA Compliance Wizard • http://www.aoda.ca/ Accessibility for Ontarians with Disabilities Act (AODA)
  10. 10. #a11y #PSEWEB #siteimprove 20%
  11. 11. #a11y #PSEWEB #siteimprove Social Responsibility Larger Customer Base Efficient Code • Website Maintenance • Device compatibility • Faster pages • Improved SEO Benefits ofAccessible Coding
  12. 12. #a11y #PSEWEB #siteimprove Semantic Markup Semantic HTML is the use of HTML markup to reinforce the semantics, or meaning, of the information in webpages ratherthan merely to define its presentation or look. Nuts & Bolts
  13. 13. #a11y #PSEWEB #siteimprove The <title> element: • defines a title in the browser toolbar • displays a title for the page in search engine results • provides a title when a page is added to favorites Nuts & Bolts Title Tags
  14. 14. #a11y #PSEWEB #siteimprove • Don't use headings to make text 
 BIG or bold • Search engines use your headings to index the structure and content of your web pages • Users may skim your pages by headings; use headings to show the document structure Nuts & Bolts Headings
  15. 15. #a11y #PSEWEB #siteimprove • Images can enhance comprehension • Don't use color only as the sole means of conveying meaning • Use alternative text attributes on your image tags • Be careful using text within images • Use the <alt=“ “> null attribute for decorative images Nuts & Bolts Graphics
  16. 16. #a11y #PSEWEB #siteimprove • Clearly identify the target of each link • Good link text should not be too general; 
 don't use "click here." • Specify a "title" attribute that describes the target of the link • Provide a way to bypass or skip a group of links Nuts & Bolts Links
  17. 17. #a11y #PSEWEB #siteimprove • Use tables to display data, not layout • Use table headers to organize data • Make forms logical and easy to use • Make forms keyboard accessible • Be sure to use labels with form elements Nuts & Bolts Tables and Forms
  18. 18. #a11y #PSEWEB #siteimprove Screen Readers Windows and Mac Accessibility Toolbars/Extensions/Plug Ins Color Contrast Analyzers Mobile Devices Assistive Technology
  19. 19. #a11y #PSEWEB #siteimprove Screen Readers Assistive Technology • Screen Readers • Magnifiers • Braille Displays
  20. 20. #a11y #PSEWEB #siteimprove Windows and Mac Accessibility Assistive Technology Browser Accessibility
  21. 21. #a11y #PSEWEB #siteimprove Toolbars/Extensions/Plug Ins Assistive Technology
  22. 22. #a11y #PSEWEB #siteimprove Color Contrast Analyzers Assistive Technology
  23. 23. #a11y #PSEWEB #siteimprove Mobile Devices Assistive Technology
  24. 24. #a11y #PSEWEB #siteimprove Getting Started
  25. 25. #a11y #PSEWEB #siteimprove Know the Rules Getting Started • Which Accessibility Guidelines? • Mark Up and Coding Practices • Organization’s Style Guide
  26. 26. #a11y #PSEWEB #siteimprove Practical Training and Testing Plans Getting Started Note: Document creators are not 
 always your web page creators; 
 plan accordingly.
  27. 27. #a11y #PSEWEB #siteimprove Low-hanging Fruit Getting Started • Templates • CSS Style Sheets • Distribute The Workload
  28. 28. #a11y #PSEWEB #siteimprove High Traffic Pages Getting Started • Top-level pages • Landing pages • Registration pages/forms
  29. 29. #a11y #PSEWEB #siteimprove A-level Errors Getting Started
  30. 30. #a11y #PSEWEB #siteimprove Tracking and Reporting Getting Started
  31. 31. #a11y #PSEWEB #siteimprove Accessible Documents Getting Started
  32. 32. #a11y #PSEWEB #siteimprove • Online documents are a huge part of online communication across many industries. • Organizations sometimes rely on their website as 
 the only way of providing these documents. • Accessibility of online documents exposes website 
 owners to the same risks as inaccessible web pages. How Are Documents Part of Web Accessibility? Accessible Documents
  33. 33. #a11y #PSEWEB #siteimprove • Understand the document’s structure • Read and understand a document’s content, including text and images • Understand and navigate within the document • Interact with any forms on the document What Defines an Accessible Document? Accessible Documents
  34. 34. #a11y #PSEWEB #siteimprove academy.siteimprove.com Accessibility Certification • Non-technical Course • Technical Course • Web Governance Certification Questions?

×