Testing subheadings using Fangs

Overview

Fangs renders a text version of a web page similar to how a screen reader would read it. The ambition is to help developers understand how an assistive device would present a website and thereby increase chances of finding accessibility issues early.

Fangs is a Firefox plug-in extension. When opened it will provide an interpretation of the current web page as screen reading software would read it (JAWS is the screen reader Fangs is mainly based around). Views are offered showing the full screen reader output, headings list, or links list.

Strengths

  • Provides a different view of web page content
  • Headings list and links list both available for review
  • Full heading text is available for view
  • Points out problems of missing headings/heading text

Weakness

  • Does not provide any feedback on problems in headings or links list
  • Headings list hierarchy not shown visually so can be difficult to tell if heading hierarchy is nested properly
  • Does not provide any evaluation of the content of heading tags
  • Does not provide any character length information for heading tags

Step 1: Open Fangs

Procedure

  • Choose “Fangs” under Tools menu in browser or “View Fangs” under right-click mouse menu

Screenshot

Screen shot of Open Fangs

Step 2: View screen reader output

Procedure

  • Use “Preferences” button to change screen reader output view from a single block of text to a sectioned view based on headings (requires reload in Fangs using “Reload” button)

Screenshot

Screen shot of View screen reader output

Step 3: View headings list

Procedure

  • Check that all headings have text
  • Check that headings are in correct order and no headings are missing

Screenshot

Screen shot of View headings list

Rules Evaluated with this Technique

Rules evaluated with Fangs
Test
Type
Description
Manual

Each section of a web page must have a heading and the heading must describe content of the section.

Undefined

Heading elements that follow the last h1 element must be properly nested.

Manual

All subheadings (h2…h6) must contain text content.

Undefined

Sub haedings of the same level should have content between the headings

Manual

The text content of headings of the same level within the same section should be unique.

Undefined

The text content of an subheading element (h2-h6) should not only come from the alt attribute value of img elements.

Undefined

The text content of headings should be concise (less than 65 characters).