This pattern is used whenever special accessibility considerations need to made for text elements.
How it works
Use hidden text fields
Selection | What this means | What this triggers |
|---|---|---|
Yes | Additional hidden strings of text will be included before and/or after the displayed text. | Causes two Hidden fields to display, one used for text to be included before the displayed text, and one to be included after. |
No | Only the displayed text will be used. | N/A |
Why use hidden text fields? Accessibility! In some cases, a brief text phrase isn’t sufficient to describe what an element is or does. For example, a button-style link whose text appears only as “Read more” doesn’t convey on its own where the link will take a user. Sighted users may understand the link due to the content surrounding the it, but screen reader users may not have that information on hand when they encounter the link. If we were to add some additional hidden text to the end such as “ about UCI’s history”, sighted users would still see the button displayed as “Read more”, whereas screen reader users would hear the link read as “Read more about UCI’s history”….. way more informative! Consider reading WebAIM’s article on links for more nuance.
Displayed
The text entered here will be displayed on screen.
Hidden
Only displayed when Use hidden text fields is set to ‘Yes’.
…and…
The text entered in these fields will in included, but hidden, before and after the displayed text, respectively.