Approaching web accessibility through web stands & ud
Download as PPTX, PDF0 likes168 views
This document discusses how adopting web standards and universal design principles can improve web accessibility. It defines web standards, universal design, and how they compare to traditional accessibility standards. Some key benefits outlined are making sites easier for people and search engines to use, reducing development costs, and ensuring forward compatibility. The document provides examples of how implementing semantic HTML, CSS layout, and flexible design can achieve these benefits and improve accessibility for all users.
Approaching web accessibility through web stands & ud
- 1. Approaching Web Accessibility through Web Standards & Universal DesignHoward Kramer & Vijay Patel University of Colorado-Boulderhkramer@colorado.edu, 303-492-8672
- 2. Today’s OutlineWhat are Web Standards & Universal DesignHow does it compare to “Accessibility Standards”What are the advantages of this approachHow have we used it on the CU-Boulder CampusResources & Suggestion for Implementing these Standards & guidelines
- 3. My Entry into Web StandardsBegan with Universal Design CoursePrevious Focus - AccessibilityNo existing course covering this topicAvailability of expertise – access specialist, Web design specialist
- 4. Definitions & Historic ContextThe Web Standards Project (WaSP)What, Why, Who are Web Standards?Web Standards Project - founded in 1998reduce the cost and complexity of developmentincreasing the accessibility and long-term viability of any site published on the Web.
- 5. Definitions & Historic ContextThe Web Standards Project (WaSP) The WhyThe Way we Were – 1989No standardsBrowser warsCode forking
- 6. Web Standards / Universal Design – DefinitionsUsing Web Standards & Universal Design as foundation of courseWeb Standards – semantic (x)HTML markup, CSS layout, the separating of content from layout & formatting – produces the following positive outcomesThird component: Scripting – Javascript & DOM
- 7. The Benefits of Web StandardsMakes 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).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 ATDesigning with standards in ensures that your site is forward compatible.
- 8. Universal Design for Digital MediaWhat 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. Universal Design for Digital MediaEquitable Use: The design is useful and marketable to people with diverse abilities.Same means of use for allNo text-only versionsFlexibility 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 mediaTolerance for Error:The design minimizes hazards and the adverse consequences of accidental or unintended actions.
- 10. Universal Design vs. Web Standards vs. Accessibility
- 11. Universal Design vs. Web Standards vs. Accessibility
- 12. An Overview of Web Standard ParticularsDeclare a proper doctypeDeclare a language in the doctypeDeclare the primary language of the site in the <head> areaTitle 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>
- 13. Web Standard ParticularsDeclare 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>I am a title example</title></head><body></body>...</html>
- 14. Web Standard ParticularsUse 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,sportsnews,live scores,football,cricket,f1,golf,rugby,tennis,uk,yahoo"></head>
- 15. Web Standard ParticularsStructure your page with Titles, Divs, & Lists
- 16. Clear & Consistent Navigation
- 17. New York Times demowww.nytimes.com
- 18. Advantages of Universal Design ApproachCampuses, audiences, IT, not always receptive to “disability” approach
- 19. Zeldman – “the blind billionaire”Google and other search engines are, in effect, “blind users.”StructureText/semantics
- 20. Curriculum MaterialsChisholm, Wendy; May, Matt. Universal Design for Web ApplicationsZeldman, 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)
- 21. Implementing this on the UCB CampusCommittee on Universal Design & Accessibility Web Design CompetitionTeleconferences to campus
- 22. Other Curriculum ResourcesA List Apart - Link-Rodrigue, The Inclusion Principle,http://www.alistapart.com/articles/the-inclusion-principle/Dev.opera.comhttp://dev.opera.com/articles/view/1-introduction-to-the-web-standards-cur/Usability.govhttp://usability.gov/methods/test_refine/heuristic.htmlSitepoint.comhttp://articles.sitepoint.com/article/information-architecture
- 23. Other Curriculum ResourcesFirst Principles of Interaction Design” (http://www.asktog.com/basics/firstPrinciples.html);“Personas”http://wiki.fluidproject.org/display/fluid/PersonasWebAIM.org – The Legend of the Typical …http://webaim.org/presentations/2010/csun/screenreadersurvey.pdf
- 24. AccessingHigher GroundConferenceAccessible Media, Web & TechnologyNovember 14 - 18, 2011Hands-on sessions on Web Access, Assistive TechnologyUpcoming teleconferencesCan purchase audio dvd of proceedings & access materials & handouts onlineWestin Hotel - between Boulder & Denverwww.colorado.edu/ATconference
Editor's Notes
- #7: 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.
- #8: “Changing direction a little bit.”Benefits 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.
- #17: Probably more a part of UD or usability than Web Standards.
- #18: [Show Web Developer tool bar in Firefox when I do the demo.][Show csszen garden]
- #19: Have to disguise your talk about accessibility in order to get campus to listen.