Fangs help and introduction

Support Fangs

Please support this project by donating a small amount.

Make a donation via PayPal

This is the on-line help file for Fangs - the screen reader emulator plugin for Mozilla Firefox. You are probably looking at this page because you clicked the "Help" icon in Fangs.

Contents:

  1. About Fangs: why, how and where.
  2. Introduction to screen reader browsing: Browsing habits of screen reader users.
  3. How to use Fangs.
  4. The Fangs user interface:
    1. The screen reader output tab
    2. The list of headings tab
    3. The list of links tab
  5. Links to books and articles with more information.
  6. Frequently asked questions.

About Fangs

This Mozilla Firefox extension creates a textual representation of a web page similar to how the page would be read by a modern screen reader. The modern screen reader most widely used (at least in my home country of Sweden) is JAWS by Freedom Scientific. You can download a 40-minute demo version of JAWS from Freedom Scientific's home page.

The best way to test how your web pages appear to a JAWS user is to use JAWS. This, however, takes ages as you have to listen to the linear version of your page and it is difficult to skip and rewind.

Fangs creates the same output but in text. Fangs is therefore useless for visually impaired users but saves a lot of time for developers.

Fangs is developed and maintained by Peter Krantz in Stockholm, Sweden.

How to use Fangs

After installing Fangs you will have a new option "View Fangs" in your right-click context menu. There is also a new option "Fangs" in the browser Tools menu. To view Fangs output for the web page you are currently looking at, right-click to bring up the context menu and then select "View Fangs". A new window will open displaying Fangs output for the web page.

Context menu

Fangs context menu.

The user interface:

The Fangs output window consists of three tabs. These tabs provide different perspectives of the information in the web page.

Tabs

Fangs output window tabs.

The screen reader output tab

This tab contains the linear representation of the web page. It looks dull. This because all the fancy graphics and layout your page has are not visible for a screen reader user. The linear representation is usually the text of the page read from the top left corner to the bottom right corner.

In the output you will notice that some text has a grey or blue background. This text is called an announcement and is inserted by the screen reader to explain the semantic meaning of some html elements. E.g. right before a <h1> heading the screen reader will announce "Heading level one". The grey and blue background is a minor clarification to help developers see the structure of the page more easily. Heading announcementss have a blue background, all other announcements are grey. Please note that in a screen reader there is no difference between announcements and page content.

What to look for:

The list of headings tab

This tab displays a list of all heading elements in the page. This tab is available in JAWS and helps a user get an overview of a web page. Headings are initially presented in tab order and each heading is followed by the heading level. By listening to this list the user can get an overview of what the page is about. The user can also sort headings alphabetically and filter all headings on a specific level.

Screen reader user typically flip back and forth between the linear text representation and the list of headings. Fore more information on observations of screen reader users see my previous blog post "Browsing habits of screen reader users".

What to look for:

The list of links

By listening to the links the user may get a different view of what the page is about and more specifically to where he/she can navigate. Shortcut keys specified for links are also presented in the list. Fore more information on observations of screen reader users see my previous blog post "Browsing habits of screen reader users".

Screen reader users use this list to navigate away from a page. They can of course select links while listening to the page content but it is hard work to go back and select a link in a linear representation.

What to look for:

Links to books and articles with more information

Accessibility

Usability

Writing for the web

Site design


This page is part of the web site standards-schmandards.com.