What's This? Another Introduction to Web Accessibility? PSEWeb 2014
-
Upload
kevin-rydberg -
Category
Technology
-
view
94 -
download
0
description
Transcript of What's This? Another Introduction to Web Accessibility? PSEWeb 2014
![Page 1: What's This? Another Introduction to Web Accessibility? PSEWeb 2014](https://reader033.fdocuments.us/reader033/viewer/2022051514/549b16d4b479590b098b46ac/html5/thumbnails/1.jpg)
#a11y#PSEWEB
#siteimprove
What’s this?
Another introduction to Web Accessibility?
![Page 2: What's This? Another Introduction to Web Accessibility? PSEWeb 2014](https://reader033.fdocuments.us/reader033/viewer/2022051514/549b16d4b479590b098b46ac/html5/thumbnails/2.jpg)
#a11y#PSEWEB
#siteimprove
What is the most popular and widely used assistive device ever created?
Glasses!
![Page 3: What's This? Another Introduction to Web Accessibility? PSEWeb 2014](https://reader033.fdocuments.us/reader033/viewer/2022051514/549b16d4b479590b098b46ac/html5/thumbnails/3.jpg)
#a11y#PSEWEB
#siteimprove
Web accessibility refers to “the practice of making websites usable by people of all abilities and disabilities.”
![Page 4: What's This? Another Introduction to Web Accessibility? PSEWeb 2014](https://reader033.fdocuments.us/reader033/viewer/2022051514/549b16d4b479590b098b46ac/html5/thumbnails/4.jpg)
#a11y#PSEWEB
#siteimprove
Which standards do I use?
What are the benefits of accessible coding standards?
Nuts and Bolts
Assistive Technology
Getting Started
Questions
![Page 5: What's This? Another Introduction to Web Accessibility? PSEWeb 2014](https://reader033.fdocuments.us/reader033/viewer/2022051514/549b16d4b479590b098b46ac/html5/thumbnails/5.jpg)
#a11y#PSEWEB
#siteimprove
Marketing staff
Web developers
Web designers
Content managers
IT staff
Non-technical stakeholders
![Page 6: What's This? Another Introduction to Web Accessibility? PSEWeb 2014](https://reader033.fdocuments.us/reader033/viewer/2022051514/549b16d4b479590b098b46ac/html5/thumbnails/6.jpg)
#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?
![Page 7: What's This? Another Introduction to Web Accessibility? PSEWeb 2014](https://reader033.fdocuments.us/reader033/viewer/2022051514/549b16d4b479590b098b46ac/html5/thumbnails/7.jpg)
#a11y#PSEWEB
#siteimprove
W3C • Perceivable
• Operable
• Understandable
• Robust
• Three levels, A, AA, and AAA
WCAG 2.0
![Page 8: What's This? Another Introduction to Web Accessibility? PSEWeb 2014](https://reader033.fdocuments.us/reader033/viewer/2022051514/549b16d4b479590b098b46ac/html5/thumbnails/8.jpg)
#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
![Page 9: What's This? Another Introduction to Web Accessibility? PSEWeb 2014](https://reader033.fdocuments.us/reader033/viewer/2022051514/549b16d4b479590b098b46ac/html5/thumbnails/9.jpg)
#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)
![Page 10: What's This? Another Introduction to Web Accessibility? PSEWeb 2014](https://reader033.fdocuments.us/reader033/viewer/2022051514/549b16d4b479590b098b46ac/html5/thumbnails/10.jpg)
#a11y#PSEWEB
#siteimprove
20%
![Page 11: What's This? Another Introduction to Web Accessibility? PSEWeb 2014](https://reader033.fdocuments.us/reader033/viewer/2022051514/549b16d4b479590b098b46ac/html5/thumbnails/11.jpg)
#a11y#PSEWEB
#siteimprove
Social Responsibility
Larger Customer Base
Efficient Code • Website Maintenance
• Device compatibility
• Faster pages
• Improved SEO
Benefits of Accessible Coding
![Page 12: What's This? Another Introduction to Web Accessibility? PSEWeb 2014](https://reader033.fdocuments.us/reader033/viewer/2022051514/549b16d4b479590b098b46ac/html5/thumbnails/12.jpg)
#a11y#PSEWEB
#siteimprove
Semantic Markup
Semantic HTML is the use of HTML markup to reinforce the semantics, or meaning, of the information in webpages rather than merely to define its presentation or look.
Nuts & Bolts
![Page 13: What's This? Another Introduction to Web Accessibility? PSEWeb 2014](https://reader033.fdocuments.us/reader033/viewer/2022051514/549b16d4b479590b098b46ac/html5/thumbnails/13.jpg)
#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 & BoltsTitle Tags
![Page 14: What's This? Another Introduction to Web Accessibility? PSEWeb 2014](https://reader033.fdocuments.us/reader033/viewer/2022051514/549b16d4b479590b098b46ac/html5/thumbnails/14.jpg)
#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 & BoltsHeadings
![Page 15: What's This? Another Introduction to Web Accessibility? PSEWeb 2014](https://reader033.fdocuments.us/reader033/viewer/2022051514/549b16d4b479590b098b46ac/html5/thumbnails/15.jpg)
#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 & BoltsGraphics
![Page 16: What's This? Another Introduction to Web Accessibility? PSEWeb 2014](https://reader033.fdocuments.us/reader033/viewer/2022051514/549b16d4b479590b098b46ac/html5/thumbnails/16.jpg)
#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 & BoltsLinks
![Page 17: What's This? Another Introduction to Web Accessibility? PSEWeb 2014](https://reader033.fdocuments.us/reader033/viewer/2022051514/549b16d4b479590b098b46ac/html5/thumbnails/17.jpg)
#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 & BoltsTables and Forms
![Page 18: What's This? Another Introduction to Web Accessibility? PSEWeb 2014](https://reader033.fdocuments.us/reader033/viewer/2022051514/549b16d4b479590b098b46ac/html5/thumbnails/18.jpg)
#a11y#PSEWEB
#siteimprove
Screen Readers
Windows and Mac Accessibility
Toolbars/Extensions/Plug Ins
Color Contrast Analyzers
Mobile Devices
Assistive Technology
![Page 19: What's This? Another Introduction to Web Accessibility? PSEWeb 2014](https://reader033.fdocuments.us/reader033/viewer/2022051514/549b16d4b479590b098b46ac/html5/thumbnails/19.jpg)
#a11y#PSEWEB
#siteimprove
Screen Readers
Assistive Technology
• Screen Readers
• Magnifiers
• Braille Displays
![Page 20: What's This? Another Introduction to Web Accessibility? PSEWeb 2014](https://reader033.fdocuments.us/reader033/viewer/2022051514/549b16d4b479590b098b46ac/html5/thumbnails/20.jpg)
#a11y#PSEWEB
#siteimprove
Windows and Mac Accessibility
Assistive Technology
Browser Accessibility
![Page 21: What's This? Another Introduction to Web Accessibility? PSEWeb 2014](https://reader033.fdocuments.us/reader033/viewer/2022051514/549b16d4b479590b098b46ac/html5/thumbnails/21.jpg)
#a11y#PSEWEB
#siteimprove
Toolbars/Extensions/Plug Ins
Assistive Technology
![Page 22: What's This? Another Introduction to Web Accessibility? PSEWeb 2014](https://reader033.fdocuments.us/reader033/viewer/2022051514/549b16d4b479590b098b46ac/html5/thumbnails/22.jpg)
#a11y#PSEWEB
#siteimprove
Color Contrast Analyzers
Assistive Technology
![Page 23: What's This? Another Introduction to Web Accessibility? PSEWeb 2014](https://reader033.fdocuments.us/reader033/viewer/2022051514/549b16d4b479590b098b46ac/html5/thumbnails/23.jpg)
#a11y#PSEWEB
#siteimprove
Mobile Devices
Assistive Technology
![Page 24: What's This? Another Introduction to Web Accessibility? PSEWeb 2014](https://reader033.fdocuments.us/reader033/viewer/2022051514/549b16d4b479590b098b46ac/html5/thumbnails/24.jpg)
#a11y#PSEWEB
#siteimprove
Getting Started
![Page 25: What's This? Another Introduction to Web Accessibility? PSEWeb 2014](https://reader033.fdocuments.us/reader033/viewer/2022051514/549b16d4b479590b098b46ac/html5/thumbnails/25.jpg)
#a11y#PSEWEB
#siteimprove
Know the Rules
Getting Started
• Which Accessibility Guidelines?
• Mark Up and Coding Practices
• Organization’s Style Guide
![Page 26: What's This? Another Introduction to Web Accessibility? PSEWeb 2014](https://reader033.fdocuments.us/reader033/viewer/2022051514/549b16d4b479590b098b46ac/html5/thumbnails/26.jpg)
#a11y#PSEWEB
#siteimprove
Practical Training and Testing Plans
Getting Started
Note: Document creators are not always your web page creators; plan accordingly.
![Page 27: What's This? Another Introduction to Web Accessibility? PSEWeb 2014](https://reader033.fdocuments.us/reader033/viewer/2022051514/549b16d4b479590b098b46ac/html5/thumbnails/27.jpg)
#a11y#PSEWEB
#siteimprove
Low-hanging Fruit
Getting Started
• Templates
• CSS Style Sheets
• Distribute The Workload
![Page 28: What's This? Another Introduction to Web Accessibility? PSEWeb 2014](https://reader033.fdocuments.us/reader033/viewer/2022051514/549b16d4b479590b098b46ac/html5/thumbnails/28.jpg)
#a11y#PSEWEB
#siteimprove
High Traffic Pages
Getting Started
• Top-level pages
• Landing pages
• Registration pages/forms
![Page 29: What's This? Another Introduction to Web Accessibility? PSEWeb 2014](https://reader033.fdocuments.us/reader033/viewer/2022051514/549b16d4b479590b098b46ac/html5/thumbnails/29.jpg)
#a11y#PSEWEB
#siteimprove
A-level Errors
Getting Started
![Page 30: What's This? Another Introduction to Web Accessibility? PSEWeb 2014](https://reader033.fdocuments.us/reader033/viewer/2022051514/549b16d4b479590b098b46ac/html5/thumbnails/30.jpg)
#a11y#PSEWEB
#siteimprove
Tracking and Reporting
Getting Started
![Page 31: What's This? Another Introduction to Web Accessibility? PSEWeb 2014](https://reader033.fdocuments.us/reader033/viewer/2022051514/549b16d4b479590b098b46ac/html5/thumbnails/31.jpg)
#a11y#PSEWEB
#siteimprove
Accessible Documents
Getting Started
![Page 32: What's This? Another Introduction to Web Accessibility? PSEWeb 2014](https://reader033.fdocuments.us/reader033/viewer/2022051514/549b16d4b479590b098b46ac/html5/thumbnails/32.jpg)
#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
![Page 33: What's This? Another Introduction to Web Accessibility? PSEWeb 2014](https://reader033.fdocuments.us/reader033/viewer/2022051514/549b16d4b479590b098b46ac/html5/thumbnails/33.jpg)
#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
![Page 34: What's This? Another Introduction to Web Accessibility? PSEWeb 2014](https://reader033.fdocuments.us/reader033/viewer/2022051514/549b16d4b479590b098b46ac/html5/thumbnails/34.jpg)
#a11y#PSEWEB
#siteimprove
academy.siteimprove.com Accessibility Certification • Non-technical Course
• Technical Course
• Web Governance Certification
Questions?