Treeview images need to be hidden from screen readers

[carmacleod]

The Open/Closed Folder and File icons in the File Directory Treeview examples are added using CSS ::before content image urls.

The problem with this is that screen readers announce the image in virtual cursor mode, and since it doesn't have alt text, it's just announced as "image". This becomes even more of a problem in touch interfaces because the image is an extra "swipe stop" (if that's what it's called), so the user has to swipe twice as often as necessary to go through items in the tree.

In an ideal world, we would be able to simply add empty alt text to the CSS content image using / "", like so:

[role="treeitem"][aria-expanded="false"] > span::before {
    content: url(../images/closed.png) / "";
}

[role="treeitem"][aria-expanded="true"] > span::before {
    content: url(../images/open.png) / "";
}

[role="treeitem"].doc::before {
    content: url(../images/file.png) / "";
}

However, Firefox and Safari do not yet support this CSS feature. See Alternative Text for CSS Generated Content.

So I think for now we need to use <img alt=""> instead of CSS content images. I guess we'd have to swap out the Open/Closed Folder image with javascript (but this treeview needs javascript anyhow, so that's ok). The code might not be as cool, but it will work better with screen readers, including mobile/touch-based screen readers.

[nschonni]

Is SVG better for codepen compatibility, or is that not an issue for this one?

[carmacleod]

Good point, @nschonni. Also, SVG with currentcolor would be better for Windows HCM - I haven't tested, but I'm guessing that those black icons disappear completely on black background. :)
So instead of using img with empty alt text, we should use <svg aria-hidden="true">.

[mcking65]

This has been fixed.