Universal Web Design Final Presentation Greg Lanier April 15, 2003

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

Review of project objectives 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 2

Review of project objectives 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. 2

WCAG 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? 3

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

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

WCAG: Checklist of Guidelines 10.Design for device-independence. 11.Use interim solutions. 12.Use W3C technologies and guidelines. 13.Provide context and orientation information. 3

WCAG: Checklist of Guidelines 14.Provide clear navigation mechanisms. 15.Ensure that documents are clear and simple. (source: WEBCONTENT/ ) WEBCONTENT/ 3

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

Basics of Universal Design Fundamental Principles 1.Equitable use 2.Flexibility in use 3.Simple and intuitive 4.Perceptible information 5.Tolerance for error 6.Low physical effort 7.Size and space for appropriate use 4

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Schematic

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

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