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

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

Post on 24-Dec-2014

90 views

Category:

Technology

0 download

Embed Size (px)

DESCRIPTION

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

TRANSCRIPT

  • 1. #a11y #PSEWEB #siteimprove Whats this? Another introduction to Web Accessibility?
  • 2. #a11y #PSEWEB #siteimprove What is the most popular and widely used assistive device ever created? Glasses!
  • 3. #a11y #PSEWEB #siteimprove Web accessibility refers to the practice of making websites usable by people of all abilities and disabilities.
  • 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. #a11y #PSEWEB #siteimprove Marketing staff Web developers Web designers Content managers IT staff Non-technical stakeholders
  • 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. #a11y #PSEWEB #siteimprove W3C Perceivable Operable Understandable Robust Three levels, A, AA, and AAA WCAG 2.0
  • 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. #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. #a11y #PSEWEB #siteimprove 20%
  • 11. #a11y #PSEWEB #siteimprove Social Responsibility Larger Customer Base Efficient Code Website Maintenance Device compatibility Faster pages Improved SEO Benefits ofAccessible Coding
  • 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. #a11y #PSEWEB #siteimprove The 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. #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. #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 null attribute for decorative images Nuts & Bolts Graphics
  • 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. #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. #a11y #PSEWEB #siteimprove Screen Readers Windows and Mac Accessibility Toolbars/Extensions/Plug Ins Color Contrast Analyzers Mobile Devices Assistive Technology
  • 19. #a11y #PSEWEB #siteimprove Screen Readers Assistive Technology Screen Readers Magnifiers Braille Displays
  • 20. #a11y #PSEWEB #siteimprove Windows and Mac Accessibility Assistive Technology Browser Accessibility
  • 21. #a11y #PSEWEB #siteimprove Toolbars/Extensions/Plug Ins Assistive Technology
  • 22. #a11y #PSEWEB #siteimprove Color Contrast Analyzers Assistive Technology
  • 23. #a11y #PSEWEB #siteimprove Mobile Devices Assistive Technology
  • 24. #a11y #PSEWEB #siteimprove Getting Started
  • 25. #a11y #PSEWEB #siteimprove Know the Rules Getting Started Which Accessibility Guidelines? Mark Up and Coding Practices Organizations Style Guide
  • 26. #a11y #PSEWEB #siteimprove Practical Training and Testing Plans Getting Started Note: Document creators are not always your web page creators; plan accordingly.
  • 27. #a11y #PSEWEB #siteimprove Low-hanging Fruit Getting Started Templates CSS Style Sheets Distribute The Workload
  • 28. #a11y #PSEWEB #siteimprove High Traffic Pages Getting Started Top-level pages Landing pages Registration pages/forms
  • 29. #a11y #PSEWEB #siteimprove A-level Errors Getting Started
  • 30. #a11y #PSEWEB #siteimprove Tracking and Reporting Getting Started
  • 31. #a11y #PSEWEB #siteimprove Accessible Documents Getting Started
  • 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. #a11y #PSEWEB #siteimprove Understand the documents structure Read and understand a documents 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. #a11y #PSEWEB #siteimprove academy.siteimprove.com Accessibility Certification Non-technical Course Technical Course Web Governance Certification Questions?