Presentation is loading. Please wait.

Presentation is loading. Please wait.

Inspector 508: Accessible Web Design, Training and Consultation Website Design for Usability and Accessibility Todd M. Weissenberger Manager, Information.

Similar presentations


Presentation on theme: "Inspector 508: Accessible Web Design, Training and Consultation Website Design for Usability and Accessibility Todd M. Weissenberger Manager, Information."— Presentation transcript:

1 Inspector 508: Accessible Web Design, Training and Consultation Website Design for Usability and Accessibility Todd M. Weissenberger Manager, Information Technology Services UNM Center for Development and Disability

2 Inspector 508: Accessible Web Design, Training and Consultation Axioms of Web Design Know Thyself –Understand the needs and goals of your audience and your site be honest with yourself Function first –A site that doesnt work will not generate traffic, only scorn and derision Traffic is good –The goal of any site is to put information in front of people Separate structure and presentation –One structure should work for all Keep It Simple, Salvador! –The more complex a system, the more prone to failure

3 Inspector 508: Accessible Web Design, Training and Consultation Axioms of Web Design: II Design is a tool to assist you in communicating with your users Design is not a goal, nor an end unto itself With apologies to Web Style Guide

4 Inspector 508: Accessible Web Design, Training and Consultation What Is Web Usability? Usability is a qualitative measuring stick that describes the ease with which users can interact with your website Usability is the result of best development practices Usability exists independently of software or browsing tools Usability is a necessity for any web presence Usability is a fundamental shift in paradigmrather than getting the word to your user, you enable your user to obtain the information.

5 Inspector 508: Accessible Web Design, Training and Consultation What Makes a Site Usable? Usable websites are –Easy to learn –Easy to remember –Forgiving of errors –Intuitive –Efficient –Responsive –Successful Overall, usable systems should produce a positive experience for the user

6 Inspector 508: Accessible Web Design, Training and Consultation So Why Is Usability Desirable, Again? For Public sites: –Usability opens your site to more visitors –Good usability implementations make it possible for your customer to retrieve the information he or she came to find. –Satisfied customers are more likely to return For Intranets: –Usability = Increased productivity –Usability = Automated processes –Usability = Reduced training

7 Inspector 508: Accessible Web Design, Training and Consultation Usability Myths Usability = increased overhead –In fact, usability practices often result in a significantly streamlined development cycle Usability = boring design –The development practices associated with usable websites can generate results that are aesthetically pleasing and structurally sound Usability = a matter of opinion –Numerous studies have shown that usability concerns often hinge on specific and objective tasks A well-conceived site that implements good usability practices can look good, increase traffic, reduce management and maintenance concerns, and result in net gains for all parties.

8 Inspector 508: Accessible Web Design, Training and Consultation Barriers to Universal Usability Inexperience Insufficient Tools/Technology Language/Culture Counter-intuitive Interface The greatest barrier to usability? Poor design.

9 Inspector 508: Accessible Web Design, Training and Consultation Accessibility is a Subset Of Usability Persons with Disabilities (PWD) compose between 10% and 25% of web users Accessibility issues often framed in terms of disabilities Accessibility strategies often a concrete response to usability issues Guidelines and tools exist to assist designers and developers –Web Accessibility Initiative –Section 508 –A-Prompt –Adobe Dreamweaver

10 Inspector 508: Accessible Web Design, Training and Consultation Who Benefits from Web Accessibility? Individuals with disabilities that may encounter barriers on the web may be grouped as follows: –hard of hearing or deaf –low vision or blind –physical/motor disability –cognitive disability –temporary disability (broken arm, ear infection, eye injury, etc.) You and Your Site Sponsor –Increased site traffic –Good will among users Source: University of Wisconsin, Madison

11 Inspector 508: Accessible Web Design, Training and Consultation Visual Disability May require alternatives to mouse functions May require large print or high-contrast content May require clarification of graphical or animated content

12 Inspector 508: Accessible Web Design, Training and Consultation Auditory Disability May require synchronized captioning of video or audio May require transcripts of audio or video information

13 Inspector 508: Accessible Web Design, Training and Consultation Mobility Impairment May require alternatives to mouse functions May require tab indexing, access keys and other keyboard functions

14 Inspector 508: Accessible Web Design, Training and Consultation Cognitive Accessibility Simplicity of Language –Multi-pronged manual comestible ingestion device –Portable Lightweight Postal Transit Containment Unit –Temporal Event Maintenance Utility Less Is More –Content should be scanable –Break content up into related, topical chunks

15 Inspector 508: Accessible Web Design, Training and Consultation Seizures May require moderation of video or animated content

16 Inspector 508: Accessible Web Design, Training and Consultation Web Accessibility Myths Myth: The Web is a Visual Medium –Fact: The web is an information transfer medium, using visual, textual, and auditory content to convey information Myth: Assistive Technology addresses the issue –Fact: Assistive Technology can assist the user in interpreting a web page, but only if the page is built correctly. Myth: ALT text addresses the issue –Fact: ALT text is just one of many approaches to accessibility.

17 Inspector 508: Accessible Web Design, Training and Consultation General Accessibility Concepts Provide text equivalents for non-text elements; Ensure that scripts allow accessibility; Provide frame titles (or forgo frames altogether); Enable users to skip repetitive navigation links; Ensure that plug-ins and applets meet the requirements for accessibility; and Synchronize all multimedia elements. Source:

18 Inspector 508: Accessible Web Design, Training and Consultation Web Accessibility Pitfalls Images and multimedia Forms Navigation Layout tables Complex data tables Long text passages

19 Inspector 508: Accessible Web Design, Training and Consultation Sites are also better without… Frames Layout tables Large amounts of graphic text Unnecessary animation Cryptic abbreviations IMHO. YMMV. HTH!

20 Inspector 508: Accessible Web Design, Training and Consultation How Do I Get There? Rational, hierarchical navigation Standards-based development Clear, concise content Clean, semantic markup User and device testing

21 Inspector 508: Accessible Web Design, Training and Consultation Accessible Web Design Practices Standards-based (X)HTML Standards-based CSS Clear navigation Text alternatives to images Captioned media User testing Testing across multiple devices

22 Inspector 508: Accessible Web Design, Training and Consultation Web Accessibility Initiative (W3C) Priority 1 A. The most basic standard. A site must comply with all of the priority one checkpoints to achieve this standard. Priority 2 AA. A higher standard than the single A. Sites must comply with all of the priority one and two checkpoints to achieve this standard. Priority 3 AAA. A high standard of accessibility. Sites must comply with all priority one, two and three checkpoints to achieve this standard.

23 Inspector 508: Accessible Web Design, Training and Consultation Section 508 Federal legislation 16 paragraphs describing standards for accessible development

24 Inspector 508: Accessible Web Design, Training and Consultation Accessibility Tools WAVE –Utah State University –Provides site certification and accessibility training Functional Accessibility Evaluator –University of Illinois –New standards and practices for accessibility

25 Inspector 508: Accessible Web Design, Training and Consultation Site Planning and Organization What are your goals and objectives and how do they relate the Web? Who are the users of your Web site? –What are your users' tasks and goals? –What are your users' experience levels with the Web site? –What information do your users need, and in what form do they need it? –What functions do your users want from the Web site? How will you organize the content on your site?

26 Inspector 508: Accessible Web Design, Training and Consultation Information Architecture Break content up into manageable chunks Structure information from General to Specific –Home Category Topic Item Ensure that hyperlinks are obvious and consistent

27 Inspector 508: Accessible Web Design, Training and Consultation Making Your Content Manageable If the information is sequential, put it in order. For non-sequential information, put what users need most first. Break the text into manageable pieces. Put in as many headings as your content requires. Write useful copy. Make the headings into a table of contents. Source:

28 Inspector 508: Accessible Web Design, Training and Consultation User Reading Patterns Users dont read, they scan or search Users seek out individual words and phrases Users prefer straight talk, not marketese Keep important info above the fold

29 Inspector 508: Accessible Web Design, Training and Consultation Dont be a YAKKITY-YAK People tend to scan, not read Keep verbiage to a minimum If instructions are absolutely necessary, create a How To page The above is often necessary blah blah blah HOME PAGE blah blah blah blah blah blah blah blah blah blah blah blah blah CATALOG blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah CONTACT US blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah SITEMAP blah blah blah blah blah blah blah blah blah blah blah blah blah LINKS HOME PAGE CATALOG CONTACT US SITEMAP

30 Inspector 508: Accessible Web Design, Training and Consultation Rhetoric of Hypertext Upon departure, let users know why they should follow a hyperlink Upon arrival, be sure users are oriented and placed in context Do not strand users on a page with no navigation options Remember that not all users click. Consider alternative phrasing

31 Inspector 508: Accessible Web Design, Training and Consultation Searchability Dont neglect that segment of your audience that searches every single time Include relevant and well-positioned search utilities throughout your site Remember to organize links and heading in a logical hierarchy

32 Inspector 508: Accessible Web Design, Training and Consultation Device Independence Web browsers Screen readers/Assistive Technology Mobile devices

33 Inspector 508: Accessible Web Design, Training and Consultation Individual Page Design Dont reinvent the wheel Standards are your friend Validation and Testing –HTML –CSS –User-Agents "Be liberal in what you require but conservative in what you do"

34 Inspector 508: Accessible Web Design, Training and Consultation Standards are your friend, Friend! Dont reinvent the wheeluse standard approaches to: –HTML –CSS Validation and Testing –www.w3.orgwww.w3.org "Be liberal in what you require but conservative in what you do"

35 Inspector 508: Accessible Web Design, Training and Consultation Semantics and Structure Semantics means using markup to reflect the meaning of your information, e.g. –If its a heading, use a tag –If its a paragraph, use –If its a list, use or –…and so forth To start writing semantic markup, you need to: –Use only valid (X)HTML –No more tables for layout –Nest headings and other XHTML elements appropriately –Classes and IDs should be semantic, too

36 Inspector 508: Accessible Web Design, Training and Consultation (X)HTML: Strong Semantic Practices Use - headings, aragraphs, and lists, and other markup to create an outline of your content Avoid use of direct formatting, including format and positioning attributes such as ALIGN or STYLE, as these weld formatting to individual elements Avoid using XHTML elements to achieve a visual effect Include table properties such as,,, and where appropriate Use and to create logical regions within your page

37 Inspector 508: Accessible Web Design, Training and Consultation CSS: Strong Semantic Practices Name ID and CLASS modifiers after functional, rather than stylistic roles –Yes: –No: Use contextual and pseudo-class selectors to ensure that structural (X)HTML is presented appropriately depending on context –#maincontent h2 {font-size:1.2em;} –#sidebar ul li {font-size:.8em;}

38 Inspector 508: Accessible Web Design, Training and Consultation Structural Presentation with CSS BANNER LEFT CONTENT RIGHT BAR

39 Inspector 508: Accessible Web Design, Training and Consultation Structural Presentation with CSS: Gone Bad BANNER LEFT CONTENT RIGHT BAR

40 Inspector 508: Accessible Web Design, Training and Consultation Semantics and Presentation: Separate Lives

41 Inspector 508: Accessible Web Design, Training and Consultation Semantic XHTML

42 Inspector 508: Accessible Web Design, Training and Consultation Semantic Markup Enhanced by CSS

43 Inspector 508: Accessible Web Design, Training and Consultation Accessible Graphic Elements

44 Inspector 508: Accessible Web Design, Training and Consultation Purely Graphical Page Content

45 Inspector 508: Accessible Web Design, Training and Consultation Non-viewable graphics

46 Inspector 508: Accessible Web Design, Training and Consultation Graphic Alternatives ALT text LONGDESC D Link A link to a text page that explains complex visual or graphical data

47 Inspector 508: Accessible Web Design, Training and Consultation ALT Text: Some Rules of Thumb [I] Every image must have an alt attribute. Alternative text should: –present the CONTENT and FUNCTION of the image. –be succinct Alternative text should not: –be redundant (be the same as adjacent or body text). –use the phrases "image of…" or "graphic of… –Include the terms spacer, blank or similar non-information

48 Inspector 508: Accessible Web Design, Training and Consultation ALT Text: Some Rules of Thumb [II] Appropriate alternative text depends heavily on the image's context. Alt text of a functional image (e.g., an image within a link) should describe the function as well as the content. Decorative images still need an alt attribute, but it should be null (alt="").

49 Inspector 508: Accessible Web Design, Training and Consultation Form Accessibility Elements and

50 Inspector 508: Accessible Web Design, Training and Consultation Using and Personal Information […form elements…]

51 Inspector 508: Accessible Web Design, Training and Consultation Using with element ID First Name:

52 Inspector 508: Accessible Web Design, Training and Consultation Table Accessibility Elements summary scope, id, headers,,,

53 Inspector 508: Accessible Web Design, Training and Consultation Using SCOPE: I

54 Inspector 508: Accessible Web Design, Training and Consultation Using SCOPE: Code U.S./North America Chicago 11/19/04 12/02/04 $799 $999 Destination Departure Date Return Date Package Price

55 Inspector 508: Accessible Web Design, Training and Consultation Using ID and HEADERS : I Destination Departure Date Return Date Package Price

56 Inspector 508: Accessible Web Design, Training and Consultation Using ID and HEADERS: II International Madrid 11/30/04 12/08/04 $1299 $1499

57 Inspector 508: Accessible Web Design, Training and Consultation Usability/Accessibility Testing User testing should be formal –Identify users (site users, NOT the IT team) –Define tasks (were testing usability, not shopping for towels) –Observe users performing tasks Device testing should be as comprehensive as possible User testing is NOT –I find my site very easy to use. –Hey, me about the site. –Well, now that the sites been up a few months, lets do some testing.

58 Inspector 508: Accessible Web Design, Training and Consultation Some Usability Questions: Is This Site… Clear? –Appropriate to the audience? –Understandable language? Accessible? –Regardless of physical or cognitive impairment? –Does it load quickly? Consistent? –Does the visual aspect of the site hold together well? –Is the site structurally consistent, even without formats and styles? Navigable? –Are the links clear and consistent –Do all of the links work? Visually Attractive? –Do the colors contrast well? –Are the typefaces appropriate for the sites users? –Did you use ? Communicative? –Is there a feedback page? –Is there sufficient contact information?

59 Inspector 508: Accessible Web Design, Training and Consultation Youre the Expert YOU know the content YOU know the structure YOU have the blueprint That means YOU have the most to learn about your site Dont take your knowledge for granted. Different people have different cognitive patterns and different browsing habits.

60 Inspector 508: Accessible Web Design, Training and Consultation During Testing Resist the urge to implement new features Do not let users describe their own browsing patterns Encourage users to think out loudwhat are they saying? Check your ego at the door.

61 Inspector 508: Accessible Web Design, Training and Consultation So Universal Usability Is… Simple Organized Efficient Accessible Standards-Based Yowza! So easy…well, you know.

62 Inspector 508: Accessible Web Design, Training and Consultation References and Resources /http://www.suite101.com/article.cfm/recovery_after_amputation/467 13/

63 Inspector 508: Accessible Web Design, Training and Consultation Thank you for your interest Todd M. Weissenberger


Download ppt "Inspector 508: Accessible Web Design, Training and Consultation Website Design for Usability and Accessibility Todd M. Weissenberger Manager, Information."

Similar presentations


Ads by Google