1 / 32

Universal Web Design

This presentation discusses the basics of universal web design, WCAG guidelines, and demonstrations that show the benefits of incorporating universal design principles into web development.

dlarry
Download Presentation

Universal Web Design

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. Universal Web Design Final Presentation Greg Lanier April 15, 2003

  2. Contents 1 • Review of project objectives • WCAG • Basics of Universal Design • Universal Web Design Principles • Demonstrations • Accessible Google • Final steps

  3. Review of project objectives 2 • Reasons for choosing this topic • Roots of Web inaccessibility • Legal context • Section 508: federal agencies • ADA Title III: commercial and non-profit • Legal cases • Goal: fuse accessibility, standards compliance, and creativity

  4. Review of project objectives 2 • Premise: Engineering a web resource to be universal – not just "accessible" in a standards-compliance sense – leads to better overall design for everyone, regardless of visual, mental, or other differences.

  5. WCAG 3 • Web Content Accessibility Guidelines • Goals of WCAG 1.0 • Make Web content accessible to people with disabilities • Propose a set of guidelines to be used by Web developers and software developers • Help anyone, regardless of disability or user agent, find information better • Sound familiar?

  6. WCAG: Checklist of Guidelines 3 • Provide equivalent alternatives to auditory and visual content. • Don't rely on color alone. • Use markup and style sheets and do so properly. • Clarify natural language usage.

  7. WCAG: Checklist of Guidelines 3 • Create tables that transform gracefully. • Ensure that pages featuring new technologies transform gracefully. • Ensure user control of time-sensitive content changes. • Ensure direct accessibility of embedded user interfaces.

  8. WCAG: Checklist of Guidelines 3 • Design for device-independence. • Use interim solutions. • Use W3C technologies and guidelines. • Provide context and orientation information.

  9. WCAG: Checklist of Guidelines 3 • Provide clear navigation mechanisms. • Ensure that documents are clear and simple. (source: http://www.w3.org/TR/WAI-WEBCONTENT/ )

  10. Basics of Universal Design • Definition: • The design of products and environments to be usable by all people, to the greatest extent possible, without the need for adaptation or special design • Center for Universal Design at NCSU • Trace Center at Univ. of Wisconsin • Generally focused on structures, especially housing 4

  11. Basics of Universal Design Fundamental Principles • Equitable use • Flexibility in use • Simple and intuitive • Perceptible information • Tolerance for error • Low physical effort • Size and space for appropriate use 4

  12. Universal Web Design Principles • “More than just alt text” • Larger amount of energy spent on conceptualization than on implementation • Haphazard application of WCAG yields compliant but sub optimal websites 5

  13. Universal Web Design Principles WCAG Standards Section 508 Guidelines XHTML Strategy & Differentiation Applied UD Creativity Persistent Testing Successful User Experience 5

  14. Universal Web Design Principles • Use knowledge of published standards simply as tools • Key is learning to USE the tools 5

  15. Universal Web Design Principles • Suggestion 1: back to the basics • HTML is not a graphic design language • Focus on the organization of content first, then use headers, paragraphs, images, links, and tables to present content • Stay focused on content and not form. 5

  16. Universal Web Design Principles • Suggestion 2: adding style • Use Cascading Style Sheets not only to control colors and fonts but also to arrange elements on the page • UD: flexibility 5

  17. Universal Web Design Principles • Suggestion 3: deliberate navigation schemes • Jump links • Consistent navigation links • Breadcrumbs or trees • UD: simple and intuitive 5

  18. Universal Web Design Principles • Suggestion 4: allow high user control • Strict font and layout control used to be the competitive advantage • Scalable fonts, adjustable widths, and customizable colors are new differentiators • UD: perceptible information 5

  19. Universal Web Design Principles • Suggestion 5: logical content placement • Screen reader’s cursor progression down the page should reflect the document structure • Use CSS positioning and layers to arrange things visually for sighted users 5

  20. Universal Web Design Principles • Suggestion 6: conditional element visibility • Hidden navigation links help the user that is blind understand how to move through the document • Use alternate style sheets to hide visual fluff from screen readers and streamline how page is read 5

  21. Demonstrations • Three sites and one goal: to prove that universal design principles do enhance creativity while improving the Web – more accessibility, cleaner content structure, less-bloated code, lower bandwidth usage. 6

  22. Demonstrations: SpaceX • Commuter spacecraft developer • Stylistic but dependent on images (with no alt text), frames, and flash • Results of re-design: • Code ratio of 2.62 • XHTML Strict, WCAG, and Section 508 • No frames, scalable text, logical markup • Nearly a carbon-copy 6

  23. Demonstrations: Weather.com • One of the worst diagnoses • Not very visually appealing; too many tables; heavy content • Results of re-design: • Code ratio: 13.5 down to 3.9 • XHTML: 977 (1.8/line) errors to 0 • WCAG: 187 errors (35.6% of code) to 0 • Relative sizing, enhanced appearance 6

  24. Demonstrations: Student Government • SBP and Jim Kessler • Desire to create the “gold-standard” student group site • Improve communication between students and government • Extremely high visual appeal mixed with professionalism and effective content presentation 6

  25. Accessible Google • Search results too complicated to browse using a screen reader • Diagnostics: • XHTML: 1441 errors (23.2 errors/line) • WCAG: 44% of code has errors • Code ratio of 5.15 7

  26. Accessible Google • Complaints: • To much content to dig through to find results • Extraneous, non-valuable info • Too many links before and after the query box • Difficult to gauge where you are on the page • Illogical/inefficient tab progression 7

  27. Accessible Google • Solutions • Full redesign with XHTML/CSS • User preferences and data hiding • Embedded “jump links” to facilitate transportation on the page • Logical content markup 7

  28. Schematic 1 2 3 2 3 1

  29. Schematic 2 3 1 1 2

  30. Schematic 2 3 1 2 1 2 1 2 1 2

  31. Accessible Google • Other benefits • Full XHTML validation with most stringent criteria (XHTML Strict 1.0) • Full compliance with WCAG and Section 508 • Code ratio went from 5.15 to 3.68 7

  32. Finishing the project • Test Accessi-Google with Jason or another individual with visual impairment • Finish implementing Student Government • Try to sell Weather and Google redesigns to parent companies 8

More Related