labs

Limit VoiceOver Reading to a Specific URL

If you are a developer testing web accessibility using OS X’s VoiceOver screen reader, you can follow this guide to limit announcements to a specific application and URL, so that VoiceOver only announces your application content and does not interrupt your development workflow.

VoiceOver

If you are doing web development on a Mac, VoiceOver is a great tool for smoke testing accessibility in your web applications. VoiceOver is a screen reader for OS X that announces the contents of the desktop, including web content, to a blind user. It is easy to enable and come installed by default.

To enable VoiceOver, press <command-f5> and the screen reader will be enabled.

Global Settings

If you’ve never used VoiceOver before, you may pretty quickly become overwhelmed and subsequently frustrated by the flurry of announcements. If you only need the announcements for specific content, you remedy this by creating application specific settings.

Screenshot of VoiceOver Utility: check "Mute Speech"

Mute speech and sound effects globally in VoiceOver Utility.

Screenshot of VoiceOver Utility Visuals > Captions panel: disable captions

Turn off the captions display.

Screenshot of VoiceOver Utility Visuals > Cursor panel: disable cursor

Disable the visual cursor.

Now if you run VoiceOver, you won’t experience anything different than you did before enabling it. We still want to test our application content though. VoiceOver Utility has a feature called “Activities” that allows you to override global settings by application.

This is approaching our requirements; we could limit the announcements to Chrome only, but you probably don’t want your emails announced to the office when you switch tabs.

Fluid Application

We need to sandbox a specific URL or domain in an application wrapper. Enter Fluid App. Fluid allows us to create an application wrapper for specific web content so that we can scope our VoiceOver announcements.

Start your development web server and create a Fluid app that points to it.

Screenshot of Fluid App creation with a url of http://localhost:3000/*

Create a Fluid App

Next, create an Activity in VoiceOver Utility for your new app.

Screenshot of VoiceOver Utility Activities Pane: reenable settings for specific app

Finally re-enable the speech, captions, and cursor features we turned off earlier, specific to your application. Results With this setup, we will only get announcements when we switch to the window for our Fluid app, and that way avoid toggling VoiceOver incessantly.