Upload
kevin-rydberg
View
94
Download
0
Embed Size (px)
DESCRIPTION
An introduction and ideas to get started with accessible web coding.
Citation preview
#a11y#PSEWEB
#siteimprove
What’s this?
Another introduction to Web Accessibility?
#a11y#PSEWEB
#siteimprove
What is the most popular and widely used assistive device ever created?
Glasses!
#a11y#PSEWEB
#siteimprove
Web accessibility refers to “the practice of making websites usable by people of all abilities and disabilities.”
#a11y#PSEWEB
#siteimprove
Which standards do I use?
What are the benefits of accessible coding standards?
Nuts and Bolts
Assistive Technology
Getting Started
Questions
#a11y#PSEWEB
#siteimprove
Marketing staff
Web developers
Web designers
Content managers
IT staff
Non-technical stakeholders
#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?
#a11y#PSEWEB
#siteimprove
W3C • Perceivable
• Operable
• Understandable
• Robust
• Three levels, A, AA, and AAA
WCAG 2.0
#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
#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)
#a11y#PSEWEB
#siteimprove
20%
#a11y#PSEWEB
#siteimprove
Social Responsibility
Larger Customer Base
Efficient Code • Website Maintenance
• Device compatibility
• Faster pages
• Improved SEO
Benefits of Accessible Coding
#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
#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
#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
#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
#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
#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
#a11y#PSEWEB
#siteimprove
Screen Readers
Windows and Mac Accessibility
Toolbars/Extensions/Plug Ins
Color Contrast Analyzers
Mobile Devices
Assistive Technology
#a11y#PSEWEB
#siteimprove
Screen Readers
Assistive Technology
• Screen Readers
• Magnifiers
• Braille Displays
#a11y#PSEWEB
#siteimprove
Windows and Mac Accessibility
Assistive Technology
Browser Accessibility
#a11y#PSEWEB
#siteimprove
Toolbars/Extensions/Plug Ins
Assistive Technology
#a11y#PSEWEB
#siteimprove
Color Contrast Analyzers
Assistive Technology
#a11y#PSEWEB
#siteimprove
Mobile Devices
Assistive Technology
#a11y#PSEWEB
#siteimprove
Getting Started
#a11y#PSEWEB
#siteimprove
Know the Rules
Getting Started
• Which Accessibility Guidelines?
• Mark Up and Coding Practices
• Organization’s Style Guide
#a11y#PSEWEB
#siteimprove
Practical Training and Testing Plans
Getting Started
Note: Document creators are not always your web page creators; plan accordingly.
#a11y#PSEWEB
#siteimprove
Low-hanging Fruit
Getting Started
• Templates
• CSS Style Sheets
• Distribute The Workload
#a11y#PSEWEB
#siteimprove
High Traffic Pages
Getting Started
• Top-level pages
• Landing pages
• Registration pages/forms
#a11y#PSEWEB
#siteimprove
A-level Errors
Getting Started
#a11y#PSEWEB
#siteimprove
Tracking and Reporting
Getting Started
#a11y#PSEWEB
#siteimprove
Accessible Documents
Getting Started
#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
#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
#a11y#PSEWEB
#siteimprove
academy.siteimprove.com Accessibility Certification • Non-technical Course
• Technical Course
• Web Governance Certification
Questions?