WEB ACCESSIBILITY & CQ

WEB ACCESSIBILITY & CQMEETING STANDARDS &MAKING ACCESS FOR ALL

Stuff to cover

Legislation / Regulation / Web GuidelinesAssistive Technology DemoAlternative Text for ImagesCreating Page StructureAccessibility 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 ActIntegrated 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 coveredSubstantial 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 formWhen 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 imagesDiagrams and charts with informational dataAction buttons e.g. Search or Submit buttonsAny information that conveys meaning that would be missing if not described

Mark as Null ifUninformative 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 succinctAvoid phrases such as "image of" or "graphic of…"Put the most important words first in the descriptionBackground Images should not be used to convey information as ALT text cannot be addedKeep the length as short as possible but no shorter

Structure is KeyCreate 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 descriptiveLinks are self describing i.e. “PDF file of final report” rather than “link here”

Using Reports for Access

Reports provide help in identifying Accessibility issuesReports describe what the issue is and where to find itOptionally can see location of issue on webpageAutomated Reports are part of a broader accessibility solution - Manual checks and Assistive technology testing also needed

Sample Report Output

Next Steps - ResourcesGovernment of Ontario Resources

http://www.accesson.caRyerson Resources

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

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

Adobe Resourceshttp://www.adobe.com/accessibility.html