WEB ACCESSIBILITY & CQMEETING STANDARDS &MAKING ACCESS FOR ALL

Stuff to cover

Legislation / Regulation / Web Guidelines

Assistive Technology Demo

Alternative Text for Images

Creating Page Structure

Accessibility Reports

What is this Accessibility thing?

Accessibility is how users with disabilities access information and…

how web content designers and developers enable web pages to function with assistive devices used by individuals with disabilities.

Assistive Technology Demo

Screen Readers (text to speech

Braille output

Screen Magnification

Speech to Text (dictation)

Adapted keyboards / input devices

Laws and Standards

Accessibility for Ontarians With Disabilities Act

Integrated Accessibility Standards Regulation (IASR)

Web Content Accessibility Guidelines 2.0 Levels A & AA

Implementation Timelines

All New websites / web-apps in planning stage January 1, 2014 and onward are covered

Substantial refreshes of content / infrastructure / layout & design (50% + 1) after January 1, 2014

All web assets to be retroactively applied by 2021

Accessibility isn’t a feature. It is the way an organization or brand thinks about people. That a product works for all

people; can navigate it, understand it and complete the tasks they wanted to

accomplish

ALT text describes an image

Alternative text or “ALT text” conveys the meaning of an image, diagram or chart in text form

When writing ALT text; ask yourself

What is it’s purpose?

What is it telling us?

Why is it there?

Is the context captured based on the surrounding information?

Alt Text example in context

The typical late 19’th century Ontario farmstead relied greatly on animal power for planting crops and transportation

ALT text can describe an image but.. there’s many different ways to interpret informational content

Context changes

The township of Ryerson was incorporated in 1880 and named after Dr. Egerton Ryerson, the Chief Superintendent of Education for Ontario from 1844 to 1876

It all depends on the context of the surrounding information

and what you wish to convey

Add Descriptions for…

Instructive images

Diagrams and charts with informational data

Action buttons e.g. Search or Submit buttons

Any information that conveys meaning that would be missing if not described

Mark as Null if

Uninformative or decorative images (added only for aesthetic value, not content)

Layout elements and Spacers (filler images)

Logos (When link action defaults back to landing page)

Images previously described (duplication of description)

EXAMPLES OF DECORATIVE IMAGESALT = “”

ALT text best practices

Use Plain Language that is short and succinct

Avoid phrases such as "image of" or "graphic of…"

Put the most important words first in the description

Background Images should not be used to convey information as ALT text cannot be added

Keep the length as short as possible but no shorter

Structure is Key

Create pages with styles or Headings. They add the structure necessary to make a page more usable to people with disabilities. e.g. Heading 1, Heading 2, List Paragraph etc.

Always associate labels with form controls that are descriptive

Links are self describing i.e. “PDF file of final report” rather than “link here”

Using Reports for Access

Reports provide help in identifying Accessibility issues

Reports describe what the issue is and where to find it

Optionally can see location of issue on webpage

Automated Reports are part of a broader accessibility solution - Manual checks and Assistive technology testing also needed

Sample Report Output

Next Steps - Resources

Government of Ontario Resources

http://www.accesson.caRyerson Resources

http://www.ryerson.ca/accessibility/tools

http://www.ryerson.ca/dmp/accessibility

http://www.ryerson.ca/cmssupport/accessibility/alttext.html

Adobe Resources

http://www.adobe.com/accessibility.html