WEB ACCESSIBILITY &
CQ
MEETING 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
ALT text can describe an
image
but.. there’s many different
ways
to interpret informational
The typical late 19’th century
content
Ontario farmstead relied
greatly on animal power for
planting crops and
transportation
Context changes
It all depends on the context of
the
surrounding information
and what you wish to convey
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
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 IMAGES
ALT = “”
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.ca
Ryerson 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