what's this? another introduction to web accessibility? pseweb 2014

#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?