Web Accessibility Training
Toronto, Montreal, Ottawa and worldwide via Webex More

Inserting Content with CSS
testing Assistive Technology and APIs

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.

 



CONTACT US

For a quote or just to chat about your organization's needs


EMAIL

help at can hyphen adapt dot com, (spoken phonetically to trick spam bots)

PHONE

six one three, eight zero six, nine zero zero five

SOCIAL MEDIA