WEB ACCESSIBILITY & CQ - PowerPoint PPT Presentation

Web accessibility cq
1 / 19

  • Uploaded on
  • Presentation posted in: General

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?.

I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.

Download Presentation


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.

- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -

Presentation Transcript

Web accessibility cq




Stuff to cover

Stuff to cover

  • Legislation / Regulation / Web Guidelines

  • Assistive Technology Demo

  • Alternative Text for Images

  • Creating Page Structure

  • Accessibility Reports

What is this accessibility thing

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

Assistive Technology Demo

  • Screen Readers (text to speech

  • Braille output

  • Screen Magnification

  • Speech to Text (dictation)

  • Adapted keyboards / input devices

Laws and standards

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

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

Web accessibility cq

  • 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

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 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

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

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

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

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

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

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

Web accessibility cq

Sample Report Output

Next steps resources

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

  • Login