Designing and Evaluating Web Sites using Universal Design Principles Integrating Usability & Accessibility

Howard KramerUniversity of Colorado-Boulderhkramer@colorado.edu, 303-492-8672AHEAD 2013

This is “Designing and Evaluating Web Sites using Universal Design Principles”, a 2-hour lab.

Before I go any further, I should mention that this session was listed incorrectly in the paper program - but correctly online. In the paper program my Friday lecture was repeated for this session; the session title for Friday is: INTEGRATING UNIVERSAL DESIGN IN UNIVERSITY CURRICULUM. Is anyone here for that session?

The subtitle of this session is “Integrating Usability & Accessibility”. And that idea is key to what we’ll be talking about today – because it’s the approach I use to achieve Universal Design for the Web. I’ll be returning to this concept repeatedly as we move through the session. So if you’re not quite sure how these 2 concepts go together it I think it will become clearer at we move forward.

Slideshare

Some logistics – the latest version of the powerpoint is up at slideshare.

Introduction

Grant Project: Promoting the Integration of Universal Design in University Curriculum

(UDUC) Conference:

Accessing Higher Ground: Accessible Media, Web & Technology Class:

Universal Design for Digital Media - 14 week class

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.

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)

What we’ll do today.

Audience 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 page 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?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?

A Different Approach? “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.

(say this first before Krug quote – which is from pg 174 & 169 respectively)Now, I don’t want to sound like I’m criticizing a (quote) “accessibility approach.”

But 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.

Now I think we all know the adage or the philosophy that goes something like: “designing for accessibility helps all users.” And I agree with this point of view. Steve Krug, whose quote - (from a great book) – is up here, also likes to point out that it works the other way – “making sites …(rest of his quote above).And I think he has a strong case in this regard – 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.

Another advantage

There’s an argument or the opinion heard from some segments of the disability field that today’s accessibility standards often focus on vision impairments or hearing impairments but ignores the demographic with learning or cognitive disabilities or simply different types of learners.

Roger Hudson gave a very interesting talk on this topic at CSUN.By taking a universal design approach, by looking at the user interface, at typography, at white space, at word length of headers and paragraphs and language level, I’ll argue that we take into account a greater scope of the demographic we label persons with disabilities or persons with “issues” or learning differences or just different abilities.

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.

Usability = Accessibility?

Something to ask the audience

Universal Design Approachother 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

Another advantage of a UD approach is that it sells better. People, namely developers, web-designers, etc., respond better to the advocacy of Universal Design rather than to accessibility. Developers tend to associate that with a narrow segment of the population – I think everyone in this field has heard the comment from a developer or manager that - “accessibility? – that’s about blind people – we have no people like that using our site.” So accessibility tends to be dismissed. Tell the same audience that this is a “best practice,” “a universal approach” that improves websites overall for all users, increases SEO – in other words, makes it more likely Google & Bing & yahoo will present your site in a search; that it reduces development, maintenance and overhead costs, and they’re more likely to listen. I tell folks – and it’s something I believe – is that this is not something you should do because it provides access to persons with disabilities but because it’s the best way to design – for the reasons I just mentioned.It makes for a better-all user interface. We’ll review how it does these things as we go along in the session.

But I’ll just add – if you read the recommendations of the design experts who have had the greatest influence in the field of design and web design in the past couple of decades, and many of these individuals have a cognitive science background – folks like Donald Norman, Jakob Neilson, Alan Cooper – all of them focus on “user-centered” design. In other words, thinking about how the user interacts with a product, system, or web page. What does the user need? That is the focus of “usability.”This is what we’re doing with universal design – as I just mentioned – we’re focusing on user interaction – only we’re expanding our audience to persons beyond the “norm”; we’re including the range of population with disabilities and different abilities. [maybe take out following – perhaps redundant]Everyone – or about everyone – wants to follow “best practices.” And this is not just rhetoric – there is a business case to be made for Universal DesignIt does improve SEO, it does reduce file size, it does require less bandwidth, it does make it more likely that your websites will work with future technologies. It makes for a better-all user interface. We’ll review how it does these things as we go along in the session.

Universal Design Approachother advantages

Other audiences Older populations Non-English speakers Poor readers / non-readers Socio-economically disadvantaged / Poor access to technology

To add to the argument about “universality” of this approach.I should add that there are also other populations that benefit from Universal Design.(mention the list in the slide above)As an example, if we follow “best practices” and have a proper language statement in our web page, that will help not only Assistive Technology such as screen readers but translation programs. If we have a webpage where changing the color contrast, changing the size of text is available, then that will accommodate older populations with vision issues. If our files sizes are smaller and load quicker and can be accessed with a text-based browser, that provides better access to those with a low bandwidth – i.e. low speed internet connections.

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

(Read above definition first. Then:)If we think about what we’ve been saying, we can see that the approach we’re talking about – expanding usability to persons with disabilities is what this definition is talking about. Originally applied to the built environment and products- Come to be applied to software, learning, even service delivery Web Standards is UD – or at least a good starting pointUse the example of “text-only” page as an example of accessible (for some) but not UD

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

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.

Universal Design for Digital Media Equitable Use: The design is useful and marketable to people with diverse abilities.

Same means of use for all No text-only versions

Flexibility in Use: The design accommodates a wide range of individual preferences and abilities.

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.

(Tell them we’re going to skip this slide for now – it’s hear FYI)These are the general concepts – Web Standards are the specifics, the technical tools and techniques you would use to implement these components.Web Standards is a universal design approach.Captioning might be an example of “accessibility” that goes beyond web standards but includes universal design.

Web Standardsour strategy for UD for the Web

I’m going to talk more now about Web StandardsMeans we use html as recommended by the W3C starting with xhtml 1 or html 4

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

Html 4.0 – first web standard for htmlXhtml 1.0 Why do I say Web Standards brings you 90% of the way to accessibility?

Semantic Markup Semantic markup – provides meaning to structure and content of the page

We’ll start with semantic markup – this is part of our foundationWhat do I mean by Semantic Markup Also allows for greater control via the style sheet

Example 2 – NY Times

Menus are unordered listsMain article is a heading 1 Article 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 titlesjump 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.

Exercise 1Checking for Structure & Semantics

Headings Unordered lists (menu items) Title tag Description tag

(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]

Exercise 2Keyboard 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.

(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”.

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 & informationReduction of noise

(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 contrast- Poor wording- Inconsistent placement of navigation and information- Breaking convention

Avoid Screen Clutter & Dense Text

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.”

Consistency of Navigation

Low Density Text for Home page

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

Information grouped for easier scanning

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.

Exercise 4Color Contrast

(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)

Exercise 5Text Enlargement

(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)

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

(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.