This document discusses integrating universal design, web standards, and accessibility. It begins by defining universal design, web standards, and how they relate to accessibility. Some key benefits mentioned are improved usability for all users, including people with disabilities, as well as benefits to search engines. The document then provides examples of implementing universal design principles in web design. It also recommends tools and resources for evaluating and improving accessibility and provides examples of accessible web pages.

1. A Web Standards & UD
Approach to Access
Integrating Universal Design,
Best Practices, & Accessibility
Howard Kramer
University of Colorado-Boulder
hkramer@colorado.edu, 303-492-8672
ATIA 2013

2. Presentation posted at
slideshare
http://slideshare.com/hkramer99/
Integrating Universal Design, Best
Practices, & Accessibility (BPS –
public).pptx/

3. Today’s Outline
 What are Best Practices/Web Standards &
Universal Design
 How does it compare to ―Accessibility‖ or
Accessibility Guidelines‖
 What are the advantages of this (holistic)
approach?
 How do we implement this approach?
 More resources & suggestion for
Implementing these Standards &
guidelines

4. Today’s Objectives
 Understand the intersection &
interrelationship between Web Standards,
Universal Design and Accessibility
 Acquire tools and strategy to implement a
this (UD) approach

5. Universal Design (for Digital Media)
 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

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

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

8. Universal Design
not solely about accessibility
 Other audiences
 Older populations
 Non-English speakers
 Disadvantaged / Poor access to technology
 Other benefits
 Search
 Reusability
 Navigation, better UX
 SEO/discoverability

9. Krug – Chapter 13
(Accessibility, CSS, & You)
Accessibility Justification
 Makes good business sense
 Everyone should have the same
opportunities
 Most accessibility adaptations benefit
everyone
 Huge potential market; 65% of population
has a disability
 Section 508 – it’s the law

10. Krug – Chapter 13
(Accessibility, CSS, & You)
Accessibility Justification
 Accessibility should be part of overall
holistic approach to effective design
 Krug - 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.

11. Web Standards Foundation

12. Web Standards / Universal Design –
Definitions
 Using Web Standards & Universal Design
as foundation
 Web Standards –
 semantic (x)HTML markup
 CSS layout, the separating of content from layout
& formatting
 Standard coding

13. http://www.colorado.edu/ODECE/UDAC/physic
s%20page-2.htm

14. (More) Benefits of Web Standards
 Easier for people & search engines to find your
content – (including AT users)
 Separating structure and behavior makes your
site easier and less expensive to develop & test.
 Lighter site (smaller file size)
 Semantic markup - more accessible to
browsers and devices, incl. mobile
devices and AT
 Designing with standards in ensures that your site
is forward compatible.

15. Zeldman – ―the blind billionaire‖
 Google and other
search engines are, in
effect, ―blind users.‖
 Structure
 Text/semantics

16. An Overview of Web Standard
Particulars
 Declare a proper doctype
 Declare a language in the doctype
 Declare the primary language of the site in the <head> area
 Title your page properly & uniquely
 !DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN―
"http://www.w3.org/TR/html4/strict.dtd">
 If your document is XHTML, use this:
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 <head>
 <html lang="en-GB">
 ...
 </html>

17. Web Standard Particulars
 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</title>
</head>
<body>
</body>
...
</html>

18. Web Standard Particulars
 Use keywords & description elements
<head>
<title>Yahoo! UK & Ireland Eurosport—Sports News | Live Scores
| Sport</title>
<meta name="description" content="Latest sports news and live
scores from Yahoo! Eurosport UK. Complete sport coverage with
Football results, Cricket scores, F1, Golf, Rugby, Tennis and
more.">
<meta name="keywords" content="eurosport,sports,sport,sports
news,live scores,football,cricket,f1,golf,rugby,tennis,uk,yahoo">
</head>

19. Krug’s Recommendations
 Add alt text to every image
 Make your forms work with screen readers
 (use the label tag)
 Create a skip to main content link
 Make all content available by keyboard
 Don’t use javascript without good reason
 Use client-side, not server-side, image maps

20.  Structure the page as appropriate
with headers
 Structure hierarchically – H1, H2, etc.

21. Web Standard Particulars
 Structure your page with Titles, Divs, & Lists

22. Clear & Consistent Navigation

23. Demonstration
 CSS Zen Garden
 http://www.csszengarden.com/
 CU Physics page
 http://www.colorado.edu/ODECE/UDAC/physi
cs%20page-2.htm
 NY Times
 www.nytimes.com
 Web Developer Toolbar (Firefox addon)

24. Curriculum  Chisholm, Wendy; May, Matt.
Materials Universal Design for Web
Applications
 Zeldman, Jeffrey. Designing with
Web Standards (3rd Edition)
 Shea & Holzschlag. The Zen of CSS
Design: Visual Enlightenment for the
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)

25. Evaluation & Remediation Tools
 Wave (Toolbar) – wave.webaim.org
 Functional Accessibility Evaluator 1.1
 https://addons.mozilla.org/en-
US/firefox/addon/accessibility-evaluation-
toolb/
 Achecker –
 http://achecker.ca/
 Web Dev’l Toolbar
 https://addons.mozilla.org/en-
US/firefox/addon/web-developer/

26. More Evaluation & Remediation
Tools & Resources
 10 Evaluation Tools
 http://sixrevisions.com/web-
standards/accessibility_testtools/
 CU Web Design Awards Page
 http://www.colorado.edu/ODECE/UDAC/webc
omp2012.html#resources

27. Other Curriculum Resources
 A List Apart - Link-Rodrigue, The Inclusion
Principle,
 http://www.alistapart.com/articles/the-inclusion-
principle/
 Dev.opera.com
 http://dev.opera.com/articles/view/1-introduction-
to-the-web-standards-cur/
 Usability.gov
 http://usability.gov/methods/test_refine/heuristic.h
tml
 Sitepoint.com
 http://articles.sitepoint.com/article/information-
architecture

28. Other Curriculum Resources
 First Principles of Interaction Design‖
 (http://www.asktog.com/basics/firstPrinciples.html
);
 ―Personas‖
 http://wiki.fluidproject.org/display/fluid/Personas
 WebAIM.org – The Legend of the Typical …
 http://webaim.org/presentations/2010/csun/screen
readersurvey.pdf
 W3C Web Standards Cirruculim
 http://www.w3.org/community/webed/wiki/Main_P
age

29. Other Resources
 Web Design Awards & Training at CU
 http://www.colorado.edu/ODECE/UDAC/webcomp
2012.html
 WAVE - WebAIM.org
 http://wave.webaim.org/
 W3C Web Standards Cirruculim
 http://www.w3.org/community/webed/wiki/Main_P
age
 Physics Example page
 http://www.colorado.edu/ODECE/UDAC/physics%2
0page-2.htm

30. Projects/Resources at CU,
AHEAD, ATHEN
 3-credit class: Universal Design for Digital Media
 http://accessinghigherground.org/wp/udclass/
 ATHEN – Access Tech. Higher Ed. Network
 Athenpro.org
 UD Grant - Integrating UD in Curriculum
 Professional Certificate
 Expand courses in UD for media design
 Conference track on UD in curriculum
 Repository of resources

31. Accessing Higher Ground
Conference
Accessible Media, Web & Technology
 November 4 – 8, 2013
 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