Welcome Digital Accessibility Primer Please note this version of the document is not accessible. If you require an accessible version, please contact us at webaccess@cnib.ca and we will gladly provide you with one.
No Silver Bullet • There are no “Silver Bullets” for Accessibility
Facts About Vision Loss and Disability • 800,000+ Canadians have vision loss. 1 in 38 people. • Age increases risk to vision health. • An aging population will double vision loss in Canada over the next 25 years. • Statistics Canada : 4.4 million Canadians report having a disability. 1 out of 7 people.
Web Accessibility and the Law • Legislation and Regulations • Common Look and Feel (CLF 2.0) • SGQRI 008 for Québec • Accessibility for Ontarians with Disabilities Act, 2005 (AODA) • Section 508 in the United States
AODA – Website Regulations • All organizations in Ontario with more than 50 employees: – Jan 1, 2014: WCAG 2.0 A compliance – Jan 1, 2021: WCAG 2.0 AA compliance
Side Benefits of Accessibility Mark up = Logical Structure, CSS = Style and Format – Search Engine Optimization – Mobile Devices – In line with modern development standards Accessibility is Usability – Good for everyone
What Makes A Website Accessible? A website is accessible when it is usable by the widest audience possible, including people of all abilities .
What Makes A Website Accessible? A website is accessible when it is usable by the widest audience possible, including people of all abilities . = WCAG 2.0 AA
What Makes A Website Accessible? WCAG 2.0 AA Web Content Accessibility Guidelines
The Standard W3C Web Content Accessibility Guidelines (WCAG) 2.0 http://www.w3.org/TR/WCAG20/ • Principle-based (unlike v1.0) • Based on Four Principles
Perceivable Information and user interface components must be presentable to users in ways they can perceive.
Operable Links and navigation, user controls, and page features must function in such a way that is possible for all users — they must be operable
Understandable Content should be written and presented in a way that is understandable to everyone
Robust Content must be robust enough that it can be interpreted reliably by a wide variety of user agents, including assistive technologies.
WCAG 2.0 Map • http://www.stamfordinteractive.com.au/the- wcag-2-0-map/ • Or Google “WCAG Visual Map”
Visual of the Standard – Example
Adaptive Technology
Screen Reader
Screen Magnifier
Adaptive Tech: What it feels like JAWS: Screen Reader Zoomtext: Screen Magnifier
Testing for Accessibility • Automated Tools • No substitute for testing with assistive technologies • Can be subjective and involve tradeoffs
Accessibility Persona Check List • Screen-reader users • Users with low vision (screen magnifier) • Keyboard-only users • These three situations cover off many others: users with dyslexia, limited mobility, repetitive strain, colour-blindness, cognitive difficulty, etc.
Rules for content
Text – Language Identification • Identify the language of the text – Use <html lang="fr"> to identify language in a web page • Identify any changes in the document's language – Use the Lang attribute to change the language in the document. example: <span lang="fr">Français </span>.
Text – Plain Language • Use simple, clear language • “Plain Language” website – http://www.web.net/~plain/PlainTrain/ • Acronyms and abbreviations – Recommended style: World Wide Web (WWW) – Or use markup: <abbr>,<acronym>
Text – Fonts and Styles • Minimum Font size, CSS 100%, 12 points • Use standard, widely available, easy to read fonts • Avoid using the following styles: italic, strike through, underline and drop shadows. • Avoid using blink or animation effects on text
Text Colour Contrast Ratio Black on White Easiest to See 21:1 Teal on White Acceptable 4.5:1 White on Black Easiest to See 21:1 White on Teal Acceptable 4.5:1 Red Hard to See 4:1 OK Red #B70000 7:1 Orange Hard to See 2.1:1 Better Red #8B0000 10:1 • Minimum Text Contrast (AA): Ratio of at least 4.5:1 • Enhanced Text Contrast (AAA): Ratio of at least 7:1 • No functionality can depend solely on colour.
“Secret Handshake” Features • Text resizing controls • Alternative high-contrast style • If you use these: – Make sure they work properly on all text in page – Are placed at the top of the page where they are useful • Example: cnib.ca
All about Images
Image Contrast • When using images and graphics , they must be clear, high quality and have sufficient contrast. • Make sure images aren’t washed out, over optimized etc – they should be bright and vivid Low Contrast Image High Contrast Image ( Partially Accessible ) (Accessible)
Images and Graphics • Three kinds of images – Content Images – Decorative Images – Image Links
Content Images alt=“Brief Description” Containing Text e.g. alt = “CNIB. Seeing beyond vision loss.” Containing Visual Content e.g. alt = “Woman and child reading together . ”
Decorative Images alt=“” – Purely decorative flourishes – Images with no content – An example?
Example alt=“” Purely decorative flourishes
Is it Content or Decoration? • Does it have a message or communicate something? Yes = content No = decorative
Image Links alt=“Description of Destination” All images used as links e.g. alt = “CNIB Home”
Text on Images • Avoid text on images when possible • Use a larger font to avoid pixilation (minimum 14 pts)
Accessible Documents All documents and PDFs publicly available through a website need to be accessible if they are under your control Accessible PDFs are tagged
Accessible Word Documents • Use proper heading structure • Use styles to apply formatting • Repeating headers on tables • Add alternative text to images
Accessible Word - Structure • Logical reading order • Good sentence and paragraph formatting • Headings and hierarchy • Good use of lists • Tables are formatted properly • Longer docs contain a Table of Contents • Pages are numbered • Use of page breaks, instead of hard returns (ENTER key)
Accessible Word - Content • Images are tagged with alternative text • Charts and graphs are labeled correctly or an alternative format is provided • Ensure you are writing a clear description of Hyperlink destination.
Accessible Word - Appearance • Colours used meet accessibility contrast requirements • Font size and style is at least 12 points with a minimum of bolding, underlining, italics, or strikethrough
Calling in the pros… • For forms • Complex or long documents • If you hire a designer…
Structure
Basic Layout and Design • Avoid using tables for layout • Balance graphical and text elements • Avoid busy backgrounds or colour gradients behind content
Layout Principles • Space – group related elements close together – compact layout with less empty space is better • Alignment – left align all content to the left margin – don’t put content in the margins • Consistency – consistent placement of elements – consistent functionality
Basic Structure Principle • Use markup to logically structure your content • Don’t use markup for formatting, styling or presentation effects. • Give context to content
Page Titles • Give every page a short, descriptive title to provide context – Examples: • “CNIB Home” • “Welcome to CNIB” • “CNIB Digital Accessibility Home” • Avoid extra clutter in titles: e.g. taglines
Headings • Use a consistent, logical heading structure <h1>My Main Topic</h1> <h2>Sub-Topic 1</h2> <h3>Point 1</h3> <h3>Point 2</h3> <h2>Sub-Topic 2</h2> • Use descriptive, non-repeating headings – No empty headings!
Paragraphs, Tables, Lists • Use paragraph tags <p></p> to identify logical paragraphs of text • Use list for logical list data • Use tables for logically tabular data
Table Markup • Always use proper table markup – Use proper heading tags <th>Header 1</th> – Avoid complex colspan and rowspan – Summary is optional <table summary=“Table described here”> – Use caption rather than other title (optional) <caption>Table Title Here</caption>
Links • Links must describe where they will take you – Bad: Click here, Read More – Good: CNIB Home, Read “Turtles in Ontario” • Repeated link text must take you to the same destination
Context-changing Links • Any link that changes context must warn – Pop-up – PDF – Other application Document • Examples: – “PDF – Turtles in Ontario” – “Open New Page for Twitter”
Recommend
More recommend
![CIB' ACCESSIBILITY: WHAT IS IT? software accessibility [/k.ss..bl.t.i/]: The term](https://c.sambuz.com/909832/cib-s.jpg)
