Designing and evaluating web sites using universal design principles (hands on)
1. Pre-10W: Universal Design for
Web Design & Digital Media
ATIA 2014
Pre-10W
8:00 a.m. – 4:00 p.m.
Presenters:
Howard Kramer, University of Colorado-Boulder
hkramer@colorado.edu, 303-492-8672
Kathy Wahlbin, Interactive Accessibility
kathy@interactiveaccessibility.com
Gaeir Dietrich, HTCTU
gdietrich@htctu.net
2. Agenda, Jan 29, 2014
8:00 - 8:15 a.m. – Introductions (All)
8:15 - 10:15 a.m. – Universal Design for the Web (Howard)
10:15 - 10:30 a.m. – Break
10:30 - 11:30 - Universal Design for the Web – focus on mobile
(Kathy)
11:30 - 12:00 – Universal Design for Digital Media (Gaeir)
12:00 p.m. - 1:00 p.m. – lunch break
1:00 - 2:45 p.m. – Universal Design for Digital Media - (Gaeir)
2:45 - 3:00 p.m. - Break
3:00 p.m. - 3:50 p.m. – Universal Design for Digital Media (Gaeir)
3:50 - 4:00 p.m. – Closing
3. Pre-10W: Universal Design for
Web Design & Digital Media
Designing and Evaluating Web Sites
using Universal Design Principles
Howard Kramer
University of Colorado-Boulder
hkramer@colorado.edu, 303-492-8672
ATIA 2014
6. Today‟s Outline
Review concepts of Universal Design
Review & apply concepts and principles of
design best practices & usability to Web
design
Conduct exercises that will teach you to
identify when sites incorporate UD and
best design practices (& when they don‟t)
7. Universal Design:
How is this approach different?
What are the advantages?
“Making sites more usable for „the rest of
us‟ is one of the most effective ways to
make them more effective for people with
disabilities.”
Steve Krug, Don‟t Make Me Think! A Common
Sense Approach to Web Usability (2006)
“People sometimes ask me, „What about
accessibility? Isn‟t that part of usability?‟”
Steve Krug, ibid.
9. Universal Design Approach
other advantages
Sells better
Developers - tune-out/turn-off on
“accessibility”
Respond to “best practices”
Business case
Other benefits
Search
Reusability
Navigation, better UX
SEO/discoverability
Flexibility
Different platforms
10. Universal Design Approach
other advantages
Other audiences
Older populations
Non-English speakers
Poor readers / non-readers
Socio-economically disadvantaged / Poor
access to technology
11. Universal Design
What is Universal Design?
Universal Design is the design of products
and environments to be usable by all
people, to the greatest extent possible,
without the need for adaptation or
specialized design – Ron Mace, Architect
12. 7 Principles of Universal Design
Equitable Use
Flexibility in Use
Simple and Intuitive Use
Perceptible Information
Tolerance for Error
Low Physical Effort
Size and Space for Approach and Use
13. Universal Design for Digital Media
Equitable Use: The design is useful and marketable to people
with diverse abilities.
Flexibility in Use: The design accommodates a wide range
of individual preferences and abilities.
Same means of use for all
No text-only versions
Accommodates user-defined style sheets (such as the high-contrast
text style that an individual with weak eyesight would use)
Simple and Intuitive: Use of the design is easy to understand,
regardless of the user's experience, knowledge, language skills, or
current concentration level.
Multiple ways of presenting info that is contained in images,
graphs, audio, video, or other forms of media
Tolerance for Error: The design minimizes hazards and the
adverse consequences of accidental or unintended actions.
15. Web Standards
Using Web Standards as a Universal
Design foundation
Web Standards –
semantic (x)HTML markup
CSS layout, the separating of content from layout
& formatting
Standard coding
16.
17. Universal Design – pyramid comprised of Web Standards
Foundation, followed above with Usability / Design Best
Practices with Accessibility at the top of the pyramid
Universal Design
Accessibility
Keyboard Access
Alternate Text
Usability / Design Best
Practices
Consistent & Clear
Navigation
Visibility
Feedback
Visual Alignment
Typography
User control
Web
Standards
Semantic Markup
Separation of style from
content
Standard coding
21. Exercise 1
Checking for Structure &
Semantics
Headings
Unordered
Title
lists (menu items)
tag
Description
tag
22. Exercise 2
Keyboard Access
Can you tab to (and away from) all elements,
including links, navigation, form fields, buttons,
and media player controls?
Does the tab order follow the logical reading
order?
Is visual feedback provided for each object that
receives focus?
Are all actions and visible feedback provided
through the mouse also available via the
keyboard.
23. Visibility & Feedback
Outline around focused object
Non-text elements must have alternative
text (to make them perceptible)
Alternative attribute
Captioning
Transcripts
Proper placement of key text &
information
Reduction of noise
30. Final Exercise
Select a web page of your choice.
Examine it using any of the tools or
criteria we have talked about today:
Structure & semantics
Keyboard access
Visibility/Perceptibility
Consistent navigation
Concise wording (minimal noise)
Alignment/typography
31. Web Standard Particulars – Title tag
Declare a unique title for each page.
Title example
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title> Boulder Public Schools 2012 | Home</title>
</head>
<body>
</body>
...
</html>
RETURN
32. Web Standard Particulars
Use keywords & description elements
<head>
<title> Accessing Higher Ground 2013 - Accessible Media, Web
and Technology Conference - Home Page</title>
<meta name="description" content="16th Annual Accessing
Higher Ground: Accessible Media, Web & Technology
Conference; for Higher Education, Business and the Public
Sphere.">
<meta name="keywords" content="accessibility, universal
design, alternate format, web design, disability, higher
education, ADA, accommodations, assistive technology,
AHEAD">
</head>
EXAMPLE
RETURN
34. Books & Curriculum Material
InterACT with Web Standards: A
holistic approach to web design,
Anderson, et. al.
Zeldman, Jeffrey. Designing with
Web Standards (3rd Edition)
Chisholm & May. UD for Web
Applications
Norman, David A. The Design of
Everyday Things (2002).
Cooper, Alan; Reimann Robert M.
About Face 2.0: The Essentials of
Interaction Design (2003)
35. Books & Curriculum Material
Just Ask: Integrating Accessibility
Throughout Design, Shawn Henry
(2007) (free online edition)
A Web for Everyone: Designing
Accessible User Experiences,
Sarah Horton & Whitney
Quesenbery (2014)
38. Tools & Resources
Easy Checks - A First Review of Web
Accessibility (WAI-EOWG)
Before & After Demos (BAD)
http://www.w3.org/WAI/demos/bad/
10 Evaluation Tools
http://www.w3.org/WAI/eval/preliminary.html
http://sixrevisions.com/webstandards/accessibility_testtools/
CU Web Design Awards Page
http://www.colorado.edu/ODECE/UDAC/webcomp201
2.html#resources
39. Other Resources
A List Apart - Link-Rodrigue, The Inclusion
Principle, (article)
Usability.gov
http://www.alistapart.com/articles/the-inclusionprinciple/
http://usability.gov/methods/test_refine/heuristic.h
tml
Sitepoint.com
http://articles.sitepoint.com/article/informationarchitecture
40. Other Curriculum Resources
First Principles of Interaction Design”
“Personas”
http://wiki.fluidproject.org/display/fluid/Personas
WebAIM.org – The Legend of the Typical …
(http://www.asktog.com/basics/firstPrinciples.html
);
http://webaim.org/presentations/2010/csun/screen
readersurvey.pdf
W3C Web Standards Curruculim
http://www.w3.org/community/webed/wiki/Main_P
age
41. Projects/Resources at CU, ATIA,
ATHEN
3-credit class: Universal Design for Digital Media
ATHEN – Access Tech. Higher Ed. Network
http://accessinghigherground.org/wp/udclass/
Athenpro.org
NEA Grant - Promoting the Integration of UD into
University Curriculum (UDUC)
Presentations:
Teaching Standards-based, Accessible Web Design
(Fri., Jan 31, 8:00 – 9:00 a.m. Antigua 3
Promoting Universal Design Content in University Curriculum
(Fri., Jan. 31, 1:00 – 2:00 pm. Boca 1
42. Accessing Higher Ground
Conference
Accessible Media, Web & Technology
November 11 – 17, 2014
Hands-on sessions on Web Access, Assistive
Technology
Upcoming teleconferences
Can purchase audio dvd of proceedings & access
materials & handouts online
Westin Hotel - between Boulder & Denver
Accessinghigherground.org
Notes de l'éditeur
To give you more of an understanding of my involvement with universal design and accessibility …Work on a grant to promote the inclusion of universal design content in university curriculum – I’ll talk more about that later if there’s time.Coordinate a conference called Accessing Higher Ground (under AHEAD) – focuses on accessible media.Teach a course on the topic of today’s workshop – it’s called …, which is really focused on UD for the Web.Usually, I teach this subject over the course of 14 weeks – can’t do that here. But will try to cover some of the key concepts that we cover in that class.
What we’ll cover todayAudience Background So at this point – it would be helpful to know more about your background – how familiar you are with web design, with accessibility guidelines, etc. I think it would take too long to go around the room – but maybe if I can get a show of hands to the following questions How many of you evaluate web pages for accessibility or usabilityHow many of you are familiar with 508 or Web Content Accessibility GuidelinesHow many of you know what a CSS – or cascading style sheet is and how it works?How many of you actually create or have created at least one web page?How many of you work in disability services?How many are web or media designers or work in IT?Any faculty?How many of you were walking by the hotel and wandered in here for whatever reason?For those who I didn’t fall into any of the professional areas I mentioned, what’s your background?
(say this first before Krug quote – which is from pg 174 & 169 respectively)I like to point out when I present on this topic is that UD is a somewhat different approach than the standard “accessibility” approach.I think the two quotes up here on this slide from Steve Krug highlight this. Steve Krug is a design and usability expert who wrote a book called “Don’t Make me Think – a Common Sense approach to Web Usability”A great book for anyone interested in Web design, usability or accessibility.And his first quote here, which I’ll read is ….And this highlights thatWhy use a universal design approach?How does it differ from a more standard “accessibility approach.”I don’t want to say that UD is a better than accessibilityNow, I don’t want to sound like I’m criticizing a the standard “accessibility approach.” I do think a Universal Design Approach is different – and perhaps offers some advantages over a strict accessibility approach.I’m going to use a couple of quotesSteve Krug – Don’t make me think – great bookI think we’ve all heard the quoteBut I want to say that what we’ll talk about today is a somewhat different approach than simply checking for missing alt tags or keyboard accessibility or running an accessibility checker although checking for accessibility is part of the process for designing and evaluating a site for meeting Universal Design standards. But at the same time I think there are some advantages to taking a Universal Design approach to Web Design. First of all, you catch things that you might overlook when simply looking at accessibility – things such as – overall design, the use of white space, alignment of text and objects on a page, the clarity of text and the appropriate use of language and The consistency of navigation on a site. You’ve probably heard it said that it’s possible for a site to be completely accessible while at the same time almost completely unusable. A web site might have all its non-text elements and it’s form fields labeled and marked up correctly, according to accessibility standards, and links may make semantic sense on their own - and the site can still be unusable – if a site has inconsistent and unclear navigation, if important information is buried in the site and not where you expect to find it, if there’s a ton of clutter and pop-ups on a page - it harms the user experience of everyone but more so the person who uses a screen reader or who is dyslexic or who has a motor impairment who now has to click more links or issue more voice commands to explore more pages to find the information they need. When we design a site from a Universal Design approach, we ensure that the web site is not only accessible but also usable – by all audiences.I have another excerpt from Krug’s book up here. (Read second quote). (ask audience) What do you think his answer is? (Could turn to next slide)?[I would say yes – accessibility is about usability but applied to a different population – those outside the “norm.”] Instead, we’ll try to look at sites with a more holistic approach. What is good design? How do we ensure usability for all users, including individuals with disabilities. (Now refer to 1st Krug quote)A page can be accessible but not usable. Ex. We can have a page that has all it’s necessary alt text, excellent color contrast, etc., but with menus that are inconsistent from page to page; menu options that are worded poorly, etc. A page such as this might pass an accessibility checker but would still be inaccessible and unusable for all populations.Hopefully, what you’ll learn here – to some degree - today is to be able to evaluate a web page for overall usability, for good design, and also for accessibility.(2nd Krug quote)The answer is yes. In many ways, accessibility and usability are the same thing – they just apply to different populations. Usability is accessibility carried over to persons without disabilities, accessibility is usability carried over to persons with disabilities. Unseparating these concepts is the goal of universal design – expanding usability principles so as to include as many people as possible.This segues us nicely into a review of universal design.
Something to ask the audience
Equitable Use: The design is useful and marketable to people with diverse abilities.Flexibility in Use: The design accommodates a wide range of individual preferences and abilities.Simple and Intuitive Use: Use of the design is easy to understand, regardless of the user's experience, knowledge, language skills, or current concentration level.Perceptible Information: The design communicates necessary information effectively to the user, regardless of ambient conditions or the user's sensory abilities.Tolerance for Error: The design minimizes hazards and the adverse consequences of accidental or unintended actions.Low Physical Effort: The design can be used efficiently and comfortably and with a minimum of fatigue.Size and Space for Approach and Use: Appropriate size and space are provided for approach, reach, manipulation, and use, regardless of the user's body size, posture, or mobility.
Html 4.0 – first web standard for htmlXhtml 1.0Why do I say Web Standards brings you 90% of the way to accessibility?Web Standards have been very good for accessibility – why?Because web standards emphasize semantic markup – including alt text for images and other non-text elements.Because semantic markup - Before Web Standards(perhaps show or have them look at csszen-garden – to demonstrate the power of external style sheets. Remind them to look at high contrast view via style sheet found in web accessibility toolbar in firefox).
All the areas we’ll at least try to cover today(Following up on how the other 2 categories correspond to particular features).(Maybe print this as a handout)
Table/text version of last slide
We’ll start with semantic markup – this is part of our foundationWhat do I mean by Semantic MarkupAlso allows for greater control via the style sheet
After describing the semantics of this page, show class how to use Wave toolbar with current physics page: phys.colorado.edu
Menus are unordered listsMain article is a heading 1Article titles are headings anywhere from 2 to 6 except for lists of articles under a subject such as op-ed or opinionWith this structure A screen reader user can jump from header to header to hear article titles jump to the main headline – by finding header 1 Someone with a vision impairment or perhaps a reading disability could set the headers to custom colors – high contrast or some other combination which aids their reading A developer could create a specialized format for a mobile device, perhaps only showing the top level headings (i.e. articles) for the smaller screen. A screen reader user – because the menus are in unordered lists – will here the number of items in each menu, letting them decide whether to continue or jump ahead. On the business end – screenreader is not the only technology that looks for headings, so does Google Google gives extra weight to text it finds in headingsSo it’s very important that we design pages with this structure and that we check pages for this structure when we evaluate them.
Html 4.0 – first web standard for htmlXhtml 1.0Benefits of Web Standards & UD approach:Allows you to approach accessible design with the wholistic concept of excellent design.Before we began developing the course, I know a lot about Universal Design and some advantages of using xhtml & css but I didn’t realize how web standards were or could be linked to accessibility and quality design.Designing with web standards promotes accessibility, - higher ranking on search engines & lower costs for development, and faster loading of web pages (& lower costs for hardware).Design that is not only accessible but usable. That is universal in that it not only is usable by persons with disabilities but by mobile devices, by cell phones and by slow internet access.To understand this, we need to review the history of Web browsers:Web standards project began in 1998. Before that time, each browser used proprietary mark-up language or html.So web designers would have to create different code segments for each browser.25% of development time was spent addressing work-arounds for browser incompatibility.Because content & layout combined unlike when we use CSS with structure xhtml. Html files wound up being 60% larger than necessary, requiring longer time to load and requiring larger space on servers, thus more expensive equipment costs. Designing with web standards not only improves the performance of your site and lowers costs but makes it more accessible to ATWhen we use CSS, content can be displayed in a verient of different ways more easily. Using structured markup such as headers to logically divinde up a page not only makes it easier for screenreaders to nvigate a page, it makes it easier for search engines such as google to find.
(Don’t read list above – at least not at first – follow text below instead)(After I go over the material below this assignment, then give them Have class check structure of NY Times with wave toolbarCheck for headings and check for lists; also, have them check for title and description.Have them use nvda to go through the page using the headings command (h).Have them check the ATLAS pageCheck for headingsExplain how lack of headings hurts SEO, accessibility – both for the screenreader and the visual user (Title tag) (show picture of title tag – and sample code)We haven’t talked about the title tag. A title tag doesn’t add structure to the page but it adds semantics or meaning to the document as a whole. It describes the page and it appears in the tab of the browser – and also in the window title of Firefox & Opera (if you’ve set it to do so). It’s also the first thing that a screenreader reads when you open a web page. It’s also a commonly used command (Crtl-T in Jaws for example) to provide orientation to the user. So it’s crucial for an AT user to have a concise, accurate title tag on each page of the site. If AHEAD had the title tag “AHEAD – association of higher education and disability” on every page of it’s site than it’s no longer semantic – at least it provides no orientation other than to know we’re somewhere on the AHEAD site. A distinct accurate title tag for each page provides orientation – it let’s us know which page we’re on.The title tag, like heading tags, are given heavier weight by Search Engines. So there’s a “findability” and business rationale also. The description tag – like the title and heading tags – are also given heavier weight by Search Engines. It’s also what shows up – as does the title tag - in search results (show example & show sample code). So, it’s important to have an accurate and concise description so that you draw your target users to your site. If you have a poor description, you are going to reduce the traffic and visibility of your site – and make it more difficult for users, including AT users, to find an appropriate site when they do a search.[Next: keyboard access]
(follow text below – not the slide)Now that we’re looking at the ATLAS site, let’s move on to keyboard accessibility. There are 2 major areas that comprise keyboard accessibility: the first the ability to tab and arrow through links and controls, and to select links and controls through the keyboard, and second, the visual feedback provided when focus is on an object on a page – in other words, feedback to indicate when the cursor is at a link or control on the page.(Show example of keyboard access with NY Times -Show how outline around area of focus can be different on different browsers: a dotted line in firefox and a thin yellow line in chrome.) Unless specified in the styling, defaults to browser style. (Show them the css code to set focus outline and perhaps demo changing the code to show how it works).(Also show them that we can see the url of the link at the bottom of the screen.) However, it is difficult to determine exactly where we are on the screen without the outlining – and controls provide no such url feedback.Show them thissongsucks.com site for example of lack of focus outline.For a person using a screenreader alone, the visual feedback, obviously, is not so important. For a person who is visually interacting with the screen, someone who uses the keyboard because of mobility or dexterity issues, or uses screen enlargement with keyboard access, or speech recognition to access the page, visual feedback is crucial(Have them go to the ATLAS page and try to move around the screen and select links and menus using the keyboard).What do they notice.Determining keyboard access – really requires testing with keyboard. Achecker sometimes will pick up javascript that looks to be keyboard inaccessible but it’s not foolproof.Pull down menus using javascript is fraught with the danger of making it keyboard inaccessible. Need to include an “onkeyboard” option as well as a “onmouse”.
(Mention visibility is really perceptibility)The outline around focused items is an example of visibility and feedback. As we tab, we’re provided not only with feedback that something is happening but visual cueing of where we are on the page – crucial information, again, for the keyboard user.Now, as we know, something can be visually visible on a page and not be visible to many users – persons with vision impairments for example. Or persons using a text-based browser when information is presented on the page as an image without alternate text.There are other ways that information and text can be made invisible or at least result in reduced visibility Too much clutter on the screen – in other words, too much information(Use example of ATLAS page – and also leeds page if I can reconstruct it)(ATLAS page – “click me” tool tip on video, message to click on video above more info(also use old and new DS page poor color contrastPoor wordingInconsistent placement of navigation and informationBreaking convention
Example of cluttered site (from usability.gov).“Studies have shown that users can find what they are looking for more quickly in a sparse and uncluttered display than in a dense display.” (direct quote from usability.gov).A large amount of dense text in particular degrades the user’s ability to find key information on a page. A 2006 Poynter Institute study (IWWS pg. 69) found that Web users don’t tend to “read” web pages, they tend to scan for the information they seek or to scan for the key information on a page. Extra text becomes “noise” that distracts users from finding key information.Similarly, online readers are impatient and task-oriented in their reading, offline readers tend to relaxed and passive readers.Some recommend (Erin Anderson from IWWS – pg 70) paragraph lengths no greater than 60 words and headlines at 8 words or fewer. “Each topic or new idea should receive a subhead that alerts the user to what she’ll find in that section if she decides to read further.”
Usability.gov suggests avoiding paragraph text if possible on the home page.(need to select “poor example” to see the page above once going to the url linked to the screenshot).Because of the lack of text (i.e. no paragraphs), and the way key topic areas are highlighted (via top horizontal menu and headers in body of page), the various topics are more visible – according to usability.gov. (Show menu items with pointer – still seems like a rather busy page).
As opposed the colorado.gov site, I prefer the organization of topics on this site – although there is still a lot of information. Still – it’s organized more effectively.
(Return to ATLAS page)Demonstrate Juicy Color contrast analyzer on ATLAS page.Explain report.Demonstrate achecker for color contrast (didn’t catch these errors for me when I tried)Show them Paciello Color Contrast Analyzer for ATLAS page – good tool for direct feedback on particular text.(Now have them go out and check a couple of pages – they can choose their own – or I can suggest some sites)disabilityservices.colorado.eduColorado.edu(Have them report back to me what they find)
(Return to ATLAS page)I mentioned in my previous chart about “user control.” The enlargement of text on the screen if one of the most important customizations to allow the user. You should be able to enlarge text on a page up to 200% without losing reading clarity (without overlapping) and without requiring horizontal scrolling.(Show example from “bad” page). (Then shows them what happens on ATLAS page).Show them overall text enlargement – discuss the difference(Have them find pages to check)(Have them report back to me what they find)
(Go through slide first)Then be prepared to discuss how the site you looked at meets or does not meet the criteria we’ve talked about today. Can limit yourself to one criteria or to more than one.
Mention Fitjutsu – Web Accessibility InspectorShow 10 evaluation tools page