Submit a request
Submit a request

Editing ARIA labels for text in the rich text editor

Screen readers typically read aloud the visible text in the Questions preview, so that learners with visual impairments can understand the Question and possible responses options, and then choose to answer the Question correctly. Often, authors need a way of overwriting the visible text with something more meaningful for screen readers without altering the visual representation of the Question. 

For example, for the Question below, authors would want screen readers to read out "__________" as "blank" instead of it being read out as underscore, underscore, underscore.... in the Question's stimulus.

 

  Screen_reader_text.png

Figure 1: case where an author would want the screenreader to read aloud something other than the visible text. 

 

Authors can select the blanks represented by underscores and click on the edit ARIA label option.

 

Edit_ARIA_label.png

Figure 2: the Edit ARIA label option in the rich text editor.

 

Clicking on the option will launch a pop-up with two fields. Text label, which is the text that would be visually shown as part of the widget's content, and the ARIA label which is the text that you want the screen reader to read out aloud instead of the actual visible text.

 

Edit_ARIA_label_options.png

Figure 3: the Edit ARIA label options.

 

Authors can edit the actual text which is shown in the widget content as well as edit the ARIA label one may want the screen reader to read out aloud instead of the actual visible text. After the text fields are edited and Authors click the OK button, the text with ARIA labels defined for them will have a visual indicator (border) around them.

 

ARIA_label_visual_indicator-2.png

Figure 4: the visual indicator for text with ARIA label defined.

 

The visual indicator will be shown only in the rich text editor in the edit mode and will not be shown when previewing the widget. Authors can hover the mouse cursor over the visual indicator for text which has ARIA labels defined, to easily access the ARIA label options such as edit and remove.

Authors can define ARIA labels for any visible text in the widget's contents including the stimulus, possible responses, and so on.

Was this article helpful?

Did you arrive here by accident? If so, learn more about Learnosity by clicking here.