Designing and evaluating web sites using universal design principles (hands on)
•Descargar como PPTX, PDF•
3 recomendaciones•4,863 vistas
Recomendados
Recomendados
Más contenido relacionado
La actualidad más candente
La actualidad más candente (16)
Destacado
Destacado (8)
Similar a Designing and evaluating web sites using universal design principles (hands on)
Similar a Designing and evaluating web sites using universal design principles (hands on) (20)
Más de Howard Kramer
Más de Howard Kramer (17)
Último
Último (20)
Designing and evaluating web sites using universal design principles (hands on)
- 1. Designing and Evaluating Web Sites using Universal Design Principles Integrating Usability & Accessibility Howard Kramer University of Colorado-Boulder hkramer@colorado.edu, 303-492-8672 AHEAD 2013
- 2. Presentation posted at slideshare http://slideshare.com/hkramer99/ Designing and Evaluating Web Sites using Universal Design Principles.pptx /
- 3. Introduction Grant Project: Promoting the Integration of Universal Design in University Curriculum (UDUC) Conference: Accessing Higher Ground: Accessible Media, Web & Technology Class: Universal Design for Digital Media - 14 week class
- 4. Today‟s Outline Review concepts of Universal Design Review & apply concepts and principles of design best practices & usability to Web design Conduct exercises that will teach you to identify when sites incorporate UD and best design practices (& when they don‟t)
- 5. Universal Design: How is this approach different? What are the advantages? “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.” Steve Krug, Don‟t Make Me Think! A Common Sense Approach to Web Usability (2006) “People sometimes ask me, „What about accessibility? Isn‟t that part of usability?‟” Steve Krug, ibid.
- 6. Usability = Accessibility? Yes or No
- 7. Universal Design Approach other advantages Sells better Developers - tune-out/turn-off on “accessibility” Respond to “best practices” Business case Other benefits Search Reusability Navigation, better UX SEO/discoverability Flexibility Different platforms
- 8. Universal Design Approach other advantages Other audiences Older populations Non-English speakers Poor readers / non-readers Socio-economically disadvantaged / Poor access to technology
- 9. Universal Design 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
- 10. 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
- 11. 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.
- 12. Web Standards our strategy for UD for the Web
- 13. Web Standards Using Web Standards as a Universal Design foundation Web Standards – semantic (x)HTML markup CSS layout, the separating of content from layout & formatting Standard coding
- 15. Universal Design – pyramid comprised of Web Standards Foundation, followed above with Usability / Design Best Practices with Accessibility at the top of the pyramid Universal Design Accessibility Keyboard Access Alternate Text Usability / Design Best Practices Consistent & Clear Navigation Visibility Feedback Visual Alignment Typography User control Web Standards Semantic Markup Separation of style from content Standard coding
- 16. Semantic Markup Semantic markup – provides meaning to structure and content of the page
- 18. Example 2 – NY Times
- 19. Exercise 1 Checking for Structure & Semantics Headings Unordered lists (menu items) Title tag Description tag
- 20. Exercise 2 Keyboard Access Can you tab to (and away from) all elements, including links, navigation, form fields, buttons, and media player controls? Does the tab order follow the logical reading order? Is visual feedback provided for each object that receives focus? Are all actions and visible feedback provided through the mouse also available via the keyboard.
- 21. Visibility & Feedback Outline around focused object Non-text elements must have alternative text (to make them perceptible) Alternative attribute Captioning Transcripts Proper placement of key text & information Reduction of noise
- 22. Avoid Screen Clutter & Dense Text
- 24. Low Density Text for Home page
- 25. Information grouped for easier scanning
- 28. Final Exercise Select a web page of your choice. Examine it using any of the tools or criteria we have talked about today: Structure & semantics Keyboard access Visibility/Perceptibility Consistent navigation Concise wording (minimal noise) Alignment/typography
- 29. Web Standard Particulars – Title tag 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 | Home</title> </head> <body> </body> ... </html> RETURN
- 30. Web Standard Particulars Use keywords & description elements <head> <title> Accessing Higher Ground 2013 - Accessible Media, Web and Technology Conference - Home Page</title> <meta name="description" content="16th Annual Accessing Higher Ground: Accessible Media, Web & Technology Conference; for Higher Education, Business and the Public Sphere."> <meta name="keywords" content="accessibility, universal design, alternate format, web design, disability, higher education, ADA, accommodations, assistive technology, AHEAD"> </head> RETURNEXAMPLE
- 31. Description tag in action RETURN
- 32. Books & Curriculum Material InterACT with Web Standards: A holistic approach to web design, Anderson, et. al. Zeldman, Jeffrey. Designing with Web Standards (3rd Edition) Chisholm & May. UD for Web Applications Norman, David A. The Design of Everyday Things (2002). Cooper, Alan; Reimann Robert M. About Face 2.0: The Essentials of Interaction Design (2003)
- 33. Evaluation & Remediation Tools Wave (Toolbar) – wave.webaim.org Achecker – http://achecker.ca/ Web Dev‟l Toolbar https://addons.mozilla.org/en- US/firefox/addon/web-developer/ No Squint https://addons.mozilla.org/en- us/firefox/addon/nosquint/
- 34. Evaluation & Remediation Tools cont‟d Functional Accessibility Evaluator 1.5.7 (aka accessibility toolbar) https://addons.mozilla.org/en-US/firefox/addon/accessibility- evaluation-toolb/ Juicy Studio Accessibility Toolbar https://addons.mozilla.org/en-us/firefox/addon/juicy-studio- accessibility-too/ Color Contrast Analyzer http://www.paciellogroup.com/resources/contrastAnalyser Web Accessibility Toolbar http://www.paciellogroup.com/resources/wat/ie
- 35. Tools & Resources Easy Checks - A First Review of Web Accessibility (WAI-EOWG) http://www.w3.org/WAI/eval/preliminary.html Before & After Demos (BAD) http://www.w3.org/WAI/demos/bad/ 10 Evaluation Tools http://sixrevisions.com/web- standards/accessibility_testtools/ CU Web Design Awards Page http://www.colorado.edu/ODECE/UDAC/webcomp201 2.html#resources
- 36. Other Resources A List Apart - Link-Rodrigue, The Inclusion Principle, (article) http://www.alistapart.com/articles/the-inclusion- principle/ Usability.gov http://usability.gov/methods/test_refine/heuristic.h tml Sitepoint.com http://articles.sitepoint.com/article/information- architecture
- 37. 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 Curruculim http://www.w3.org/community/webed/wiki/Main_P age
- 38. 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 NEA Grant - Promoting the Integration of UD into University Curriculum (UDUC) Breakfast Meeting at AHEAD: Thursday, July 11, 7:45 - 8:45 a.m. - Poe Room - second floor Presentation: Friday, July 12, 2:00 – 4:00 pm. Latrobe Room - first floor
- 39. 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
Notas del editor
- To give you more of an understanding of my involvement with universal design and accessibility …Work on a grant to promote the inclusion of universal design content in university curriculum – I’ll talk more about that later if there’s time.Coordinate a conference called Accessing Higher Ground (under AHEAD) – focuses on accessible media.Teach a course on the topic of today’s workshop – it’s called …, which is really focused on UD for the Web.Usually, I teach this subject over the course of 14 weeks – can’t do that here. But will try to cover some of the key concepts that we cover in that class.
- What we’ll cover todayAudience Background So at this point – it would be helpful to know more about your background – how familiar you are with web design, with accessibility guidelines, etc. I think it would take too long to go around the room – but maybe if I can get a show of hands to the following questions How many of you evaluate web pages for accessibility or usabilityHow many of you are familiar with 508 or Web Content Accessibility GuidelinesHow many of you know what a CSS – or cascading style sheet is and how it works?How many of you actually create or have created at least one web page?How many of you work in disability services?How many are web or media designers or work in IT?Any faculty?How many of you were walking by the hotel and wandered in here for whatever reason?For those who I didn’t fall into any of the professional areas I mentioned, what’s your background?
- (say this first before Krug quote – which is from pg 174 & 169 respectively)I like to point out when I present on this topic is that UD is a somewhat different approach than the standard “accessibility” approach.I think the two quotes up here on this slide from Steve Krug highlight this. Steve Krug is a design and usability expert who wrote a book called “Don’t Make me Think – a Common Sense approach to Web Usability”A great book for anyone interested in Web design, usability or accessibility.And his first quote here, which I’ll read is ….And this highlights thatWhy use a universal design approach?How does it differ from a more standard “accessibility approach.”I don’t want to say that UD is a better than accessibilityNow, I don’t want to sound like I’m criticizing a the standard “accessibility approach.” I do think a Universal Design Approach is different – and perhaps offers some advantages over a strict accessibility approach.I’m going to use a couple of quotesSteve Krug – Don’t make me think – great bookI think we’ve all heard the quoteBut I want to say that what we’ll talk about today is a somewhat different approach than simply checking for missing alt tags or keyboard accessibility or running an accessibility checker although checking for accessibility is part of the process for designing and evaluating a site for meeting Universal Design standards. But at the same time I think there are some advantages to taking a Universal Design approach to Web Design. First of all, you catch things that you might overlook when simply looking at accessibility – things such as – overall design, the use of white space, alignment of text and objects on a page, the clarity of text and the appropriate use of language and The consistency of navigation on a site. You’ve probably heard it said that it’s possible for a site to be completely accessible while at the same time almost completely unusable. A web site might have all its non-text elements and it’s form fields labeled and marked up correctly, according to accessibility standards, and links may make semantic sense on their own - and the site can still be unusable – if a site has inconsistent and unclear navigation, if important information is buried in the site and not where you expect to find it, if there’s a ton of clutter and pop-ups on a page - it harms the user experience of everyone but more so the person who uses a screen reader or who is dyslexic or who has a motor impairment who now has to click more links or issue more voice commands to explore more pages to find the information they need. When we design a site from a Universal Design approach, we ensure that the web site is not only accessible but also usable – by all audiences.I have another excerpt from Krug’s book up here. (Read second quote). (ask audience) What do you think his answer is? (Could turn to next slide)?[I would say yes – accessibility is about usability but applied to a different population – those outside the “norm.”] Instead, we’ll try to look at sites with a more holistic approach. What is good design? How do we ensure usability for all users, including individuals with disabilities. (Now refer to 1st Krug quote)A page can be accessible but not usable. Ex. We can have a page that has all it’s necessary alt text, excellent color contrast, etc., but with menus that are inconsistent from page to page; menu options that are worded poorly, etc. A page such as this might pass an accessibility checker but would still be inaccessible and unusable for all populations.Hopefully, what you’ll learn here – to some degree - today is to be able to evaluate a web page for overall usability, for good design, and also for accessibility.(2nd Krug quote)The answer is yes. In many ways, accessibility and usability are the same thing – they just apply to different populations. Usability is accessibility carried over to persons without disabilities, accessibility is usability carried over to persons with disabilities. Unseparating these concepts is the goal of universal design – expanding usability principles so as to include as many people as possible.This segues us nicely into a review of universal design.
- Something to ask the audience
- 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'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'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's body size, posture, or mobility.
- Html 4.0 – first web standard for htmlXhtml 1.0Why do I say Web Standards brings you 90% of the way to accessibility?Web Standards have been very good for accessibility – why?Because web standards emphasize semantic markup – including alt text for images and other non-text elements.Because semantic markup - Before Web Standards(perhaps show or have them look at csszen-garden – to demonstrate the power of external style sheets. Remind them to look at high contrast view via style sheet found in web accessibility toolbar in firefox).
- All the areas we’ll at least try to cover today(Following up on how the other 2 categories correspond to particular features).(Maybe print this as a handout)
- Table/text version of last slide
- We’ll start with semantic markup – this is part of our foundationWhat do I mean by Semantic MarkupAlso allows for greater control via the style sheet
- After describing the semantics of this page, show class how to use Wave toolbar with current physics page: phys.colorado.edu
- Menus are unordered listsMain article is a heading 1Article titles are headings anywhere from 2 to 6 except for lists of articles under a subject such as op-ed or opinionWith this structure A screen reader user can jump from header to header to hear article titles jump to the main headline – by finding header 1 Someone with a vision impairment or perhaps a reading disability could set the headers to custom colors – high contrast or some other combination which aids their reading A developer could create a specialized format for a mobile device, perhaps only showing the top level headings (i.e. articles) for the smaller screen. A screen reader user – because the menus are in unordered lists – will here the number of items in each menu, letting them decide whether to continue or jump ahead. On the business end – screenreader is not the only technology that looks for headings, so does Google Google gives extra weight to text it finds in headingsSo it’s very important that we design pages with this structure and that we check pages for this structure when we evaluate them.
- 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.
- (Don’t read list above – at least not at first – follow text below instead)(After I go over the material below this assignment, then give them Have class check structure of NY Times with wave toolbarCheck for headings and check for lists; also, have them check for title and description.Have them use nvda to go through the page using the headings command (h).Have them check the ATLAS pageCheck for headingsExplain how lack of headings hurts SEO, accessibility – both for the screenreader and the visual user (Title tag) (show picture of title tag – and sample code)We haven’t talked about the title tag. A title tag doesn’t add structure to the page but it adds semantics or meaning to the document as a whole. It describes the page and it appears in the tab of the browser – and also in the window title of Firefox & Opera (if you’ve set it to do so). It’s also the first thing that a screenreader reads when you open a web page. It’s also a commonly used command (Crtl-T in Jaws for example) to provide orientation to the user. So it’s crucial for an AT user to have a concise, accurate title tag on each page of the site. If AHEAD had the title tag “AHEAD – association of higher education and disability” on every page of it’s site than it’s no longer semantic – at least it provides no orientation other than to know we’re somewhere on the AHEAD site. A distinct accurate title tag for each page provides orientation – it let’s us know which page we’re on.The title tag, like heading tags, are given heavier weight by Search Engines. So there’s a “findability” and business rationale also. The description tag – like the title and heading tags – are also given heavier weight by Search Engines. It’s also what shows up – as does the title tag - in search results (show example & show sample code). So, it’s important to have an accurate and concise description so that you draw your target users to your site. If you have a poor description, you are going to reduce the traffic and visibility of your site – and make it more difficult for users, including AT users, to find an appropriate site when they do a search.[Next: keyboard access]
- (follow text below – not the slide)Now that we’re looking at the ATLAS site, let’s move on to keyboard accessibility. There are 2 major areas that comprise keyboard accessibility: the first the ability to tab and arrow through links and controls, and to select links and controls through the keyboard, and second, the visual feedback provided when focus is on an object on a page – in other words, feedback to indicate when the cursor is at a link or control on the page.(Show example of keyboard access with NY Times -Show how outline around area of focus can be different on different browsers: a dotted line in firefox and a thin yellow line in chrome.) Unless specified in the styling, defaults to browser style. (Show them the css code to set focus outline and perhaps demo changing the code to show how it works).(Also show them that we can see the url of the link at the bottom of the screen.) However, it is difficult to determine exactly where we are on the screen without the outlining – and controls provide no such url feedback.Show them thissongsucks.com site for example of lack of focus outline.For a person using a screenreader alone, the visual feedback, obviously, is not so important. For a person who is visually interacting with the screen, someone who uses the keyboard because of mobility or dexterity issues, or uses screen enlargement with keyboard access, or speech recognition to access the page, visual feedback is crucial(Have them go to the ATLAS page and try to move around the screen and select links and menus using the keyboard).What do they notice.Determining keyboard access – really requires testing with keyboard. Achecker sometimes will pick up javascript that looks to be keyboard inaccessible but it’s not foolproof.Pull down menus using javascript is fraught with the danger of making it keyboard inaccessible. Need to include an “onkeyboard” option as well as a “onmouse”.
- (Mention visibility is really perceptibility)The outline around focused items is an example of visibility and feedback. As we tab, we’re provided not only with feedback that something is happening but visual cueing of where we are on the page – crucial information, again, for the keyboard user.Now, as we know, something can be visually visible on a page and not be visible to many users – persons with vision impairments for example. Or persons using a text-based browser when information is presented on the page as an image without alternate text.There are other ways that information and text can be made invisible or at least result in reduced visibility Too much clutter on the screen – in other words, too much information(Use example of ATLAS page – and also leeds page if I can reconstruct it)(ATLAS page – “click me” tool tip on video, message to click on video above more info(also use old and new DS page poor color contrastPoor wordingInconsistent placement of navigation and informationBreaking convention
- Example of cluttered site (from usability.gov).“Studies have shown that users can find what they are looking for more quickly in a sparse and uncluttered display than in a dense display.” (direct quote from usability.gov).A large amount of dense text in particular degrades the user’s ability to find key information on a page. A 2006 Poynter Institute study (IWWS pg. 69) found that Web users don’t tend to “read” web pages, they tend to scan for the information they seek or to scan for the key information on a page. Extra text becomes “noise” that distracts users from finding key information.Similarly, online readers are impatient and task-oriented in their reading, offline readers tend to relaxed and passive readers.Some recommend (Erin Anderson from IWWS – pg 70) paragraph lengths no greater than 60 words and headlines at 8 words or fewer. “Each topic or new idea should receive a subhead that alerts the user to what she’ll find in that section if she decides to read further.”
- Usability.gov suggests avoiding paragraph text if possible on the home page.(need to select “poor example” to see the page above once going to the url linked to the screenshot).Because of the lack of text (i.e. no paragraphs), and the way key topic areas are highlighted (via top horizontal menu and headers in body of page), the various topics are more visible – according to usability.gov. (Show menu items with pointer – still seems like a rather busy page).
- As opposed the colorado.gov site, I prefer the organization of topics on this site – although there is still a lot of information. Still – it’s organized more effectively.
- (Return to ATLAS page)Demonstrate Juicy Color contrast analyzer on ATLAS page.Explain report.Demonstrate achecker for color contrast (didn’t catch these errors for me when I tried)Show them Paciello Color Contrast Analyzer for ATLAS page – good tool for direct feedback on particular text.(Now have them go out and check a couple of pages – they can choose their own – or I can suggest some sites)disabilityservices.colorado.eduColorado.edu(Have them report back to me what they find)
- (Return to ATLAS page)I mentioned in my previous chart about “user control.” The enlargement of text on the screen if one of the most important customizations to allow the user. You should be able to enlarge text on a page up to 200% without losing reading clarity (without overlapping) and without requiring horizontal scrolling.(Show example from “bad” page). (Then shows them what happens on ATLAS page).Show them overall text enlargement – discuss the difference(Have them find pages to check)(Have them report back to me what they find)
- (Go through slide first)Then be prepared to discuss how the site you looked at meets or does not meet the criteria we’ve talked about today. Can limit yourself to one criteria or to more than one.
- Mention Fitjutsu – Web Accessibility InspectorShow 10 evaluation tools page
- Mention breakfast meeting
- Show handouts page – mention can buy audio