Twin Redheaded Stepchildren of a Different Mother: The Usability of Accessibility

Twin Red-Headed Stepchildren of A Different Mother: The Usability of Accessibility Michael Fienen, Pittsburg State UniversityDylan Wilbanks, ex-University of Washington HighEdWeb 2011

Questions, comments,complaints on Twitter: #tnt7

http://www.ﬂickr.com/photos/cronncc/5101603572/

I joined a rapidly growingcloud-based enterprise softwarecompany which I will not name.Hint: It’s called Apptio and we’re hiring like crazy.

Trading hats http://www.ﬂickr.com/photos/87255087@N00/311428426/

I realized usability andaccessibility have a lot of congruencies.

For example•It’s always left for “later” (and “later” sometimes never comes)• People don’t design and develop with either in mind enough•And ignoring either one comes back to bite you in the end

The RedheadedStepchildren of the Web http://www.ﬂickr.com/photos/e3000/6158888518/

Let’s get one thing clear.

Usability != accessibility

The curse of thevegetable peeler

“If only web accessibility had a curb cut or an OXO vegetablepeeler, then people would treatit as important as it should be!”

SURELY THIS

If you sell accessibility as “better SEO,” then you make accessibility about SEO

Let’s resolve to stop chasing peelers.

Usability can help with accessibility

Firehose http://www.ﬂickr.com/photos/joshbousel/264482069/

See our Delicious stack: http://bit.ly/tnt7

Design with usabilityAND accessibility in mind

The earlier you thinkabout accessibility, the less work it is

Early, often

Lay of the Land•Implementation•Veriﬁcation•Evangelization•The Takeaway

Implementation http://www.ﬂickr.com/photos/35188692@N00/2392520183/

So let’s talk about three things

Three things1. Your Templates2. Your Forms3. Your Videos

1. Your Templates

Ask your CMS vendor about accessibility

Dont blindly accept the "garbage in/garbage out" answer

Ask your vendor1. Are ARIA and WCAG checks baked in?2. Can you require things like alt attributes and table summaries?3. Is the CMS backend usable by someone thats blind?

ARIA•For most CMSs you can code in ARIA landmarks from the start•Landmarks are designed to help a screen reader understand the structure of the page (role="navigation", role="main", and role="search")

ARIA is more for futureprooﬁng (support for ARIA is uneven)http://www.accessibleculture.org/articles/2011/04/html5-aria-2011/Text

Many new HTML5 tags are mapped to equivalent roleshttp://www.html5accessibility.com/tests/landmarks.html

Mind your CSS!•color contrast (minimum 4.5:1)•Avoid hiding elements entirely for the sake of accessibility (including skip to content links) (http://www.alistapart.com/articles/now-you-see- me/)•When you use :hover, use :focus too (http://www.456bereastreet.com/archive/201004/ whenever_you_use_hover_also_use_focus/)

Good semantic coding isyour ﬁrst line of defensein both accessibility and usability

2. Your Forms

Show of hands, who here loves making forms?(besides Dylan, but we all knew he was weird.)

Forms are a major point ofinteractivity, and ensuring it’s accessible can be difﬁcult.

Can you use JavaScript and AJAX? Yes!

JavaScript and Accessibility•You can enhance accessibility with JavaScript + AJAX •Text sizing •Input validation•Focus on progressive enhancement

Theres no excuse for a form to break ifJavaScript isnt enabled.

Fields need labels. Good foraccessibility, and just good for users in general. <label for=”fname”>First name</label>

Supplement the HTML5 required property with ARIA: aria-required="true" <input name=”fname” required aria- required=”true”>

3. Your Video

Caption your videos•Captions help more than the deaf •SEO •International users •Normal people too!

Dont rely on machine transcription. Srsly.http://mashable.com/2010/03/05/youtube-caption-fail/

Farm it out instead

Farm it out instead•CastingWords•Transcribr•AutomaticSync•Starting at $1 per minute (its cheaper than a lawsuit)

"Produced" video likely has ascript, which can be the basis for your captions. Youre almost there already!

YouTube resources•Leaning on YouTube means access to good tools •Auto-timing vs machine transcription •Familiar interface•Consistency in caption tool•Keyboard accessible player•All of this INCLUDES lecture capture as well, not just marketing video.

Veriﬁcation http://www.ﬂickr.com/photos/wallyg/3964329905/

Test, test, testQuantitative and qualitative

Do not be afraid to iterate.

“We can’t make itaccessible. There’s justtoo much to change.”

Everest is not a day hike.

Tools•See the Delicious stack: http://bit.ly/tnt7•Not all accessibility guidelines can be veriﬁed through automated scanning

Do you have anaccessible technology lab on campus?

Find it. Make friendswith the facilitators and users.

“Do usability testing withpeople with disabilities.” -- Jared Smithhttp://webaim.org/blog/accessibility-user-testing/

The principles of Rocket Surgery can be appliedeasily to accessibility testing.

Nothing is more powerfulthan watching someone FAIL using something you built.

If all else fails, try the Rough Threefold Test

Rough Threefold Test1. Check for colorblindness issues • In Photoshop CS5 you can easily show how an image looks to people with color blindness (http://www.adobe.com/accessibility/products/photoshop/ overview.html) • Alternatively, use the aforementioned color tests • Or ﬁnd someone in your ofﬁce with color blindness -- 7-10% of all men

Rough Threefold Test2. The Keyboard Test • Rip out your mouse • Try using the site without it (tab keys and arrows) • Shake your head in shame

Rough Threefold Test3. The Voice Browser Test •http://www.iheni.com/quick-tip-testing-web-content-for- Good: Henny Swan’s tricks screen-readers-without-a-screen-reader/ •Better: Fangs plugin for Firefox, Firevox •Best: NVDA (free open source voice browser) + VoiceOver (baked into OS X)

Evangelization http://www.ﬂickr.com/photos/mulmatsherm/2221223106/

Preach to the congregation, teach the elders

Down•Depends on your organizational structure•Think of it like any other tool you want to get them to use

It can be tough to get buy infrom people that have limited technical web experience

People with limited tech knowledge•Know their limitations•Address it in chunks they can process

Sometimes people see the importance, but stilllack implementation skills

Teach techniques as just "part of the process," dont break it out like its something different or extra

Be prepared to do it for them, but use that as an opportunity,dont view it like taking on extra work

Up•Four gambits: •Legal •Good PR •Enrollment •IT

The Legal Gambit•Legal is the easy option •Not great for leverage though (unfortunately) •NFB vs Penn State •Dont approach it like a threat

Proactive work looksway better than reactive

Building Code http://www.ﬂickr.com/photos/ckindel/5432155787/

The Good PR Gambit•Works well if your web office is in this office•Announcing accessibility compliance can be a good buzz generator•Schools like being the first at something or comparing to other region/competitor schools

The Enrollment Gambit•First demonstrate some success with smaller projects•Make the case for better usability/ accessibility meaning better tools that can impact applications/enrollment

The IT Gambit•Approach it like a deliverable•Outline the speciﬁc requirements you expect to see met•Be sure youre talking to the right people, programmers shouldnt relay requirements to the UI people.

In general•Makes more sense to address the issue from the top down•Harder to ﬁx it after the fact•Less efﬁcient to "just launch what we have and go back and make it better later"

Frame the issue as being all about the experienceyour users have on the site

Give people with disabilitiestheir own voice, and they will give voice to your site’s accessibility problems

The Takeaway

The takeaway•Bake in accessibility early and often•Grill your CMS vendors on accessibility early and often•Test and assess early and often•Push the case for accessibility early and often•LISTEN to people with disabilities early and often

Accessibility isn’t easy

Matt May Accessibility Evangelist Adobehttp://www.ﬂickr.com/photos/stewtopia/2280080016/

Here’s the thing: quite often,accessibility work is time-consuming,expensive and very technical.Especially to someone who doesn’tknow all they need to know aboutit, or someone who went too fardown the wrong path beforeaccessibility was called to his or herattention. http://www.bestkungfu.com/archive/date/2011/01/accessibility-myth-myths/

Early, often

Just like usability

Stay simple, don’t be afraid to iterate

You will get it wrong(repeatedly). Just keep iterating.

It’s about people.Listen to your users with disabilities.

One more thing...

Usability != accessibility

Excellent peeler

Excellent peeler An ergonomic grip perfect for people with arthritis

Universal Design

Universal design meansbuilding with everyone in mind

Usability and accessibility come together in universal design.

http://www.slideshare.net/wendyabc/inclusive-universe-2010 Stairsmake a building inaccessible not a wheelchair

http://www.ﬂickr.com/photos/casaschmidt/357913407/

http://www.ﬂickr.com/photos/teamlane/5900499333/

http://www.ﬂickr.com/photos/dougtone/6015139932/

http://www.ﬂickr.com/photos/dougtone/6015129404/

http://www.ﬂickr.com/photos/rosasay/6101284990/

http://www.ﬂickr.com/photos/lisastown/3459474012/

One web for everyone

Thank you

Contact usMichael Email: michael@nucloud.com Web: ﬁenen.com Twitter: @ﬁenenDylan Email: wnalyd@gmail.com Web: dylanwilbanks.com Twitter: @dylanw Thanks to @ericstoller for the inspiration

http://lanyrd.com	7
http://a0.twimg.com	2
http://www.linkedin.com	2
http://paper.li	1

Twin Redheaded Stepchildren of a Different Mother: The Usability of Accessibility

by Dylan Wilbanks on Oct 25, 2011

Accessibility

Categories

Upload Details

Usage Rights

4 Embeds 12

Statistics

Twin Redheaded Stepchildren of a Different Mother: The Usability of Accessibility Presentation Transcript