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 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 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 Ryerson Resources Adobe Resources