web accessibility & cq
DESCRIPTION
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?. - PowerPoint PPT PresentationTRANSCRIPT
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