It’s important to make sure that your website is accessible by everyone, regardless of disability. Learn how to improve the accessibility of your website.

1. Quick Tips to Get Started
Making Websites Accessible to
People with Disabilities

2. Our goals today
• Take a snapshot of web accessibility – what is it,
why does it matter?
• Identify essential techniques
• Answer questions
• Point to what’s next

3. Facilitated by…
• Sharron Rush, co-founder, Executive Director
Knowbility Inc
• Invited Expert since 2006 for W3C Web Accessibility
Initiative (WAI)
• Currently co-chair for Education and Outreach
Working Group (EOWG)
• Author Maximum Accessibility (2002)
Hi there!

4. The Web is meant to transcend
barriers
Regardless of differences …
• platform
• operating system
• formats
• browser
• device
• distance
• language
• ability

5. Web Accessibility Initiative at
W3C
• W3C is global standards maker for the web
• Develop technical standards
• Including accessibility guidelines:
• Content (WCAG)
• Authoring tools (ATAG)
• Browsers and AT (UAAG)
• Dynamic applications (ARIA)
W3C Web Accessibility Initiative logo

6. Fireman grips firehose
with huge output of
letters of regulations and
guidelines NIMC, DAISY,
WCAG, ATAG. 508, etc –
don’t be overwhelmed!

7. Accessible
People with disabilities
…can acquire the same information
…participate in the same activities
…actively produce as well as
consume online content

8. Why advocate for accessibility?
Legal
Technical
Market
Humanitarian

9. It’s all about People

10. Short videos from WAI

11. 10 videos with optional captions and
audio description

12. Four Principles of accessible content
Perceivable, operable, understandable and robust. Cartoon shows four colorful characters. First is a man with dark glasses saying “I can
perceive it.” Next a fellow with one arm in a sling who says “I can use it,” then a woman with a lightbulb over her head saying “I can
grasp it,” and finally a woman holding a smart phone saying “I can access it.”
…across the broadest possible
spectrum

13. Common Barriers
• Structure
• Reading order
• Keyboard
• Text alternatives
• Color and contrast
• Link text
• Multi-media

14. Structure
• Use semantic structures as intended
• Use for semantic meaning, not visual presentation
• Explicit form id and label
• Outline structure with HTML 5 regions or ARIA landmarks

15. Reading and focus order
• Reading order reflects code order
• Logical tab order – top to bottom, left to right
• Page titles uniquely describe page content
• Alerts and error messages receive focus.

16. Visible Keyboard Operation
• Allow all functional elements to be reached
and activated from the keyboard
(often tab and arrow keys)
• Make keyboard focus as clearly visible as
mouse hover states

17. Text alternative basics
All image elements must have alt text
(alt attribute of img element)
• Brief informative descriptions for meaningful images
• Empty alt attribute <alt=“”> for decorative images
– or use CSS background
• Identify target of linked images
• Fully describe complex images like charts, graphs
• Decision tree from WAI Tutorial

18. Color and contrast
 Avoid using color as
ONLY method to denote
a state or requirement
 Provide contrast of text
against background of
4.5 to 1 or higher

19. Link text
• Specify link target (where the link goes, what it does)
• Text should make sense out of context (not “More” or
“Click here”)
- OR -
• Use aria-describedby to make an association available
to assistive technology

20. Media
• Keyboard operable media player
• Caption audio content of video and synchronize to
onscreen actions
• Describe meaningful video content in audio
description track or text transcript.

21. Preliminary Testing
• During develop, QA etc, include accessibility testing
• Easy Checks from W3C

22. Include People with
disability in usability
tests
• Reach out locally to disability
organizations
• Remote testing using
AccessWorks

23. Learn so much more from WAI!
• Tips for getting Started
Get started with accessibility. These tips introduce
some basic considerations for making your website
more accessible to people with disabilities, and provide
links to additional guidance.
Tips for Writing, Developing and Design for web
accessibility
https://www.w3.org/WAI/gettingstarted/tips/index.html

24. Participate …
Community events and programs centered around
equal access
• Accessibility Internet Rally – accessible web
development contest benefits global nonprofits
• AccessWorks – remote user test employs people with
disabilities
• ATSTAR helps teachers apply assistive tech to improve
learning outcomes for kids with disability.

25. Thank you!
Sharron Rush
srush@knowbility.or
g
@knowbility
@addthis