Lists web design resources and tips for making sites accessible to people with disabilities.

1. Karen O’Hara
March, 2014
Making them good, making them accessible
WEBSITES

2. HINT: IT DOESN’T MAKE YOU THINK!
What is Good Web Design?

3. Favorite Web Design Resources
Vincent Flanders’ Web Pages That Suck
 www.webpagesthatsuck.com
Jakob Nielsen’s Alertbox
 http://www.useit.com/alertbox
WebAIM (Web Accessibility in Mind)
 http://webaim.org/

4. Usability Testing Basics
Test plan and script, including
Informed Consent
Surveys & questionnaires to
gather data
Video or screencast capability
Testing: with actual site or a
paper mock-up (paper
prototyping)

5. http://webaim.org/articles/pour/
 Perceivable: People can find what they
need, in a variety of ways
 Operable: People can interact with the
information, in a variety of ways
 Understandable: Content is predictable
and makes sense
 Robust: Website technology works across
platforms and browsers, can scale to
mobile devices
The “POUR” Model of site
design as foundation

6. Developing
Accessible Web Sites
The basics of accessible design

7. Source: Wikipedia
Accessible by as many people as possible;
often refers to people with disabilities
 Commonly accomplished through assistive
technology (screen readers, input devices)
 Not exactly the same as usability (which
focuses on user goals and
satisfaction/efficiency)
 Strongly related to universal design (making
things accessible to all people whether they
have a disability or not)
What is Accessible Design?

8. Why make the Web accessible
to users with disabilities?
For purely ethical reasons
It’s the law for websites that receive
funding from the federal government.
Web Content Accessibility Guidelines
(WCAG) represent good practice;
subset of international World Wide
Web Consortium (W3C)
Emerging technologies work better
with accessible sites

9. The Business Case
 Approximately 56.7 million (18.7%) of the
civilian non-institutionalized population have
a disability
 More prevalent in older populations
 About 38.3 million people (12.6%) have a
severe disability (require personal assistance)
 People with disabilities represent more than
$200 billion in discretionary spending.
Brault, Matthew W., “Americans With Disabilities: 2010,” Current Population Reports, P70-131, U.S.
Census Bureau, Washington, DC, 2012.

10. https://youtu.be/MO2gpA91fR8
World Wide Access:
Accessible Web Design

11. HOW TO MAKE SITES
MORE ACCESSIBLE

12. 1. Add context & explanation
Provide appropriate alternative text:
 present the CONTENT and FUNCTION
of the image.
 Be succinct (or use empty quotation marks to
allow the screen reader to skip the image)
Ensure links make sense out of context
 A screen reader user can choose to tab
through all the hyperlinks on the page
 “Click here” will be useless to the person using
the screen reader

13. 2. Offer alternatives
Caption and/or provide transcripts for audio and
video
 YouTube allows you to automatically or manually
caption videos you own.
Ensure that readers can access files that are not in
HTML, including:
 PDF files
 MS Word files
 PowerPoint presentations
 Adobe Flash content
(And provide access to free viewing software, if available)

14. It doesn’t work for people using screen readers or for
people who are colorblind
(http://www.neitzvision.com/content/colorblindworld.html)
3. Do not rely on color alone
to convey meaning

15. Guideline 14 of Web Content Accessibility Guidelines
(WCAG)—Ensure that documents are clear and simple
so they may be more easily understood.
Make sure content is clearly written &
easy to read
 Write clearly
 Use clear fonts
 Use headings and lists appropriately
 Ensure high color contrast.
4. Design for Readability

16. 5. Test Readability
Readability tests can be used to estimate
the complexity of a page
 Major algorithms: Gunning-Fog Index,
Flesch Reading Ease, Flesch-Kincaid
grade level,
 One web-friendly site:
http://juicystudio.com/services/readability.php

17. 6. Validate Code against
WCAG
Run site URLs through a
validator such as WAVE or
Cynthia Says
Add a browser toolbar (e.g.,
WebAIM’s WAVE toolbar for
Firefox)

18. Follow me on Twitter
Visit my Workplace
Writing Blog
Continue the conversation!