integrating universal design, best practices, & accessibility atia 2013 - (adapted for leeds...

A Web Standards & UD Approach to Access

Integrating Universal Design, Best Practices, &

Accessibility

Howard KramerUniversity of [email protected], 303-492-8672

ATIA 2013

mailto:[email protected]

Presentation posted at slideshare

http://slideshare.com/hkramer99/

Integrating Universal Design, Best Practices, & Accessibility (BPS – public).

pptx/



http://webdevgroupcu.org/ahg-atia/





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

Today’s Objectives

Understand the intersection & interrelationship between Web Standards, Universal Design and Accessibility

Acquire tools and strategy to implement a this (UD) approach

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

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

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.

Universal Designnot solely about accessibility

Other audiences Older populations Non-English speakers Disadvantaged / Poor access to

technology Other benefits

Search Reusability Navigation, better UX SEO/discoverability

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

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.

Web Standards Foundation

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

http://www.colorado.edu/ODECE/UDAC/physics%20page-2.htm



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

Zeldman – “the blind billionaire”

Google and other search engines are, in effect, “blind users.” Structure Text/semantics

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>

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>


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>

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

Structure the page as appropriate with headers

Structure hierarchically – H1, H2, etc.


Structure your page with Titles, Divs, & Lists

Clear & Consistent Navigation

Demonstration

CSS Zen Garden http://www.csszengarden.com/

CU Physics page http://www.colorado.edu/ODECE/UDAC/p

hysics%20page-2.htm NY Times

www.nytimes.com Web Developer Toolbar (Firefox

addon)

http://www.csszengarden.com/



http://www.nytimes.com/

Curriculum Materials

Chisholm, Wendy; May, Matt. 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)

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/



http://achecker.ca/

https://addons.mozilla.org/en-US/firefox/addon/web-developer/

https://addons.mozilla.org/en-US/firefox/addon/web-developer/

More Evaluation & Remediation Tools & Resources

10 Evaluation Tools http://sixrevisions.com/web-standards/a

ccessibility_testtools/

CU Web Design Awards Page http://www.colorado.edu/ODECE/UDAC/w

ebcomp2012.html#resources

http://sixrevisions.com/web-standards/accessibility_testtools/



http://www.colorado.edu/ODECE/UDAC/webcomp2012.html


Other Curriculum Resources A List Apart - Link-Rodrigue, The

Inclusion Principle, http://www.alistapart.com/articles/the-inclusi

on-principle/

Dev.opera.com http://dev.opera.com/articles/view/1-introduc

tion-to-the-web-standards-cur/ Usability.gov

http://usability.gov/methods/test_refine/heuristic.html

Sitepoint.com http://articles.sitepoint.com/article/informati

on-architecture

http://www.alistapart.com/articles/the-inclusion-principle/

http://www.alistapart.com/articles/the-inclusion-principle/

http://dev.opera.com/articles/view/1-introduction-to-the-web-standards-cur/

http://dev.opera.com/articles/view/1-introduction-to-the-web-standards-cur/



http://articles.sitepoint.com/article/information-architecture

http://articles.sitepoint.com/article/information-architecture

Other Curriculum Resources First Principles of Interaction Design”

(http://www.asktog.com/basics/firstPrinciples.html);

“Personas” http://wiki.fluidproject.org/display/fluid/Perso

nas WebAIM.org – The Legend of the Typical

… http://webaim.org/presentations/2010/csun/s

creenreadersurvey.pdf W3C Web Standards Cirruculim

http://www.w3.org/community/webed/wiki/Main_Page

http://www.asktog.com/basics/firstPrinciples.html

http://www.asktog.com/basics/firstPrinciples.html

http://wiki.fluidproject.org/display/fluid/Personas

http://wiki.fluidproject.org/display/fluid/Personas

http://webaim.org/presentations/2010/csun/screenreadersurvey.pdf

http://webaim.org/presentations/2010/csun/screenreadersurvey.pdf



Other Resources Web Design Awards & Training at CU


WAVE - WebAIM.org http://wave.webaim.org/

W3C Web Standards Cirruculim http://www.w3.org/community/webed/wiki/M

ain_Page Physics Example page




http://wave.webaim.org/





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

http://accessinghigherground.org/wp/udclass/

Accessing Higher GroundConference

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

integrating universal design, best practices, & accessibility atia 2013 - (adapted for leeds...

Documents