“Development of information systems flexible enough to accommodate the needs of the broadest range of users …regardless of age or disability”
Principles of Accessibility - WCAG 2.0
Information on your site must be:
- Perceivable – available through sight, hearing or touch
- Operable - compatible with keyboard or mouse
- Understandable - User-friendly, easy to comprehend
- Robust - Works across browsers, devices, assistive technologies
Is your site only WCAG compliant?
Your site might be WCAG compliant, but still inaccessible. If people can’t get information, they may very well take their healthcare business elsewhere resulting in:
- Lost hospital admissions
- Lost ER visits
- Lost patient visits for practices
- Lost surgery center visits
- Lawsuits
The main categories of disabilities affected by Internet accessibility barriers are...
Hearing
Hard of hearing
Deafness
Visual
Blindness
Low-vision
Color blind
Motor
Inability to use a mouse
Slow response time
Limited fine motor control
Accessibility Best Practices - Do's and Dont's
Use headings properly
No more than 1 h1 on a page unless using section's and article's for additional h1s
Do not skip heading levels, an h1 should be followed by an h2, followed by an h3 etc.
Do not use blank Hx tags
Do not use formatted paragraph text as a substitute for headings
Include the alt attribute for every image
Do include form image buttons (better to use non-image buttons), and image map hot spots
Do limit text within graphics: rotators, banners, campaigns
Do include name and title in the alt attribute of individuals pictured in news articles
Do leave the alt text null (alt=””) if images have surrounding text or headings that describe the image
If an image is the only thing in a link, then the alt text should reflect where that link is going.
Do not include words such as ‘logo of’ or ‘picture of’ or things like ‘smiling lady’ etc.
Do not use infographics and charts without also making the information available as real text
Do not include title attributes on images
Use semantic organization
Use a proper list when it’s a list of items, not a ‘fake’ list of links or paragraphs (screen reader users can choose to pull up lists)
Color alone should not convey content
Provide meaningful link text
Learn more, read more, click here, etc. – taken out of context this type of link text is meaningless and can be confusing to screen reader users. Link text should convey the purpose of the link.
Watch linking using single words, phrases are better ex: specialists vs. orthopedic specialists or services vs. cardiology services.
URLs alone should not be the link text, link the words of the link destination.
Tables for tabular data only
Row and column headings, where necessary, should be used to associate data cells with headers.
Table headers should have appropriate scope attributes
There should be no empty th's
Do not use table summary, use caption's instead to describe the table’s purposeInclude Title and Subject fields in PDF document summaries
Forms: include Facility/practice name and the name of the form
Simplify medical terminology or link terms to explanatory resource
Links shouldn’t include the title attribute
If using an iframe, the title attribute should be describing what’s in the iframe
Resources
Accessibility Evaluation Quick Reference
WCAG 2.0 Checklist
Alt Decision Tree
The Paciello Group
and their blog
Deque University for Accessibility Training
Web Accessibility Tutorials – W3.org
Using the html title attribute
Google’s Guide to Designing with Empathy
Making Accessible Links – 15 Golden Rules for Developers
8 Myths about How Blind People Use the Internet
Testing Tools
Site test tools - Tenon and Wave
WebAIM Contrast Checker
NVDA: Free, open source screen reader
Contrast Ratio Calculator
NoCoffee - Color blindness & vision impairments simulator (Firefox addon)
Functional Accessibility Evaluator 2.0