Get a taste of how blind people experience the web with Site Unseen

Site Unseen is a Chrome extension I created to help you appreciate how blind people use the web. When activated, this tool obscures the current page and provides a screen reader emulator that you can use to explore its contents. This browser extension enables you to foster empathy in yourself and your community for those with vision disabilities, build the case for accessible web design, and test for web accessibility issues.

Getting Site Unseen

Site Unseen is available in the Chrome Web Store. To install it, all you need to do is press the “Add to Chrome” button on the paged linked at the beginning of this paragraph.

Activating Site Unseen

Once installed, the Site Unseen icon, a miniature version of the picture of a blue stick figure with a cane walking in front of a globe at the start of this article, should appear in your browser’s toolbar. Navigate to a page like this one outside of the Chrome Web Store. (Most Chrome extensions won’t work there.)

Press the Site Unseen icon. The icon should turn green, and the web page should be obscured by an opaque black overlay with a box outlined at the bottom right of the screen. This initially contains the title of the current web page, if there is one. (Note that the contents of the web page are still present; they are just hidden behind the overlay.)

Using Site Unseen

There are two blue buttons at the top right of the screen when Site Unseen is active.

• Press the “Peek” button or the asterisk key (*) to temporarily reveal the contents of the page.
• Press the “Help” button or the question mark key (?) to display a dialog box that lists and describes the keyboard commands supported by Site Unseen. These commands are also enumerated on the Site Unseen website.

Normal browser keyboard shortcuts to navigate and interact with page elements should continue to work as they typically do.

• The Tab and Shift+Tab keys move current focus to the next and previous interactive elements, such as links, buttons, and form fields.
• The Enter key activates the current element, performing actions like following a link or pressing a button).
• The Up and Down arrow keys move between form field options in a popup menu, set of checkboxes, or radio button group.
• The Space key selects the menu option, checkbox, or radio button currently in focus.

Site Unseen emulates a screen reader by allowing you to move through the page contents using the Left and Right arrow keys to go to the next or previous element, respectively. These arrow keys navigate through both interactive and non-interactive elements on the page.

As you move between different page elements, the text in the box outlined at the bottom right of the screen should update to show the type and contents of the current element. For instance, if the box contains the text “heading level 1: Support” it means that you are currently focused on the page’s main heading element whose text is “Support”.

Certain keys allow you to jump to the next or previous instance of specific types of element. For instance, pressing h takes you to the first/next heading, and pressing H moves you to the previous heading.

Deactivating Site Unseen

To turn off Site Unseen, press the Site Unseen icon in your browser toolbar so that it changes from green back to blue. This should remove the black overlay and its elements, revealing the page contents again.

Alternatively, you can reload the web page to disable Site Unseen.

---

I hope you’ll give Site Unseen a try and let me know what you think. Please contact me or leave a comment on this article if you have any thoughts or suggestions, or if you encounter a problem with the extension.