1 / 20

Web Accessibility ( cont )

Web Accessibility ( cont ). COAP 2170 – Week 7a. Dejan Dimitrovski Fall 2, 2012 Webster University, Vienna. Steve Krug on Accessibility. Unless you make a blanket decision that people with disabilities aren’t part of your audience, your site is not going to be usable unless it’s accessible.

dung
Download Presentation

Web Accessibility ( cont )

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Web Accessibility (cont) COAP 2170 – Week 7a Dejan Dimitrovski Fall 2, 2012 Webster University, Vienna

  2. Steve Krug on Accessibility • Unless you make a blanket decision that people with disabilities aren’t part of your audience, your site is not going to be usable unless it’s accessible

  3. Data: Prevalence of colorblindness *Source: Wikipedia – Color blindness

  4. The Krug Accessibility Guidelines • Fix the usability problems that confuse everybody • If people without disabilities are having troubles using your website, then how will people who use special software (screen readers, mobile browsers) be able to use it

  5. The Krug Accessibility Guidelines • Read an article http://redish.net/content/papers/interactions.html An extensive usability testing conducted with people who are visually impaired (blind or low vision) ! Strongly Recommended Reading! Sample: Screen-reader users scan with their ears.Most blind users are just as impatient as most sighted users. They want to get the information they need as quickly as possible. They do not listen to every word on the page – just as sighted users do not read every word. They "scan with their ears," listening to just enough to decide whether to listen further. Many set the voice to speak at an amazingly rapid rate.

  6. The Krug Accessibility Guidelines • Read an article http://redish.net/content/papers/interactions.html An extensive usability testing conducted with people who are visually impaired (blind or low vision) ! Strongly Recommended Reading! Sample: Screen-reader users scan with their ears.Most blind users are just as impatient as most sighted users. They want to get the information they need as quickly as possible. They do not listen to every word on the page – just as sighted users do not read every word. They "scan with their ears," listening to just enough to decide whether to listen further. Many set the voice to speak at an amazingly rapid rate.

  7. The Krug Accessibility Guidelines • Read A book • Pro HTML5 Accessibility (Professional Apress) • Web Accessibility: Web Standards and Regulatory Compliance(Friends of Ed)

  8. The Krug Accessibility Guidelines • Start using CSS • “Progressive enhancement” • Content before style • COAP 3120 – Designing with Stylesheets

  9. The Krug Accessibility Guidelines • Go for the low-hanging fruit • Semantic Markup! • Add alt text to images (and other non-text content) • Make forms work with screen readers • <label for="id_of_form_control"> • “Skip to content” or “Skip to navigation” links (optionally, hidden from sighted users) • Don’t use JavaScript without a good reason

  10. Accessibility Assessment Firefox - Web Developer Toolbar

  11. Test site http://www.beetcafe.com/ • Information -> Document Outline • Confused? Check the document outline of www.webster.ac.at • Compare and analyze. Which (web) document is better structured. Why is the document structure important

  12. Test site http://www.beetcafe.com/ • CSS -> Disable Styles -> Disable All Styles • What does the page look like without CSS enabled? Do you think that the page has HTML that is relevant to the style of the page? • Compare it to the Webster Vienna website

  13. Test site http://www.beetcafe.com/ • Outline -> Outline Tables-> Outline Tables • Is the page using tables to display ‘tabular data’?

  14. Test site http://www.beetcafe.com/ • Disable-> Disable JavaScript-> Disable All JavaScript • Try navigating to the ‘Directories’ page. Or the news/photos page • Do you notice something strange? • Now enable JavaScript, reload the page, and try navigating to those 2 pages again. Notice anything strange? Is the navigation accessible?

  15. Test site http://www.beetcafe.com/ • Images > Display Alt Attributes • Do all images have alt attributes? • Does the web site use meaningful alt attributes?

  16. Test site http://www.beetcafe.com/ • Images > Replace images with alt attributes • Is it still possible to understand the website when there are no images?

  17. BeetCafe- Redesign • What would you do differently?

  18. Learning Resources

  19. Learning Resources • 25: Accessibility basics • http://dev.opera.com/articles/view/25-accessibility-basics/ • 26: Accessibility testing • http://dev.opera.com/articles/view/26-accessibility-testing/

  20. Online Quiz to test your knowledge • Review of Basic Accessibility • http://teamtreehouse.com/library/websites/accessibility/introduction/review-of-basic-accessibility • Review of Accessible Websites • http://teamtreehouse.com/library/websites/accessibility/websites/review-of-accessible-websites • Review of Accessible Web Apps • http://teamtreehouse.com/library/websites/accessibility/web-apps/review-of-accessible-web-apps *Note: It’s more for fun, don’t worry if you see something we haven’t discussed!

More Related