Draft how-to section on Displaying Images and Symbols That Represent Widget States and Properties

[mcking65]

Discussed in Feb 6, 2017 APG TF meeting.

Symbolic images and text are often used to communicate things like:

• Availability of a menu or submenu
• Separation between items, e.g., slashes or arrows in a breadcrumb trail
• The expanded or collapsed state of a tree branch or disclosure

This symbolism is semantically valuable so it should be visible in high contrast mode. However, these semantics are communicated to screen readers via the accessibility API so the symbols themselves should not be included in the accessibility tree. So, for example, they should not be part of the label of a menuitem.

We need a section that describes the techniques for displaying images, icons, and symbolic text that:

1. Are compatible with windows high contrast mode
2. Prevents screen readers from announcing them.

The two preferred techniques are:

1. CSS content property used with pseudo element to inject an image. Injected images are compatible with high contrast mode whereas background images are not.
2. CSS content property injects text into a span that has aria-hidden="true". Given the general danger of aria-hidden=true, this is a technique that will need to be accompanied by appropriate warnings and a link to the section that covers aria-hidden.

To resolve this issue, discussion of the following is needed:

1. What is an effective title for this guidance?
2. Where does it fit in the information architecture of the guide?
3. What are the issues it should address?

[mcking65]

@jongund, in our discussion yesterday, you were describing this more as a techniques section as opposed to a guidance/explanation section.

If our high-level architecture were to divide the guide into three main parts, patterns, guidance, and how-to, this would best be a "how-to", right?

Other how-to sections include:

• Designing and Implementing Keyboard Interfaces
• Developing Custom Widgets.

For this one, I suggest: "Displaying Images and Symbols That Represent Widget States and Properties"

I am adjusting the title of this issue accordingly.