Inspector 508: Accessible Web Design, Training and Consultation Website Design for Usability and...
-
Upload
dominic-trujillo -
Category
Documents
-
view
219 -
download
3
Transcript of Inspector 508: Accessible Web Design, Training and Consultation Website Design for Usability and...
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
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 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
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
http://www.webstyleguide.com
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 paradigm—rather than “getting the word to your user,” you “enable your user” to obtain the information.
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
– R esponsive
– Successful
Overall, usable systems should produce a positive experience for the user
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
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.
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.
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
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
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.
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: http://www.usability.gov/
Inspector 508: Accessible Web Design, Training and Consultation
Web Accessibility Pitfalls
• Images and multimedia• Forms• Navigation• Layout tables• Complex data tables• Long text passages
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!
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
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
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.
Inspector 508: Accessible Web Design, Training and Consultation
Section 508
• Federal legislation• 16 paragraphs describing standards for accessible development
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
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?
Inspector 508: Accessible Web Design, Training and Consultation
Information Architecture
• Break content up into manageable chunks• Structure information from General to Specific
– HomeCategoryTopicItem
• Ensure that hyperlinks are obvious and consistent
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: http://www.usability.gov/
Inspector 508: Accessible Web Design, Training and Consultation
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”
Inspector 508: Accessible Web Design, Training and Consultation
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
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
Inspector 508: Accessible Web Design, Training and Consultation
Device Independence
• Web browsers• Screen readers/Assistive Technology• Mobile devices
Inspector 508: Accessible Web Design, Training and Consultation
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"
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 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
Inspector 508: Accessible Web Design, Training and Consultation
(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
Inspector 508: Accessible Web Design, Training and Consultation
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;}
Inspector 508: Accessible Web Design, Training and Consultation
Semantics and Presentation: Separate Lives
Inspector 508: Accessible Web Design, Training and Consultation
Semantic XHTML
Inspector 508: Accessible Web Design, Training and Consultation
Semantic Markup Enhanced by CSS
Inspector 508: Accessible Web Design, Training and Consultation
Accessible Graphic Elements
Inspector 508: Accessible Web Design, Training and Consultation
Purely Graphical Page Content
Inspector 508: Accessible Web Design, Training and Consultation
Non-viewable graphics
Inspector 508: Accessible Web Design, Training and Consultation
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
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
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="").
Inspector 508: Accessible Web Design, Training and Consultation
Form Accessibility Elements
• <fieldset> and <legend>• <optgroup>• <label>• <accesskey>• <tabindex>
Inspector 508: Accessible Web Design, Training and Consultation
Table Accessibility Elements
• summary• <caption>• scope, id, headers• <thead>, <tbody>, <tfoot>• <colgroup>, <col>
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 (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.”
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 site’s users?– Did you use <blink>?
• Communicative?– Is there a feedback page?– Is there sufficient contact
information?
Inspector 508: Accessible Web Design, Training and Consultation
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.
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 loud—what are they saying?• “Check your ego at the door.”
Inspector 508: Accessible Web Design, Training and Consultation
So Universal Usability Is…
• Simple• Organized• Efficient• Accessible• Standards-Based• Yowza!
So easy…well, you know.
Inspector 508: Accessible Web Design, Training and Consultation
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/
Inspector 508: Accessible Web Design, Training and Consultation
Thank you for your interest
Todd M. Weissenberger