Accessible web applications

meet.JS Accessible web applicationsWojtek ZajacKRAKÓW, 31.07.2011

Why accessibility? A little story meet.JS

I got into web accessibility in 2005 meet.JS

I got into web accessibility in 2005✦ The first (?) online course of the Polish Sign Language✦ Tremendous feedback. Requests for help (we weren’t in position) meet.JS

The awareness of webaccessibility is still very low. Why is it overlooked so often? meet.JS

Benefits of web accessibility ✦ About 15% (5 mln) of total population in Poland live with some kind of disability¹ ✦ The average age of web users increases every year ✦ Good for not proficient language users ✦ Meets legal requirements ✦ Everyone benefits! (think slower connections)¹ http://www.niepelnosprawni.pl/files/www.niepelnosprawni.pl/public/rozne_pliki/fakty_i_mity_2009.pdf meet.JS

Benefits of web accessibility✦ Strong overlap with: mobile web http://www.w3.org/TR/mwbp-wcag/ Progressive enhancement enhances mobile browsing experience greatly.✦ Strong overlap with: SEO Accessible websites are more likely to rank high. If you use proper headings, good titles, and accessible, well-structured markup, search engines will treat you better. meet.JS

Please spread the word to yourcompany, colleagues, client or school. meet.JS

Types of disability

Visual Hearing Motor CognitiveUser groups:✦ Blind✦ Partial vision loss (tunnel vision, cataracts, haziness etc.)✦ Color blindness (8% of males can’t differentiate green and red) meet.JS

Visual Hearing Motor CognitiveDon’t rely on subtle details, choose contrast or changedappearance instead. http://contrastrebellion.com/ meet.JS

Visual Hearing Motor Cognitive Red–green colorblindnessHard to differentiate:Better version: meet.JS

Visual Hearing Motor CognitiveVideo transcription (closed captioning) benefits not just thosewith hearing impairments.✦ Some users choose to disable sound (at the office, using a mobile device)✦ Content becomes parsable by search robots✦ Quoting abilities, in-video search etc. meet.JS

Visual Hearing Motor CognitiveMotor impaired can find using keyboard or mouse problematic.Alternative inputs can have different range of complexity, most frequentbeing different types “switches”.How to help:✦ Provide focus states for links (dangers of outline: 0)✦ Make sure content and focus order is logical.✦ Avoid relying on mouse or multitouch events. meet.JS

Visual Hearing Motor CognitiveCognitive problems occur to older users and those with worse level ofdocument language used.✦ Increase readability of the text✦ Use large headlines and clear instructions✦ Use descriptive link text✦ Increase target area of navigation links meet.JS

Good practices

Correct alternative content More: http://webaim.org/techniques/alttext/ meet.JS

Proper link text 2.4.4 Link Purpose (In Context): The purpose of each link can be determined from the link text alone or from the link text together with its programmatically determined link context, except where the purpose of the link would be ambiguous to users in general. (Level A) ~ WCAG 2.0 http://www.w3.org/TR/2008/REC-WCAG20-20081211/ #navigation-mechanisms-refs meet.JS

Proper link text H idde n us p o si t io ni i ng <dl> ng o f f-s c <dt>Winnie the Pooh </dt> re e n <dd><a href="winnie_the_pooh.html"> <span>Winnie the Pooh </span>HTML</a></dd> <dd><a href="winnie_the_pooh.pdf"> <span>Winnie the Pooh </span>PDF</a></dd> <dt>War and Peace</dt> <dd><a href="war_and_peace.html"> <span>War and Peace </span>HTML</a></dd> <dd><a href="war_and_peace.pdf"> <span>War and Peace </span>PDF</a></dd> </dl> meet.JS

Accessible forms ✦ Label your inputs ✦ Check the tab order ✦ Group form elements ✦ Make sure it’s JS independent <fieldset> <legend>Select your pizza toppings:</legend> <input id="ham" type="checkbox" name="toppings" value="ham" /> <label for="ham">Ham</label><br /> <input id="pepperoni" type="checkbox" name="toppings" value="pepperoni" /> <label for="pepperoni">Pepperoni</label><br /> <input id="mushrooms" type="checkbox" name="toppings" value="mushrooms" /> <label for="mushrooms">Mushrooms</label><br /> <input id="olives" type="checkbox" name="toppings" value="olives" /> <label for="olives">Olives</label> </fieldset> More: http://webaim.org/techniques/forms/ meet.JS

UsingWAI-ARIA

WAI-ARIA Landmark Roles Landmark HTML 5 element role=”application” none role=”banner” none role=”complementary” <aside> role=”contentinfo” <footer> role=”main” none role=”navigation” <nav> role=”search” none ~ The Paciello Group meet.JS

1. Start with POSH meet.JS

1. Start with POSH POSH: Plain Old Semantic HTML meet.JS

1. Start with POSH2. Order DOM content logically Viewing bbc.co.uk with CSS disabled meet.JS

1. Start with POSH2. Order DOM content logically3. Make sure forms are accessible Firebug view of the grouped form fields meet.JS

1. Start with POSH2. Order DOM content <!-‐-‐ Natural tab order -‐-‐> <div onclick="" tabindex="0">Clicky 1</div> logically <!-‐-‐ Custom tab order -‐-‐>3. Make sure forms are <div onclick="" tabindex="7">Clicky 2</div> accessible <!-‐-‐ Focusable but not in tab order -‐-‐> <div onclick="" tabindex="-‐1">Clicky 3</div>4. Manage focus Creating Accessible Interactive Web Apps using HTML5 meet.JS

1. Start with POSH2. Order DOM content logically <li role="menuitemcheckbox" aria-‐checked="true"> Sort by Last Modified </li>3. Make sure forms are accessible [aria-‐checked="true"] { font-‐weight: bold; } [aria-‐checked="true"]:before { background-‐image: url(checked.gif); }4. Manage focus Using WAI-ARIA: 2.2 States and Properties5. Add ARIA for screen readers meet.JS

ARIA Live Regions✦ Assistive Technology users are notified when the content changes✦ Mark up the parts that are likely to change with Live Regions <span class=saving aria-‐live=polite>Saving...</span> meet.JS

Plugins, extensions

Check headings architecture Disable imagesWeb Developer Toolbar http://goo.gl/J5afH meet.JS

Investigate problems: No anchor textNo h e ading s No a l t te x t S ubm i t n o t be i ng re ad o u t Fangs http://goo.gl/hHOOB meet.JS

Links with no anchor text Recurring “Read more” linksAccessibility Evaluation Toolbar http://goo.gl/pgdDK meet.JS

Further reading ✦ http://webaxe.blogspot.com/2011/05/ accessibility-twitter-lists.html ✦ http://twitter.com/a11y ✦ http://webaim.org/ ✦ http://www.rnib.org.uk/ ✦ http://html5accessibility.com/Web Accessibility: Web Standardsand Regulatory Compliance (2006) meet.JS

Thanks!slideshare.net/wojciechzajacwojtekzajac.comWojtek Zajac (@theanxy) This work is licensed under a Creative Commons Attribution 3.0 Unported License

http://lanyrd.com	7
http://twitter.com	6
https://twitter.com	3
http://tweetedtimes.com	1
http://www.linkedin.com	1

Accessible web applications

by Wojtek Zajac

Accessibility

Categories

Upload Details

Usage Rights

5 Embeds 18

Statistics