Web design and accessibility


Published on

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

Published in: Education
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Web design and accessibility

  1. 1. Karen O’Hara March, 2014 Making them good, making them accessible WEBSITES
  2. 2. HINT: IT DOESN’T MAKE YOU THINK! What is Good Web Design?
  3. 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. 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. 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. 6. Developing Accessible Web Sites The basics of accessible design
  7. 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. 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. 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. 10. https://youtu.be/MO2gpA91fR8 World Wide Access: Accessible Web Design
  12. 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. 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. 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. 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. 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. 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. 18. Follow me on Twitter Visit my Workplace Writing Blog Continue the conversation!