Accessibility Issues and Finger Diagrams

This page describes some of the goals and technical issues relating to accessiblity of music-related web pages for Native flute players who are blind or visually impaired. It is particularly relevant to people who are using the Finger Diagram Fonts and Images provided on this site.

The main goal is code web pages in a way so that text-to-speech screen readers that audibly render (vocalize) graphic images will vocalize the finger diagrams images so that the intended finger patterns can easily be understood. There are several areas of the Flutopedia web pages where the graphic finger diagrams need to be specially coded to get useful rendering by text-to-speech systems:

1. Graphics that show multiple finger diagrams, such as for a scale.
2. Graphics that show a single finger diagram, and which typically appear in-line in the text.
3. Full songs or passages that appear in graphics.
4. SNAFT text that show a text-based representation of a finger diagram. These are coded as text on web pages.

In order to develop and test web pages with these finger diagrams, it is extremely helpful to have:

• a commercial screen reader such as the JAWS screen reader by Freedom Scientific as well as
• the FANGS plugin to Mozilla Firefox, developed and provided free of charge by Peter Krantz. Fangs is explicitly designed to help web developers create accessible pages by emulating the output of a screen reader in text format.

Single Finger Diagrams

Finger diagrams such as need to be specially coded so that screen readers will vocalize the finger diagram in an understandable way. For example, the finger diagram image in the previous sentence should vocalize something like “Finger diagram closed closed closed open open open”. This is straightforward to accomplish, since screen readers use the ALT attribute of the IMG tag in HTML. For example, the image above is coded on this web site as:

 
 <img src="NAFTracks_h6mw_xxx_ooo.gif"
   alt="Finger diagram closed closed closed open open open"
   title="Finger diagram &lt;xxx|ooo"
   width="88" height="20" align="middle">
 

The TITLE attribute of the IMG tag provides a title that is often used by browsers as the tooltips that pop up if the users rests the cursor over the image. The ALT attribute is used by screen readers to provide an audible rendering of the image.

Multiple Finger Diagrams

Graphics that show multiple finger diagrams can be handled like single finger diagrams. Here is an example of a graphic showing a scale:

This image should be vocalized by screen readers as “Pentatonic Minor Scale colon Finger diagram closed closed closed closed closed closed, Finger diagram closed closed closed closed closed open, Finger diagram closed closed closed closed open open, Finger diagram closed closed closed open open open, Finger diagram closed open closed open open open, Finger diagram open open closed open open open”. Note that the commas are used between the finger diagrams to provide a slight pause. Again, this is done with the ALT attribute of the IMG tag in HTML:

 
 <img src="scale_index_PentatonicMinor.jpg"
   alt="Pentatonic Minor Scale: Finger diagram closed closed closed closed closed closed, Finger diagram closed closed closed closed closed open, Finger diagram closed closed closed closed open open, Finger diagram closed closed closed open open open, Finger diagram closed open closed open open open, Finger diagram open open closed open open open"
   title="Pentatonic Minor Scale Fingering Diagram for Typical Six-hole Pentatonic Minor Tuned Flutes"
   width="380" height="164" align="absmiddle">
 

The TITLE attribute of the IMG tag provides a title that is often used by browsers as the tooltips that pop up if the users rests the cursor over the image. The ALT attribute is used by screen readers to provide an audible rendering of the image.

SNAFT Text

Before we get into the four systems, there is an issue for which I don't have a good solution. The presence of SNAFT text … a visual representation of the finger diagram as plain text … is problematic. The SNAFT text <xxx|ooo gets voiced in my JAWS testing as a pretty useless phrase.

The problem is that, while there is a straightforward way to specify text for screen readers for images on a web page, there is no straightforward way to specify text for screen readers for SNAFT text (which is just plain text in HTML). The ALT attribute for images that is used to provide alternate text is not applicable for regular text. In particular, the SPAN tag does not accept the ALT attribute.

I believe that the HTML definition has a significant shortcoming in this area, and I’ve registered with the W3C and submitted a recommendation on 8/23/2011 for improvement in the HTML spec in this area. However, the entire area of accessibility of semantic information on web pages is subject to a W3C draft proposal titled ARIA (Accessible Rich Internet Applications) edited by James Craig and Michael Cooper. See the ARIA Draft Proposal for details. The adoption of ARIA would solve these issues, but it is a long road from a draft proposal to adoption and incorporation into HTML, as well as general adoption by web developers of this expansive and complex standard, along with implementation by developers of browsers.

Until a system such as ARIA is in wide use, another stragegy is needed for SNAFT text.

One stragegy is to use the TITLE attribute, which is defined for the SPAN tag. JAWS can be configured to read the TITLE attribute in place of the text enclosed by a SPAN tag.

The strategy of using the TITLE attribute of a SPAN tag to specify alternate text for screen readers has some drawbacks. For one thing, many browsers will show the TITLE text in a pop-up tooltip for all users. And secondly, blind users must explicitly configure their screen readers to audibly render the TITLE attribute of text in a SPAN tag rather than the text itself. Despite these issues, I have chosen this route for SNAFT text on this web site.

Here is an example of the Mode 1 Pentatonic Minor Scale, as played on many contemporary Native American flutes:

<xxx|xxx
<xxx|xxo
<xxx|xoo
<xxx|ooo
<xox|ooo
<oox|ooo