Description

Below is an example of CSS being used to insert content and the result for assistive technology.

Findings

• NVDA, JAWS OK in Chrome and Firefox, shows up in heading list if it's a heading
• NVDA requires Tabindex in IE, JAWS won't work even with Tabindex, doesn't show up in heading list in NVDA or JAWS
• Reverse video OK on Mac, iOS, and ZoomText on Windows, and on Windows High Contrast
• Trying to select the text by highlighting doesn't work
• "Hello World" is not in the DOM
• Windows High Contrast omits background images but is ok with inline CSS.
• Accessibility API's see it on Windows and Mac in [Acc]Name

Example 1 The text "Hello World" inserted into the page with a span

Example 2 The text "Hello World" inserted into the page with a div

Example 3 The text "Hello World" inserted into the page with a <h2>

Code Used

Example 1

<span class="myclass" tabindex="-1"></span>

Example 2

<div class="myclass" tabindex="-1"></div>

Example 3

<h2 class="myclass" tabindex="-1"></h2>

CSS

.myclass:after
{
content: "Hello World";
margin-left:100px;
font-size:24px;
color:#1C4112
}

Results

Accessibility Support technology used

• Table cells with a * and red background = fail

	1 css inserted in a div	2: css inserted in a span	2: css inserted in a H2
IE11/JAWS16	*Text not read	*Text not read	*Text not read
CHROME41/JAWS16	OK	OK	OK SHows up in Heading list
FF36/JAWS16	OK	OK	OK shows up in heading list
CHROME41/NVDA2015.1	OK	OK	OK shows up in heading list
IE11/NVDA2015.1	Text only reads in tabindex="-1" added	Text only reads in tabindex="-1" added	Text only reads in tabindex="-1" added doesn't show up in heading list
FF36/NVDA2015.1	OK	OK	OK
VoiceOver in Safari	OK	OK	OK
VoiceOver in Chrome	OK	*OK	*OK
VoiceOver on iPhone	OK	OK	OK
Apple A11y API	Text show up as AccName	Text show up as AccName	Text show up as AccName
Windows Inspect UIA API	Text show up as AccName	Text show up as AccName	Text show up as AccName
Windows High Contrast	Text visible	Text visible	Text visible
ZoomText 10.1 Reverse video	Text visible	Text visible	Text visible
Stylish FF plugin turn off CSS	Text visible	Text visible	Text visible
MacBook Accessibility Reverse video	Text visible	Text visible	Text visible
iPhone Accessibility Reverse video	Text visible	Text visible	Text visible

 

Feel free to comment on Twitter @davidmacd

Author information:

David MacDonald is a veteran WCAG member, co-editor of Using WAI ARIA in HTML5 and HTML5 Accessibility Task Force Member. Opinions are my own.