web accessibility & cq meeting standards & making access for all
TRANSCRIPT
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