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]
(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
Mention breakfast meeting
Show handouts page – mention can buy audio
Designing and evaluating web sites using universal design principles (hands on)
Designing and Evaluating
Web Sites using Universal
Usability & Accessibility
University of Colorado-Boulder
Presentation posted at
Designing and Evaluating Web
Sites using Universal Design
Promoting the Integration of Universal
Design in University Curriculum (UDUC)
Accessing Higher Ground: Accessible Media,
Web & Technology
Universal Design for Digital Media - 14 week
Review concepts of Universal Design
Review & apply concepts and principles of
design best practices & usability to Web
Conduct exercises that will teach you to
identify when sites incorporate UD and
best design practices (& when they don‟t)
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
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.
Universal Design Approach
Developers - tune-out/turn-off on
Respond to “best practices”
Navigation, better UX
Universal Design Approach
Poor readers / non-readers
Socio-economically disadvantaged / Poor
access to technology
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
7 Principles of Universal Design
Flexibility in Use
Simple and Intuitive Use
Tolerance for Error
Low Physical Effort
Size and Space for Approach and Use
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.
Using Web Standards as a Universal
Web Standards –
semantic (x)HTML markup
CSS layout, the separating of content from layout
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
Usability / Design Best
Consistent & Clear
Separation of style from
Semantic markup – provides meaning to
structure and content of the page
Checking for Structure &
Unordered lists (menu items)
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
Is visual feedback provided for each object that
Are all actions and visible feedback provided
through the mouse also available via the
Visibility & Feedback
Outline around focused object
Non-text elements must have alternative
text (to make them perceptible)
Proper placement of key text &
Reduction of noise
Select a web page of your choice.
Examine it using any of the tools or
criteria we have talked about today:
Structure & semantics
Concise wording (minimal noise)
Web Standard Particulars – Title tag
Declare a unique title for each page.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
<title> Boulder Public Schools 2012 | Home</title>
Web Standard Particulars
Use keywords & description elements
<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
<meta name="keywords" content="accessibility, universal
design, alternate format, web design, disability, higher
education, ADA, accommodations, assistive technology,
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
Norman, David A. The Design of
Everyday Things (2002).
Cooper, Alan; Reimann Robert M.
About Face 2.0: The Essentials of
Interaction Design (2003)
Tools & Resources
Easy Checks - A First Review of Web
Before & After Demos (BAD)
10 Evaluation Tools
CU Web Design Awards Page
A List Apart - Link-Rodrigue, The Inclusion
Other Curriculum Resources
First Principles of Interaction Design”
WebAIM.org – The Legend of the Typical …
W3C Web Standards Curruculim
Projects/Resources at CU,
3-credit class: Universal Design for Digital Media
ATHEN – Access Tech. Higher Ed. Network
NEA Grant - Promoting the Integration of UD
into University Curriculum (UDUC)
Breakfast Meeting at AHEAD: Thursday, July 11, 7:45
- 8:45 a.m. - Poe Room - second floor
Presentation: Friday, July 12, 2:00 – 4:00 pm.
Latrobe Room - first floor
Accessing Higher Ground
Accessible Media, Web & Technology
November 4 – 8, 2013
Hands-on sessions on Web Access, Assistive
Can purchase audio dvd of proceedings & access
materials & handouts online
Westin Hotel - between Boulder & Denver