Offscreen text - IA2 bug

This document contains two spans with styles applied to make the text appear offscreen. The technique is a popular one used for providing content to non-visual users without creating an encumbrance for sighted users. This particular technique is recommended by a number of popular sites like CSS Tricks and Webaim. However, if a word-wrap property of break-word is also applied either explicitly or through inheritance, Firefox populates the Name value of the IA2 Accessibility API without any spaces between the words. Screen reader testing has confirmed that screen readers read the string without spaces. It appears as though the combination of following four properties cause the condition:

    word-wrap: break-word;
    position: absolute;
    width: 1px;
    height: 1px;

Test cases

Offscreen text

This text should be offscreen, and contain spaces between all the words.

Essential styles causing bug

This text has a height and width of 1px, positioned absolutely, and word-wrap set to break-word.

Supporting evidence

For your convenience, a screenshot of Aviewer is provided.

Screenshot of Aviewer.  Arrows highlight the IA2 Name value without any spaces.