Adrian Roselli

Slides from Global Accessibility Awareness Day 2015

noreply@blogger.com (Adrian Roselli) — Thu, 21 May 2015 02:46:00 +0000

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

Speaking at Inclusive Design 24 for Global Accessibility Awareness Day

noreply@blogger.com (Adrian Roselli) — Tue, 19 May 2015 18:05:00 +0000

The headline really captures it all.

The Paciello Group will be holding a full day of free webinars on Global Accessibility Awareness Day. That's 24 straight hours of talks, starting at midnight (GMT) on Wednesday, May 20 through through midnight (still GMT) on Thursday, May 21.

I'll be giving my world-renowned (not really, but at least it's world-traveled) talk Selfish Accessibility at 2:00AM GMT (10:00PM EDT on the night of Wednesday, May 20). I'm third in the queue and will already be following two great speakers. The abstract is posted on the Inclusive Design 24 site.

If you are struggling with your local time for each of the talks, you can use this handy reference that shows the start time for your current city, or this countdown to the start of the event (which has no bearing on your time zone).

If you are new to Global Accessibility Awareness Day, here is an interview with Jennison Asuncion, one of its creators:

For Infinite Scroll, Bounce Rate Is a Vanity Stat

noreply@blogger.com (Adrian Roselli) — Mon, 18 May 2015 00:49:00 +0000

Animation showing me scrolling an article at the Fortune site. The yellow arrow indicates when the URL changes. At that point leaving the site will not count as a bounce.

About a year ago I wrote a post with a checklist of items I feel you would need to satisfy before you can ever consider putting infinite scroll on a site. Surprising no one, the checklist hasn't really caught on (though it has generated a lot of traffic and discussion).

Worse, no one (that my Google-fu found) is challenging the most common argument in favor of infinite scroll: user retention, often described as a reduced bounce rate.

I've simplified it a bit, but the gist is that advertisers and marketers want to see a low bounce rate on a site (ideally one that continues to fall). This helps justify ad buys and is often used as a proxy for engagement.

Typically authors who want to write a pro/con piece on infinite scroll will cite user retention. The same is true for those whose success is measured by low bounce rates, as well as those who just really like the infinite scroll "feature."

Because content continues to appear, users find themselves scrolling and interacting for longer periods of time.

Infinite Scrolling: Pros and Cons at Design Shack

You stand a better chance of retaining the user because there’s nothing for them to do but scroll. It’s almost like a subliminal call to action.

The UX of Infinite Scroll: The Good, the Bad, and the Maybe at SitePoint

Since its March redesign, Time.com’s bounce rate — the percentage of visitors who leave the site after viewing only one page — has declined by 15 percentage points[.]

Mobile page views in June were up 30 percent over the previous 12-month average [on the redesigned NBC News site.]

Quartz estimates “readers view about 50 percent more stories per visit than they would without the option to scroll.”

Time.com’s bounce rate down 15 percentage points since adopting continuous scroll at Poynter

The numbers look great in a vacuum. As readers, we don't have access to the raw data. We can't see if the reduced bounce rate correlates with a (minimum) doubling of time on the site. We cannot see if the user gets to the new headline and just leaves the site. There is no metric for a second-step bounce rate.

I posit that the goal to affect the raw stats doesn't necessarily mean more engagement.

On these sites, when I keep scrolling to make sure I've finished the article, the URL changes. I haven't actively gone to another page. Whether or not I choose to read the next article, this is counted as retention. I don't count as a bounce simply because I scrolled, not because I have started to read (let alone finished) the next article.

A couple examples of this in action (in addition to the opening image)…

Animation showing the URL changing (when the yellow arrow appears) as I scroll down the page at the Time site.

Animation showing the URL changing as I scroll down the page at the Forbes site.

We should be wary of these engagement or retention claims. Measurements shouldn't be about solely bounce rate, and minor jumps in engagement time are also a poor proxy. Perhaps a bounce should count unless the user makes it to the end of the next article. Perhaps retention should only count if the user's time on the site equals or exceeds twice the average time it takes to read an article.

As always, unless someone who manages a content site with infinite scroll (that isn't a stream-based site like Twitter or Facebook) can show data to prove infinite scroll genuinely leads to greater retention and engagement, I won't trust the measuring stick. Neither should you when making a decision about whether or not to implement infinite scroll.

So You Think You’ve Built a Good Infinite Scroll at this site, May 31, 2014.
Infinite Scrolling – Impact on Accessibility Series – #1 Common Issues from SSB Bart Group, May 1, 2015.
Infinite Scrolling (mobile version of the page so you can tap the alt text) from XKCD.

Update: May 18, 2015

USA Today decided to ditch its infinite scroll, as reported by Digiday and its infinite scroll:

FTW’s implementation of infinite scroll, which displays a never-ending lists of article headlines below its articles, has been a major drag on the site’s mobile page loading times, so it had to go.

USA Today's FTW redesign ditches the infinite scroll, at Digiday

Another Update on May 18

Smashing Magazine asks the question, linking to this post:

Have you actually seen an infinite scrolling pattern working well for user engagement in your UI? A few notes: http://t.co/PiYGMfoMc0
— Smashing Magazine (@smashingmag) May 18, 2015

On the Mis-Named Mobilegeddon

noreply@blogger.com (Adrian Roselli) — Wed, 22 Apr 2015 16:19:00 +0000

If you are a web pro then it is likely that you heard that Google's search results were going to change based on how mobile-friendly a site is (you probably heard a couple months ago even). This change took effect yesterday.

As with almost all things in the tech world that affect clients, the press hit yesterday as well, and today clients are looking for more information. Conveniently, our clients are golden as we went all-responsive years ago.

If you already built sites to be responsive, ideally mobile-first, then you needn't worry. Your clients have probably already noticed that the text "mobile-friendly" appears in front of the results for their sites in Google and have been comforted as a result.

If you have not built sites to be responsive, or have had no mobile strategy whatsoever, then you may be among those calling it, or seeing it referred to as, mobilegeddon. A terrible name that clearly comes from FUD (Fear, Uncertainty and Doubt).

If you are someone who relies on a firm to build and/or manage your site, then you should also beware the SEO snake oil salesman who may knock on your door and build on that very FUD to sell you things you don't need.

From Google Webmaster Central

For that latter two cases, I have pulled the first three points from Google's notes on the mobile-friendly (a much better term) update. I recommend reading the whole thing, of course.

1. Will desktop and/or tablet ranking also be affected by this change?

No, this update has no effect on searches from tablets or desktops. It affects searches from mobile devices across all languages and locations.

2. Is it a page-level or site-level mobile ranking boost?

It’s a page-level change. For instance, if ten of your site’s pages are mobile-friendly, but the rest of your pages aren’t, only the ten mobile-friendly pages can be positively impacted.

3. How do I know if Google thinks a page on my site is mobile-friendly?

Individual pages can be tested for “mobile-friendliness” using the Mobile-Friendly Test.

FAQs about the April 21st mobile-friendly update

From Aaron Gustafson

Aaron Gustafson put together a simple list of four things you as a web developer can do to mitigate the effects of Google's changes, though the simplicity belies the depth of effort that may be needed for some sites. I've collected the list, but his post has the details for how to approach each step:

Embrace mobile-first CSS

Focus on key tasks

Get smarter about images

Embrace the continuum

Tips for Surviving Google’s “Mobilegeddon”

What Is Your Mobile Traffic?

I've been asked how to find out how much traffic to a site is from mobile users. In Google Analytics this is pretty easy:

Choose Audience from the left menu.
Choose Mobile once Audience has expanded.

Bear in mind that this just tells you where you are today. If that number drops then it may be a sign that your mobile strategy isn't working. At the same time, if that number is already low then it may not drop any further owing to unintentional selection bias in how your pages are coded.

Oh, By the Way

Google isn't the only search engine. When I mentioned that on this blog before, Google had 66.4% of the U.S. search market. As of January 2015, that's down to 64.4%. Bing is up from 15.9% to 19.7%.

Google Sites led the U.S. explicit core search market in January with 64.4 percent market share, followed by Microsoft Sites with 19.7 percent and Yahoo Sites with 13.0 percent (up 1.0 percentage point). Ask Network accounted for 1.8 percent of explicit core searches, followed by AOL, Inc. with 1.1 percent.

comScore Releases January 2015 U.S. Desktop Search Engine Rankings

While I Have Your Attention

Two days after the initial announcement of this change, word also came that Google is working on a method to rank pages not by inbound links, but by trustworthiness, in essence by facts.

When this finally hits, pay attention to those who refer to the change as Truthigeddon. Be wary of them.

Alt Text Bot Image Descriptions FTW

noreply@blogger.com (Adrian Roselli) — Mon, 20 Apr 2015 16:41:00 +0000

This weekend I saw a tweet in Marcy Sutton's timeline that appeared to be an image description generated by a piece of software.

Given my recent missives on the inherent inaccessibility of images without descriptions (even if Twitter accidentally gave us more options), coupled with rise in people tweeting images of text to get around character limits, I was intrigued.

It turns out the Alt Text Bot is a project from Cameron Cundiff that he submitted to the NYU ABILITY Technology Hackathon, where it also won first place this weekend. He has written a little bit of background on the bot.

Alt_Text_Bot uses an API from CloudSight to help describe images submitted in tweets. Users simply need to mention @alt_text_bot in a tweet with an image (the tweet must be part of the image, not in a Twitter card or via a link) and Alt Text Bot will respond with a description.

I've been feeding my own test images, but Steve Faulkner has been testing its ability to read CAPTCHAs and recognize faces of personalities (though not all).

It has some limitations. The biggest is the character limit within Twitter. Converting a chart to text, for example, is a great idea, but the character limit of Twitter precludes you from getting much value and descriptions can be truncated.

Another is probably from the CloudSight API. If an image is tweeted twice (such as a retweet), you might get two different descriptions (as this first one demonstrates, and then this second one). On top of this, not all images are very clear and context is hard to convey, as in this one showing wheelchair demonstrators in Seoul.

Regardless, given the current state of accessible images on Twitter, this tool is awesome. As I write this I see more and more people testing Alt Text Bot, so I expect that, even if this is just a proof of concept, more good things will come as a result.

The next image is me being excited about this, along with both descriptions that Alt Text Bot provided.

alt=man in gray shirt smiling thumbs up beside man in black jacke. https://t.co/LhqnvgE2cs - @aardrian
— Alt Text Bot (@alt_text_bot) April 20, 2015

alt=3 men standing near closed white framed glass door. https://t.co/clRfm7BIAG - @nealrs @aardrian
— Alt Text Bot (@alt_text_bot) April 20, 2015

Selfish Accessibility at Buffalo Unconference

noreply@blogger.com (Adrian Roselli) — Sun, 19 Apr 2015 22:29:00 +0000

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

Twitter (Accidentally) Takes Step Toward Accessible Images

noreply@blogger.com (Adrian Roselli) — Thu, 09 Apr 2015 01:17:00 +0000

Video showing how tweet quoting works. See original tweet from which I swiped the video.

Twitter has officially released its new-ish tweet quoting feature. Since at least last June, if a user included the URL of a tweet within a new tweet, it would present viewers with the full body (albeit smaller) of the referenced tweet within the new tweet.

Now that feature has been formalized. Users should see it when retweeting a tweet as the option to quote a tweet (which previously would just wrap the original tweet in quotes).

This can be a boon to Twitter image accessibility, allowing alternative text to wrap an image tweet (see my post on existing techniques). Except for a few points:

Twitter's (current*) prohibition on retweeting oneself means that users cannot easily quote their own tweets to add alternative text — at least not in the Android app nor on the web. TweetDeck allows it, so perhaps we'll see it in the app or web site.
Because a quoted tweet is not a reply, it doesn't show up in the list of replies when viewing the original image tweet. This means a missed opportunity to be associated with the alternative text when viewed on its own.
When viewing the tweet providing the alternative text (as a standalone tweet, not in the timeline) in the Android app, the image within the quoted tweet is not displayed.
Embedding a tweet that acts as alternative text doesn't show the original quoted tweet (nor its image). There isn't an option to embed media, so web page authors will likely embed the original image tweet instead of the alternative text tweet. You can see this example below.
Twitter is missing an opportunity to provide an interface that prompts users to provide alternative text. This might help stem the inconsistent efforts from those who want to provide accessibility (such as 18F's noble but under-informed efforts).

The first image shows a tweet quoting an image tweet when viewed in the timeline (the quoted tweet's content is visible). The second image shows a tweet quoting another when viewed on its own, demonstrating that the quoted tweet's content isn't displayed at all. Note in both views that I cannot retweet my own tweet (the option is disabled).

Cannot easily use new @Twitter tweet quoting on web nor app. Doing this via TweetDeck. (alt:CSUN cert of attendance) https://t.co/Onn99uUIfg
— Adrian Roselli (@aardrian) April 9, 2015

Sample tweet that quotes an image tweet, but does not show the quoted tweet.

* From the Twitter page explaining the feature, Note: You cannot Retweet your own quote Tweet.

Twitter App Sets Browsers Back 10 Versions

noreply@blogger.com (Adrian Roselli) — Thu, 26 Mar 2015 00:10:00 +0000

Screen shot of a web page as seen in the Twitter app, with a menu showing the option to open in the user's default web browser.

The title of this post may be a bit of hyperbole for some, but it is completely true for me.

Sometime over the course of the last week Twitter changed what happens when I tap links in the native Twitter app on Android. Links now open within an embedded browser, not in my default browser.

I have Chrome 40 installed on my Android phone. The built-in web view on my phone is 10 releases back, at Chrome 30. Normally this isn't a concern of mine, but when a good deal of my Twitter timeline consists of bleeding edge web development techniques, I want to view those on a current release of Chrome.

The first image shows that the user agent string within the Twitter app includes Chrome 30. The second image shows my default browser user agent string is Chrome 40.

This change appeared while I was traveling internationally, which means I had a slower connection than usual as well as a data cap. Not only do I have to view content in an old browser, I have to know that the web view is older so that I then know to open it in my default browser.

That's at least two more taps, plus the burden of the download starting in the web view that I don't want. That extra download burden also impacts my data cap, which is an even bigger issue if I have chosen to surf with Opera Mini to make the most of my limited data cap (you know, data budgeting).

Not only did I never enable this feature, I cannot disable it. It appeared three weeks after my last Twitter app update (see the caption below).

The first image shows the settings screen in the Android Twitter app, version 5.48.0. You can see there is no option to disable the in-app browser, though it has been enabled. The second image is the note in the Google Play store that tells me the only change in the new release is updated profiles so it's easier to view bios, Tweets and photos. The final image shows the option to disable the in-app browser, but only because I updated to version 5.51.0 (when I returned from home and shed my data cap).

So What?

A couple months ago Peter-Paul Koch wrote about the massive fragmentation in the world of Chrome (Chrome continues to fall apart at brisk pace), something to which Twitter is now contributing en masse.

In the modern world of rapidly updating browsers, 10 releases may not seem like a big deal. I guess it comes down to what you want to see, or more importantly, what you want your users to see. Can I Use provides a quick way to compare Chrome 30 and Chrome 40 to see which features you may be missing. Here's a short list:

The ability to discard many -webkit- prefixes,
Font unicode-range subsetting,
matches() DOM method,
CSS touch-action property,
CSS Font Loading,
Custom Elements,
picture element,
Web Cryptography,
WOFF 2.0 - Web Open Font Format.

If you rely on any of these (or many other) features of the open web platform, and you receive traffic from Twitter, I suggest you monitor your logs to see if the most common version of Chrome drops.

As for user experience, If you plan to allow users to toggle a new "feature," don't push that feature to them without the toggle. Especially when you exclude it from your update notes within the app store.

Slides: Selfish Accessibility for Avega Group

noreply@blogger.com (Adrian Roselli) — Fri, 20 Mar 2015 15:41:00 +0000

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

ACE! Conference Slides: Selfish Accessibility

noreply@blogger.com (Adrian Roselli) — Mon, 16 Mar 2015 13:19:00 +0000

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.

Typefaces for Dyslexia

noreply@blogger.com (Adrian Roselli) — Sat, 14 Mar 2015 15:26:00 +0000

Both typefaces claim that heavier strokes on the bottom prevent dyslexic readers from flipping the letters when viewing them. The original caption: A heavier bottom is used to show which way is supposed to be down.

I've been writing this post in fits, so it may be a bit disjointed. I started it on my flight home from CSUN, and continued to work on it on subsequent flights. Apologies if it's a bit chaotic.

TL;DR: Typefaces designed to help dyslexics have no effect.

I'll list information about the two typefaces that I am aware of (which are designed explicitly for readers with dyslexia), as well as notes from the talk at CSUN and a couple other examples.

Typefaces

I am aware of two typefaces that are designed with dyslexic readers in mind.

OpenDyslexic

Open Dyslexic is an open source typeface for readers with dyslexia. The rationale behind the design:

OpenDyslexic is created to help with some of the symptoms of dyslexia. Letters have heavy weighted bottoms to indicate direction. You are able to quickly figure out which part of the letter is down which aids in recognizing the correct letter, and sometimes helps to keep your brain from rotating them around. Consistently weighted bottoms can also help reinforce the line of text. The unique shapes of each letter can help prevent confusion through flipping and swapping.
Open Dyslexic About page

Dyslexie

Dyslexie is a paid typeface (free for home use). The site references research that supports the following claim:

Representative research among many dyslectics has shown that the font Dyslexie actually helps them with reading texts faster and with fewer errors.
Dyslexie Research page

I would like to note that copying that text directly from the browser wasn't easy. The use of Cufon to embed the typeface drops each word into its own element that itself hides and replaces the raw text in a canvas element. I'm sure you can imagine how much that offends me.

The following video explains the idea behind the typeface:

Study: Can a font improve reading?

The latest study to suggest that typefaces designed to aid reading for dyslexics had little to no effect was presented at CSUN this past week. As I noted on Twitter, I already had an idea what the results would be, and I came away feeling validated.

The study hasn't been pubished yet and I saw its first general presentation. The study was conducted at Mount Allison University, a 2,500 student college with 215 full-time students with disabilities. 50% of those students are classified as having a learning disability.

The questions asked by the study:

Do the style of the letters on a page mean that you read faster and make fewer errors?

Do persons with LD [learning disabilities] using this font read faster and make fewer errors?

Anne Comfort, Matt Kalichuk, Harry Wenban and Dr. Louise Wasylkiw

The typefaces (Open Dyslexic and Dyslexie) make claims about their benefits, aggregated in the presentation as:

Students with surface dyslexia experience letters flipping and moving around; Letters needed to be bottom heavy to prevent them from moving around

New font would increase reading speed

Will also increase accuracy (fewer errors)

Will decrease reading stress

Widely promoted to on-line uses and in word processing (Instapaper, iPad, an app)

Strong anecdotal feedback

Anne Comfort, Matt Kalichuk, Harry Wenban and Dr. Louise Wasylkiw

The presenter outlined some literature references, the procedure the team followed to perform the study, the nature of the participants (and control group), and the overall results.

The first bullet in the summary wraps it up nicely:

The font does NOT improve reading speed or accuracy for students with LD.

Anne Comfort, Matt Kalichuk, Harry Wenban and Dr. Louise Wasylkiw

An interesting note from the study was that half of each group (50% of control, 57% of LD group) said they would consider using the font and were then shown how to access it (download and install it, which I assume was Open Dyslexic). In a follow-up, none of those participants were using the font.

Another interesting point was that 40% of the control group and 48% of the LD group thought they performed better when using Open Dyslexic, though that was not the case.

As anyone who's done user testing knows, it's not uncommon for users to report one thing while doing or thinking another, so I consider this to be anecdotal reinforcement that the typeface had no benefit for users.

Study: Good Fonts for Dyslexia: An Experimental Study

In late 2013 I found a write-up on a Spanish study that reviewed which fonts were easiest for readers with dyslexia. The post summarizes the study:

Based on the evaluation of 48 dyslexic subjects ages 11-50, reading 12 texts with 12 different fonts, they determined that reading performance was best with sans serif, monospaced, and roman fonts used in the study. They also found that reading was significantly impaired when italic fonts were used.

[…]

Use of the OpenDyslexic font did not enhance text readability or reading speed. The study participants strongly preferred Verdana or Helvetica over the OpenDyslexic alternative.

Good Fonts for Dyslexia – An Experimental Study

You can find the full text of the study in a PDF file on the site for the Natural Language Processing group of the Department of Information and Communication Technologies at Pompeu Fabra University.

General Tips

For those of us who build applications and sites with content of any length (whether instructions for shopping carts or rant-laden long-form articles), I have found a few techniques are generally agreed upon by the community (feedback is welcome!):

Avoid justified text.
Use generous line spacing / leading.
Use generous letter spacing.
Avoid italics.
Generally use sans serif faces.
Use larger text.
Use good contrast.
Use clear, concise writing.

This generally follows rules for good typography.

You may have heard that Comic Sans is easier for readers with dyslexia to understand, but so far that evidence appears to be anecdotal. Certainly not enough to warrant punishing all your other users.

If you read an article that suggests users with dyslexia see letters flip or rotate, then be wary. Not only was this assertion challenged by participants in the study reported at CSUN, but generally the participant reaction was anger. The flipping/rotating may be a myth perpetuated by those without dyslexia in an effort to make sense of its effects.

Update: March 26, 2015

In a post from 2011 (Dyslexia, Fonts & Open Source), Mike Gifford outlines some of the issues related to supporting readers with dyslexia, including typefaces.

Update: April 17, 2014

Neil Milliken notes that, as someone with dyslexia, he finds the custom dyslexic typefaces unhelpful and unattractive.

Booster Conference Slides: Making Your Site Printable

noreply@blogger.com (Adrian Roselli) — Wed, 11 Mar 2015 09:51:00 +0000

Giving my talk at Booster. Photo from Booster by Tatiana Kolesnikova.

I'll fill this up with notes and other content later, but in the meantime here are the slides from my talk this morning:

I've written a bunch of handy stuff on print styles, here are some links (or you can see all posts tagged print on my blog) along with other resources (most of this is referenced in my slides):

PrintShame and the Zurb print styles update (June 27, 2014).
More Evidence of the Need for Print Styles, April 6, 2012.
The example page/site from my slides (which may go away once our next site design comes out).
Replacing images when printing, May 14, 2013.
Printing from Mobile Has Improved, June 30, 2014.
Tracking When Users Print Pages, March 26, 2013.
Tracking Printed Pages (or How to Validate Assumptions), December 11, 2013.
Make your website printable with CSS, posted online March 5, 2013.
Calling QR in Print CSS Only When Needed, March 8, 2013.
Tracking When Users Print Pages, March 26, 2013.
Tips And Tricks For Print Style Sheets, March 8, 2013.
Printing The Web, March 25, 2013.
CSS Paged Media Level 2
CSS Paged Media Module Level 3
Proposals for the future of CSS Paged Media
Can you typeset a book with CSS?

The Twitters

Booster had a lot of activity on Twitter (not just about my talk, imagine that). I've collected some of the tweets below.

How about this: not 1 but 2 evolters speaking at @boosterconf today! Give a big Bergen welcome to @aardrian and @martinburnssv!
— evolt_org (@evolt_org) March 11, 2015

If your site doesn't support the printer it's not responsive. @aardrian #booster2015 #RWD
— Tin Kadoic (@tinkadoic) March 11, 2015

I can guarantee you that people print your site more often than they click your carousel! @aardrian #booster2015
— Regine Sagstad Berg (@reginesagstad) March 11, 2015

#booster2015 lightning talks ⚡️ from @aardrian, @ramyo, @hallvaren & @sivmhollup. pic.twitter.com/UYdIrIwLJe
— Elisabeth Irgens (@elisabethirg) March 11, 2015

@aardrian Responsive also means printable. Loving #booster2015 already!
— Siv Midtun Hollup (@sivmhollup) March 11, 2015

“…after more than a decade of support for print styles, (@RWD advocates) still forget…” http://t.co/maGjWh66BP ht @elisabethirg @aardrian
— David G. Smith (@iDGS) March 11, 2015

While Opera chose not to greet me upon my arrival in Norway, somebody must have sent former employee @lasmagnu to chat at dinner.
— Adrian Roselli (@aardrian) March 11, 2015

Open space at #booster2015 run #leancoffee stylee, with @ourfounder @jrothman @mattbarcomb @aardrian @andrev & others pic.twitter.com/dWGcGd7V77
— Martin Burns (@MartinBurnsSV) March 12, 2015

Feedback (Added 26 March 2015)

I got feedback from my talk, and it was overwhelmingly positive. Consider mine was the first lightning talk of the first session of the first day immediately after the keynote, I'm just pleased people took a moment to vote.

Voting consisted of asking attendees to drop a colored card into a basket representing my talk. There were three options. I got 15 green cards (it was amazing), 4 yellow cards (it was okay), and no red cards (I didn't like it).

Only one person left a comment, which was Talked too fast. I cannot disagree with that. With 10 minutes to cover 42 slides and do so to an audience of non-native English speakers, I'm thrilled I only received that comment once (though I suspect many others agreed).

Video

Making Your Site Printable - Adrian Roselli from Booster conference on Vimeo.

Speaking at Avega Group in Stockholm

noreply@blogger.com (Adrian Roselli) — Mon, 16 Feb 2015 15:56:00 +0000

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:

Using Bookmarklets on Mobile

noreply@blogger.com (Adrian Roselli) — Sat, 14 Feb 2015 16:55:00 +0000

Viewing comments on Medium (first image), then being prompted to login in order to view comment replies (second image). Both images are current version of Chrome on Android.

This is a follow-up to my post CSS Bookmarklets for Testing and Fixing.

While surfing Medium the other day I chose to read a comment. As usual, the comment overlay came up at the bottom of my screen with an option to see replies. When I tapped the replies link, I was immediately prompted to log in. This was new.

In the time between me tweeting Medium to complain, and them responding that it was a bug, I wrote a bookmarklet to remove that login overlay.

This was the easy part. The hard part was using the bookmarklet on my mobile.

As you may already know, there is no bookmark bar in the average mobile browser (at least not on smaller screens). Viewing bookmarks will generally take you to a new tab or screen, meaning a bookmarklet cannot affect the page you were viewing.

Conveniently, once you create a bookmark it becomes available through the auto-complete feature of the browser address bar. In this case, while viewing the page I tapped the address bar and started typing the name of my new bookmarklet. It helps that I remembered this, otherwise it might have taken more time.

Typing the name of the bookmarklet into the address bar as it shows options from auto-complete (first image), then once the bookmarklet fires I can see the comment replies (second image). Both images are current version of Chrome on Android.

This allows you to use bookmarklets you have specifically crafted to improve your mobile experience, or just general bookmarklets that you might not have thought would work on mobile.

Fix Medium Bookmarklet

Hopefully by the time your read this Medium will have fixed the issue. If not, here is the bookmarklet I use:

javascript:(function(){var a=document.createElement('style'),b;document.head.appendChild(a);b=a.sheet;b.insertRule('.overlay{display:none !important;}',0);})()

Copy or drag the link to your bookmarks, or make a new one and paste the code from above: Fix Medium

Of note: after you do this, the hit state of the View n replies link is partially blocked. You need to tap at the very top of the link. If that requires too much precision, then zoom in until it it wraps to two lines and tap the top line of text.

What I Was Reading on Medium

Christian Heilmann wrote a great post on the web application myth, which may be the title, though I can't be sure because Medium's URLs never match what may be the page title, which is denoted by an h3 because there is no h1 nor h2 on the page...

Anyway, regardless of title, go read what I'll title The Web Application Myth: Web applications don’t follow new rules.

Speaking at Booster Conference in Bergen

noreply@blogger.com (Adrian Roselli) — Thu, 12 Feb 2015 19:14:00 +0000

A couple days ago I mentioned that I'd be speaking at the Ace! Conference in Krakow. I also suggested I might have other speaking gigs around the same time in Europe. Now I can announce that I'll be in Bergen, Norway speaking at the Booster Conference.

Most of my talks lately have been about accessibility, but for this one I'll be talking about another topic that makes me rant — print styles:

The push for responsive web design has helped web developers consider how the sites they develop can adapt to different devices, including sizes, screen resolutions, and even contexts. It should now be easier than ever to respond to a format that has existed since the start of the web — print. I'll walk through the process for making your responsive sites respond to the format we most often forget and show you how to use Google Analytics to track what pages are printed from your site.

Given the generalized nature of the conference (it bills itself as a software conference for the whole team), I am looking forward to speaking to a diverse group of attendees, both as users and developers.

The conference runs from March 11 through the 13^th, but I'll be presenting on day one (Wednesday the 11^th). The conference will be held at the Scandic Hotel Bergen City, and again for my own benefit I have embedded a map.

Speaking at ACE! Conference in Krakow

noreply@blogger.com (Adrian Roselli) — Tue, 10 Feb 2015 19:01:00 +0000

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:

Best Viewed in 1 of 11 Flavors of Chrome!

noreply@blogger.com (Adrian Roselli) — Tue, 03 Feb 2015 22:17:00 +0000

Make sure you view this on Google's flavor of Chrome, otherwise, well, I have no idea what will happen.

Sometimes it's frustrating being a developer who's been around to see Mosaic supplanted by Netscape Navigator supplanted by Internet Explorer supplanted by Chrome/WebKit. Developers just love dumping one platform for the new shiny.

As I said last week, all of this has happened before and will happen again. The difference with this post is that I am not going to rant about lazy developers whining over a world that will still contain Internet Explorer and its offspring.

Instead, let's ask the average anti-IE / pro-WebKit developer a very simple question — on how many flavors of Chrome do you test?

I don't mean how many versions of Chrome. I also don't mean how many different WebKit-based browsers. No, how many flavors of Chrome?

I'll guess probably not more than a couple. I have four that I can, but typically don't, use. Even at four that's far too few.

Today Peter-Paul Koch pointed out that there are eleven (11!) flavors of Chrome (Chromia, if you will). All of them built on Chromium. Here's the breakdown from his article:

Vendor Version Tested Default Remarks

Google 40 Yes Yes

Opera 39 Yes No

Yandex 38 Yes No

Xiaomi 34 or 35 Yes Yes Zoom reflow

HTC 33 Yes Yes Zoom reflow

Cyanogen 33 Yes Yes

LG 30 Yes Yes Mid-range

Puffin 30 Yes No Proxy

Samsung 28 Yes Yes

Amazon 37 No Yes Silk

LG 34 No Yes High-end

Peter-Paul Koch from the post Chrome continues to fall apart at brisk pace

Vendor	Version	Tested	Default	Remarks
Google	40	Yes	Yes
Opera	39	Yes	No
Yandex	38	Yes	No
Xiaomi	34 or 35	Yes	Yes	Zoom reflow
HTC	33	Yes	Yes	Zoom reflow
Cyanogen	33	Yes	Yes
LG	30	Yes	Yes	Mid-range
Puffin	30	Yes	No	Proxy
Samsung	28	Yes	Yes
Amazon	37	No	Yes	Silk
LG	34	No	Yes	High-end

You may have noticed that this only accounts for mobile devices. Some on Twitter also noted Chrome on Google TV, or on Android TV, which doesn't account for the Samsung Android TV nor the Sony Android TV.

So maybe it's fifteen (15!) flavors of Chrome. Either way, I suspect that number will continue to grow.

Even if I include IE6, I only have to worry about 5 versions of Internet Explorer across mobile and desktop. If I want the idyllic WebKit-only world so many seem to crave, then I need about a dozen flavors of Chrome before I can get started with the Operas, Safaris, Yandexes, and Vivaldis (plural because those forks of WebKit also have their own versions to support)

All of this written against the backdrop of a Medium post claiming it won't consider IE11 a Tier 1 browser because of what it considers an ugly border in the editor view. Unable to find IE developers anywhere, nor to figure out where to file a bug, Medium just browser-sniffs IE11 into a second tier. I'm sure Medium tested across eleven flavors of Chrome, though.

Please read PPK's piece: Chrome continues to fall apart at brisk pace

All of This Has Happened Before and Will Happen Again

noreply@blogger.com (Adrian Roselli) — Tue, 27 Jan 2015 03:04:00 +0000

Jacob Rossi from Microsoft put together an article for Smashing Magazine that discusses Microsoft's Project Spartan web browser, Inside Microsoft’s New Rendering Engine For The “Project Spartan”.

Unlike other click-bait efforts that only speculated that perhaps Spartan was going to be WebKit-based, showing their own preference instead of any real understanding of the browser world, this one is filled with lots of great information. You should read it.

The first few comments, on the other hand, started off a mess (with many more on Twitter since the initial announcement). Two examples from the article:

So here was the opportunity to swallow their pride and join WebKit to make the internet a better place

…and they built *another* closed-source, proprietary rendering engine.
[Slow sarcastic clap]

Jones

« IE did shape the web in a positive way »

This made me laugh more than it should. You seem to forget why Internet Explorer has felt the need to change its name in the first place. And it’s not because it was «too good» or «too innovative»…

Erick G.

Many folks jumped in and corrected, down-voted, and generally balanced the insipid whining. Christian Heilmann, who has logged more years working for Firefox than most devs have logged using it, waded in to challenge many of the incorrect assertions.

Bruce Lawson, who happens to work for another browser vendor (Opera) noted all the things Internet Explorer did for the web in his five-year-old post In praise of Internet Explorer 6. It's also a cautionary tale about where reliance on a single rendering engine will take us.

What these two guys have in common, besides working for the competition, is that they have been on the web since its dawn. They've seen what happens when one browser gets too big (Internet Explorer) and how we spend the next decade-plus digging out from the mess.

How did we get into that mess? By people coding for one rendering engine.

Everyone who calls for WebKit in Internet Explorer is exactly the same kind of developer who would have coded to Internet Explorer 15 years ago (and probably happily displayed the best viewed in badge).

If you are that developer, then it will all be your fault when it happens again. When WebKit is no longer the hot engine. When Chrome loses its dominance. When Apple's market share falls to match the developing world. You will be to blame.

Do you think that won't happen? Just look to Android browser fragmentation, or WebKit failing to support a standard that Firefox and IE have nailed, or Chrome introducing its own proprietary features (can't find the link; it's coming), or failing to use best practices as it tries to carry the next big thing forward, or the complete lack of developer relations from Apple. We've had over half a decade of warning signs.

It's happening again, and every petulant, lazy developer who calls for a WebKit-only world is responsible.

Update: February 3, 2015

My rant continues in my post Best Viewed in 1 of 11 Flavors of Chrome! It's built off PPK's Chrome continues to fall apart at brisk pace. Even I didn't know there are so many Chromium variants.

CSS Bookmarklets for Testing and Fixing

noreply@blogger.com (Adrian Roselli) — Sun, 25 Jan 2015 00:14:00 +0000

Animated image showing the Pinterest site and its infuriating blocking overlay, which is removed with the bookmarklet below.

I regularly have to test sites in development, review some third-party site, or just use a site in my day-to-day time wasting (and banking) rituals. I've relied on viewing the page's source or popping into my browser's dev tools to find a missing element, copy un-transformed text, check for inline styles, and so on. Typically I am relying on CSS and not JavaScript, as that is where I excel.

I got a little annoyed doing that all the time, and this morning I had reason to visit Pinterest and mostly lost my marbles at its login overlay and refusal to scroll. So I channeled that rage and taught myself to build a bookmarklet to dump that Pinterest overlay crap. I have created a few more that include my standard styles for testing, styles that perhaps you (dear reader) will find useful.

I'll have basic instructions below showing you how you can build your own and/or modify the ones I've provided.

Bookmarklets You May Steal

Note that I say may steal. That's me giving you permission. Note that I call them bookmarklets. That's me not giving into the term favelets or whatever HotJava called them (was it hot links?).

Restore Link Underlines

You know what's cool? Removing link underlines and providing terrible link color contrast. It's so cool, in fact, that I want to make those sites less cool. As well as usable. Read my rant on this.

This bookmarklet restores link underlines across the board. Every link. After all, if you want the link underlines, you probably don't care that the designer would freak out at the noise it adds to the page.

javascript:(function(){var a=document.createElement('style'),b;document.head.appendChild(a);b=a.sheet;b.insertRule('a[href]{text-decoration:underline !important}',0);})()

Copy or drag the link to your bookmarks, or make a new one and paste the code from above: Link Underlines

Restore Focus Outlines (or Fix Virgin America)

Just as cool as removing link underlines is removing the outline on elements that get focus as you tab through a page. After all, if you've hidden the links, why not hide when the links are selected. Virgin America tends to agree.

This bookmarklet not only restores the outline (in the form of the two-pixel dotted blue line), but also adds a drop shadow for those cases where the blue is lost against the surrounding colors.

javascript:(function(){var a=document.createElement('style'),b;document.head.appendChild(a);b=a.sheet;b.insertRule('*:focus{outline:2px dotted #00f !important;box-shadow: 0 0 2em rgba(0,0,0,.75) !important;}',0);})()

Copy or drag the link to your bookmarks, or make a new one and paste the code from above: Focus Outlines

Find Inline Styles

Over at Algonquin Studios we have worked in the content management space for, well, since the dawn of content management systems. One of the risks of using a CMS is that your authors may accidentally (or intentionally) embed styles whether by pasting rich-text from elsewhere or by features built into the WYSIWYG editor within the tool. This is most common with text styles.

Sometimes it is faster to just find the elements that have a style attribute on them, as that's the first clue that there may be a conflict that needs to be corrected. This option will find any of those elements and give them a yellow background along with a two-pixel dotted red border (like the Windows "hot dog" theme from the previous century).

javascript:(function(){var a=document.createElement('style'),b;document.head.appendChild(a);b=a.sheet;b.insertRule('*[style]{border:2px dotted #f00 !important;background-color:#ff0 !important;}',0);})()

Copy or drag the link to your bookmarks, or make a new one and paste the code from above: Inline Styles

Find Duplicate ARIA Roles

In ARIA, there are a few instances of roles that should only appear once on a page. These landmark roles are banner, contentinfo, and main. In addition, the W3C HTML5.1 specification notes that there must be only one main element per page.

This bookmarklet will identify any additional instances of any of the once-per-page items above. If you know enough about coding ARIA, then you probably know enough about finding which of the roles/elements is on repeat. Offending items will have a two-pixel dotted red border and red background.

javascript:(function(){var a=document.createElement('style'),b;document.head.appendChild(a);b=a.sheet;b.insertRule('*[role=main]:nth-of-type(n+2),*[role=banner]:nth-of-type(n+2),*[role=contentinfo]:nth-of-type(n+2),main:nth-of-type(n+2){border:2px dotted #f00 !important;background-color:#f00;}',0);})()

Copy or drag the link to your bookmarks, or make a new one and paste the code from above: Duplicate ARIA

Find Missing Alt Attributes

An image without an alt attribute can be anything from an annoyance to a barrier to those using assistive technologies. Being able to quickly identify those images on a page can save time when figuring where to focus your efforts.

This bookmarklet will find those images and give them a two-pixel dotted red border. Note that it only looks for images with a missing alt, as a blank alt attribute is often perfectly valid.

javascript:(function(){var a=document.createElement('style'),b;document.head.appendChild(a);b=a.sheet;b.insertRule('img:not([alt]){border:2px dotted #f00 !important;background-color:#f00;}',0);})()

Copy or drag the link to your bookmarks, or make a new one and paste the code from above: Missing @alt

Reset Text Size (Added January 30)

Sadly, it is not uncommon for sites to reset the default size of the text on the page. Too often that is done to satisfy a design change. One site where I find the text too small to read comfortably, or at all, is Daring Fireball. I know I am not the only one to feel this way.

This bookmarklet will resize the text on the body element to 100%, ideally conforming to whatever your default browser preferences are. It works great on Daring Fireball, but could easily be overridden on sites that set the text size in other ways and/or on other elements.

javascript:(function(){var a=document.createElement('style'),b;document.head.appendChild(a);b=a.sheet;b.insertRule('body{font-size:100% !important;}',0);})()

Copy or drag the link to your bookmarks, or make a new one and paste the code from above: Reset Text Size

Find Empty Elements (Added May 6)

It is not uncommon for a WYSIWYG editor in a CMS or on a comment site to throw extra empty p elements into the content. While I once wrote a style into my development CSS to highlight these issues, I was reminded of the potential utility by a Happy Cog post on pseudo classes.

This bookmarklet will find elements that are empty — no content, no whitepsace. It will not highlight images (by excluding elements with a src attribute) nor form inputs (by excluding elements with a type element), two common self-terminating elements that will otheriwse trigger this. It isn't perfect, but you are welcome to make it your own.

javascript:(function(){var a=document.createElement('style'),b;document.head.appendChild(a);b=a.sheet;b.insertRule('*:not([src]):not([type]):empty{border:2px dotted #00f !important;background-color:#00f;}',0);})()

Copy or drag the link to your bookmarks, or make a new one and paste the code from above: Find Empty Elements

Fix Pinterest

When you visit Pinterest without a Pinterest account, or without being logged in, you are prompted to sign up/in by a terrible overlay. In addition, the page won't scroll past a certain point. This annoys me. So I made a bookmarklet to remove the two overlays and re-enable scrolling. You can test it on my abandoned Pinterest page.

javascript:(function(){var a=document.createElement('style'),b;document.head.appendChild(a);b=a.sheet;b.insertRule('.Modal, .UnauthBanner {display: none !important;}',0);b.insertRule('.hasFooter.Grid.Module{overflow-y:visible !important;}',0);b.insertRule('.noScroll{overflow:auto !important;}',0);})()

Copy or drag the link to your bookmarks, or make a new one and paste the code from above: Fix Pinterest

Make/Modify Your Own Bookmarklet

The Virgin America site is made usable for those who navigate with a keyboard by restoring link underlines and adding focus styles to elements.

If you look at the code chunks above, you'll see I am doing the same thing over and over. I am using the JavaScript CSSStyleSheet.insertRule() method to insert a new style rule into the page's stylesheet. Not only does the Mozilla Developer Network have a great overview with sample code, but David Walsh shows similar code with some minor tweaks.

This approach allows me to leverage my CSS skills to write selectors to find and style elements on the page. Since CSS has so many powerful selectors, I find this easier to quickly repurpose. In addition to adding a new style, I always include !important with each so that it will override any inline styles.

If you are writing a function from scratch, make sure you minify it to take up less space (you may bump into character limits for a bookmarklet). Pre-pend javascript: and make it the href value of a link and you are done.

Here is a sample block of code you can use with the styles rendered in bold so you can replace them with your favorite selector. In this example I have two style rules so you can see how to add additional selectors.

javascript:(function(){var a=document.createElement('style'),b;document.head.appendChild(a);b=a.sheet;b.insertRule("a[href]{text-decoration:underline !important}",0);b.insertRule("*[style]{border:2px dotted #f00 !important;background-color:#f00;}",0);})()

And with that you should be off to the races.

Links to my posts referenced above:

Update: February 14, 2015

It's hard to use bookmarklets on mobile devices, but I have a solution.

On Use of the Lang Attribute

noreply@blogger.com (Adrian Roselli) — Sun, 11 Jan 2015 21:41:00 +0000

Way back in October I noticed this WHATWG HTML bug (26942) where someone asked why do these examples of <html> lack the lang attribute? I thought the answer from Hixie was a bit dismissive and not based on any data or real-world benefits of use, particularly in the context of screen readers:

Why not? Realistically, few people include it. It just means the language is unknown.

Comment from Hixie

At the time, I could not get the latest archive to download from WebDevData.org (though that has changed, see below), so I fell back to asking for help on why the lang attribute is valuable.

How the `lang` Attribute on `<html>` Is Used

I got lots of good bits of feedback, which I collected into a Storify. I've distilled all that great information to these key points:

VoiceOver on iOS uses the attribute to auto-switche voices.
VoiceOver can speak a particular language using a different accent when specified.
Leaving out the lang attribute may require the user to manually switch to the correct language for proper pronunciation.
JAWS uses it to load the correct phonetic engine / phonologic dictionary — Handy for sites with multiple languages.
NVDA (Windows) uses it in the same way as VoiceOver and JAWS.
When used in HTML that is used to form an ePub or Apple iBooks document, it affects how VoiceOver will read the book.
Firefox, IE10, and Safari (as of a year ago) only support CSS hyphens: auto when the lang attribute is set (not from Twitter; source).

In the absence of setting a lang attribute on the <html> element, screen readers will fall back to the user's default system setting (barring any custom overrides) when speaking content.

How Many Pages Use `lang`

On January 8, WebDevData.org (from a W3C Community Group) posted its latest archive (which did not error on download, woo!). It consists of the HTML from 87,000 web pages.

I pulled down the 780MB file and re-taught myself the skills necessary to parse the files. For those who are regular expression geniuses, you are welcome to suggest an alternate approach, but I used the following pattern to return all the <html> elements: <html([^>]+)>. It fails for any <html> with no attributes at all, but for what I am doing that's ok.

Of the 84,054 pages I parsed (I excluded XML, ISO files, and so on), I found that 39,433 use the lang attribute on the <html> element. That's just about 47% (46.914% if I understand significant digits correctly).

What that tells me is that instead of the case being that few people include it, nearly half the web includes it.

There are 12,672 instances of xml:lang, though at a quick scan they appear alongside lang. If anyone with better regex skills would like to help me further parse, please let me know.

Why You Should Use the `lang` Attribute on the `<html>` Element

Hyphens

By using lang, you get the benefits of hyphen support in your (modern) browser that you otherwise would not get (assuming you use hyphens: auto in your CSS).

Accessibility

At the very least, lang is a benefit for screen reader users, particularly when your users don't have the same primary language as your site. It allows proper pronunciation and inflection when the page is spoken.

WCAG Compliance

Including the lang is a Level A requirement of the Web Content Accessibility Guidelines 2.0 (specifically item 3.1.1 Language of Page). Technique H57 identifies the lang attribute specifically.

Internationalization

The W3C Internationalization (I18n) Activity has a great Q&A on why you should use lang, which was updated less than two months ago. I'll reprint the start of the answer, but there is far more detail and I strongly recommend you go read it.

Identifying the language of your content allows you to automatically do a number of things, from changing the look and behavior of a page, to extracting information, to changing the way that an application works. Some of language applications work at the level of the document as a whole, some work on appropriately labeled document fragments.

We list here a few of the ways that language information is useful at the moment, however, as specifications and browsers evolve in the future there could be numerous additional applications for language information.

W3C Internationalization (I18n) Activity

Interesting Aside

If you go to the WHATWG HTML5 specification today and view the page source, you'll see the following language declaration in the code:

<html class=split data-revision="$Revision: 8877 $" lang=en-GB-x-hixie>

Not to be outdone, the W3C HTML5 spec has the same language declaration.

If anybody has the en-GB-x-hixie phonologic dictionary in his or her screen reader, I'd love to hear it.

While technically allowed (the -x puts it in the private use sub-tag category), it's bad form:

Private-use subtags do not appear in the subtag registry, and are chosen and maintained by private agreement amongst parties.

Because these subtags are only meaningful within private agreements and cannot be used interoperably across the Web, they should be used with great care, and avoided whenever possible.

W3C, Language tags in HTML and XML, further referencing IETF BCP 47 Section 2.2.7

Update: January 1, 2015

For what it's worth, I've filed bugs against the W3C HTML5 spec and the WHATWG HTML5 spec.

Update: February 25, 2015

Another case where a lang attribute is important, though in this case on a specific element, is outlined in the piece HTML5 number inputs – Comma and period as decimal marks:

<input type="number"> will open a numeric software keyboard on modern mobile operating systems. Not every user can input decimal numbers into this convenient field without proper localization.
[…]
Half the world uses a comma and the other half uses a period as their decimal mark. (In Latin scripts.) Does your web application take that into consideration? Do the browsers?

Daniel Aleksandersen

Announcing My Ring Warmer App

noreply@blogger.com (Adrian Roselli) — Thu, 01 Jan 2015 21:46:00 +0000

Animation showing the Ring Warmer in action.

If you have to wear a ring, then perhaps you have experienced the discomfort of putting a cold ring on your finger (maybe in the morning in a cold house). I decided that I could do something about that using the only tool in the modern developer's toolbox — the smartphone app.

I'm kicking off the new year by announcing that my Ring Warmer app is done. Well, it's a web app. Actually, it's just a web page. Living as nothing more than a block of code at CodePen. Regardless, I started this in late 2012 and then mostly forgot about it, so I'm thrilled to call it done.

The opening image is an animated GIF that shows how one might use the Ring Warmer app. I've also embedded the same animation as an Instagram video (or view it directly on Instagram):

My ring warmer app is finally ready for release.

A video posted by Adrian R (@aardrian) on Jan 1, 2015 at 9:23am PST

The idea here is that you can choose a ring size and a warmth level, place your ring in the designated spot, and wait patiently for it to work its magic.

The idea is, of course, absurd.

In the strictest sense, it can work. At the lowest setting (warm), only the red LEDs will light up, carrying one-third of the total heat a pixel can produce. As you move to the highest setting (hottest), all the LEDs are lit to generate white, so each pixel is producing its maximum heat as the red, green, and blue LEDs are all lit.

Of course, the amount of heat this carries is negligible. You will transfer more heat to the ring from the warming battery than from the pixels. The ring itself might not get very warm unless you also fire up the radio antenna (I left that feature out as a courtesy).

Now that I've gotten as much pranking out of this fake app as possible, I figured I'd at least write it up a bit.

Very simply, I use a border radius with some box shadows to make the glowing ring. Then I drop the white glowing dot (using box shadows and border radius) onto one edge and rotate the entire thing in perpetuity. It's a mess of mixed sizing units, questionable animation syntax, and useless elements.

Then I made a form so you can change the ring size and the temperature. The ring size isn't matched to any real measurements, except in Chrome on my Samsung Galaxy S4 the default size matches my ring. All sizing after that is based on ems, so it doesn't scale like a real ring. The temperature change is nothing more than colors with CSS transitions and some JavaScript that sets explicit styles instead of classes. In other words, it's a terrible idea to copy this code.

Regardless, here's the pen in action:

See the Pen Ring effects by Adrian Roselli (@aardrian) on CodePen.

This will not be available in any app store. You can load the pen in full screen view to trick your friends if you are that bored.

Don't Tweet Pictures of Text

noreply@blogger.com (Adrian Roselli) — Sun, 21 Dec 2014 15:56:00 +0000

Earlier this week M.G. Siegler posted Hacking the Tweet Stream at Medium, where he describes the trend of posting images of text to do an end-run around Twitter's character limits. His post quickly changes from descriptive to prescriptive, advocating for this behavior to bypass what he sees as a limitation of Twitter.

Christian Heilmann quickly responded to note what a bad idea this is (my words) in his post Great publishing works with the medium, not against it.

Reasons Not to Do It

Christian covered a few reasons why you shouldn't rely on images, which I am including here from his Medium post:

Maybe they are blind and can not see text in an image

Maybe they are on a tiny device and whilst the font here is readable the text in a small JPG with artifacts is less so.

Maybe they are on an unreliable connection and the image hasn’t loaded yet

Maybe they have a mis-configured ad-blocker that is overzealous with its blocking

Let me add some more:

Maybe the tweet isn't in the reader's native language and he/she wants to translate it.
Maybe the text contrast is too low for a small screen or sunlit screen.
Maybe the user is bumping against data caps and has to pay for each extra byte.
Maybe the user is on a feature phone (think of users outside of North America and Europe).
Maybe the user relies on searching the text to find relevant tweets. There is an opportunity cost to not using text.

This isn't an accessibility issue, it's a usability issue and an engagement risk. When you factor connection quality, data plan caps, image quality, contrast, potential image blocking, and search failures, this seems like a terrible method to get your important message in front of people.

Better Options

There are some easy ways to get around this that are native to the medium. I originally offered three of these in October, so I'll include them here with more.

Link to the source. Most of these tweets are screenshots from web pages, so link to them.
Use Tumblr or a similar platform. Twitter Cards will embed the image into the tweet (except for Instagram).
Tweet your own text version or abstract in a follow-up tweet.
When you are retweeting someone else, include an abstract or link to the source.
Ask the original tweeter for the text or the URL of the source.
Use a tool meant for this purpose, like Easy Chirp (an example using a useless tweet from the CDC).
Write less. Get to the point, focus on the message, write for the medium.

Now for the Expected Rant

I think this is too easy to dismiss unless there are examples and context. I think it's important to also show that even people who work in UX struggle with it, as I too have done before.

Media Outlets Are Getting Lazy

It seems more and more news outlets are trying this out. In so doing, they are leaving some readers in the dust. More importantly, the reporters who do this are leaving their employers in the dust by not linking back to the news site.

I even asked politely for a non-image version, maybe a link to a release or news story. No response.

Full Sony Pictures statement... pic.twitter.com/zxM0hMQxHG
— Brian Stelter (@brianstelter) December 17, 2014

I asked the same here, and again no response.

POTUS statement on school attack in Pakistan pic.twitter.com/trbg2biLXU
— Jim Acosta (@Acosta) December 16, 2014

Same situation, different news outlet, still requested a plain text link. At least this tweet has an abstract, though no link to the source.

BREAKING: FBI says North Korean government is responsible for the hacking of Sony Pictures pic.twitter.com/JbEmlCr8nK
— NBC Nightly News (@NBCNightlyNews) December 19, 2014

People Who Should Know Better

While these examples are far from the only three who engage in picture-only-tweets, they each came up in my timeline recently and none included anything helpful for users who cannot see the image (whether by vision impairments or technology issues). These are in reverse-chronological order.

Jared Spool, from his personal account, tweeted a screen shot that had already made the rounds, and didn't take any opportunity to add any value. Of course I got snarky, but when this image first appeared at least I asked for the source URL and got it. It's not that hard.

The Interview. pic.twitter.com/SPTnww0HzB
— Jared Spool (@jmspool) December 20, 2014

This tweet from Zeldman is an image of browser stats from a site (probably one of his). That's it, just an image. No descriptive text, no context (though the included text might make it seem NSFW). As I demonstrated in a follow-up tweet, you can fit all the information into a tweet as plain text.

I’ll show you mine... pic.twitter.com/lcePQjWj32
— Jeffrey Zeldman (@zeldman) December 11, 2014

Luke Wroblewski ran a series of tweets which were nothing but images, though he included a barely-legible URL at the bottom of each image (itself a gray bit.ly URL that is so small and light it's terribly difficult to tell a 1 from an l). Why would he do this when the tweets had more than enough characters for the URL as well? Even the image confused some users. I opted to retweet some of them with the links restored and context added.

There is no fold. [part 1] pic.twitter.com/OlcR1tWy7l
— Luke Wroblewski (@lukew) December 8, 2014

I am of the opinion that if your image-only tweets had text or links to sources, readers wouldn't need to make a Storify of them, manually creating the URLs on your behalf (and noting that now the embedded-in-image links are clickable).

Given the influence these names have on web developers and the industry in general (497,000 followers combined), and given Spool's position in the UX community, the recent push from Zeldman for accessibility on the web, and Wroblewski's constant push for better UX on mobile, their own behavior simply validates laziness when they could, rather should, be examples of useful, inclusive behavior.

Update: January 2, 2105

Steve Faulkner provides a less ranty collection of tips: Notes on providing alt text for twitter images. In it he outlines three of the techniques I do above, noting that by itself Twitter doesn't include any of the elements nor attributes that would enable accessible images otherwise.

Update: April 8, 2015

In my post Twitter (Accidentally) Takes Step Toward Accessible Images, I discuss how Twitter's new quoting feature can be used to help make image tweets more accessible.

20 Years Since Netscape Navigator 1.0

noreply@blogger.com (Adrian Roselli) — Mon, 15 Dec 2014 16:57:00 +0000

Screen shot of the Netscape 1.0N browser information page.

Twenty years ago today, Netscape Communications Corporation released version 1.0 of Navigator, the browser that became synonymous with the web (for the general public). Well, really the general public (and most developers) referred to the browser as Netscape, not by its real name, Navigator.

Based on Mosaic, Navigator quickly replaced the now not-so-cool Mosaic on my work and personal computer, and made Lynx look downright boring. It also presented the world with the creepy pulsing N, which was thankfully replaced pretty quickly. The first release also provided us with the familiar broken image icon that would persist until Internet Explorer's ubiquity usurped it.

Navigator persisted for more than thirteen years after that release, through the ups and downs of the oddly-named browser wars, until it was finally scuttled by its last owner, AOL, on December 28, 2007. AOL released security updates until March 1, 2008, marking the last update Navigator would ever see.

In honor of the browser where I cut my teeth learning all about the web, I grabbed the Navigator 1.0 release from the evolt.org browser archive (Mac and Windows 16-bit only, sorry, and it's the 1.0N release) and installed it on a shaky WindowsXP virtual machine. Unsurprisingly, trying to surf anywhere with it was a mess. The browser pre-dated frames, cookies, HTML tables (support came in 1.1), JavaScript, and support for any of the robust features of HTTP.

Screen capture of Wikipedia in Netscape 1.0.

Screen capture of Yahoo in Netscape 1.0.

Interestingly, Navigator was first released as free software, only to walk it back a couple months later. The Wikipedia post spends a couple sentences on this:

Netscape announced in its first press release (13 October 1994) that it would make Navigator available without charge to all non-commercial users, and beta versions of version 1.0 and 1.1 were indeed freely downloadable in November 1994 and March 1995, with the full version 1.0 available in December 1994. Netscape's initial corporate policy regarding Navigator is interesting, as it claimed that it would make Navigator freely available for non-commercial use in accordance with the notion that Internet software should be distributed for free.

However, within 2 months of that press release, Netscape apparently reversed its policy on who could freely obtain and use version 1.0 by only mentioning that educational and non-profit institutions could use version 1.0 at no charge.

If the history of browser is something you find interesting, Wikipedia has this handy timeline of web browsers dating back to 1990. On the plus side, this is an SVG file, so you can zoom in to read it. Eric Meyer has a more structured browser timeline, but it doesn't start until 1996.

"Timeline of web browsers" by ADeveria - Own work. Licensed under CC BY-SA 3.0 via Wikimedia Commons.

Interestingly, I don't use Netscape Navigator (any release) at all anymore, but I do still fire up Lynx a few times a month.

ReCAPTCHA Reboot

noreply@blogger.com (Adrian Roselli) — Sat, 06 Dec 2014 00:10:00 +0000

If you've got any stake in the wonderful world of spam bots, then you've probably heard about Google's CAPTCHA update, the No CAPTCHA reCAPTCHA. Essentially a user need only check a box and Google's ground-up pixie dust automagically knows whether or not to believe you. A video overview of the update:

Almost as soon as the announcement, people in the accessibility community spoke up stating it was completely broken, worked well, or worked no worse than the current option. To Google's credit, walking through the source code shows an effort was made to provide accessibility hooks.

At the very least it may prevent embarrassing mis-haps like the broken keyboard navigation at DigitalGov. At its worst it may appear that Google is turning a blind eye (pun intended) to accessibility as we've witnessed with its Web Components demos.

I am not an assistive technology (AT) user, so while I can fire up NVDA and try the form, I cannot truly experience it the way a day-to-day or power user would. Conveniently, both Patrick H. Lauke and Alastair Campbell made demos so that anyone can try it out for themselves (Patrick's demo, Alastair's demo).

I started to track the comments on Twitter in a Storify (and will continue to do so), but in the interest of providing a narrative, archiving the content pending the inevitable heat death of Storify, and having a simpler format, I am embedding the tweets and links here.

Video Samples

These three video examples from Patrick Lauke show the reCAPTCHA using three browser/AT combos:

Windows 8.1, JAWS 16, Firefox.
Windows 8.1, JAWS 16, Internet Explorer 11.
Windows 8.1, NVDA, Firefox and Internet Explorer 11.

Articles / Posts

Derek Featherstone

Derek Featherstone turned around an accessibility review pretty quickly with On the Accessibility of Google’s No CAPTCHA and provided these results:

We tested it without any assistive technology for simple keyboard use. Can I use the keyboard to check that checkbox, and can I see the keyboard focus to know where the cursor is? Yes, I can.

We tested with a couple of screen readers (VoiceOver running on a Mac, Narrator on Windows 8.1, and NVDA on Windows 7). Does the checkbox get announced by the screen reader as a checkbox, even though it clearly is NOT a native checkbox? And does it work properly when checking off the checkbox using the keyboard by pressing the space bar or double-tapping on the touch screen? Yes, on both counts. Google added ARIA’s role="checkbox" to ensure that modern screen readers treat the span as a checkbox, and they allowed that span to take the focus using tabindex.

We tested with Dragon NaturallySpeaking. Using Dragon, can someone look at the screen and say “Click checkbox” or “Click I’m not a robot” to effectively click the checkbox? Yes, on both counts.

Marco Zehe

Marco Zehe, who works on the Mozilla accessibility team, takes a different view in this post (in German) Warum die Zugänglichkeit von Googles neuer RECAPTCHA-Version kompletter Bullshit ist. In short, he notes it has all the code for accessibility, but in practice it doesn't quite work:

Während Googles neue Version von RECAPTCHA also rein vom Markup her die Voraussetzungen für Zugänglichkeit erfüllt, da dieses Kontrollfeld sowohl mit der Tastatur angesprungen werden kann als auch die richtigen Informationen an Screen Reader raus gibt, ist seine Zuverlässigkeit alles andere als gegeben, wenn man damit als Person mit einer Behinderung interagieren will.

Sina Bahram

Sina Bahram argues the CAPTCHA in general is a flawed premise (something with which Derek Featherstone agrees in his post) and so talks about the larger issues and how this reCAPTCHA implementation isn't necessarily any better, regardless of the accessibility improvements (embedded audio below, or you can listen to it directly at AudioBoom):

listen to ‘The #accessibility of captcha and why Google or anybody else's method doesn't work! #a11y’ on audioBoom

Edit (Dec. 7, 2014): Sina has posted a transcript of the audio.

WebAIM

The WebAIM mailing list also has a thread about the reCAPTCHA, some of which recaptures the commentary in the tweets following.

Twitter Conversation

want to test google's new reCAPTCHA? #a11y http://t.co/3UXl72mAHR (not half bad in Chrome w/JAWS+NVDA, fairly cruddy in other combos)
— patrick h. lauke (@patrick_h_lauke) December 3, 2014

How bloody unsurprising. Google makes the web even less accessible with their new captchas: http://t.co/S5I9Zau3ME #a11y #accessibility #fb
— Sina Bahram (@SinaBahram) December 4, 2014

. @aardrian @patrick_h_lauke Worked In VoiceOver Safari 8.01 I just interacted with an oddlynamed frame and ticked the checkbox.
— Tim Noonan (@TimNoonan) December 4, 2014

@pauljadam @aardrian @patrick_h_lauke Just verrified that when using a screen reader, I get qualified as a bot. As I predicted. #a11y
— Sina Bahram (@SinaBahram) December 4, 2014

@SinaBahram I checked the box, partially checked, unchecked. Rinse and repeat. I couldn't get it to stay checked. I do something wrong?
— Onj (@FreakyFwoof) December 4, 2014

@FreakyFwoof Other than being blind, no you didn't. Turns out blind people == bots, which is the most most folks are missing as I explain it
— Sina Bahram (@SinaBahram) December 4, 2014

@aardrian @SinaBahram @TimNoonan @pauljadam behavior varies based on heuristics/magic. e.g. IE/JAWS always prompted for extra CAPTCHA
— patrick h. lauke (@patrick_h_lauke) December 4, 2014

@aardrian @SinaBahram @TimNoonan @pauljadam also, there's a timeout - if you take too long, the new reCAPTCHA prompts you for extra CAPTCHA
— patrick h. lauke (@patrick_h_lauke) December 4, 2014

@aardrian @SinaBahram @TimNoonan @pauljadam IE/NVDA and FF/NVDA wouldn't let me go into the iframe somehow...
— patrick h. lauke (@patrick_h_lauke) December 4, 2014

@aardrian @SinaBahram import java.awt.Robot; robot.delay(4000); robot.mouseMove("x", "y"); robot.delay(500); leftClick();
— Steve Buell (@SteveBuell) December 4, 2014

@aardrian @SinaBahram Just needs the x,y target.
— Steve Buell (@SteveBuell) December 4, 2014

It seems that using IE is an important heuristic for not being human, in Google's reCAPTCHA update. Try it https://t.co/vlSDLYF8ID
— Alastair Campbell (@alastc) December 4, 2014

@derekcz @FreakyFwoof Also, vo/safari works better with it
— Sina Bahram (@SinaBahram) December 4, 2014

@steve_holmes @SinaBahram CAPTCHA is trying to solve the wrong problem. We want legitimate users. We don't care if they're alive.
— pietje poes (@stommepoes) December 4, 2014

@feather Did you test mobile? Touch while sometimes registering clicks doesn't reflect in mouse movements.
— Awkward Dad™ (@gregtarnoff) December 4, 2014

@feather That's a major flaw in IMO. People will now replace old captchas with this and kill off mobile engagement unknowingly.
— Awkward Dad™ (@gregtarnoff) December 4, 2014

maybe i'm a noob, but my experience using various browsers/ATs with http://t.co/Syt90SLOU3 was far from @feather's http://t.co/6MmiuWxdFH
— patrick h. lauke (@patrick_h_lauke) December 4, 2014

@patrick_h_lauke Just successfully used your test with NVDA+Firefox.
— Marco Zehe (@MarcoInEnglish) December 4, 2014

@MarcoInEnglish when i tab past the first link, focus gets on the iframe but NVDA gives no clue as to what just happened...
— patrick h. lauke (@patrick_h_lauke) December 4, 2014

@MarcoInEnglish have to explicitly use "m" key to jump into the frame. also, if i get extra visual/audio captcha, it doesn't announce errors
— patrick h. lauke (@patrick_h_lauke) December 4, 2014

@patrick_h_lauke Oh interesting, confirmed! Funny enough, when going to the address bar and shift-tabbing, you can get to it without problem
— Marco Zehe (@MarcoInEnglish) December 4, 2014

@MarcoInEnglish @feather just trying IE11/NVDA and also can't set focus on checkbox somehow... weirdness
— patrick h. lauke (@patrick_h_lauke) December 4, 2014

@MarcoInEnglish @feather it even seems to create a complete keyboard trap after a few attempts at forward/backward tabbing...
— patrick h. lauke (@patrick_h_lauke) December 4, 2014

@patrick_h_lauke not what we experienced, but again - different combinations etc. I still see it as a hugely positive step. @MarcoInEnglish
— Derek Featherstone (@feather) December 4, 2014

@aardrian The new #recaptcha is not fully localized for screen readers. Sample pict: Hungarian/English #a11y #i18n pic.twitter.com/jfyQg20ZZ6
— Károly Szántai (@szantaikaroly) December 5, 2014

On Google's new captcha "replacement", by @patrick_h_lauke http://t.co/pSrUIgFFJl
— Karl Groves (@karlgroves) December 5, 2014

@forzanom @Accessible_Info It's exceptionally frustrating that folks are saying, let's try it out. It doesn't matter. This binary logic!
— Sina Bahram (@SinaBahram) December 5, 2014

@forzanom @Accessible_Info Step #1: check the damn box. Step #2: solve the stupid captcha. Old way, Step #1: solve stupid audio captcha.
— Sina Bahram (@SinaBahram) December 5, 2014

@SinaBahram @stevefaulkner @Accessible_Info Exactly. I know my working tests were pure accident it seems. This is, and remains, total crap.
— Marco Zehe (@MarcoInEnglish) December 5, 2014

@MarcoInEnglish You cannot make a captcha in this fashion that is also accessible, without it being easily manipulated by bots.
— Sina Bahram (@SinaBahram) December 5, 2014

The #accessibility of captcha and why Google or anybody else's method doesn't work! #a11y https://t.co/GOAsSuhnGR via @audioBoom
— Sina Bahram (@SinaBahram) December 5, 2014

FYI: No reCaptcha didn't work for me in Win7/IE11/JAWS15 nor on iPhone/VO. @SinaBahram @SteveFaulkner @Feather @remixman @forzanom @Vick08
— Dennis Lembrée (@dennisl) December 5, 2014

@dennisl @SinaBahram @feather @remixman @forzanom @vick08 nocaptcha is not implemented on touch or mobile as yet (i believe)
— Steve Faulkner (@stevefaulkner) December 5, 2014

Conclusion

No CAPTCHA so far seems better than reCAPTCHA, but appears to still be an accessibility barrier. The better approach still appears to be finding a way to avoid any CAPTCHA solution. I applaud Google's effort to improve the accessibility from the start, but it's clear it needs more testing — which is to be expected when rolling out such a dramatic change.

Google's Clever Plan to Replace CAPTCHA With a Checkbox from Gizmodo.
Google Can Now Tell You’re Not a Robot With Just One Click from Wired.

Update: December 7, 2014

Over at Web Axe, Dennis Lembree has shared his thoughts in the post Google’s No Captcha Shows Some Progress. He notes that No CAPTCHA fails with JAWS / Internet Explorer, requires JavaScript, and doesn't work on touch devices.

A deaf-blind user posted on WebAIM to note that No CAPTCHA doesn't work for him in either Firefox or IE11.

Web Development Advent Calendars for 2014

noreply@blogger.com (Adrian Roselli) — Mon, 01 Dec 2014 14:44:00 +0000

For a few years now web developers around the world have celebrated ~~Saturnalia~~ Christmas with advent calendars covering topics related to the web. Some come and go, but you'll probably recognize a few regulars on this list.

I may have missed some, so please pass them along if you know of any. As I learned in prior years where I have tracked them, I don't know them all on December 1, and update accordingly. Some of this is because the sites don't promote the new calendar on the home page.

1. 24 Ways

24 Ways, the one that most of this think about for web development calendars, is back again. It's been going strong since 2005 and based on its history this year should have some good articles.

2. Perl Advent Calendar

Perl Advent Calendar goes all the way back to 2000 (and back then looked a bit more like a traditional advent calendar, too) and has been dispensing tips for Perl developers ever since.

3. 24 Jours de Web

24 Jours de Web is starting its second year as an advent calendar for web folk. Written in French, it is clearly primarily targeted at French speakers, but a round of Google Translate will open it up to far more readers (like me).

4. UXmas

UXmas is an advent calendar aimed at the user experience community. Coming from Australia, American readers may be thrown just a bit by the schedule. The calendar promises everything from sketches, to articles, to tools, to videos.

5. Webkrauts

Webkrauts has an all German advent calendar, and it also dates back to 2005. It covers general web topics, but being in all-German readers like me will benefit from a Google Translate version of the page.

6. Web Accessibility Advent Calendar 2014

Web Accessibility Advent Calendar 2014 is in Japanese, and thanks to the wonderful powers of Google Translate, I can tell you that it is a calendar to make the talk about Web accessibility (based on this statement: Webアクセシビリティに関する話題でつくるカレンダーです。). If you know Japanese, I welcome any corrections. The site Adventar.org appears to host other advent calendars, some about web technologies, some about ramen.

7. 24 Pull Requests

24 Pull Requests is less an advent calendar than it is an effort to mobilize developers. The goal is to get developers to send a pull request every day in December (up to Christmas), thereby supporting your favorite open source projects. There are even Coderwall badges for those who collect those sorts of things.

8. SysAdvent

SysAdvent is targeted to systems administrators, but there is a some cross-over to web developers. It has posts dating back to 2008, so there is plenty of good material there if you're too impatient to wait for each day to be revealed.

9. Lean/Agile Advent Calendar

Håkan Forss's lean/agile calendar was recommended to me by Martin Burns, to whom I generally listen on this topic. Håkan is an Accredited Kanban Trainer (AKT) and a Kanban Coaching Professional (KCP), and his first post seems pretty good, so I've added it. Also, LEGOs.

10. Performance Calendar

Performance Calendar hails this as the speed geek's favorite time of the year, ostensibly because of the tips it has been offering each December since 2009. It isn't just server optimizations you'll find here, so don't shy away because you're not a system admin. While I had it last year, it hadn't launched when I posted this, so I've rectified that.

11. Free Font Calendar

The Free Font Advent is providing information on and links to, you guessed it, a free font every day. The site is in German, but Google Translate will be more than enough to get the narrative written for each typeface. I picked this one up from Deborah Edwards-Onoro's advent calendar post.

12. Amazon Web Services Calendar

AWS Advent is dedicated to sharing information on features and services available from AWS. If you are an AWS user and have something to offer, as of this writing there are still five slots open for contributions. I also picked this one up from Deborah Edwards-Onoro's advent calendar post.

Not Web Related

The Royal Institution has something called Things to Do with Stuff that might be like an advent calendar, given this statement: Throughout December inspired by the 2014 CHRISTMAS LECTURES, we're releasing little nuggets that'll encourage you to interact with and understand the tech that surrounds us. The very first item is how to make a movie projector with a smartphone, a magnifying class, and a box.

Adrian Roselli

Slides from Global Accessibility Awareness Day 2015

Tweets!

Speaking at Inclusive Design 24 for Global Accessibility Awareness Day

For Infinite Scroll, Bounce Rate Is a Vanity Stat

Related

Update: May 18, 2015

Another Update on May 18

On the Mis-Named Mobilegeddon

From Google Webmaster Central

From Aaron Gustafson

What Is Your Mobile Traffic?

Oh, By the Way

While I Have Your Attention

Alt Text Bot Image Descriptions FTW

Selfish Accessibility at Buffalo Unconference

Twitter (Accidentally) Takes Step Toward Accessible Images

Twitter App Sets Browsers Back 10 Versions

So What?

Slides: Selfish Accessibility for Avega Group

ACE! Conference Slides: Selfish Accessibility

Video

Tweets

Feedback (Added 26 March 2015)

Typefaces for Dyslexia

Typefaces

OpenDyslexic

Dyslexie

Study: Can a font improve reading?

Study: Good Fonts for Dyslexia: An Experimental Study

General Tips

Update: March 26, 2015

Update: April 17, 2014

Booster Conference Slides: Making Your Site Printable

The Twitters

Feedback (Added 26 March 2015)

Video

Speaking at Avega Group in Stockholm

Using Bookmarklets on Mobile

Related

Fix Medium Bookmarklet

What I Was Reading on Medium

Speaking at Booster Conference in Bergen

Speaking at ACE! Conference in Krakow

Best Viewed in 1 of 11 Flavors of Chrome!

All of This Has Happened Before and Will Happen Again

Related

Update: February 3, 2015

CSS Bookmarklets for Testing and Fixing

Bookmarklets You May Steal

Restore Link Underlines

Restore Focus Outlines (or Fix Virgin America)

Find Inline Styles

Find Duplicate ARIA Roles

Find Missing Alt Attributes

Reset Text Size (Added January 30)

Find Empty Elements (Added May 6)

Fix Pinterest

Make/Modify Your Own Bookmarklet

Related

Update: February 14, 2015

On Use of the Lang Attribute

How the lang Attribute on <html> Is Used

How Many Pages Use lang

Why You Should Use the lang Attribute on the <html> Element

Hyphens

Accessibility

WCAG Compliance

Internationalization

Interesting Aside

Update: January 1, 2015

Update: February 25, 2015

Announcing My Ring Warmer App

Don't Tweet Pictures of Text

Reasons Not to Do It

Better Options

Now for the Expected Rant

Media Outlets Are Getting Lazy

People Who Should Know Better

Update: January 2, 2105

How the `lang` Attribute on `<html>` Is Used

How Many Pages Use `lang`

Why You Should Use the `lang` Attribute on the `<html>` Element