SlideShare a Scribd company logo
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
Presentation posted at
       slideshare

http://slideshare.com/hkramer99/

Integrating Universal Design, Best
 Practices, & Accessibility (BPS –
           public).pptx/
Today’s Outline
   What are Best Practices (Web Standards)
    & Universal Design
       How does it compare to ―Accessibility
        Standards‖
   What are the advantages of this
    (wholistic) 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 a useful and powerful strategy for
    implementing UD and accessibility for
    digital media
   Have a tool for promoting accessibility
    (through UD) at your campuses or
    organizations
Framework or Model for Today’s
            Talk
  Conceptual vs. the
      Technical
Framework or Model for Today’s
            Talk
Defining Our Terms

   What do I mean “Best Practices”?
       Web Standards
       User-centered design
       Interaction design
       Accessibility
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
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 – produces the following
        positive outcomes
            Third component: Scripting – Javascript & DOM
Best Practices vs. Web Standards /
          What is Best Practices?
   Web Standards
   User-Centered Design
       User Testing
       Interaction design
   Following design and layout principles
Definitions & Historic Context
   The Web Standards Project (WaSP)

 The   Why
  TheWay we
   Were – 1998
    No standards
    Browser wars

    Code forking
Definitions & Historic Context
         The Web Standards Project (WaSP)

   What, Why, Who are Web Standards?
       Web Standards Project - founded in 1998
       reduce the cost and complexity of
        development
       increasing the accessibility
       and long-term viability of any site published
        on the Web.
(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.
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.
   Value Propositions

•   Accessible for deaf and hard of hearing

•   For ESL viewers

•   Flexibility to view anywhere, such as noisy
    environments or offices

•   Search

•   Reusability

•   Navigation, better UX

•   SEO/discoverability

•   Used as source for translation
http://www.colorado.edu/ODECE/UDAC/physic
s%20page-2.htm
http://www.colorado.edu/ODECE/UDAC/physic
s%20page-2.htm
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>
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>
   Structure the page as appropriate
    with headers
   Structure hierarchically – H1, H2, etc.
Web Standard Particulars

   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/physi
        cs%20page-2.htm
   NY Times
       www.nytimes.com
   Web Developer Toolbar (Firefox addon)
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)
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/
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
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
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
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
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
   See us at Booth 204
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

More Related Content

PPTX
Integrating universal design, best practices, & accessibility atia 2013 - (...
PPTX
A web standards & ud approach for access (bps public)
PPTX
Ud 4 web, classroom, curriculum
PPTX
Teaching web accessibility at the source
PPTX
Designing and evaluating web sites using universal design principles (hands on)
PPTX
Lessons Learned: Coding Accessible Apps with Frameworks 2017
PPTX
Web Accessibility
PPTX
Usability Testing with People with Disabilities (2017)
Integrating universal design, best practices, & accessibility atia 2013 - (...
A web standards & ud approach for access (bps public)
Ud 4 web, classroom, curriculum
Teaching web accessibility at the source
Designing and evaluating web sites using universal design principles (hands on)
Lessons Learned: Coding Accessible Apps with Frameworks 2017
Web Accessibility
Usability Testing with People with Disabilities (2017)

What's hot (8)

PPTX
Lessons Learned in Coding Accessible Apps with Frameworks
PPTX
Trends and innovations in web development course
PPTX
THe Evolution of Web Design
PPTX
Oric introductory session
PPTX
Usability Testing with People with Disabilities
PPT
Edited Version Of Web 2.0 Applications From Fetc 08
PPT
Ofer Kaltura Presentation At Unh March2010
PDF
Top 20 Free Web Applications for Teachers and Librarians
Lessons Learned in Coding Accessible Apps with Frameworks
Trends and innovations in web development course
THe Evolution of Web Design
Oric introductory session
Usability Testing with People with Disabilities
Edited Version Of Web 2.0 Applications From Fetc 08
Ofer Kaltura Presentation At Unh March2010
Top 20 Free Web Applications for Teachers and Librarians
Ad

Similar to Integrating universal design, best practices, & accessibility atia 2013 (20)

PPTX
Ud 4 web, classroom, curriculum
PPTX
Designing and evaluating web sites using universal design principles (hands on)
PPTX
Approaching web accessibility through web stands & ud
PPTX
Ud in curriculum csun 2013
PPTX
What is a pba webdeveloper?
PPT
Web Standards
DOC
Atlas course flyer & definitions handout
PPT
Udem 2007 Accessibility Standards
PDF
Navigating the Hype and Realities of Web Development Frameworks
PPT
eLearning & Accessibility
PDF
Website Migration Planning
PDF
A Complete Guide to Frontend - UI Developer
PPTX
Ud in curriculum ahead 2013
PPTX
Presentation on web page development.pptx
PDF
G0373049057
PPTX
Theming for mobile devices recent
PPTX
Bridging Design and Functionality A Full Stack Course for Developers.pptx
PPTX
(COLTT 2018) Teaching Accessibility and Inclusive Design in Higher Education ...
PPT
Seth Duffy Accessibility97035
PPT
Rutgers - History Intranet
Ud 4 web, classroom, curriculum
Designing and evaluating web sites using universal design principles (hands on)
Approaching web accessibility through web stands & ud
Ud in curriculum csun 2013
What is a pba webdeveloper?
Web Standards
Atlas course flyer & definitions handout
Udem 2007 Accessibility Standards
Navigating the Hype and Realities of Web Development Frameworks
eLearning & Accessibility
Website Migration Planning
A Complete Guide to Frontend - UI Developer
Ud in curriculum ahead 2013
Presentation on web page development.pptx
G0373049057
Theming for mobile devices recent
Bridging Design and Functionality A Full Stack Course for Developers.pptx
(COLTT 2018) Teaching Accessibility and Inclusive Design in Higher Education ...
Seth Duffy Accessibility97035
Rutgers - History Intranet
Ad

More from Howard Kramer (19)

PPTX
Results from a Survey to Measure the Benefits of Accessibility and Universal ...
PPTX
Student Benefits and Teaching Resources for Including Accessibility/Inclusive...
PPTX
Preliminary Results from a Survey to Measure the Benefits of Accessibility an...
PPTX
Ud in-curriculum-4 coltt-2019
PPTX
Ud in-curriculum-4 accessu-2019
PPTX
Ud in-curriculum-4 csun-2019
PPTX
Ud in-curriculum-4 ahead-2018-solo
PPTX
Ud in-curriculum-4 accessu-2018 (howard-lydia combined-nn)
PPTX
Teaching Accessibility and Inclusive Design in Higher Education Curriculum: B...
PPTX
Teaching Accessibility and Universal Design in Higher Education - COLTT 2017
PPTX
Teach Accessibility and Universal Design in Higher Education (AHEAD 2017)
PPTX
Teaching Accessibility and Universal Design in Higher Education Curriculum: B...
PPTX
Teaching Accessibility and Universal Design in Higher Education Curriculum - ...
PPTX
Integrating Universal Design Content into University Curriculum
PPTX
Universal Design Content in Curriculum - ATIA 2014
PPTX
Ud 4 curriculum (hk segment of panel)
DOCX
Designing and evaluating web sites using universal design principles notes
PPT
Wordpress & accessibility
PPTX
What is ud demographics-w-notes - adopted for dis stud class
Results from a Survey to Measure the Benefits of Accessibility and Universal ...
Student Benefits and Teaching Resources for Including Accessibility/Inclusive...
Preliminary Results from a Survey to Measure the Benefits of Accessibility an...
Ud in-curriculum-4 coltt-2019
Ud in-curriculum-4 accessu-2019
Ud in-curriculum-4 csun-2019
Ud in-curriculum-4 ahead-2018-solo
Ud in-curriculum-4 accessu-2018 (howard-lydia combined-nn)
Teaching Accessibility and Inclusive Design in Higher Education Curriculum: B...
Teaching Accessibility and Universal Design in Higher Education - COLTT 2017
Teach Accessibility and Universal Design in Higher Education (AHEAD 2017)
Teaching Accessibility and Universal Design in Higher Education Curriculum: B...
Teaching Accessibility and Universal Design in Higher Education Curriculum - ...
Integrating Universal Design Content into University Curriculum
Universal Design Content in Curriculum - ATIA 2014
Ud 4 curriculum (hk segment of panel)
Designing and evaluating web sites using universal design principles notes
Wordpress & accessibility
What is ud demographics-w-notes - adopted for dis stud class

Integrating universal design, best practices, & accessibility atia 2013

  • 1. A Web Standards & UD Approach to Access Integrating Universal Design, Best Practices, & Accessibility Howard Kramer University of Colorado-Boulder [email protected], 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 Standards‖  What are the advantages of this (wholistic) 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 a useful and powerful strategy for implementing UD and accessibility for digital media  Have a tool for promoting accessibility (through UD) at your campuses or organizations
  • 5. Framework or Model for Today’s Talk Conceptual vs. the Technical
  • 6. Framework or Model for Today’s Talk
  • 7. Defining Our Terms  What do I mean “Best Practices”?  Web Standards  User-centered design  Interaction design  Accessibility
  • 8. 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
  • 9. 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 – produces the following positive outcomes  Third component: Scripting – Javascript & DOM
  • 10. Best Practices vs. Web Standards / What is Best Practices?  Web Standards  User-Centered Design  User Testing  Interaction design  Following design and layout principles
  • 11. Definitions & Historic Context The Web Standards Project (WaSP)  The Why  TheWay we Were – 1998  No standards  Browser wars  Code forking
  • 12. Definitions & Historic Context The Web Standards Project (WaSP)  What, Why, Who are Web Standards?  Web Standards Project - founded in 1998  reduce the cost and complexity of development  increasing the accessibility  and long-term viability of any site published on the Web.
  • 13. (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.
  • 14. 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
  • 15. 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.
  • 16. Value Propositions • Accessible for deaf and hard of hearing • For ESL viewers • Flexibility to view anywhere, such as noisy environments or offices • Search • Reusability • Navigation, better UX • SEO/discoverability • Used as source for translation
  • 19. 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>
  • 20. 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>
  • 21. 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>
  • 22. Structure the page as appropriate with headers  Structure hierarchically – H1, H2, etc.
  • 23. Web Standard Particulars  Structure your page with Titles, Divs, & Lists
  • 24. Clear & Consistent Navigation
  • 25. 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)
  • 26. 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)
  • 27. 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/
  • 28. 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
  • 29. 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
  • 30. 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
  • 31. 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
  • 32. 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  See us at Booth 204
  • 33. 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

Editor's Notes

  • #5: No. 2 bullet item if more technical, no. 3 if you are more of an advocate and less technical.Framework or division for talk: Conceptual vs. Technical
  • #10: Html 4.0 – first web standard for htmlXhtml 1.0Benefits of Web Standards &amp; 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 &amp; 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 &amp; lower costs for development, and faster loading of web pages (&amp; 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 &amp; 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.Definition of Semantic on next page.Semantic is related to structure and information on structure helps the AT user and search engines.
  • #11: Html 4.0 – first web standard for htmlXhtml 1.0Benefits of Web Standards &amp; 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 &amp; 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 &amp; lower costs for development, and faster loading of web pages (&amp; 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 &amp; 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.Definition of Semantic on next page.Semantic is related to structure and information on structure helps the AT user and search engines.
  • #14: Makes it easier for people &amp; search engines to find your content – (including AT users)Separating structure and behavior makes your site easier and less expensive to develop &amp; test. (and much easier to update)Makes your site lighter (smaller file size)Semantic markup - more accessible to different kinds of browsers and devices, incl. mobile devices and ATDesigning with standards in ensures that your site is forward compatible. “Changing direction a little bit.”Benefits of Web Standards &amp; 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 &amp; 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 &amp; lower costs for development, and faster loading of web pages (&amp; 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 &amp; 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.
  • #15: 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&apos;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&apos;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&apos;s body size, posture, or mobility.I would advise you to memorize these 7 principles – -we’ll be coming back to them repeatedly (and we will likely have a quiz on them – that’s a hint)
  • #21: Html 4.0 – first web standard for htmlXhtml 1.0Benefits of Web Standards &amp; 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 &amp; 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 &amp; lower costs for development, and faster loading of web pages (&amp; 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 &amp; 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.
  • #23: A different conceptual model.We’re used to the visual conceptual model.Go to demonstration.
  • #29: Probably more a part of UD or usability than Web Standards.
  • #30: [Show Web Developer tool bar in Firefox when I do the demo.][Show csszen garden]Show CSS Zen GardenShow how appearance changes in different stylesShow high contrast css style in firefoxShow outline feature of web developer toolbarShow page without stylesAnd show how it also shows css errors &amp; java errorsShow how you can turn images off – problem of h2 disappearing – caused by display = none in css (“under the sea” css has this problem)
  • #33: Mention Fitjutsu – Web Accessibility InspectorShow 10 evaluation tools page
  • #37: Show handouts page – mention can buy audio
  • #38: Show handouts page – mention can buy audio