Web accessibility workshop 2

Web Accessibility WorkshopSession Two

Vladimir Tomberg, PhDTallinn University

2Web Accessibility Workshop

“The power of the web is in its universality. Access by everyone regardless of disability is an essential aspect”

Tim Berners-LeeFounder of the World Wide WebDirector of W3C

3

Today Workshop

1. Presentation of the homework;2. Framework for Accessible Web (continued);3. Responsiveness exercise;4. Discussion;5. How to design accessible Web applications?6. WCAG Requirements7. WAVE Toolbar Demo

Web Accessibility Workshop


1. PRESENTATION OF HOMEWORKPlease be prepared to present your experience!

5

2. FRAMEWORK FOR ACCESSIBLE WEB(CONTINUED)

Principles for Accessible UX


6

Principles for Accessible UX as a Framework for Web Accessibility

1. People first2. Clear purpose3. Solid structure4. Easy interaction5. Helpful wayfinding6. Clean presentation7. Plain language8. Accessible media9. Universal usability

http://goo.gl/Zl9bL3 Web Accessibility Workshop

http://goo.gl/Zl9bL3


6. CLEAN PRESENTATIONSupports Meaning


Clean Presentation

• A clean presentation enhances the usability of the site for everyone by designing the visual layout and typography for easy perception;

• However, to ensure that the presentation is accessible for the wide variety of visual disabilities, the site must also be designed to allow users to customize the look, either through the browser or through controls built into the site


Presentation of Information

People can perceive and understand elements in the design

Image source: http://www.consumerreports.org

http://www.consumerreports.org/health/best-buy-drugs/prescription-labels/bottle-pictures/index.htm


Flexible Presentation Allows for User Needs & Preferences

Source: http://www.csszengarden.com/

http://www.csszengarden.com/

http://www.csszengarden.com/


Design Simply

• Simple designs are stable and coherent;• Consistent designs are easier to use because,

once learned, the interaction model can be applied throughout the product;

• Design conventions can help with usability because we all know how they work;

• Design patterns are also helpful


Complexity VS Simplicity

Image Source: http://habrahabr.ru

http://habrahabr.ru/




Example: Phone App

Image Source: http://behance.net

http://www.behance.net/gallery/Misfit-Shine-Weather-conditions/9736507



Example: Phone App





Example: Web Page


http://www.behance.net/gallery/Kozachok-online-food-shop/5735179

http://www.behance.net/gallery/Kozachok-online-food-shop/5735179


Example: Web Page

Source: http://www.brooksengland.com

http://www.brooksengland.com/cambium/

http://www.brooksengland.com/cambium/


Example: Web Page

Source: http://www.apple.com

http://www.apple.com/ipad-air/

http://www.apple.com/ipad-air/


18

Design for Customization of the Display

Readability removes everything on the page except the main content so that readers are not distracted

Source: https://www.readability.com/

https://www.readability.com/

https://www.readability.com/


Design Responsive Layouts


Robust Principle (POUR)

Universal Design

Responsive Design

Accessibility Standards

20

Hardware People

Robust: Content must be robust enough that it can be interpreted reliably by a wide variety of user agents, including assistive technologies.


21

3 главных компонента.

flexible, grid-based layout

flexible imagesflexible video

added to CSS3 specifications


Flying Grid – One Content on Different Layout


Sample Grid

Source: http://aaronkwhite.com

http://aaronkwhite.com/2012/artwork/bootstrap-illustrator-template/




Popular Grid Frameworks

Skeleton

Twitter Bootstrap

LESS


Defining Flexible Fonts

body {font-size: 100% /* 16px */}

h1 {font-size: 1.5em

/* 24px / 16px */ }


Scaling Fonts in Browser


Em Font Size

• “Ems” (em): The “em” is a scalable unit that is used in web document media.

• An em is equal to the current font-size, for instance, if the font-size of the document is 12pt, 1em is equal to 12pt.

• Ems are scalable in nature, so 2em would equal 24pt, .5em would equal 6pt, etc.

Source http://kyleschaeffer.com

http://kyleschaeffer.com/development/css-font-size-em-vs-px-vs-pt-vs/

http://kyleschaeffer.com/development/css-font-size-em-vs-px-vs-pt-vs/


Flexible Media

img {max-width: 100%;}

• This rule allows our image to size to it's maximum size, or the width of the containing element... Which ever comes first


Flexible Media


Media Query

Media Queries is a CSS3 module allowing content rendering to adapt to conditions such as screen resolution (e.g. smartphone vs. high definition screen

Source http://www.downgraf.com

http://www.downgraf.com/all-articles/what-makes-a-website-design-more-responsive/




Media Query Operators

@media (min-width: 700px) { ... }

@media (min-width: 700px) and (orientation: landscape) { ... }

@media (min-width: 700px), handheld and (orientation: landscape) { ... }

Source https://developer.mozilla.org

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries


Embedding Media Query

 <link rel="stylesheet" media="(max-width: 800px)"

href="example.css" />

<style> @media (max-width: 600px) { .facet_sidebar { display: none; } } </style>

Source https://developer.mozilla.org

33

Live Examples http://mediaqueri.es

http://mediaqueri.es/


34

RWD Testing Tools

Viewport Resizer and Responsive Design Bookmarklet

http://lab.maltewassermann.com/viewport-resizer/ http://responsive.victorcoulon.fr/

http://lab.maltewassermann.com/viewport-resizer/

http://responsive.victorcoulon.fr/


3. Responsiveness Exercise

• Select the web sites that you tested on previous workshop and test them on responsiveness;

• Report back to us: What are results? Which features are implemented well? What doesn’t work?

• About 15 minutes for testing and about 20 minutes to report


Recommended Reading


Adaptive VS ResponsiveWeb Design


Structure Content First

Picture Source http://blog.braintraffic.com

http://blog.braintraffic.com/2012/03/an-intro-to-metadata-and-taxonomies/




Structure Content First

• Recommended Webcast http://www.slideshare.net/stephenhay/structured-content-first

Picture Source http://blog.braintraffic.com

http://www.slideshare.net/stephenhay/structured-content-first







Poorly Structured Content

http://www.telegraaf.nl/

http://www.telegraaf.nl/


41

Information Architecture

•Navigation as articulated in a Sitemap,

•Hierarchy of information,

•On page layouts,•Organizing the content

into a user centric structure,

•Creating and plotting the user/visitor journey


User Journey Example #1

Image Source: http://www.servicedesigntools.org

http://www.servicedesigntools.org/tools/8




User Journey Example #2

Image Source: http://mobile.bazaarvoice.com

http://mobile.bazaarvoice.com/uxdd/handbook.php?article=experience-map




Site Maps

Image Source: http://fostermilo.com

http://fostermilo.com/images/creativeabqia.png/image_view_fullscreen




Start with Mobile

If you can support the mobile web, you can support anything


Mobile First

Source http://bradfrostweb.com

http://bradfrostweb.com/blog/web/mobile-first-responsive-web-design/




4.12.2014 – the day Google predicts mobile queries will reach 50%

Source http://www.themobilewebtrends.com

http://www.themobilewebtrends.com/2014/03/4-december-2014-day-google-predicts.html




Mobile-Oriented Design and Input Changes

Source http://blog.cloudfour.com

http://blog.cloudfour.com/responsive-design-for-apps-part-1/




Mobile-Oriented Design and Input Changes






Comfortable Touch Zones






Recommended Books


7. PLAIN LANGUAGECreates a Conversation


Plain Language

• Plain language involves accessibility for content, helping everyone read more accurately and efficiently;

• Writing in plain language does not mean “dumbing down” the information. It means writing for the audience, using words and concepts they will understand


Medicare Summary Notice

Source: CMS.gov

http://cms.gov/appS/fileS/MSN_ChaNgeS.pdf


Plain Language: Creates a Conversation

People can read, understand, and use the information


Source http://nces.ed.gov

• Below basic - only the most simple and concrete reading skills

• Basic - able to manage everyday tasks

People Read with Different Levels of Literacy

• Intermediate - moderately challenging activities like consulting reference material

• Proficient - interpreting text, comparing viewpoints

http://nces.ed.gov/naal/


Support Different Reading Styles and Perception►


8. ACCESSIBLE MEDIASupports All Senses


Supports all Senses

People can understand and use information contained in media, such as images, audio, video, animation, and presentations


Accessible Media

• Creating accessible media requires alternatives, so that the media content supports all the senses. It is the one type of content where a single version is not enough;

• Types of alternatives include: descriptions of images (called alt text); captions for video files; transcripts for audio files; descriptions of any other non-text content that is not

communicated in any other way


Meaningful Alternatives for Visual Information

What’s the right ALT text for this image?


Synchronized audio+text

Graham Pullen, author of Design Meets Disability

Source: http://research.microsoft.com

http://research.microsoft.com/apps/video/default.aspx?id=103405


9. UNIVERSAL USABILITYCreates Delight


Universal Usability

• Although it’s important to meet basic guidelines for accessibility, our goal is much more inclusive: to create a good user experience for everyone, including people with disabilities


9. Universal Usability

People can focus on the experience and their own goals because the product anticipates their needs


4. DISCUSSION

67

1. Which Principles for Accessible UX you knew before? How well?



Image source: http://www.theartimes.com

http://www.theartimes.com/start-up-guide-to-design-responsive-websites/



68

2. How do you use these principles in your design works?



Image source: http://www.theartimes.com





5. HOW TO DESIGN ACCESSIBLE WEB APPLICATIONS?

Web Accessibility for Designers by WebAIM (Web Accessibility In Mind)


70

Web Accessibility for DesignersGuides and infographics on:http://webaim.org/resources/designers/

http://webaim.org/resources/designers/




Plan Heading Structure Early

• Pages should be structured in a hierarchical manner;

• Lower degree headings should be contained within headings of the next highest degree;


Using Headings Correctly

• Do not use text formatting, such as font size or bold to give the visual appearance of headings - use actual heading (<h1> - <h6>) for all content headings;

• Likewise, do not use headers to achieve visual results only;

• Use the <strong> element instead of <bold> and the <em> element instead of <i>


Using Lists Correctly

• HTML lists - <ul>, <ol>, and <dl> - also convey a hierarchical content structure

<ul> <li>Coffee</li> <li>Tea</li> <li>Milk</li></ul>


Consider Reading Order

• Audio interfaces present content linearly to users, one item at a time;

• Skimming Through Content using: Links; Headings; WAI ARIA landmarks and page sections

(<main>,<nav>, <header>, etc); Paragraphs and page elements like <div>; Other (tables, lists, buttons, forms, links, images, etc.)


Provide Good Contrast

• Be especially careful with light shades of gray, orange, and yellow;

• Grey text is almost not visible on yellow background and there are thousands of such combinations


Provide Good Contrast

• Check your contrast levels with color contrast checker;

• Level AA requires a contrast ratio of 4.5:1 for normal text and 3:1 for large text.

• Level AAA requires a contrast ratio of 7:1 for normal text and 4.5:1 for large text.

Color checker: http://webaim.org/resources/contrastchecker/

http://webaim.org/resources/contrastchecker/

http://webaim.org/resources/contrastchecker/


Use Alternative Text for Images

• Adding alternative text to images is one of the easiest accessibility principles to learn and one of the hardest to master;

• Alternative text may be provided in the alt attribute or in the surrounding context of the image;

• Every image must have an alt attribute;



• Alternative text should: presents the CONTENT and FUNCTION of the

image. be short

• Decorative images still need an alt attribute, but it should be null (alt="").



• Alternative text should not:– be redundant (be the

same as adjacent or body text);

– use the phrases "image of…" or "graphic of…"


Watch the Use of CAPS

• ALL CAPS CAN BE DIFFICULT TO READ AND CAN BE READ INCORRECTLY;

• Screen reader software will sometimes spell out words that are in all caps, rather than reading them


Use Adequate Font Size

Font size can vary based on the font chosen, but 10 point is usually a minimum


Remember Line Length

• Don't make it too long or too short;

• Web article: Yvette Shen. Line Length

http://smad.jmu.edu/shen/webtype/linelength.html




Make Sure Links are Recognizable

• Differentiate links in the body of the page with underlines or something other than color alone

http://webaim.org/techniques/hypertext/


Use Tabindex

• The tabindex attribute allows you to define logical tabbing order although if the HTML is linear

<ul> <li><a href="here.html“ tabindex="1"> Here </a></li> <li><a href="there.html" tabindex="3"> There </a></li> <li><a href="limbo.html" tabindex="2"> Limbo </a></li>

</ul>


Link titles

• If you have a link that isn’t self-descriptive, you can add information to the link using the title attribute

<p>I'm really bad at writing link text. <a href= "inept.html" title="Why I'm rubbish at writing link text: An explanation and an apology.">Click here</a>

to find out more.</p>


Accesskeys

• Access keys allow easier navigation by assigning a keyboard shortcut to a link (which will usually gain focus when the user presses “Alt” or “Ctrl” + the access key)

<a href="somepage.html" accesskey="s">Some page</a>


• Ensure keyboard users can visually identify a focused link;

• Use the standard dotted line or other non-color designators

Design Link Focus Indicators


Design a "Skip to Main Content" Link

• Examples:– Skip navigation– Skip main navigation– Skip navigation links– Skip to main content– Skip to content

<body><a href= "#maincontent"> Skip to main content </a> ...<main id="maincontent"><h1>Heading</h1><p> This is the first paragraph </p>


Ensure Link Text Makes Sense on Its Own

• Avoid "Click Here" in link text;

• Other ambiguous links, such as "More" or "Continue", can also be confusing




Use Animation, Video, and Audio Carefully

• If used, provide a play/pause button;

• Avoid flashing or strobing content: It can cause seizures


Don't Rely on Color Alone

Because users often can't distinguish or may override page colors, color cannot be the only way information is conveyed

Image and other examples: http://blog.templatemonster.com

http://blog.templatemonster.com/2012/03/21/designing-colorblind-friendly-website/?utm_campaign=Mass+TM+Newsletter+2012-03-21&utm_medium=email&utm_source=douglas%40pxmediainc.com





Design Accessible Form Controls

• Ensure Forms are Logical and Easy to Use;• Ensure Forms are Keyboard Accessible;• Associate Form Labels with Controls


Why all this Effort?─ There is no reason for building websites like this: it is not difficult to do it

right. But even well-meaning website builders ask: How can I justify the

extra cost for such a small percentage of the public?

─ And the answer is: Google. Looking at my website logs, it is clear that at

least half of the visitors find the sites via Google. And what Google sees is

exactly what a blind person sees.

Google is a blind user; a billionaire blind user, with millions of friends who

listen to his every word. If a blind user can't see your site, neither can

Google, and your site will suffer.

(Steven Pemberton, The Kiss of the Spiderbot, Interactions, 2003)


6. WCAG REQUIREMENTSHow to make content to be conformed to WCAG?


Principles of WCAG 2.0 (to remind)

• Perceivable: Information and user interface components must be presentable to users in ways they can perceive. This means that users must be able to perceive the information being presented (it

can't be invisible to all of their senses)• Operable: User interface components and navigation must be operable.

This means that users must be able to operate the interface (the interface cannot require interaction that a user cannot perform)

• Understandable: Information and the operation of user interface must be understandable. This means that users must be able to understand the information as well as the

operation of the user interface (the content or operation cannot be beyond their understanding)

• Robust: Content must be robust enough that it can be interpreted reliably by a wide variety of user agents, including assistive technologies. This means that users must be able to access the content as technologies advance (as

technologies and user agents evolve, the content should remain accessible)

How to achieve the WCAG 2.0 principles?

Structure of WCAG 2.0• Principles – Top 4 principles

• Guidelines – 12 guidelines provide the basic goals.

• Success criteria – For each guideline, testable success criteria are provided.

• Levels of conformance – Three levels of conformance are defined: A (lowest), AA, and AAA (highest)

• Sufficient and advisory techniques – An informative list of typical mistakes and good-practice techniques is provided. Techniques fall into two categories: those that are sufficient for meeting the success criteria, and those that are advisory.

• Common Failures – which describe authoring practices known to cause Web content not to conform to WCAG 2.0


Source: http://www.w3.org

Levels of Conformance

• Level A: For Level A conformance (the minimum level of conformance), the Web page satisfies all the Level A Success Criteria, or a conforming alternate version is provided.

• Level AA: For Level AA conformance, the Web page satisfies all the Level A and Level AA Success Criteria, or a Level AA conforming alternate version is provided.

• Level AAA: For Level AAA conformance, the Web page satisfies all the Level A, Level AA and Level AAA Success Criteria, or a Level AAA conforming alternate version is provided


http://www.w3.org/TR/2008/PR-WCAG20-20081103/




Library Ramp Analogy

Sourse: http://acc.nics.gov.uk

http://acc.nics.gov.uk/comprehensive/intro/accessibilityprimer_4.html




Five requirements to be classified as 'conforming' to WCAG 2.0.

• Conformance level – one of the Success Criteria conformance levels is fully met;

• Full pages – conformance is for full web pages only and can’t exclude parts of the page;

• Complete processes – when a web page is part of a continuous process, all pages in the process must conform at the specified level;

• Accessibility supported ways of using of technologies – only accessibility supported uses are relied on to meet the Success Criteria;

• Non-interference - technologies that are not accessibility supported, or used in a non-conforming way, do not block the ability of users to access the rest of the page


What is a typical Evaluation process?

Compliance criteria

Scope

Automatic Tests

Expert Tests

Results Results

User Tests

Results

Aggregated report

Solving issues



7. WAVE TOOLBAR DEMOSemiautomatic Testing


WAVE Toolbar

http://wave.webaim.org/toolbar/

http://wave.webaim.org/toolbar/


Errors, Features, Alerts


Comprehensive Report


Homework Assignment 2 (a)

A. Preparation for the next session:Remember Empathy exercise from the 1-st workshop. Some of you had troubles to implement some specific tasks by using keyboard. Try to find keyboard shortcuts that work. Use Browser documentation, manuals and search. Describe these solutions in your blog;


Homework Assignment 2 (b)

B. Install WAVE toolbar and test 2-3 representative pages that you have from the previous homework;

C. Save copies of the source code of these pages on a local hard disk;

D. Correct the code to repair errors;E. Test the repaired code automatically and semi-

automatically again and describe this experience in your blog

Web accessibility workshop 2

Education

Transcript of Web accessibility workshop 2