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

Inspector 508: Accessible Web Design, Training and Consultation

Website Design for Usability and Accessibility

Todd M. WeissenbergerManager, Information Technology ServicesUNM Center for Development and Disability


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 doesn’t 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


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

http://www.webstyleguide.com


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 paradigm—rather than “getting the word to your user,” you “enable your user” to obtain the information.


What Makes a Site Usable?

• Usable websites are– Easy to learn

– Easy to remember

– Forgiving of errors

– Intuitive

– Efficient

– R esponsive

– Successful

Overall, usable systems should produce a positive experience for the user


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


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.


Barriers to Universal Usability

• Inexperience

• Insufficient Tools/Technology

• Language/Culture

• Counter-intuitive Interface

The greatest barrier to usability? Poor design.


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


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


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.


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: http://www.usability.gov/


Web Accessibility Pitfalls

• Images and multimedia• Forms• Navigation• Layout tables• Complex data tables• Long text passages


Sites are also better without…

• Frames• Layout tables• Large amounts of graphic text• Unnecessary animation• Cryptic abbreviations

IMHO. YMMV. HTH!


How Do I Get There?

• Rational, hierarchical navigation• Standards-based development• Clear, concise content• Clean, semantic markup• User and device testing


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


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.


Section 508

• Federal legislation• 16 paragraphs describing standards for accessible development


Accessibility Tools

• WAVE– Utah State University

– Provides site certification and accessibility training

• Functional Accessibility Evaluator– University of Illinois

– New standards and practices for accessibility


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?


Information Architecture

• Break content up into manageable chunks• Structure information from General to Specific

– HomeCategoryTopicItem

• Ensure that hyperlinks are obvious and consistent


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: http://www.usability.gov/


User Reading Patterns

• Users don’t read, they scan or search• Users seek out individual words and phrases• Users prefer straight talk, not “marketese”• Keep important info “above the fold”


Don’t 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


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


Device Independence

• Web browsers• Screen readers/Assistive Technology• Mobile devices


Individual Page Design

• Don’t reinvent the wheel• Standards are your friend• http://www.w3.org• Validation and Testing

– HTML

– CSS

– User-Agents

"Be liberal in what you require

but conservative in what you do"


Semantics and Structure

• Semantics means using markup to reflect the meaning of your information, e.g.– If it’s a heading, use a <h1> tag

– If it’s a paragraph, use <p>

– If it’s a list, use <ul> or <ol>

– …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


(X)HTML: Strong Semantic Practices

• Use <h1>-<h6> headings, <p>aragraphs, <ul> and <ol> 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 <thead>, <tbody>, <tfoot>, and

<scope> where appropriate• Use <div> and <span> to create logical regions within your page


CSS: Strong Semantic Practices

• Name ID and CLASS modifiers after functional, rather than stylistic roles– Yes: <div id=“sitenavigation”>

– Yes: <span class=“jobtitle”>

– No: <div class=“Green3emArial”>

• 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;}


Semantics and Presentation: Separate Lives


Semantic XHTML


Semantic Markup Enhanced by CSS


Accessible Graphic Elements


Purely Graphical Page Content


Non-viewable graphics


Graphic Alternatives

• ALT text<img src=“madrid.jpg” alt=“Statue of King Alonso the First in Madrid’s Plaza Orientes”>

• LONGDESC<img src=“chart.jpg” alt=“Chart of Quarterly Revenues for 2007” longdesc=“revenue_explanation.html”>

• “D” LinkA link to a text page that explains complex visual or graphical data


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


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="").


Form Accessibility Elements

• <fieldset> and <legend>• <optgroup>• <label>• <accesskey>• <tabindex>


Table Accessibility Elements

• summary• <caption>• scope, id, headers• <thead>, <tbody>, <tfoot>• <colgroup>, <col>


Usability/Accessibility Testing

• User testing should be formal– Identify users (site users, NOT the IT team)

– Define tasks (we’re 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, email me about the site.”

– “Well, now that the site’s been up a few months, let’s do some testing.”


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 site’s users?– Did you use <blink>?

• Communicative?– Is there a feedback page?– Is there sufficient contact

information?


You’re 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

Don’t take your knowledge for granted. Different people have different cognitive patterns and different browsing habits.


During Testing

• Resist the urge to implement new features• Do not let users describe their own browsing patterns• Encourage users to think out loud—what are they saying?• “Check your ego at the door.”


So Universal Usability Is…

• Simple• Organized• Efficient• Accessible• Standards-Based• Yowza!

So easy…well, you know.


References and Resources

• http://www.useit.com• http://www.usabilityfirst.com/• http://www.otal.umd.edu/UUPractice/novice/• http://www.benefit-from-it.com/• http://www.suite101.com/article.cfm/recovery_after_amputation/467

13/


Thank you for your interest

Todd M. Weissenberger

[email protected]

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

Documents

web usability

accessible web design

web presence usability

website usability

usability concerns

tools usability

users design

consultation website