3. 3
Accessibility refers to the inclusive practice of
removing barriers that prevent interaction with, or
access to websites, by people with disabilities.
When sites are correctly designed, developed and
edited, all users have equal access to information
and functionality.
https://tinyurl.com/uccandoit
Accessibility in this Context
4. 4
UC Policy IMT-1300
The University of California is committed to
supporting an information technology (IT)
environment that is accessible to all and in
particular to individuals with disabilities. To this
end, the University seeks to deploy information
technology that has been designed, developed, or
procured to be accessible to people with
disabilities.
It is also US Law and the right thing to do.
Accessibility is UC Policy
5. 5
Put CodeSniffer in your
bookmark bar and use it
on any web page.
CodeSniffer – Get your hands dirty
6. 6
Resources: tool picker, test page
Browser Extensions: aXe, Wave, SiteImprove
Bookmarklets: CodeSniffer, Totally, etc.
Online Tools: AccessLint, FAE
Many, many choices,
styles and formats
https://tinyurl.com/uccandoit
Free Automatic Testing Tools
7. 7
Web Content Accessibility Guidelines (WCAG)
are guidelines are produced by the World Wide
Web Consortium (W3C) and are the standard
means,
adopted and used to evaluate and guide
website accessibility.
2.0 is the current version
AA is the level UC follows
WCAG 2.0 AA and Why We Use It
8. 8
2.1.2 :four Principals
2.1.2 :twelve Guideline
2.1.2 :Success Criteria
(54)+ :97 Tests (yes/no question)
Examine:
WCAG (2.0 A) 2.1.2
WCAG - Three Segmented Number
9. 9
Operable, Keyboard Access with no
Keyboard Trap(s), passes by
answering yes to Question #54:
Is there a way to get in and out of
every component on the page (e.g.
widget or control) using only the
keyboard?
WCAG (2.0 A) 2.1.2 =
10. 10
Automatic
Standardized and easily repeated
Covers 20-30 percent of the rules
Manual
Requires context and judgment
Is slow, but precise
Promotes greater understanding
https://tinyurl.com/uccandoit
Automatic and Manual Testing
11. 11
Purpose:
Easily find and report, errors and warnings
Locate errors and give guidance
Aid manual checks
Warning:
May have false positives
Others use these tools to
rate and rank your site.
https://tinyurl.com/uccandoit
Automatic Testing Tools
12. 12
What cannot be machine tested:
Keyboard operable: tab around (no mouse)
Accuracy of alt text in context
Confusing, busy, inconsistent
Accurate Captions
Visual Hierarchy
Zoom
BYOT – bring your
own tests
https://tinyurl.com/uccandoit
Manual Testing
13. 13
WCAG 2.0 A 1.2.2
Perceivable / Time-based media / Captions
#19 - Does the captioning accurately describe the
prerecorded video (dialogue and important
sounds)?
Manually Check a Video
15. 15
Tools:
PAVE – PDF cloud service
Grammarly – free and paid
versions
Accessibility Checker – for
WYSIWYG editors
MS Accessibility Tools
https://tinyurl.com/uccandoit
Find, Fix, and Learn Tools
16. 16
Consider:
Results will be used for: demo,
find and fix, reporting,
monitoring?
What is the purpose, features,
and tasks of website/page?
Are you doing a page sampling
or whole site?
What else could you include
while you are at it: branding,
grammar check?
Prepare to Test
Hands-on: Set up your laptop or find someone to share with
Take Away: Get Read to work.
Take away: I am a real person working in accessibility, you can contact me.
Take Away: We are talking about the Accessibility of digital content.
Understanding the Need for Accessibility
An Alphabet of Accessibility Issues
The Accessibility Tree: API, ARIA, DOM
WCAG (Web Content Accessibility Guidelines)
Please see complete PDF of the University of California – Policy IMT-1300 Information Technology Accessibility Policy Document University of California Office of the President Electronic Accessibility website
Benefits
SEO (Search Engine Optimization)
search engines read alt tags and captions
well constructed pages rank higher
Social Responsibility – as a public entity, UC is held to the highest standards of access
Ease of use for all users
Device independence - desktop, laptop, mobile, ect.
More inclusive work place
Bimodal presentation - can improve speech perceptibility
Encourages cost/time saving online interaction
Hands-on: Use Code Sniffer
Take Away: Code Sniffer is easy and quick, but what are those numbers?
Hands-on: Check out a tool or two
Take Away: You have many free and easy tools available
Tease: my favorite tools will come after the break
Bookmarklets
HTML CodeSniffer – JS bookmarklet that works with all browsers. Provides clear results with links to appropriate WCAG 2.0 documentation and suggested fixes.
tota11y Accessibility Visualization Toolkit – Overlays indicators on your page where improvements are needed, along with explanations.
JavaScript Bookmarklets for Accessibility Testing
Browser Extensions
Web Developer Toolbar – Extension for Firefox and Chrome with tools that make manual accessibility testing easier.
aXe Firefox Extension – Deque’s open source accessibility extension for Firefox allows you to perform accessibility testing in the Firefox browser. aXe Training video
Fangs Screen Reader Emulator - renders a text version of a web page similar to how a screen reader would read it. The ambition is to help developers understand how an assistive device would present a website and thereby increase chances of finding accessibility issues early.
Accessibility Developer Tools Chrome Extension – Gives you an accessibility audit and allows you to see accessibility properties for any element in the page.
Online Tools
These check a single page at a time but are very useful in identifying issues.
WAVE Web Accessibility Evaluation Tool – Online version of the popular WAVE tool for the Chrome browser - can be used in any browser.
Web Accessibility Checker – can choose what standard to use
AccessLint - Clean and simple
Multi-Page Web Site Checkers:
EvalAccess tool - Web Service tool for evaluating web accessibility
Run FAE
The Functional Accessibility Evaluator (FAE) evaluates a website or a single web page
Color Contrast
Ensure that the colors on your site sufficiently contrast with other page elements by using these tools:
Color Contrast Analyzer – App for Windows & Mac that uses an eyedropper and doesn't require knowing the hexadecimal color codes. Can also be used with Word and PDF documents.
Color Safe – Create an accessible color palate.
WebAIM Color Contrast Checker – Determine the accessibility of the text on your pages.
Testing Tools More Info:
Top 25 Awesome Accessibility Testing Tools for Websites
Take away: Even Earl hides when I talk about this stuff.
Take Away: Those numbers refer to Principal - Guideline - Success Criteria
How to Meet WCAG
Wuhcag
Take away: you need to drill down into a guideline to see how it applies.
Hands-on: Check out a tool or two
Take Away: You have many free and easy tools available
Tease: my favorite tools will come after the break
Bookmarklets
HTML CodeSniffer – JS bookmarklet that works with all browsers. Provides clear results with links to appropriate WCAG 2.0 documentation and suggested fixes.
tota11y Accessibility Visualization Toolkit – Overlays indicators on your page where improvements are needed, along with explanations.
JavaScript Bookmarklets for Accessibility Testing
Browser Extensions
Web Developer Toolbar – Extension for Firefox and Chrome with tools that make manual accessibility testing easier.
aXe Firefox Extension – Deque’s open source accessibility extension for Firefox allows you to perform accessibility testing in the Firefox browser. aXe Training video
Fangs Screen Reader Emulator - renders a text version of a web page similar to how a screen reader would read it. The ambition is to help developers understand how an assistive device would present a website and thereby increase chances of finding accessibility issues early.
Accessibility Developer Tools Chrome Extension – Gives you an accessibility audit and allows you to see accessibility properties for any element in the page.
Online Tools
These check a single page at a time but are very useful in identifying issues.
WAVE Web Accessibility Evaluation Tool – Online version of the popular WAVE tool for the Chrome browser - can be used in any browser.
Web Accessibility Checker – can choose what standard to use
AccessLint - Clean and simple
Multi-Page Web Site Checkers:
EvalAccess tool - Web Service tool for evaluating web accessibility
Run FAE
The Functional Accessibility Evaluator (FAE) evaluates a website or a single web page
Color Contrast
Ensure that the colors on your site sufficiently contrast with other page elements by using these tools:
Color Contrast Analyzer – App for Windows & Mac that uses an eyedropper and doesn't require knowing the hexadecimal color codes. Can also be used with Word and PDF documents.
Color Safe – Create an accessible color palate.
WebAIM Color Contrast Checker – Determine the accessibility of the text on your pages.
Testing Tools More Info:
Top 25 Awesome Accessibility Testing Tools for Websites
Automatic Testing Tools
Take Away: You have many free and easy tools available
Tease: my favorite tools will come after the break
Bookmarklets
HTML CodeSniffer – JS bookmarklet that works with all browsers. Provides clear results with links to appropriate WCAG 2.0 documentation and suggested fixes.
tota11y Accessibility Visualization Toolkit – Overlays indicators on your page where improvements are needed, along with explanations.
JavaScript Bookmarklets for Accessibility Testing
Browser Extensions
Web Developer Toolbar – Extension for Firefox and Chrome with tools that make manual accessibility testing easier.
aXe Firefox Extension – Deque’s open source accessibility extension for Firefox allows you to perform accessibility testing in the Firefox browser. aXe Training video
Fangs Screen Reader Emulator - renders a text version of a web page similar to how a screen reader would read it. The ambition is to help developers understand how an assistive device would present a website and thereby increase chances of finding accessibility issues early.
Accessibility Developer Tools Chrome Extension – Gives you an accessibility audit and allows you to see accessibility properties for any element in the page.
Online Tools
These check a single page at a time but are very useful in identifying issues.
WAVE Web Accessibility Evaluation Tool – Online version of the popular WAVE tool for the Chrome browser - can be used in any browser.
Web Accessibility Checker – can choose what standard to use
AccessLint - Clean and simple
Multi-Page Web Site Checkers:
EvalAccess tool - Web Service tool for evaluating web accessibility
Run FAE
The Functional Accessibility Evaluator (FAE) evaluates a website or a single web page
Color Contrast
Ensure that the colors on your site sufficiently contrast with other page elements by using these tools:
Color Contrast Analyzer – App for Windows & Mac that uses an eyedropper and doesn't require knowing the hexadecimal color codes. Can also be used with Word and PDF documents.
Color Safe – Create an accessible color palate.
WebAIM Color Contrast Checker – Determine the accessibility of the text on your pages.
Testing Tools More Info:
Top 25 Awesome Accessibility Testing Tools for Websites
Take Away: Manual testing requires creativity and common sense
You can add tests, like branding, usability and security
Hand-on: Try it on yourself on any website
Take Away: Checking is important
Hands On: Play with the tools
Hands On: CKeditor Accessibility Checker
Take Away: using find and fix tools helps creators learn – Bake it in!
Hands-on: continue to play with tools
Take Away: You will need to know what and why you are testing
To create a check list start with the basic 12 guidelines from WCAG, subtract any of those that do not apply to what you are testing and any additional things you want to check while you are at it and then use the purpouse of the testing and the resources you have to help you pick what tools to use.
Accessibility University practice page
https://www.washington.edu/accesscomputing/AU/
This page can be used to practice and teach accessibility testing and remediation
Earl my gray cat and I thank you. We both believe in the power of captioning.