1.  Designing and Evaluating Web Sites using Universal Design Principles
 Integrating Usability & Accessibility
Howard Kramer
University of Colorado-Boulder
hkramer@colorado.edu, 303-492-8672
AHEAD 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.

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

3. 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 usability
How many of you are familiar with 508 or Web Content Accessibility Guidelines
How 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.”

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

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

6. 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
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 Design
It 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.

7. Universal Design Approach
other 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 point
Use the example of “text-only” page as an example of accessible (for some) but not UD

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

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

10. Web Standards
our strategy for UD for the Web
I’m going to talk more now about Web Standards
Means 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 html
Xhtml 1.0
Why do I say Web Standards brings you 90% of the way to accessibility?

12. Semantic Markup
 Semantic markup – provides meaning to structure and content of the page
We’ll start with semantic markup – this is part of our foundation
What do I mean by Semantic Markup
Also allows for greater control via the style sheet

13. Example 2 – NY Times
Menus are unordered lists
Main 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 opinion
With 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 headings
So it’s very important that we design pages with this structure and that we check pages for this
structure when we evaluate them.

14. Exercise 1
Checking 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 toolbar
Check 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 page
Check for headings
Explain 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]

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

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

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

18. Consistency of Navigation

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

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

21. Exercise 4
Color 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.edu
Colorado.edu
(Have them report back to me what they find)

22. Exercise 5
Text 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)

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