SLIDE 1 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.
SLIDE 2 No Silver Bullet
- There are no “Silver Bullets” for
Accessibility
SLIDE 3 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.
SLIDE 4 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
SLIDE 5 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
SLIDE 6
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
SLIDE 7
What Makes A Website Accessible?
A website is accessible when it is usable by the widest audience possible, including people of all abilities.
SLIDE 8
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
SLIDE 9
What Makes A Website Accessible?
WCAG 2.0 AA Web Content Accessibility Guidelines
SLIDE 10 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
SLIDE 11 Perceivable
Information and user interface components must be presentable to users in ways they can perceive.
SLIDE 12 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
SLIDE 13 Understandable
Content should be written and presented in a way that is understandable to everyone
SLIDE 14 Robust
Content must be robust enough that it can be interpreted reliably by a wide variety of user agents, including assistive technologies.
SLIDE 15 WCAG 2.0 Map
- http://www.stamfordinteractive.com.au/the-
wcag-2-0-map/
- Or Google “WCAG Visual Map”
SLIDE 16
Visual of the Standard – Example
SLIDE 17
Adaptive Technology
SLIDE 18
Screen Reader
SLIDE 19
Screen Magnifier
SLIDE 20
Adaptive Tech: What it feels like
JAWS: Screen Reader Zoomtext: Screen Magnifier
SLIDE 21 Testing for Accessibility
- Automated Tools
- No substitute for testing with assistive
technologies
- Can be subjective and involve tradeoffs
SLIDE 22 Accessibility Persona Check List
- Screen-reader users
- Users with low vision (screen magnifier)
- Keyboard-only users
- These three situations cover off many
- thers: users with dyslexia, limited
mobility, repetitive strain, colour-blindness, cognitive difficulty, etc.
SLIDE 23
Rules for content
SLIDE 24 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>.
SLIDE 25 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>
SLIDE 26 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
SLIDE 27 Text Colour Contrast Ratio
- 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.
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
SLIDE 28 “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
SLIDE 29
All about Images
SLIDE 30 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 ( Partially Accessible ) High Contrast Image (Accessible)
SLIDE 31 Images and Graphics
– Content Images – Decorative Images – Image Links
SLIDE 32 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.”
SLIDE 33
Decorative Images
alt=“” – Purely decorative flourishes – Images with no content – An example?
SLIDE 34
Example
alt=“” Purely decorative flourishes
SLIDE 35 Is it Content or Decoration?
- Does it have a message or communicate
something?
Yes = content No = decorative
SLIDE 36
Image Links
alt=“Description of Destination” All images used as links e.g. alt = “CNIB Home”
SLIDE 37 Text on Images
- Avoid text on images when possible
- Use a larger font to avoid pixilation
(minimum 14 pts)
SLIDE 38
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
SLIDE 39 Accessible Word Documents
- Use proper heading structure
- Use styles to apply formatting
- Repeating headers on tables
- Add alternative text to images
SLIDE 40 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)
SLIDE 41 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
- f Hyperlink destination.
SLIDE 42 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
SLIDE 43 Calling in the pros…
- For forms
- Complex or long documents
- If you hire a designer…
SLIDE 44
Structure
SLIDE 45 Basic Layout and Design
- Avoid using tables for layout
- Balance graphical and text elements
- Avoid busy backgrounds or colour
gradients behind content
SLIDE 46 Layout Principles
– group related elements close together – compact layout with less empty space is better
– left align all content to the left margin – don’t put content in the margins
– consistent placement of elements – consistent functionality
SLIDE 47 Basic Structure Principle
- Use markup to logically structure your
content
- Don’t use markup for formatting, styling or
presentation effects.
SLIDE 48 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
SLIDE 49 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!
SLIDE 50 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
SLIDE 51 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>
SLIDE 52 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
SLIDE 53 Context-changing Links
- Any link that changes context must warn
– Pop-up – PDF – Other application Document
– “PDF – Turtles in Ontario” – “Open New Page for Twitter”
SLIDE 54 User Control of Linking
- Don’t use active drop-downs
– Allow user to select and then “Go”
- Don’t auto-refresh the page
- Don’t redirect based on a timer
SLIDE 55 Skip to Content Links
- “Skip to Content” link at the very top of the
page
– Take user directly to main content on a page – Save screen-reader users a lot of repetition
- Sometimes “Skip to Menu” is helpful too.
- To hide or not to hide?
– Appear on focus?
SLIDE 56 Tab Order
- Ensure that all active elements on a page
- ccur in logical tab order
– Links – Menu Items – Form Fields – Embedded Content – etc.
SLIDE 57 Form Field Labels
- All form fields need to have an associated
label tag
<label for=“name”>Name</label> <input type=“text” id=“name” /> – Use title if you can’t use label
- Don’t forget the search box!
SLIDE 58 Form Errors
- Indicate errors near to the affected field(s)
- Indicate all errors at once
- Change focus to the error text
- Consider error sound
SLIDE 59 Form Layout
- Don’t use tables!
- Place an asterisk at the start of a required
field name
- All form fields in a single column
SLIDE 60
Oh!
SLIDE 61 Multimedia – Alternative Formats
– Provide text transcript
– Provide described audio – and/or text descriptive transcript
– Provide captions and described audio – and/or text descriptive and audio transcript
- Interactive Content (Games, Charts, Embedded “Brochures”,
etc.)
– Provide text and informational content in alternative format – For non-informational content, provide a text description of its purpose
SLIDE 62 Alternative Format Examples
– http://www.cnib.ca/en/about/corporateVideo/
– mms://www.georgebrown.ca/media/why- captioned-media.wmv
SLIDE 63 Multimedia Controls
- All controls must be accessible!
– Recommended to provide alternative text links for graphical controls – Can be controlled from the keyboard
– Don’t auto-play multimedia on page load – Let the user decide if they want to play the content – Provide pause and mute controls for video, audio and animated content.
SLIDE 64 Mobile Accessibility
- WebAim reports 71.8% of respondents
use a screen reader on a mobile device, a 600% increase in mobile screen reader usage since the first survey was conducted 17 months prior.
- New opportunities for PWDs in access to
more features and third-party applications.
- WebAim Screen Reader Survey 4, released in July 2012
SLIDE 65
Smartypants
Are all smartphones created equal?
SLIDE 66 iPhone: 60% of Users
- Touch screen with Voiceover, built in screen
reader
- A user’s finger moves over or taps an element,
the name of the element is spoken. Double tapping on the screen activates the element which has focus.
- A user can flick their finger from the left side of
the screen to the right side to navigate through the elements in sequence without having to know the element’s onscreen location
- Right-to-left flick gesture sequentially navigates
in reverse order.
SLIDE 67 iPhone: It gets better
- Alternative input and output modalities available
through Bluetooth keyboards and refreshable Braille Displays
- Zoom, which enlarges the entire screen up to 500
percent, and AssistiveTouch, which allows for gesture creation and support for adaptive input devices
- Siri on the iPhone 4s which allows the user to control
the device through speech recognition
- Hearing aid and TTY compatibility, support for open
and closed captioning within iTunes and customizable vibratory alerts for users who are deaf
- r hard of hearing
- Convert audio to mono!
SLIDE 68 Android: 7.9% of Users
- Open source, “Wild West” model of
accessibility where developers are expected to create accessibility solutions rather than having them provided centrally
- TalkBack – an included service which
speaks the results of actions, events and notifications
- KickBack – a service which provides
haptic (vibratory) feedback for different actions
- SoundBack – a service which plays
sounds for different actions
SLIDE 69 Man overboard? Great promise?
- Since phone manufacturers have
complete control over how Android is provided with their phone, some of these accessibility services have been removed from their Android…
- The open architecture design of the
Android platform allows for the easy development of third-party assistive technologies and accessibility solutions – the Great Promise?
SLIDE 70 Google does not sit still
Best news is Android Jellybean (4.1) rolled
- ut mid-July. Baked in accessibility
enhancements:
- Speech recognition is now local to the
device, no longer Internet connectivity
- Gesture support allowing for greater
nonvisual control of the device
- Native support for refreshable Bluetooth
Braille displays
SLIDE 71 Blackberry: 0.9% of Users
- Hearing aid compatibility
- Support for captioned multimedia content
- Compatibility with TTY and TDD terminals
- Customizable vibratory alerts
- Single-handed operation
- Inverted color contrast support
- Customizable fonts
- Browser zoom
Blackberry screen reader for the Blackberry Curve 9350, 9360 and 9370 smartphones.
SLIDE 72 WAVE Toolbar
- http://wave.webaim.org/toolbar
– Errors, features, alerts – Yellow items need to be checked – Disable styles
– http://google.ca
SLIDE 73 Colour Contrast Tools
- Desktop application - Contrast Analyzer, Version
2.2 http://www.paciellogroup.com/resources/contrast
- analyser.html
- Firefox Add-on
https://addons.mozilla.org/en- US/firefox/addon/wcag-contrast-checker/
SLIDE 74
Total Validator
http://www.totalvalidator.com/ One click, real time website evaluation. Beware of false positives and negatives…
SLIDE 75 Contact Us
John Lalley Manager, Web Accessibility
CNIB National - Marketing and Communications 1929 Bayview Ave. Toronto, Ontario Canada M4G 3E8 john.lalley@cnib.ca Office : 416-486-2500 Ext. 8345 / Mobile: 416-457-9701
