Presentation is loading. Please wait.

Presentation is loading. Please wait.

Evaluating and Remediating Web Pages for Accessibility & Web Standards Evaluating and Remediating Web Pages for Accessibility & Web Standards Howard Kramer.

Published byAnissa Carr Modified over 8 years ago

Similar presentations

Presentation on theme: "Evaluating and Remediating Web Pages for Accessibility & Web Standards Evaluating and Remediating Web Pages for Accessibility & Web Standards Howard Kramer."— Presentation transcript:

1 Evaluating and Remediating Web Pages for Accessibility & Web Standards Evaluating and Remediating Web Pages for Accessibility & Web Standards Howard Kramer University of Colorado-Boulder hkramer@colorado.eduhkramer@colorado.edu, 303-492-8672

2 Today’s Outline What are Web Standards? What are Web Standards? How does it compare to “Accessibility Standards” How does it compare to “Accessibility Standards” What are the advantages of this approach What are the advantages of this approach The evaluation & remediation process The evaluation & remediation process Resources & Suggestions (for using this approach) Resources & Suggestions (for using this approach)

3 Definitions & Historic Context The Web Standards Project (WaSP) Before Web Standards Before Web Standards The Way we Were – 1998 The Way we Were – 1998 No standards No standards Browser wars Browser wars Code forking Code forking

4 Definitions & Historic Context The Web Standards Project (WaSP) What, Why, Who are Web Standards? What, Why, Who are Web Standards? Web Standards Project - founded in 1998 Web Standards Project - founded in 1998 reduce the cost and complexity of development reduce the cost and complexity of development increasing the accessibility increasing the accessibility and long-term viability of any site published on the Web. and long-term viability of any site published on the Web.

5 Web Standards Basics Web Standards include Web Standards include semantic (x)HTML markup, semantic (x)HTML markup, CSS layout (the separating of content from layout & formatting) CSS layout (the separating of content from layout & formatting) Third component: Scripting – Javascript & DOM Third component: Scripting – Javascript & DOM

6 The Benefits of using Web Standards to promote Accessibility Makes it easier for people & search engines to find your content – (including AT users) Makes it 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. (And much easier to update). Separating structure and behavior makes your site easier and less expensive to develop & test. (And much easier to update). Makes your site lighter (smaller file size) Makes your site lighter (smaller file size) Semantic markup makes your site more accessible to different kinds of browsers and devices, incl. mobile devices and AT Semantic markup makes your site more accessible to different kinds of browsers and devices, incl. mobile devices and AT Designing with standards in ensures that your site is forward compatible. Designing with standards in ensures that your site is forward compatible.

7 The Advantages of a Universal Design Approach Using Web Standards is a Universal Design Strategy Using Web Standards is a Universal Design Strategy Not only addressing accessibility Not only addressing accessibility Don’t need to “sell” accessibility to web designers and administrators Don’t need to “sell” accessibility to web designers and administrators

8 Universal Design vs. Web Standards vs. Accessibility

9

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

11 Web Standard Particulars Declare a unique title for each page. Declare a unique title for each page. Title example Title example <html><head> ATIA 2012 Home ATIA 2012 Home </head><body></body>...</html>

12 Web Standard Particulars Use keywords & description elements Use keywords & description elements<head> Yahoo! UK & Ireland Eurosport—Sports News | Live Scores | Sport Yahoo! UK & Ireland Eurosport—Sports News | Live Scores | Sport </head>

13 Web Standard Particulars Structure your page Semantically (not presentationally) with Headers,, Divs, & Lists Structure your page Semantically (not presentationally) with Headers,, Divs, & Lists

14 Clear & Consistent Navigation

15 Demonstration CU Physics page CU Physics page http://www.colorado.edu/ODECE/UDAC/physi cs%20page-2.htm http://www.colorado.edu/ODECE/UDAC/physi cs%20page-2.htm http://www.colorado.edu/ODECE/UDAC/physi cs%20page-2.htm http://www.colorado.edu/ODECE/UDAC/physi cs%20page-2.htm NY Times NY Times www.nytimes.com www.nytimes.com

16 Advantages of Universal Design Approach Campuses, audiences, IT, not always receptive to “disability” approach Campuses, audiences, IT, not always receptive to “disability” approach

17 Evaluation & Remediation Tools Wave (Toolbar) – Wave (Toolbar) – wave.webaim.org wave.webaim.org Functional Accessibility Evaluator 1.1 Functional Accessibility Evaluator 1.1 https://addons.mozilla.org/en- US/firefox/addon/accessibility-evaluation- toolb/ https://addons.mozilla.org/en- US/firefox/addon/accessibility-evaluation- toolb/ https://addons.mozilla.org/en- US/firefox/addon/accessibility-evaluation- toolb/ https://addons.mozilla.org/en- US/firefox/addon/accessibility-evaluation- toolb/ Achecker – Achecker – http://achecker.ca/ http://achecker.ca/ http://achecker.ca/

18 Demonstration Testing the Physics page Testing the Physics page

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

20 Zeldman – “the blind billionaire” Google and other search engines are, in effect, “blind users.” Google and other search engines are, in effect, “blind users.” Structure Structure Text/semantics Text/semantics

21 Web Standards & UD Books Chisholm, Wendy; May, Matt. Universal Design for Web Applications Chisholm, Wendy; May, Matt. Universal Design for Web Applications Zeldman, Jeffrey. Designing with Web Standards (3rd Edition) Zeldman, Jeffrey. Designing with Web Standards (3rd Edition) Shea & Holzschlag. The Zen of CSS Design: Visual Enlightenment for the Web. Shea & Holzschlag. The Zen of CSS Design: Visual Enlightenment for the Web. Norman, David A. The Design of Everyday Things (2002). Norman, David A. The Design of Everyday Things (2002). Cooper, Alan; Reimann Robert M. About Face 2.0: The Essentials of Interaction Design (2003) Cooper, Alan; Reimann Robert M. About Face 2.0: The Essentials of Interaction Design (2003)

22 Implementing this on the UCB Campus Committee on Universal Design & Accessibility Committee on Universal Design & Accessibility Web Design Competition Web Design Competition Teleconferences to campus Teleconferences to campus

23 Other Curriculum Resources A List Apart - Link-Rodrigue, The Inclusion Principle, A List Apart - Link-Rodrigue, The Inclusion Principle, http://www.alistapart.com/articles/the-inclusion- principle/ http://www.alistapart.com/articles/the-inclusion- principle/ http://www.alistapart.com/articles/the-inclusion- principle/ http://www.alistapart.com/articles/the-inclusion- principle/ Dev.opera.com Dev.opera.com 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://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/ Usability.gov Usability.gov http://usability.gov/methods/test_refine/heuristic.h tml http://usability.gov/methods/test_refine/heuristic.h tml http://usability.gov/methods/test_refine/heuristic.h tml http://usability.gov/methods/test_refine/heuristic.h tml Sitepoint.com Sitepoint.com http://articles.sitepoint.com/article/information- architecture http://articles.sitepoint.com/article/information- architecture http://articles.sitepoint.com/article/information- architecture http://articles.sitepoint.com/article/information- architecture

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

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

26 Accessing Higher Ground Conference Accessible Media, Web & Technology November 12 - 16, 2012 November 12 - 16, 2012 Hands-on sessions on Web Access, Assistive Technology Hands-on sessions on Web Access, Assistive Technology Upcoming teleconferences Upcoming teleconferences Can purchase audio dvd of proceedings & access materials & handouts online Can purchase audio dvd of proceedings & access materials & handouts online Westin Hotel - between Boulder & Denver Westin Hotel - between Boulder & Denver www.colorado.edu/ATconference www.colorado.edu/ATconference

Download ppt "Evaluating and Remediating Web Pages for Accessibility & Web Standards Evaluating and Remediating Web Pages for Accessibility & Web Standards Howard Kramer."

Similar presentations

A Web Standards & UD Approach to Access The Intersection of Web Standards, Universal Design & Accessibility Howard Kramer University of Colorado-Boulder.

A Web Standards & UD Approach to Access The Intersection of Web Standards, Universal Design & Accessibility Howard Kramer University of Colorado-Boulder.
Designing and Evaluating Web Sites using Universal Design Principles Integrating Usability & Accessibility Howard Kramer University of Colorado-Boulder.

Designing and Evaluating Web Sites using Universal Design Principles Integrating Usability & Accessibility Howard Kramer University of Colorado-Boulder.
XHTML Basics.

XHTML Basics.
1 eVenzia Technologies Learning HTML, XHTML & CSS Chapter 1.

1 eVenzia Technologies Learning HTML, XHTML & CSS Chapter 1.
1990 2020 1992 1994 1996 1998 2000 2002 2004 20062010 20082012 2014 2016 2018 Tim Berners-Lee authors HTML in 1991, assisted by his colleagues at CERN,

Tim Berners-Lee authors HTML in 1991, assisted by his colleagues at CERN,
Neal Stublen A Basic Template  HTML doctype Much simpler than HTML4/XHTML  Title and meta content Again simpler than “Content-Type”

Neal Stublen A Basic Template  HTML doctype Much simpler than HTML4/XHTML  Title and meta content Again simpler than “Content-Type”
Web Accessibility Web Services Office of Communications.

Web Accessibility Web Services Office of Communications.
F2007 06.02.2007 DIGITAL MEDIA: COMMUNICATION AND DESIGN INTRODUCTION TO XML AND XHTML.

F DIGITAL MEDIA: COMMUNICATION AND DESIGN INTRODUCTION TO XML AND XHTML.
The W3C Web Accessibility Initiative (WAI) Inclusive learning through technology Damien French.

The W3C Web Accessibility Initiative (WAI) Inclusive learning through technology Damien French.
1st Project Introduction to HTML.

1st Project Introduction to HTML.
THE BASICS OF THE WEB Davison Web Design. Introduction to the Web Main Ideas The Internet is a worldwide network of hardware. The World Wide Web is part.

THE BASICS OF THE WEB Davison Web Design. Introduction to the Web Main Ideas The Internet is a worldwide network of hardware. The World Wide Web is part.
WEB DESIGNING Prof. Jesse A. Role Ph. D TM UEAB 2010.

WEB DESIGNING Prof. Jesse A. Role Ph. D TM UEAB 2010.
CS 415 N-Tier Application Development By Umair Ashraf July 16,2013 National University of Computer and Emerging Sciences Lecture # 12 HTML/ XHTML/ HTML5.

CS 415 N-Tier Application Development By Umair Ashraf July 16,2013 National University of Computer and Emerging Sciences Lecture # 12 HTML/ XHTML/ HTML5.
Copenhagen, 6 June 2006 Modern Web standards in CHM portals Mădălina Sauca Finsiel Romania.

Copenhagen, 6 June 2006 Modern Web standards in CHM portals Mădălina Sauca Finsiel Romania.
Section 2.1 Compare the Internet and the Web Identify Web browser components Compare Web sites and Web pages Describe types of Web sites Section 2.2 Identify.

Section 2.1 Compare the Internet and the Web Identify Web browser components Compare Web sites and Web pages Describe types of Web sites Section 2.2 Identify.
Web Standards Coding Benefits of Web Standards Coding – Variety of user agents Same marked up content can be read by browser, smartphones, screen readers.

Web Standards Coding Benefits of Web Standards Coding – Variety of user agents Same marked up content can be read by browser, smartphones, screen readers.
WRA 210 10/16/13 HTML VALIDATION & HTML5. TODAY’S AGENDA Overview of new objects: lists, tables Overview of metadata: meta tags, comments History of the.

WRA /16/13 HTML VALIDATION & HTML5. TODAY’S AGENDA Overview of new objects: lists, tables Overview of metadata: meta tags, comments History of the.
Joel Bapaga on Web Design Strategies Technologies Commercial Value.

Joel Bapaga on Web Design Strategies Technologies Commercial Value.
Multimedia and the Web Chapter 10. 2 Overview  This chapter covers:  What Web-based multimedia is  how it is used today  advantages and disadvantages.

Multimedia and the Web Chapter Overview  This chapter covers:  What Web-based multimedia is  how it is used today  advantages and disadvantages.
Week 1.  Phillip Chee   Ext.1214 

Week 1.  Phillip Chee   Ext.1214 

Similar presentations

Ads by Google