Download to read offline
Uploaded byKevin Rydberg
What's This? Another Introduction to Web Accessibility? PSEWeb 2014
The document discusses web accessibility and provides guidance on making websites accessible to people with disabilities. It defines web accessibility as making websites usable for all abilities and disabilities. It discusses standards like WCAG 2.0 and Section 508, assistive technologies, best practices for semantic markup, headings, images, links, tables and forms. It provides tips for getting started with accessibility including following guidelines, training, prioritizing high traffic pages, tracking errors and ensuring online documents are accessible.
More Related Content
Similar to What's This? Another Introduction to Web Accessibility? PSEWeb 2014
What's This? Another Introduction to Web Accessibility? PSEWeb 2014
- 1. #a11y #PSEWEB #siteimprove What’s this? Another introductionto Web Accessibility?
- 2. #a11y #PSEWEB #siteimprove What is themost popular and widely used assistive device ever created? Glasses!
- 3. #a11y #PSEWEB #siteimprove Web accessibility refersto “the practice of making websites usable by people of all abilities and disabilities.”
- 4. #a11y #PSEWEB #siteimprove Which standards doI 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 Webdesigners Content managers IT staff Non-technical stakeholders
- 6. #a11y #PSEWEB #siteimprove WCAG 2.0 Section 508 WebStandards 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 • Informationand 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.
- 11. #a11y #PSEWEB #siteimprove Social Responsibility Larger CustomerBase Efficient Code • Website Maintenance • Device compatibility • Faster pages • Improved SEO Benefits ofAccessible Coding
- 12. #a11y #PSEWEB #siteimprove Semantic Markup Semantic HTMLis 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 <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. #a11y #PSEWEB #siteimprove • Don't useheadings 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 canenhance 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. #a11y #PSEWEB #siteimprove • Clearly identifythe 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 tablesto 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 andMac 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 MacAccessibility Assistive Technology Browser Accessibility
- 21.
- 22.
- 23.
- 24.
- 25. #a11y #PSEWEB #siteimprove Know the Rules GettingStarted • Which Accessibility Guidelines? • Mark Up and Coding Practices • Organization’s Style Guide
- 26. #a11y #PSEWEB #siteimprove Practical Training andTesting 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 GettingStarted • Top-level pages • Landing pages • Registration pages/forms
- 29.
- 30.
- 31.
- 32. #a11y #PSEWEB #siteimprove • Online documentsare 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 thedocument’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. #a11y #PSEWEB #siteimprove academy.siteimprove.com Accessibility Certification • Non-technicalCourse • Technical Course • Web Governance Certification Questions?