NoCoffee – Vision Simulator for Chrome

February 9, 2013

Screen shot of NoCoffee with blur level set to 'too tired to see -- get me some coffee.'

Vision problems are more pervasive than most of us realize. Upwards of 285 million people worldwide are visually impaired. Many more have low or moderate visual difficulties. The number in the U.S. is expected to double by 2020, due to the aging of the baby boomer generation.

NoCoffee is a free extension for Chrome (download link), which can be helpful for understanding the problems faced by people with slight to extreme vision problems, such as:

  • Low Acuity:
    Some pages use very small text or click targets. While it’s true that users use built-in browser zoom or assistive technologies like ZoomText, many non-technical users do not know how.

  • Low Contrast Sensitivity:
    Many designers use text with very low contrast, e.g. light gray text on white. Incidentally, here are some great tools for analyzing contrast on the web, and my favorite is the Snook Colour Contrast Check.

  • Colorblindness:
    Although color use in design is definitely a good thing, it’s important to remember the maxim “do not rely on color alone”, as 7-10% of males have some form of colorblindness. Chris Campbell has a great article describing color-related design problems and solutions.

  • Other: Visual snow, glare and ghosting:
  • Obstructed visual field:
    Obstructed visual field: floaters, obstruction to one side (retinal detachment or hemanopia), obstructed central vision (glaucoma), spotty vision (diabetic retinopathy) or obstructed peripheral vision (retinitis pigmentosa or macular degeneration). Note: the simulations of partial visual fields cannot follow your eye gaze as they would in the real world.

To use NoCoffee, download and install it from the Chrome store, and then click on the extension icon in the Chrome toolbar.

Limitations:

  • The simulations are not medically/scientifically accurate.
  • The simulations of partial visual fields cannot follow your eyes.
  • Settings are not linked to statistical probabilities, so it’s difficult to know how likely it is that NoCoffee is showing you something seen by many users. Still, the tool is helpful to get (or give) an idea of many types of vision problems.
  • Currently only Google Chrome is supported (at least until more browsers fill in their CSS3 support, specifically CSS3 filters).

Inspired by the Chrometric browser, visionsimulations.com and new capabilities in CSS3.

I’d be happy to post the source code if anyone would like to port it or improve it.

As always, feedback appreciated!


Simulating low visual acuity

February 8, 2013

UPDATE: I’ve created a Chrome extension called NoCoffee that implements simulations for a number of vision problems.

I’ve been searching for something to simulate surfing with blurry vision. While blur is not a scientific representation of most visual disabilities, it does help us get an idea. Simulating vision loss while designing pages is highly useful — the number of people with visual disabilities is already high and expected to double by year 2020 (U.S. statistics).

We do have the Chrometric browser, which does a very good job simulating color perception issues. Unfortunately, Chrometric has some downsides. For one, the blur effect it provides is not enough to simulate anything except very minor difficulty seeing. Another problem is that it requires a lot of steps to download and get installed, and finally you are left with a separate browser app. It would be better to just use bookmarklets or a browser extension.

Today I found CSS filter. By setting the filter style to ‘blur([value]px)’ on document.body we can cause blurriness in a webpage. Counterintuitively, setting blur to 0px still causes some blur, so you have to remove the style in order to go back to pure clarity. Note: for now we have to use -webkit-filter, and this is only supported in WebKit-based browsers.

In any case, I’ve used CSS filter to create a bookmarklet that lets your blur a web page.

Or, just create a bookmark with the following text for the URL:

javascript:(function()%7Bwindow.checkBlurKey%3Dfunction(evt)%7Bwindow.blurLevel%3D(window.blurLevel%7C%7C0)%3Bwindow.blurLevel-%3D((evt.charCode%3D%3D91%26%26window.blurLevel%3E0)%3F1:0)%3Bwindow.blurLevel%2B%3D((evt.charCode%3D%3D93)%3F1:0)%3Bwindow.updateBlur()%3B%7D%3Bwindow.updateBlur%3Dfunction()%7Bvar%20currZoom%3Dwindow.outerWidth/window.innerWidth%3Bvar%20adjustedBlur%3Dwindow.blurLevel/currZoom%3Bdocument.body.style.webkitFilter%3DadjustedBlur%3F%27blur(%27%2BadjustedBlur/2%2B%27px)%27:%27%27%3B%7D%3Bif(window.blurLevel%3D%3D%3Dundefined)%7Bwindow.addEventListener(%27keypress%27,checkBlurKey)%3BsetInterval(updateBlur,500)%3B%7Dwindow.blurLevel%3DparseInt(prompt(%27Blur%20amount%20(0-20)%3F%20%5Cn%27%2B%27(Press%20%5B%20and%20%5D%20in%20page%20to%20change)%27,window.blurLevel))%3Bwindow.updateBlur()%3B%7D)()%3B

When you open it in a WebKit-based browser (Chrome, Safari, etc.), you can set the level of blur for the current page to 0-20. Pressing [ or ] changes the zoom level. The blur level is also divided by the current zoom level — this is so that zooming up makes the content clearer, just as it would for a person with blurry vision.

Improvements I’d like to see:

  • More browser support: For now, this works only in WebKit-based browsers. I would welcome a version that fixes that.
  • More simulations: It should be able to simulate a wide variety of vision issues, such as various kinds of colorblindness, floaters, blocked central vision or blocked peripheral vision. To learn more about different types of visual disabilities, see VisionSimulations.com. I suspect that all these can be simulated via CSS filter, but I haven’t investigated.

Here is the code I used to generate the bookmarklet. It divides the blur level by two — changes smaller than 0.5 don’t seem to do anything).

window.checkBlurKey = function(evt) {
 window.blurLevel = (window.blurLevel || 0);
 window.blurLevel -= ((evt.charCode == 91/*[*/ && window.blurLevel > 0) ? 1: 0);
 window.blurLevel += ((evt.charCode == 93/*]*/) ? 1: 0);
 window.updateBlur();
};
window.updateBlur = function() {
 var currZoom = window.outerWidth / window.innerWidth;
 var adjustedBlur = window.blurLevel / currZoom;
 document.body.style.webkitFilter=
  adjustedBlur? 'blur(' +adjustedBlur / 2 +'px)':'';
};
if (window.blurLevel === undefined) {
 window.addEventListener('keypress', checkBlurKey);
 setInterval(updateBlur, 500); // In case zoom changes
}
window.blurLevel = parseInt(prompt('Blur amount (0-20)? \n' +
 '(Press [ and ] in page to change)', window.blurLevel));
window.updateBlur();

P.S. I could imagine this property could be useful on April 1.

Enjoy!


Why a WAI-ARIA Developer Portal is Important

November 1, 2011

Making dynamic web content accessible is a huge challenge.

WAI-ARIA is the best available solution today. It’s supported in all major browsers and enables almost any dynamic content to be made accessible — that’s great. Accessibility is really important. But man oh man, understanding WAI-ARIA is not easy for developers, who aren’t always born as accessibility experts.

Here are some of the challenges developers face with WAI-ARIA:

  • Implementations are different across browsers and screen readers.
  • It’s hard to find up-to-date documentation and examples.
  • It’s not clear if the markup is correct. Even if it validates with validator.nu, that doesn’t mean it will actually be accessible.
  • Learning what actually works where is near impossible. It requires combing through out-of-date blogs and doing your own testing. There are too many tricky combinations to deal with.

Scary! If I were new to accessibility … let’s not go there. But, the answer is not to give up. The web is dynamic, and accessibility is important. The answer is definitely not  to create a plain version just for users with disabilities. That’s just bad.

Web developers need an ARIA developer portal. And, I’m asking for contributors. The web development community has to solve this information vacuum for itself.

Even requests are useful. Please use the Talk page on the site to provide feedback. Or, join the free-aria mailing list and discuss it there.

Or better yet, jump in and help us organize. We could really use a writer who understands JavaScript. If you don’t know WAI-ARIA then you’re perfect.

And if you have WAI-ARIA expertise, hear my over-the-top plea. Put some of your blog and Twitter energy into a living document! Everything else ages too fast.  Just update one  article or example.  It will pay back many times.

Take a look! And register for an account on MDN :)


The Story of Firefox, for kids

January 5, 2011

Over the past few years, I’ve been working on and off on a children’s book about Firefox. The project started when my kids wanted to understand what I did at work every day.

The story is a sketch about the evolution of Netscape into Firefox and the power of being open. In terms of historical accuracy, a number of things were simplified in order to keep the messages simple.  For better or worse, it’s already 2500 words. That means it’s not for very young children (I’m thinking 2nd graders and older).

I used readily available imagery of a dragon, a phoenix, Firefox, and Mammon (the god of greed, as I’ve learned). In the story, coders are wizards who cast spells. Naturally, there is also a Chief Lizard Wrangler :)  Where possible, I used plot and dialogue, but at times it addresses the reader directly.

The only kid I’ve tested it on so far is my son Oliver (age 8). He loves it, but then he may just be happy that his father spent time to write about a dragon.

If anyone is seriously interested, I’d love to get some help polishing it until it’s good enough to become an actual book.


DotSpots, a cool use of Mozilla technology

September 10, 2009

DotSpots is launching today. A dot is a “distributed object of thought”, which is like a mini blog post containing rich media, which can be connected to any paragraph in the news. Dots can be authored on the dotspots.com website or via the Firefox extension. They can also developed and polished by teams of collaborators. The secret sauce is distribution: DotSpots will distribute dots to similar paragraphs in articles across the web. There is a video and sign up link on today’s TechCrunch article about DotSpots.

The Firefox extension is central to DotSpots — it really provides the best way to view and create dots in the context of other pages.  The web client is also important and shares a lot of the same features. Of course, the website cannot provide the same benefits as the extension on third party web pages.

The technology is something special. All the major pieces, including the Firefox extension, website and backend, were written in Java.  Google Web Toolkit (GWT) actually compiles our client Java code into compressed JavaScript. This is a great development model.  For one thing, strict type checking definitely helps on a project of this size. It’s also great to be able to stay in the same language on the server. The Eclipse debugger helps out quite a bit, stepping through Java in the server as well as both clients. To communicate with Mozilla components, DotSpots CTO Matt Mastracci developed GWT bindings for XPCOM, which we’ll be open sourcing at some point.

For those who know me as a long time Mozilla contributor, be assured I’m putting that knowledge to good use. And, given the transitional state of the news industry today, it’s an exciting time to be working at Web 2.0 news startup. It will be interesting to watch how the industry progresses.


Cross-browser <video>

July 7, 2009

My colleague Matt Mastracci from DotSpots has just released support for the HTML 5 <video>tag across browsers. Legacy browsers are also supported. Please see Matt’s post HTML 5 <video> support for older browsers.

Kudos both to Matt and to our employer DotSpots for supporting web standards.


A couple of noteworthy accessibility items

July 1, 2009

Frank Hecker has recently blogged about two new Mozilla accessibility projects. Great to hear!

Also, I really need one of the new Firefox 3.5 tag cloud t-shirts.  Imagine a cloud of colorful words describing Firefox 3.5, like “open”, “friendly” and “standards” arranged to fit together. Some words are vertical, some horizontal, it’s quite interesting looking. My favorite word on there is “Accessibility”, always a loud and clear priority for Mozilla, thank you. It’s a beautiful thing.


Follow

Get every new post delivered to your Inbox.