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.

1. #a11y
#PSEWEB
#siteimprove
What’s 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 <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 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 <alt=“ “> 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
• Organization’s 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 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. #a11y
#PSEWEB
#siteimprove
academy.siteimprove.com
Accessibility Certification
• Non-technical Course
• Technical Course
• Web Governance Certification
Questions?