Upload
karen-ohara
View
431
Download
1
Embed Size (px)
DESCRIPTION
Lists web design resources and tips for making sites accessible to people with disabilities.
Citation preview
WEBSIT
ES
MA
KI N
G T
HE
M G
OO
D, M
AK
I NG
TH
EM
AC
CE
SS
I BL
E
Karen O’HaraNovember, 2012
WHAT IS GOOD WEB DESIGN?
HINT: IT DOESN’T MAKE YOU THINK!
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/
Informed Consent samples (Morehouse University)
Surveys & questionnairesTesting: with actual site or a paper
mock-up (paper prototyping)
USABILITY TESTING BASICS
ABOUT THE NIELSEN/NORMAN GROUP
Jakob Nielsen: “The world’s leading expert on Web usability” (U.S. News & World Report)
Don Norman: “One of the world’s 27 most influential designers” (Business Week)
Paper Prototyping: fast, cheap way to rapidly test user interfaces (DVD)
http://www.nngroup.com/reports/prototyping/video_stills.html
DEVELOPI
NG ACCESSIB
LE
WEB S
ITES
TH
E B
AS
I CS
OF A
CC
ES
SI B
L E D
ES
I GN
WHAT IS ACCESSIBLE DESIGN?
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)
Source: Wikipedia
WORLD WIDE ACCESS: ACCESSIBLE WEB DESIGNhttp://youtu.be/MO2gpA91fR8
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
SECTION 508: SCOPE
Section 508 applies to technologies, including:software applications and operating systems web-based information or applications telecommunication products video and multimedia products self contained, closed products (e.g., information kiosks, calculators, and fax machines)
desktop and portable computers
Scope currently limited to the Federal sectorDoes not apply to the private sector (yet)
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.
HOW T
O MAKE S
ITES
MORE ACCESSIB
LE
1. ADD CONTEXT & EXPLANATION
Provide appropriate alternative text:present the CONTENT and FUNCTION of the image. Be succinct.
Examples: www.target.comwww.bbc.co.uk
Ensure links make sense out of context“Click here” will make no sense in a list of links on a page.
2. OFFER ALTERNATIVES
Caption and/or provide transcripts for audio and video
Ensure that readers can access files that are not in HTML, including:PDF files MS Word files PowerPoint presentationsAdobe Flash content
(And provide access to free viewing software, if available)
3. DO NOT RELY ON COLOR ALONE TO CONVEY MEANING (HTTP://WWW.NEITZVISION.COM/CONTENT/COLORBLINDWORLD.HTML)
It doesn’t work for people using screen readers or for people who are colorblind
4. DESIGN FOR READABILITY
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 and easy to read
Write clearlyUse clear fontsUse headings and lists appropriatelyEnsure high color contrast.
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
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)