Slides from Global Accessibility Awareness Day 2015

The Paciello Group is holding a full day of free webinars on Global Accessibility Awareness Day. That's 24 straight hours of talks, which started at midnight (GMT) on Wednesday, May 20 through through midnight (still GMT) on Thursday, May 21. I was fortunate enough to participate as a speaker and had the third slot in the queue.

As promised, I posted my slides. All the links I referenced are embedded within.

Tweets!

I'm pleased to see there was tweet activity during (and about) my talk. I've captured many of them below.

In his Selfish Accessibility talk @aardrian is giving us figures about disability in the US It's just impressive #a11y #ID24

— Arthur Rigaud (@arigaud_ca) May 21, 2015

Learning how to be selfish for #ID24 https://t.co/mvaJjr2y4N

— Nicholas Spragg (@gridsat) May 21, 2015

Props to @aardrian for mentioning Cooper's Hill cheese rolling in his #ID24 #GAAD talk http://t.co/J2whsMYovq http://t.co/kkKtlPZbJy

— Léonie Watson (@LeonieWatson) May 21, 2015

If you just think to all that users with disabilities in terms of market share, you just can't say "I don't care" (1/2) #ID24 #a11y

— Arthur Rigaud (@arigaud_ca) May 21, 2015

Unless you want to kill your business (which can be an option) (2/2) #a11y #ID24 #SelfishAccessibility @aardrian

— Arthur Rigaud (@arigaud_ca) May 21, 2015

"Accessibility is not a checklist" +1 to @aardrian #ID24 #GAAD http://t.co/kkKtlPZbJy

— Léonie Watson (@LeonieWatson) May 21, 2015

I like @aardrian giving us examples from @vavroom a Pharmacy ramp closed because of snow and Vancouver Robson Square stairs #a11y #ID24

— Arthur Rigaud (@arigaud_ca) May 21, 2015

Windows High Contrast Mode "The Red Headed Stepchild of #Accessibility" LOL ;) @aardrian #ID24 #GAAD pic.twitter.com/T6daa2eP09

— Paul J. Adam (@pauljadam) May 21, 2015

.@aardrian on links: Don't "Click here" or "More info", don't include URLs or emoticons, just keep them simple & helpful #ID24 #GAAD

— Léonie Watson (@LeonieWatson) May 21, 2015

"Use the right HTML element, don't throw ARIA roles on the wrong elements" @aardrian #ID24 #GAAD http://t.co/L2SKUfs1jW

— The Paciello Group (@paciellogroup) May 21, 2015

#GAAD comes early (in the US). @aardrian is being Selfish about #Accessibility http://t.co/QBmdIqKxbg #a11y #id24

— Dennis Deacon (@deconspray) May 21, 2015

Enjoyed half-listening with to @aardrian while reviewing the webpage to accompany our accessibility tips film - covered similar ground :-)

— Fix the Web project (@FixtheWeb) May 21, 2015

Selfish Accessibility at Buffalo Unconference

Yesterday I presented a stripped-down version of my Selfish Accessibility talk at Buffalo Unconference. With an unknown audience and a 20 minute timeline, I gutted most of the technical bits and focused on my thesis. I think it was well received.

At the end of the talk, I pointed people to the version of this talk I gave for Avega Group last month in Stockholm, as it has (many more) slides (with more detail) and video of me rambling. That longer talk is a bit of a disservice to those who don't want to hear me drone on for an hour and a half as well for those who aren't technical.

With that, here are the slides from yesterday in all their concise glory.

The conference produced just one tweet to satisfy my ego:

Great shot of how excited @aardrian was for his talk on #accessibility in design @BufUnconf #BufUnconf pic.twitter.com/vVQTpunpsX

— Peter J. Cimino (@peterjcimino) April 19, 2015

Slides: Selfish Accessibility for Avega Group

The slides and video from my talk (a little background).

ACE! Conference Slides: Selfish Accessibility

In addition to the slides, I've embedded video of my talk and way too many tweets after that.

Video

Impressing everyone on the internet, Paul Klipp has already gotten videos from ACE! posted less than 24 hours after the event ended. That's impressive. I understand his tactic is to upload lower resolution videos immediately and then slowly replace them with higher resolution videos. Depending on when you see this, it may still be the low-res video.

Tweets

Tweets from ACE! that satisfy my ego, show me in a photo, or might be funny.

It's all about trust. RT @aardrian: Speaker prep with @lissijean at #aceconf. pic.twitter.com/xUMU2aaFbM

— Gil Zilberfeld (@gil_zilberfeld) March 16, 2015

Starting the day with @Kel_Moran @zuzuzka @aardrian and @mattlangholz #aceconf pic.twitter.com/0SN3fOdZx7

— Gil Zilberfeld (@gil_zilberfeld) March 16, 2015

.@gil_zilberfeld @aardrian I found the projector for #aceconf pic.twitter.com/f4NX07edmw

— Melissa Perri (@lissijean) March 16, 2015

@aardrian is about to start his talk about selfish accessibility. Making software accessible for people with disabilities is very important.

— Adam Boczek (@nativeagile) March 16, 2015

Now with @aardrian 'Selfish Accessibility' #aceconf pic.twitter.com/mNu7rpOrxX

— Gil Zilberfeld (@gil_zilberfeld) March 16, 2015

Developers were doing better caring for users with some kind of impairment if they tried to put themselves in that position. #aceconf

— Andy Brandt (@andybrandt) March 16, 2015

An interesting take on "situational disability", like being a keyboard user when eating with your mouse hand. @aardrian #aceconf #acecon

— Andy Brandt (@andybrandt) March 16, 2015

Be selfish: write software for the future, maybe injured, maybe encumbered you. #aceconf @aardrian

— Gil Zilberfeld (@gil_zilberfeld) March 16, 2015

"Selfish #a11y" by @aardrian at @aceconf pic.twitter.com/Xu096Tad0Q

— Grzegorz Rożniecki (@xaerxess) March 16, 2015

"users do not report what they are actually doing" @aardrian (hence user observation so important) #aceconf #acecon

— Andy Brandt (@andybrandt) March 16, 2015

Very interesting talk by @aardrian about software and disabilities and how to test it in this context. #acecon pic.twitter.com/tzwaRmw2Tx

— Adam Boczek (@nativeagile) March 16, 2015

@aardrian Great tip - I will start stealing colleagues's mice in the interest of accessibility. #aceconf

— Kelly Moran (@Kel_Moran) March 16, 2015

Eating out #aceconf with @nativeagile and @mattlangholz pic.twitter.com/K3CdKcjQuu

— Gil Zilberfeld (@gil_zilberfeld) March 16, 2015

Todays speakers pitching their talk for clarity. An agile conference being agile after feedback, brilliant! #aceconf pic.twitter.com/pkLqZUjrCk

— vince baskerville (@whoisvince) March 17, 2015

"Be the Placebo" via @aardrian #aceconf

— Gil Zilberfeld (@gil_zilberfeld) March 17, 2015

3 out 3 speakers now agree: "The mic tried to crawl into my mouth". #aceconf

— Gil Zilberfeld (@gil_zilberfeld) March 17, 2015

Thanks @paulklipp for an awesome #aceconf! You are the calmest conference organizer I have ever met and everything was great!!

— Melissa Perri (@lissijean) March 17, 2015

Last night out with the speakers at #aceconf @RisingLinda @paulklipp @aardrian @gil_zilberfeld @Kel_Moran @whoisvince pic.twitter.com/XuDx4IxpOQ

— Melissa Perri (@lissijean) March 17, 2015

The #ACEconf 2015 videos are being uploaded here: https://t.co/ZQuiIWmXcR #omgkrk

— ACE! Conference (@aceconf) March 18, 2015

Ideas from #aceconf speaker dinner: hire clowns as subjects for usability tests. Cheaper; tests task focus of other participants.

— Adrian Roselli (@aardrian) March 17, 2015

Ideas from #aceconf speaker dinner: Selfie sticks can double as marshmallow skewers. Handy at parades where floats catch fire.

— Adrian Roselli (@aardrian) March 17, 2015

Ideas from #aceconf speaker dinner: Tiramisù may or may not be cheese cake.

— Adrian Roselli (@aardrian) March 17, 2015

Feedback (Added 26 March 2015)

I've received the audience feedback from my talk and overall was pleased. 17 people responded (out of what I estimate was ~40+ in the room) with the following rankings:

• Loved it! 10
• Liked it: 2
• Meh: 4
• Didn't like it: 0
• Hated it! 1

Of those 17, 10 left comments (which I greatly appreciate!). Sadly, the one Hate it vote did not leave any comments.

• Liked it: Too basic for me, but nice examples of disabilities.
• Loved it! I loved the idea how to easily test your apps.
• Loved it! Great that this topic emerged.
• Loved it! Great approach to creating sites/apps friendly for impaired.
• Loved it! Full of very practical suggestions. Thanks for including it.
• Loved it! Content that usually doesn't get a forum.
• Meh: Interesting, however I won't get a chance to use what I learned.
• Loved it! Interesting point of view. I did not consider accessibility during software design. I should start.
• Liked it: Most important is to think about problem, not about product/project.
• Meh: Nicely said, but too short.

The two Meh comments are mostly out of my control. I was given a 30 minute slot, which I agree is too short for all that can be said on the topic. As for the commenter who claims he/she won't be able to use it, I feel that the testing parts of my talk at the very least are in everyone's reach, so I think it comes down to deciding to use it. Even if only to troll the Virgin America site.

Speaking at Avega Group in Stockholm

Rounding out my European tour (I'll be at Booster in Bergen and ACE! in Krakow) is a speaking gig not at a conference. I've been grabbed by the fine folks at Avega Group to speak to their team in Stockholm on the evening of March 19.

I'll be speaking about accessibility not just to Avega Group, but apparently whomever else might like to attend who is in the area. There is a Google Form you can fill out if you would like to attend (it's after business hours, so it needn't eat into your day too much).

The abstract from my talk:

We can all pretend that we're helping others by making web sites accessible, but we are really making the web better for our future selves. Learn some fundamentals of web accessibility and how it can benefit you (whether future you from aging or you after something else limits your abilities). We'll review simple testing techniques, basic features and enhancements, coming trends, and where to get help. This isn't intended to be a deep dive into ARIA, but more of an overall primer for those who aren't sure where to start nor how it helps them.

More information is on the Google Form, which I have also embedded below:

If you will be in the area, here's a map of Avega Group's venue:

Speaking at ACE! Conference in Krakow

I'll be spending much of March bringing my shining personality to Europe, partially in the form of speaking engagements. The first one I can announce is the sixth annual ACE! Conference in Krakow Poland on March 16 and 17. Somewhere within that two day conference I'll be talking about accessibility.

There is a growing list of great speakers, and I'm pleased to be included among them. At least until they discover I'm a fraud.

If you are familiar with ACE!, then it's worth noting this year a separate track has been added focused on building better software. If you are unfamiliar with ACE!, then I will let the organizers speak for themselves:

ACE! is the largest regional conference of its kind in Central Europe, attracting people from all over the region. We're really excited about ACE! 2015 which combines two one-track conferences into one. The Building Software Better track includes the traditional ACE! content such as agile, lean, Scrum, Kanban, and other tools and methods for improving the software development process. This year we're adding a Building Better Software track that features Lean Startup, LeanUX, Design Thinking, and Customer Development topics. We're also adding a workshop track so that attendees can apply new skills and experiment with new ideas. It's going to be the best ACE! yet!

from the About ACE! section

You can stay abreast of new speaker announcements and other news from the conference by following @aceconf on Twitter.

As the conference site gets updated with this year's logo and the abstract from my talk, I plan to post it here.

I've never been to Poland, and I am hearing nothing but good things about Krakow (not just from its tourism board), so I am really looking forward to visiting.

The conference will be held about 5km from the city center, so if you're nearby you can pretty much include my talk in your tourism walk for the day. I've embedded a map for my own benefit:

Blue Beanie Day

Image showing the pixel-art image of Jeffrey Zeldman in his iconic blue beanie (top left) simulating (clockwise) protanopia, deuteranopia, and tritanopia.

Blue Beanie Day, or for about 0.05% of the population with tritanopia/tritanomaly, Teal Beanie Day!

On Sunday, November 30, web designers and developers across the globe will celebrate Blue Beanie Day 2014, wearing a blue beanie to show their support for web standards. Join in!

[…] [S]porting a blue chapeau is a reminder that web standards—standards like semantic markup, neatly separated styles, and DOM scripting—are responsible for much of the work we do today.

This quote lifted from Blue Beanie Day 14: Toque ’em if You’ve Got ’em at A List Apart.

I'm a big fan of standards intended to support accessibility as well, such as WAI-ARIA and WCAG (which includes the success criterion addressing use of color).

No, I'm not taking a shot at Blue Beanie Day nor the intent behind it. My goal is to remind people that accessibility is core to the standards, and ignoring it is tantamount to ignoring the standards this day is intended to promote.

Images using CVSimulator app.

By the way, 0.05% of the United States population is 158,500 people. Small percentages of very large numbers are still large numbers.

Related

• It is Blue Beanie Day – let’s reflect #bbd14 from Christian Heilmann.
• Watch Dogs from Chris Coyier.

WordCamp Toronto Slides: Selfish Accessibility

As promised, slides from my talk this morning at WordCamp Toronto:

Ego-Building Tweets

I like audience feedback, moreso when it's positive. I've also added some general tweets about the accessibility track.

Starting the day with "Selfish Accessibility" #A11Y #WCTO pic.twitter.com/5RoRFSyg7r

— Alicia Jarvis (@AJarvis728) November 15, 2014

Truth. "Everyone is a keyboard user when eating with their mouse hand" - @aardrian #a11y #wcto

— Shawn Hooper (@ShawnHooper) November 15, 2014

"It's easier to cook a turkey than it is to install Window updates." — @aardrian

— Chris Van Patten (@ChrisVanPatten) November 15, 2014

Start supporting accessibility now. It will help serve future you! - @aardrian #a11y #wcto

— Shawn Hooper (@ShawnHooper) November 15, 2014

In Windows 7, Press "left Shift + left Alt + PrtScn" to activate high contrast mode. #a11y #wcto

— Shawn Hooper (@ShawnHooper) November 15, 2014

Got to see @aardrian do his talk on Selfish A11y at @WCYYZ. A few other times we've always presented opposite each other.

— Karl Groves (@karlgroves) November 15, 2014

It took three tries, but I finally figured out how to open @abokichi’s onigiri at #WCTO. Tasty! http://t.co/cJcYL5ppXd

— Adrian Roselli (@aardrian) November 15, 2014

You know what's awesome? #WCTO is a mainstream camp w/ a FULL #a11y track. The event itself is accessible too! Thanks @WCYYZ !

— Billy Gregory (@thebillygregory) November 15, 2014

A suggestion from @seanyo to print and bind WCAG guidelines and read from it like a spell book. Trying this at gaming next week. #wcto

— Adrian Roselli (@aardrian) November 15, 2014

Some of #a11y presenters at #WCTO: @monsika @karlgroves @thebillygregory @seanyo. Also, Lumberjack & Viking. http://t.co/fKSwk1Oz51

— Adrian Roselli (@aardrian) November 15, 2014

Accessibility speakers at @WCYYZ WordCamp Toronto: @aardrian @karlgroves @GeniusWebMedia @thebillygregory @seanyo #WCTO

— Joseph Karr O'Connor (@AccessibleJoe) November 15, 2014

First session today at #wcto, the room so rapt with speaker that motion sensors turned off lights partway through from lack of movement.

— Adrian Roselli (@aardrian) November 16, 2014

I should start every talk with jazz hands. RT @AJarvis728: Starting the day with "Selfish Accessibility" #A11Y #WCTO pic.twitter.com/ipEjQlSTHK

— Adrian Roselli (@aardrian) November 15, 2014

Other Talks

I spent Saturday in the accessibility track (I missed one talk, sadly). There was some overlap on general themes, which I think was good. Overall, anyone who visited one talk still got a common baseline, while those who stayed for the day had the core accessibility information reinforced across speakers.

I was thrilled I got to present in the same track as Billy Gregory and Karl Groves, also known as The Viking and The Lumberjack. These guys know their stuff.

• Monika Piotrowicz, Web Accessibility - A feature you can build
• Karl Groves, Next-gen A11y Testing Tools
• Billy Gregory, Use ARIA Now!
• Sean Yo, Fixing Inaccessible Content

UX Singapore Slides: Selfish Accessibility

Photo of me speaking, fighting the sun, provided by Camilla Choo. Original photo on Twitter.

In a departure from the other times I have given this talk, I gutted all the slides with code samples as well as the slides on testing (although I did keep them handy and use them for the individual Q&A afterward). Instead, I added a section showing example selfish user stories, some persona bits, and other references. Overall I think it was a great fit. I met the time limit and didn't seem to overwhelm the crowd with technical bits. I hope everyone attending got something from the talk, but based on a few conversations afterward I think I struck a chord with at least a handful.

Anyway, my slides are below. If you want to see the slides I excised, then you should look at the my slides talk I gave a few days beforehand for Accessibility Camp Toronto (start at slide 46).

Selfish Accessibility: UXSG 2014 from Adrian Roselli

There was no video from this talk, so you have to take my word for it that it went well. I was warned in advance that the crowd would be tough — they wouldn't laugh at my awful jokes (nor the good ones), wouldn't ask questions, and in general might be hard to read. That was wrong. The room was great and was easy to engage. I think it helps everyone was hoping to learn something new on a topic that many hadn't considered before.

Tweets

Even if you can't integrate accessibility into your UX design now, you should be working towards it @aardrian #uxsg #accessibleux

— R Ho (@holeruch) October 3, 2014

Time to reconsider that credit card field on your form, is it dyscalculia friendly? Start addressing those accessibility woes! #uxsg

— Desiree Chua (@DezzyChua) October 3, 2014

Great chatting with @aardrian and learning of #a11y. We've got to get the #accessibleux ball rolling here in Singapore #SADeaf #uxsg

— R Ho (@holeruch) October 3, 2014

Event Photos

I've tagged all my UXSG photos on my tumblr, but I've included some of my favorites below.

Breakfast bits on the first day of #uxsg. Tasty breakfast and tea snacks continued throughout.

In Bryon Long’s #uxsg lean startup session, he identified being bald and dating as a type of problem.

#uxsg In “think like entrepreneur” session, @trentmankelow asked each of us to draw ourself.

We were also asked to add some fact unknown to the group. I mentioned my durian fascination.

Cutting my #uxsg slides down to 75 after chats today. On a rooftop bar with various animal satay and a Generously Scarlet.

The Donnie-Darko-style #uxsg Super Garang looking on after the end of the conference.

Related Links

• Eventifier tracked all the tweets from the event, including photos.
• Making the Web More Human from Nurgul Karadeniz.

Event Photos

Accessibility Camp Toronto Slides: Selfish Accessibility

I've updated this post to include the video from the live stream, some links, and a few photos.

Selfish Accessibility: a11y Camp Toronto 2014 from Adrian Roselli

Video

There was a live stream throughout the day, which was broken into a morning video and afternoon video. I've embedded the morning stream because it includes my talk. I don't feel this was one of my better performances, but I also have not watched the video yet. You are welcome to do so and wince on my behalf. If the embed doesn't start at the right place for you, you can either fast forward to 2:01:00, or you can view it set to start at that point on YouTube.

Surprisingly Flattering Tweets

I'm pleased to sat that if you only watched Twitter, it looks like I did a good job getting my point across.

We pretend that we're helping others by making web #a11y but we are really making it better for our future selves by @aardrian next #a11yTO

— Toufic Sbeiti (@TouficSbeiti) September 27, 2014

here is WebAIM’s Hierarchy for Motivating Accessibility Change mentioned by @aardrian http://t.co/2H2aeoxQeZ #a11yTO

— Toufic Sbeiti (@TouficSbeiti) September 27, 2014

"accessibility is not a checklist" say @aardrian at #a11yTO

— Hira Javed (@HiraJaved10) September 27, 2014

Accessibility is not a checklist! #a11yTO @aardrian

— Emily Coffin (@emilycoffin) September 27, 2014

Format your HTML5 like a boss. Clean code will automatically make your site more accessible. #allyTO @aardrian

— Emily Coffin (@emilycoffin) September 27, 2014

Text alternatives for images: a decision tree mentioned by @aardrian http://t.co/Euqyxd1rC2 #a11yTO

— Toufic Sbeiti (@TouficSbeiti) September 27, 2014

Nice job kicking off the #a11yTO livestream, @aardrian. Had a couple #webdev house guests get their intro to #a11y via YouTube

— Eric Wright (@ewaccess) September 27, 2014

Adrian Roselli's overview on Web accessibility today will be posted at http://t.co/3kaq7qsLNY #a11yTO @aardrian pic.twitter.com/C5Mgx1iDEu

— Matthew Burpee (@MatthewBurpee) September 27, 2014

@aardrian Thanks for the intro to #a11y at #a11yTO! Thanks especially for answering my questions on CSS & JS!

— Andrew Carreiro (@ArcadeErrorWin) September 27, 2014

Proximity always matters. User feedback ftw. #a11yTO (alt= CART not close enough to speaker, being moved!) #a11y pic.twitter.com/SmYZMn9gyx

— Elle Waters (@Nethermind) September 27, 2014

Hey @aardrian thanks for interviewing w/ @a11ymedia we loved the banana socks :) #a11yTO -stay tuned for coverage ! pic.twitter.com/FQbLWpASgl

— Elaina (@elayinuh) September 27, 2014

Thanks guys #a11yto for organizing this event. pic.twitter.com/yBbVsLp11y

— Andrea Dubravsky (@ADWebcom_) September 27, 2014

Kudos to great people behind #a11yto MT @jdee: presenters,volunteers & sponsors of #a11yTO.folks that #makeithappen. pic.twitter.com/gcRsB5iwoU”

— Dina Moati (@dinamoati) September 28, 2014

Some Pics

I snapped some photos, but I'm going to lead with this awesome sketchnote (I've never had a sketchnote of one of my talks, so this is pretty exciting for me):

Sketchnote from Andrea O Pietkiewicz. View the original tweet or on her site.

Sporting an AODA hat & Kirk tie, @DavidLepofsky fits into #a11yTO pretty well.

A sneak preview of The Viking & the Lumberjack at #a11yTO. That will never air.

Whose responsibility is #a11y? @dboudreau addresses in his talk for #a11yTO.

Food-oriented, with reluctant hero, hockey. @karlgroves wins the hand with Strange Brew. @FYCGame

Related Links

• Integrating Accessibility in the Web Project Lifecycle - a11yCampTO 2014 by Denis Boudreau , Web Accessibility Avenger at Deque Systems.
• What I learned at Accessibility Camp Toronto from Francine Navarro.

Update, December 6, 2014: AMI Event Recap

Toronto's Accessible Media Inc (AMI) interviewed me in its coverage of the event, which is now live on the AMI site (season 1, episode 1, as this link will show the current AMI Inside episode not this specific episode over time). The abstract:

AMI Inside provides an all access pass to Accessibility Camp, Toronto. D.J. Demers takes us to OCAD University to learn about some of the most relevant digital accessibility topics. Find out what’s new in technology and hear firsthand from some of the attendees as well as Accessibility Specialist and camp co-organizer, George Zamfir.

WordCamp Buffalo Slides: Selfish Accessibility

The Buffalo WordCamp shirt was again printed by You and Who (whose logo is visible where the tag would be), which means that 1,600 meals were donated (one for each shirt) to those in need. I think every WordCamp should do this. (related tweet)

Buffalo WordCamp has just wrapped up and folks are hopefully going to take new ideas back to their own projects. There were many great talks and even panel discussions that turned into more of a WordPress support group for the audience and panelists alike. A first for Buffalo WordCamp that I hope they repeat. Also a plus, 48% of the attendees and 35% of the speakers were female, better ratios than I've seen at many other conferences.

My Slides

If you just come for my slides, then you are at the right spot. I've embedded them here, or you can go see them at SlideShare. In addition to questions and feedback from the audience, I've already gotten some feedback from the Twitterverse. In particular my use of the word "continuum" on slide 77. I am open to suggestions for a better word, so feel free to share.

Photos

I grabbed some photos from the event as well, captioned below (originally posted on my Tumblr, where they are larger).

This year the event was held in the new Science Hall at Canisius College. This is the atrium where lunch was served and announcements were announced (shot taken shortly after the lunch crush).

Some of the announcements being announced by announcers and co-organizers Ben Dunkle and Andy Staple.

A nice spread of pastries to get the day going. I am amazed I only ate one.

Accessibility talks never net a huge crowd, but at least those who did show up wanted to learn more, had good questions, and challenged me.

After a quick Twitter poll, I broke from my normal pattern of wearing more professional attire and went with the Montgomery Ward mechanic's shirt with the fur collar.

The badge had the day's schedule printed on the back (handy), and they also provided a printed schedule (also handy).

View of the cemetery from one of the talks.

A view from the after-party at Western New York Book Arts Center.

Some sample type at Western New York Book Arts Center. If you've never been and you are at all interested in type, you should visit.

Speaking at UX Singapore 2014

By far the farthest-from-home of my speaking engagements to date, I'm thrilled to be speaking at UXSG (User Experience Singapore). Having attended its sister event, UX Hong Kong (UXHK), last year I can say that I am excited not just to speak but to hear from all the other great speakers who will be imparting wisdom, knowledge, and perhaps a few local dining suggestions.

For those not familiar with it, UXSG is a three day event intended to onnect UX professionals across disciplines and cultures. As one of the founders of evolt.org (way back in 1998), this statement from the conference organizers resonates with me: It is a platform made for and by UX professionals to foster stronger professional collaborations and personal friendships. Given that I made some great connections as an attendee at UXHK, I don't doubt I'll have a similar experience here.

I will be giving a lightning talk on the third day of the conference, Friday, October 3, at 11:00am Singapore time. I'll be updating my "Selfish Accessiblity" talk for the UX audience. The abstract of my talk:

We can all pretend that we're helping others by making web sites and software accessible, but we are really making the experience better for our future selves. Learn some fundamentals of web and software accessibility and how it can benefit you (whether future you from aging or you after something else limits your abilities). We'll review simple testing techniques, basic features and enhancements, coming trends, and where to get help. This isn't intended to be a deep dive, but more of an overall primer for those who aren't sure where to start nor how it helps them.

Insights include:

• Broader context for how all users are or will be disabled, whether temporarily or permanently.
• Basic tests and best practices that can be integrated into development team workflows to make interfaces accessible.
• Introduction to standards and tools already available.

I've been to Singapore once before, but only for a day. This time I am looking forward to spending a little more time there and, in particular, experiencing the venue for the event, the relatively new Star Performing Arts Centre. I've embedded a map, but if you aren't attending then the map isn't very useful since it shows the building as it was during construction (depending on which view you choose):

Speaking at Accessibility Camp Toronto 2014

Update: My slides are now online. Go check them out.

I am excited to say that I will be speaking at Accessibility Camp Toronto in late September. It probably goes without saying that I'll be speaking on accessibility. Given Toronto's proximity to my home town of Buffalo, and the fact that I used to wander up to Toronto about once a month, it will be nice to visit a city I've neglected for a couple years now.

Instead of re-stating what Accessibility Camp Toronto is all about, I am going to cheat and quote the site directly:

Focusing on users with different disabilities, sessions can cover digital accessibility topics from the web (technical to tactical), desktop software, mobile apps, eLearning, online gaming, open source innovations, and everything in between. Watch this brief video from the first Accessibility Camp Toronto to get a feel for what to expect during the day. Also, video recordings from the 2013 camp are available.

Regardless of your level of knowledge, this event is for you. It will be a great opportunity for members of the design/development, usability, accessibility, other IT and end-users with disabilities communities to interact and learn from each other. We recommend you browse the Frequently Asked Questions, especially if you have never attended a participant-driven BarCamp/unconference before.

Please support the event with a $5 suggested donation at the door. Your donation will help cover the costs for miscellaneous expenses - event materials, food, etc.

Please follow event updates on Twitter via @a11yto.

Make sure you register as it is my understanding that the event is three quarters full. If you don't follow @a11yto for updates, at least check in on the #a11yto hashtag.

The nitty gritty: the event is held from 9:00am until 4:00pm on Saturday, September 27, 2014. It is being held at OCAD University, 100 McCaul Street, Toronto, ON M5T 1W1. As a courtesy and way to fill space on this post I have embedded the map:

Speaking at WordCamp Buffalo 2014

On Saturday, September 13, I will have the pleasure of speaking at WordCamp Buffalo for its (and my) third year. Based on the speaker line-up there will be plenty of great topics, so I look forward to being an attendee as well.

If you are new to WordCamp Buffalo, a quick overview:

WordCamp Buffalo is a one day conference held in Buffalo, NY focusing on WordPress. Our goal is to increase knowledge about WordPress for people who already are working with it, and show some benefits of using it for anyone who may be interested, but aren’t currently working with WordPress.

I will be presenting on accessibility. The abstract from my session:

We can all pretend that we're helping others by making web sites accessible, but we are really making the web better for our future selves. Learn some fundamentals of web accessibility and how it can benefit you (whether future you from aging or you after something else limits your abilities). We'll review simple testing techniques, basic features and enhancements, coming trends, and where to get help. This isn't intended to be a deep dive into ARIA, but more of an overall primer for those who aren't sure where to start nor how it helps them.

Tickets are available now, so you have plenty of time to prepare for heckling me. This year the event is being held at the new Science Hall on the Canisius College campus. A map is embedded below, and information on metro stops, hotels, and parking is available on the WordCamp Buffalo site.

Keep the Focus Outline

This animated GIF is a screen capture of cycling through every interactive element (mostly links) on the page using just the tab key. You'll note that in all but one case, the only indication of any change is in the lower left in the browser's status bar where it shows the URL of the destination link. The URLs ending in a "#" are the booking options.

Today's rant is inspired by all the gushing over Virgin America's new web site — just because it's responsive.

To be fair to Virgin America, making its site responsive is a huge win for users whose primary method of booking is via a smartphone or tablet (or, god forbid, phablet or tablone). Its new site, however, is a huge step backward for users who rely on the keyboard as their primary method of interaction.

Virgin America's CSS has a style to identify anchors with focus (yes, there are other elements that should get focus, but I am looking at just the most basic support): a:focus {outline: thin dotted;}

What's so frustrating is that the useful style is then overridden with this harmful declaration: a:focus {outline: none;} This override greatly decreases the usability and accessibility of the site. Unfortunately, this practice is still common on many more sites across the web.

As a web developer, one of the simplest accessibility tests you can do is unplug your mouse. Two quick things to review as part of that: Can you interact with all controls with only the keyboard? Can you tell which item has focus?

Even if you aren't motivated to run that simple test from an overriding sense of being nice to your users, there's a legal concern here. As I wrote last week, the U.S. Department of Justice held H&R block accountable to Web Content Accessibility Guidelines 2.0 Level A and AA Success Criteria. That means there is case law for making your consumer-facing site comply or face penalties.

By excluding focus styles, Virgin America is running afoul of one of the AA Requirement 2.4.7:

2.4.7 Focus Visible: Any keyboard operable user interface has a mode of operation where the keyboard focus indicator is visible. (Level AA)

In short, if your site doesn't make interaction elements obvious when accessed via keyboard, not only are you hurting users, you're opening yourself up to litigation.

Further Reading

Again, this isn't a new issue. It even has its own mini-site at OutlineNone.com, which offers these handy links:

• http://www.456bereastreet.com/archive/200905/do_not_remove_the_outline_from_links_and_form_controls/
• http://webaim.org/blog/plague-of-outline-0/
• Web Content Accessibility Guidelines (WCAG) 2.0 (2.4.7)
• Failure of Success Criterion 2.4.7 due to styling element outlines and borders in a way that removes or renders non-visible the visual focus indicator

To add another, this article, When Do Elements Take the Focus?, might be handy to understand just when you can expect to see :focus styles get applied by a browser.

Related

In March I wrote about how Google removed underlines from search result links. My concern there was that web developers might follow suit. Between removing keyboard focus indicators and underlines from links, I am amazed that developers do so much to make the core interaction element of the web essentially hidden to so many users. I am reproducing the list of related links here as they are relevant to the overall issue of keeping links usable:

• NoCoffee – Vision Simulator for Chrome (added March 25, 2014).
• WebAIM Color Contrast Checker.
• Juicy Studio Luminosity Colour Contrast Ratio Analyser.
• Contrast Ratio by Lea Verou.
• Color Contrast Analyzer Chrome plug-in.
• Use Adobe Photoshop proofing features to simulate color blindness.
• G183: Using a contrast ratio of 3:1 with surrounding text and providing additional visual cues on focus for links or controls where color alone is used to identify them
  • Links with a 3:1 contrast ratio with surrounding text, which also shows 26 web safe colors to use with black or white text.
• F73: Failure of Success Criterion 1.4.1 due to creating links that are not visually evident without color vision
• Making Accessible Links: 15 Golden Rules For Developers at SitePoint (note rule 11), February 20, 2014.
• To Underline or Not Underline Links, March 9, 2012.
• Keep the Underline at WebAxe, April 14, 2013.
• Do Links Need Underlines? by Jared Spool, July 5, 2006.

My Efforts to Reach Virgin America (so far)

I may have contacted Virgin America on Twitter once. Or Twice. Or three times. Perhaps even a fourth time. And filed a bug with WebCompat.com. And left a comment at Wired's article. I've embedded the tweets below so you an retweet if you are as whiny as I.

Hey @VirginAmerica, to help you fix your lack of keyboard access, I left a bug report for you at @webcompat: webcompat/web-bugs/issues/141

— Adrian Roselli (@aardrian) June 18, 2014

Hey @VirginAmerica, I left a comment about your lack of keyboard access at that Wired gush-piece: http://t.co/9RAjaLcAdS Just trying to help

— Adrian Roselli (@aardrian) June 17, 2014

Seriously, @VirginAmerica, just go into main.css (https://t.co/E1Jh0qSu74) and *at least* delete this: a:focus{outline:none} 2 minutes.

— Adrian Roselli (@aardrian) June 16, 2014

Useless for keyboard users. RT @RWD: […], so I missed that the new responsive @VirginAmerica site went live! http://t.co/RM1tikjo14

— Adrian Roselli (@aardrian) June 16, 2014

Update: June 27, 2014

On December 12, 2013 a rule became effective from the U.S. Department of Transportation (DOT) titled Nondiscrimination on the Basis of Disability in Air Travel: Accessibility of Web Sites and Automated Kiosks at U.S. Airports. That links points to the following section on accessibility:

Finally, we proposed a tiered implementation approach in which the WCAG 2.0 standard at Level A and AA would apply to (1) a new or completely redesigned primary Web site brought online 180 or more days after the effective date of the final rule; […]

As keyboard accessibility is one of the requirements of WCAG AA compliance, Virgin America's new site does not honor this rule. However, if the Virgin site officially launched before June 10, 2014, then it squeaks by on a date technicality.

More information on the implications of the law are in the post New accessibility rules coming to airline websites. Are you ready?

Update: July 21

It took just over a month, but Virgin America responded to me:

@aardrian Thanks for your feedback on the #VXnewlook Please follow + DM if you'd like to share more.

— Virgin America (@VirginAmerica) July 21, 2014

I don't see any reason to follow and/or direct message to share more information. I have this blog post, which I've linked repeatedly. I think that's plenty. I responded and asked if or when the issue would be fixed, but I've been met with silence. Perhaps in another month I'll hear more.

In the meantime, given the amount of action the below tweet of mine has gotten, I know I am not alone in thinking that disabling the focus outline is generally a bad idea:

Use this ONE WEIRD TRICK to make your sites keyboard friendly: Delete this: :focus {outline: none}

— Adrian Roselli (@aardrian) July 17, 2014

Update: October 15, 2014 — Screen Reader Walk-Through

Marcy Sutton, at the JSConf, provided a walk-through of the Virgin America web site experience using a screen reader. It does a great job of showing what a terrible experience this site has created. I've embedded it below, bracketed to the relevant part of her talk, or you can view it directly on YouTube (starting at 0:20).

Update: October 23, 2014

Here is a video of the screen reader walk-through, pulled from the latest version of Marcy Sutton's slides on Angular Accessibility:

Accessible Bootstrap Frameworks

This post originally appeared on the Algonquin Studios blog.

If you work much with accessibility, then you might consider the title of this post to be an oxymoron, a self-contradicting mess. Frankly, I tend to agree. Barring a compelling use case, I never start a project with Bootstrap and I resist including it when explicitly requested (so far successfully in nearly every case). Of a few reasons, accessibility is the biggest issue I have with it.

There are, however, a couple options to mitigate the accessibility mess that is Bootstrap.

I should note that this post is a follow-up to the Q&A after my talk at HTML5 Developer Conference, Selfish Accessibility, where I gave some advice about Assets which, at the time, was using Bootstrap 2 (it has since moved to version 3).

Assets.CMS.gov

The Centers for Medicare & Medicaid Services (CMS), a division of the US government (specifically HHS), has emerged as an unexpected champion of accessibility for Bootstrap and made its own framework, Assets (first announced in late 2012). This may not be a surprise to many when you consider CMS's role working with people who are older and/or in need of some form of medical assistance (equipment or services). Arguably, its constituency stands to benefit the most of any division of the US government.

Assets was just updated to use Bootstrap 3 (which should make many a Bootstrap user happy). Assets promises you:

Section 508 compliant, cross-browser compatible UI components that you can use in your accessible web site or web application. Assets is an accessible, responsive, modern framework.

If you are an organization that works with the federal government to build web-based applications for the general public, then it may be a no-brainer to use this framework. Arguably your Section 508 accessibility requirements are met to a high degree, and where the framework fails you may be able to make a case that you are using a government-sanctioned tool. It doesn't let you off the hook for more fundamental accessibility failures (color contrast, images as text, infinite scroll, etc.).

The accessibility statement identifies the profiles used for testing. The documentation page links to all the UI components, which is handy. Jennifer Sutton has also provided links to tests she made with the calendar widget over at the WebAIM mailing list (though she was using version 2).

There are some caveats. On the spectrum of Internet Explorer versions, it only supports version 8 and above (the last version, built on Bootstrap 2, also only supported IE8+). The files are served from a US government CDN, which while not bad in and of itself, should require you to test them to make sure it serves the files as well as a commercial CDN. For example, icon font FontAwesome is served via the Assets CDN, though you may want to compare against others given its ubiquity on the web.

The Assets documentation also provides links to a Medicare style guide and a Healthcare.gov style guide, both of which require a login to see, severely limiting their value to sub-contractors.

PayPal's Accessibility Plug-in

If you refuse to use anything from the US government, you can head to the other end of the spectrum and use the accessibility plug-in from PayPal.

According to PayPal:

This plugin adds accessibility mark-up to the default components of Bootstrap 3 to make them accessible for keyboard and screen reader users.

Because it's an add-on to your existing Bootstrap 3 code, it should just work. It will make the following default UI components accessible: Alert, tool-tip, pop-over, modal dialog, drop-down menu, tab panel, collapse, and carousel. You can pop over to the demo page and test it out with and without the plug-in (use a keyboard to understand the benefits).

As with Assets, this doesn't guarantee that what you build will be accessible. You still need to consider the same items I cite above along with many many more accessibility elements which cannot just be handled with a plug-in nor a checklist.

Related

The Canadian government has created its own framework, also intended to be accessible, usable, interoperable, mobile friendly and multilingual. The Web Experience Toolkit (WET) has just moved up to version 4.

While not a framework nor an accessibility add-on, the United Kingdom has a handy style guide to make all its gov.uk properties look consistent: GOV.UK elements

There may be hope for government web sites after all, though just don't try to use Section508.gov with a keyboard.

Update: July 7, 2014

Heydon Pickering has updated his Revenge.css to work with some Bootstrap shortcomings. If you aren't familiar with Revenge.css, it's a handy CSS file you can call via a bookmarklet to highlight accessibility issues in your CSS file (like removing outlines, or forgetting the :focus selector when you use the :hover selector).