• Like

Web design and accessibility

  • 166 views
Uploaded on

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

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

More in: Education
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
166
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
10
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Karen O’HaraNovember,2012
  • 2. WHAT IS GOOD WEB DESIGN? HINT: IT DOESN’T MAKE YOU THIN
  • 3. WEB DESIGN RESOURCESVincent Flanders’ Web Pages That Suck www.webpagesthatsuck.comJakob Nielsen’s Alertboxhttp://www.useit.com/alertboxWebAIM (Web Accessibility in Mind)http://webaim.org/
  • 4. USABILITY TESTING BASICSInformed Consent samples (Morehouse University)Surveys & questionnairesTesting: with actual site or a paper mock-up (paper prototyping)
  • 5. ABOUT THE NIELSEN/NORMAN GROUPJakob 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
  • 6. 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
  • 7. WORLD WIDE ACCESS: ACCESSIBLE WEBDESIGNhttp://youtu.be/MO2gpA91fR8
  • 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. SECTION 508: SCOPESection 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 sector Does not apply to the private sector (yet)
  • 10. THE BUSINESS CASEApproximately 56.7 million (18.7%) of the civilian non-institutionalized population have a disability More prevalent in older populationsAbout 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.
  • 11. 1. ADD CONTEXT & EXPLANATIONProvide appropriate alternative text:  present the CONTENT and FUNCTION of the image.  Be succinct.  Examples:  www.target.com  www.bbc.co.ukEnsure links make sense out of context “Click here” will make no sense in a list of links on a page.
  • 12. 2. OFFER ALTERNATIVESCaption and/or provide transcripts for audio and videoEnsure 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)
  • 13. 3. DO NOT RELY ON COLOR ALONE TO CONVEYMEANING(HTTP://WWW.NEITZVISION.COM/CONTENT/COLORBLINDWORLD.HTML) It doesn’t work for people using screen readers or for people who are colorblind
  • 14. 4. DESIGN FOR READABILITYGuideline 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 clearlyUse clear fontsUse headings and lists appropriatelyEnsure high color contrast.
  • 15. 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
  • 16. 6. VALIDATE CODE AGAINST WCAGRun site URLs through a validator such as WAVE or Cynthia SaysAdd a browser toolbar (e.g., WebAIM’s WAVE toolbar for Firefox)
  • 17. THE ENDFollow me on TwitterVisit my WorkplaceWriting Blog