Predominant Use of Visual Icons

[johnhbenetech]

Throughout the MathShare application, icons are liberally used to provide visual indication of the purpose of buttons and links. In these cases, textual labels are provided for screen reader users which, for the most part, are accurate and fit for purpose. However, these labels will not appear on the screen, and it is thought that this will make the system more difficult to use than necessary for people who rely on speech input technology such as speech recognition tools.

When controls have unique, visible labels, speech input users are able to activate them using concise phrases such as: “click sign in” or “click Twitter”. When such labels are absent, such simple commands become impossible. To activate the Twitter link in the footer, for example, a user of Dragon Naturally Speaking would need to install the Dragon Web Extension, speak a command to show all of the links or linked images on the page, somehow determine the desired target link based on its URL or recognition of the visual icon, remember its number and then issue that number as part of a further speech command.

It cannot be guaranteed that users will even recognize what the chosen icon is intended to indicate. For example, in the Header component, the arrow-circle-right icon from the Font Awesome project is used on the feedback link, which may not be obvious to everybody.

Suggested Solution

Include textual labels for all controls which are visible on-screen.

Aha! Link: https://diagramlabs.aha.io/features/B-134

[johnhbenetech]

@jscholes

[jscholes]

@johnhbenetech, @benetechMatt and @alexrcabral - any more thoughts on this?

[johnhbenetech]

@jscholes @benetechMatt @alexrcabral

@alexrcabral , I believe you did some testing with the dragon stuff - so definitely want to get your input as well from the product side of things.

Some low hanging fruit seems to be the social links in the footer. And the 'help' menu in the upper right.

I think there are three tricky areas that I would love input from everyone on:

• The Speech to Text button in the description area of the My Work section. Currently it's just a microphone icon with an alt. So it would probably benefit from a text label as well. Looking at the visual layout it's not clear how that would best fit and so probably needs to be reconsidered when we look at refactoring the whole My Work interface. To compound the issue, the img in the button changes to a animated gif while recording is happening. @jscholes we could use some feedback on this as I don't know the best practices for making a screen reader user aware that recording is active.

• The intercom button. Looking quickly through the documentation it seems you can use any element you want as the launcher. So it might make sense to add an element with a text label. Also maybe we want to move it somewhere and maybe even make it static instead of floating - there are certain occasions where it overlaps key buttons like 'add step'

• The math palette in My Work. This probably requires more discussion and possibly it's own task. Currently the buttons contain just the glyph for the symbol and not any text. The text descriptions are in a sROnly span as well as a tooltip on hover. I can imagine dozens of text labels being overwhelming.

[benetechMatt]

STT: adding a label underneath that says "Speech to text", "voice recognition", "record voice" could be helpful for students unfamiliar with it. @alexrcabral thoughts on the best phrase?

Intercom: the default button has badging, notifications, and partial message display which is nice for educators. I'm not sure if we can easily replicate this. The overlapping and accessibility issues are significant. Maybe for now we add a button with a label and then address the overlapping and notifications issue in a separate issue https://www.intercom.com/help/en/articles/172-the-intercom-javascript-api

math palette: we are going to overhaul this section later this year. This will be something Alex and I will want to consult with you @jscholes

[benetechMatt]

issue for the math palette overhaul #656

[jscholes]

@johnhbenetech - thanks for highlighting the speech-to-text functionality. You're absolutely right that in this area, on-screen textual labels are critical. It's great to provide this affordance for those who need it, but frustrating if multiple or ambiguous speech commands are required to activate it.

With that in mind, the label should be as concise as possible. For example, "Record" is short, but may also imply storage of audio clips. But Start Voice Recognition" may be too long (especially if a user has to speak it multiple times during a session).

In terms of screen reader support, it would probably be a good idea to indicate, via a live region-style status update, when audio capture begins and ends. The accessible label of the button would also need to be updated to distinguish between the capturing and idle states.

@benetechMatt - it sounds like the math palette updates will fall nicely in with the further accessibility work on the editor, after this initial round of triage from PAC. Do you have any expected timelines?

[johnhbenetech]

@benetechMatt please split out the STT work to a separate issue with copy suggestions.

[benetechMatt]

@alexrcabral, the intercom button and icons without labels needs to be addressed. we could move the intercom button to the top menu bar so it's not overlapping text along with adding a label.