Accessible names & descriptions
0 likes38 views
The document outlines the concepts of accessible names and descriptions in web development, explaining the roles of the <label> element, visible text labels, accessible names, and descriptions as defined by W3C specifications. It details how to calculate accessible names and descriptions for various HTML elements using attributes like aria-labelledby, aria-label, and others, ensuring they provide correct information for assistive technologies. Key HTML elements such as <input>, <button>, <img>, and <table> have specific rules regarding accessibility that must be adhered to for inclusivity.
Accessible names & descriptions
- 1. Accessible names & descriptions How are they calculated?
- 3. Let’s fi rst look at some different terms, which are sometimes confused: 1. The <label> element. 2. Visible text labels. 3. Accessible names. 4. Accessible descriptions.
- 4. 1. The <label> element
- 5. <!-- LABEL ELEMENT --> <label>Label text</label>
- 6. The <label> element can be used to provide a visible text label and/or an accessible name for speci fi c form elements.
- 7. There are only fi ve HTML elements that should have an associated <label> element:
- 8. <!-- INPUT --> <label for="aaa">Label text</label> <input id="aaa" type="text">
- 9. <!-- SELECT --> <label for="bbb">Label text</label> <select id="bbb"></select>
- 10. <!-- TEXTAREA --> <label for="ccc">Label text</label> <textarea id="ccc"></textarea>
- 11. <!-- METER --> <label for="ddd">Label text</label> <meter id="ddd"></meter>
- 12. <!-- PROGRESS --> <label for="eee">Label text</label> <progress id="eee"></progress>
- 13. 2. Visible text labels
- 14. A visible text label is a label that is presented on-screen as text. Visible labels can include:
- 15. Label text Form label Form control Text <input> with visible text label Visible text label
- 16. Label text Form control Form label Radio button with visible text label Visible text label
- 17. Label text <select> element with visible text label Value Choose an option Form label Form control Visible text label
- 18. Label text <textarea> element with visible text label Form label Form control Visible text label
- 19. Label text <meter> element with visible text label Form label Form control Visible text label
- 20. Label text <progress> element with visible text label Form label Form control Visible text label
- 21. Button text Form control <button> with visible text label Visible text label
- 22. Link text <a> element with visible text label Visible text label
- 23. <fieldset> element with visible text label via <legend> Label text Legend text Fieldset Visible text label
- 24. <section> element with visible text label via heading Heading text Section Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Visible text label
- 25. <table> element with visible text label via <caption> Fishes Gold fi sh Guppy Blue fi sh Frogs Cane toad Tree frog Common frog Birds Robin Kookaburra Magpie Types of animal Caption Visible text label
- 27. All accessible objects in the accessibility tree should have meaningful, accessible names.
- 28. These names are used by assistive technologies to identify the object.
- 29. You can see the name assigned to accessible objects by viewing the accessibility tree.
- 30. In the following example, a <button> element has a text value of “Save”.
- 32. Using Chrome’s accessibility tree, we can see that the computed accessible name for the <button> is “Save”.
- 34. Accessible name vs visual text label
- 35. In some cases, the accessibility name matches the visible text label.
- 36. <button>Save</button> Button visible text label: "Save" Button accessible name: "Save"
- 37. <label for="aaa">First name</label> <input id="aaa" type="text"> Input visible text label: "First name" Input accessible name: "First name"
- 38. However, it is possible to create an accessible name that is partially or even entirely different from the visible text label.
- 39. This could be achieved using hidden text, the aria-labelledby attribute, aria-label attribute, or even the title attribute.
- 40. For example, the accessible name could include additional content before, after or before and after the visible text label.
- 41. Here’s an example using hidden text:
- 42. <button> <span class="sr-only">Please</span> Save </button> Button visible text label: "Save" Button accessible name: "Please Save"
- 43. <button> Save <span class="sr-only">and return</span> </button> Button visible text label: "Save" Button accessible name: "Save and return"
- 44. <button> <span class="sr-only">Please</span> Save <span class="sr-only">and return</span> </button> Button visible text label: "Save" Button accessible name: "Please Save and return"
- 45. And an example using aria-label:
- 46. <button aria-label="Please save"> Save </button> Button visible text label: "Save" Button accessible name: "Please Save"
- 47. <button aria-label="Save and return"> Save </button> Button visible text label: "Save" Button accessible name: "Save and return"
- 48. <button aria-label="Please save and return"> Save </button> Button visible text label: "Save" Button accessible name: "Please save and return"
- 49. However, we should avoid accessible names that do not contain text from the visible text label.
- 50. <button aria-label="Something else">Save</button> Button visible text label: "Save" Button accessible name: "Something else"
- 51. <button title="Another thing">Save</button> Button visible text label: "Save" Button accessible name: "Another thing”
- 52. These two examples could cause confusion for a range of users, including sighted users who use screen readers for additional assistance, as the visible text label does not match the accessible name at all.
- 54. In some cases, accessible objects may also need additional information, to provide additional context for the element, in the accessibility tree.
- 55. Descriptions can be applied to elements using the aria-describedby attribute.
- 56. You can see the description assigned to accessible objects by viewing the accessibility tree.
- 57. In the following example, an <input> element has a visible label of “Name” and a description of “Use full name”.
- 58. The primary element contains the aria- describedby attribute and the descriptive text element contains a matching id attribute.
- 59. <label for="aaa">Name</label> <input id="aaa" type="text" aria-describedby="a1"> <span id="a1">Use full name</label>
- 60. Using Chrome’s accessibility tree, we can see that the computed accessible name for the <input> is “Use full name”.
- 62. Notice that the “Description” slot is separate to the “Name” slot in the accessibility tree. These two concepts serve totally different purposes.
- 63. It is also possible to hide the descriptive text element off-screen, so it is only presented to assistive technologies.
- 64. An example where this could be used, is additional instructions or information for assistive technologies:
- 65. <input type="text" aria-describedby="hint"> <span id="hint" style="display: none;">When autocomplete results are available use up and down arrows to review and enter to select.</span>
- 66. How are accessible names and descriptions de fi ned?
- 67. The names and descriptions are de fi ned in two speci fi c W3C speci fi cations. Accessible Name and Description Computation 1.1 https://www.w3.org/TR/accname-1.1/ HTML Accessibility API Mappings 1.0 https://www.w3.org/TR/html-aam-1.0/
- 68. These two speci fi cation describe how browsers can determine accessible names and descriptions for each object as text strings.
- 69. Accessible names and description for some key elements
- 70. Let’s take a look at how names and descriptions are calculated for some example elements.
- 71. In each case, the steps are applied in priority order from highest to lowest.
- 73. This rule is relevant to the following elements:
- 74. <input type="text"> <input type="password"> <input type="search"> <input type="tel"> <input type="url"> <textarea></textarea>
- 75. For these elements, the accessible name would be de fi ned in the following order:
- 76. 1. Use aria-labelledby 2. Otherwise, use aria-label 3. Otherwise, use associated <label> element 4. Otherwise, use title 5. Otherwise, use placeholder 6. Otherwise, there is no accessible name
- 77. And the description would be de fi ned in the following order:
- 78. 1. Use aria-describedby 2. Otherwise, use title 3. Otherwise, there is no accessible description.
- 79. The relevant section of the speci fi cation: https://www.w3.org/TR/html-aam-1.0/#input-type-text-input- type-password-input-type-search-input-type-tel-input-type-url- and-textarea-element
- 80. <a> and <button> elements
- 81. In the case of <a> and <button> elements, the accessible name would be de fi ned in the following order:
- 82. 1. Use aria-labelledby 2. Otherwise, use aria-label 3. Otherwise, use element’s content 4. Otherwise, use title 5. Otherwise, there is no accessible name
- 83. And the description would be de fi ned in the following order:
- 84. 1. Use aria-describedby 2. Otherwise, use title 3. Otherwise, there is no accessible description.
- 85. The relevant sections of the speci fi cation: https://www.w3.org/TR/html-aam-1.0/#button-element https://www.w3.org/TR/html-aam-1.0/#a-element-with-a-href- attribute
- 86. <img> elements
- 87. In the case of <img> elements, the accessible name would be de fi ned in the following order:
- 88. 1. Use aria-labelledby 2. Otherwise, use aria-label 3. Otherwise, use alt 4. Otherwise, use title 5. Otherwise, there is no accessible name
- 89. And the description would be de fi ned in the following order:
- 90. 1. Use aria-describedby 2. Otherwise, use title 3. Otherwise, there is no accessible description.
- 91. The relevant section of the speci fi cation: https://www.w3.org/TR/html-aam-1.0/#img-element
- 93. In the case of <fieldset> elements, the accessible name would be de fi ned in the following order:
- 94. 1. Use aria-labelledby 2. Otherwise, use aria-label 3. Otherwise, use <legend> 4. Otherwise, use title 5. Otherwise, there is no accessible name
- 95. And the description would be de fi ned in the following order:
- 96. 1. Use aria-describedby 2. Otherwise, use title 3. Otherwise, there is no accessible description.
- 97. The relevant sections of the speci fi cation: https://www.w3.org/TR/html-aam-1.0/# fi eldset-and-legend- elements
- 98. <table> elements
- 99. In the case of <table> elements, the accessible name would be de fi ned in the following order:
- 100. 1. Use aria-labelledby 2. Otherwise, use aria-label 3. Otherwise, use <caption> 4. Otherwise, use title 5. Otherwise, there is no accessible name
- 101. And the description would be de fi ned in the following order:
- 102. 1. Use aria-describedby 2. Otherwise, use <caption> if not used for name. 3. Otherwise, use title 4. Otherwise, there is no accessible description.
- 103. The relevant sections of the speci fi cation: https://www.w3.org/TR/html-aam-1.0/# fi eldset-and-legend- elements
- 105. For those interested, I can also do a walk- through of the Accessible name and description computation.
- 106. This is an extremely simpli fi ed version of the steps. Otherwise we’d be here all day.
- 107. Compute the text alternative for the current node:
- 108. Step A.
- 109. If the current node is hidden and is not directly referenced by aria-labelledby or aria-describedby, nor directly referenced by a text alternative element (e.g. label in HTML) or attribute, return the empty string.
- 110. The following examples would meet this rule and return an empty string:
- 111. <input type="text" hidden> Input accessible name: Empty string
- 112. <label>Name</label> <input type="text" hidden> Input accessible name: Empty string
- 113. The following example would not meet this rule and would therefore not return an empty string:
- 114. <label for="aaa">Name</label> <input id="aaa" type="text" hidden> Input accessible name: "Name"
- 115. <section aria-labelledby="a" hidden> <h3 id="a">Contact details</h3> </section> Section accessible name: "Contact details"
- 116. Step B.
- 117. Otherwise, if computing a name, and the current node has an aria-labelledby attribute that contains at least one valid IDREF, process its IDREFs in the order they occur.
- 118. In the following example an <input> element has an aria-labelledby attribute with two space-separated values, A and B.
- 120. Within the document there are two elements with ID values of A and B.
- 121. <input type="text" aria-labelledby="a b"> <p id="a">Help text</p> <p id="b">Error message</p>
- 122. The contents of these elements becomes the accessible name for the <input>.
- 123. The accessible name is computed based on the order the ID contents are de fi ned within the aria-labelledby attribute.
- 124. <input type="text" aria-labelledby="a b"> <p id="a">Help text</p> <p id="b">Error message</p> Accessible name="Help text Error message"
- 125. Step C.
- 126. Otherwise, if computing a name, and if the current node has an aria-label attribute whose value is not the empty string, return the value of aria-label.
- 127. In the following example, the <button> element has an aria-label, which becomes the accessible name.
- 128. <button aria-label="Close modal">X</button> Accessible name="Close modal"
- 129. Step D.
- 130. Otherwise, if the current node's native markup provides an attribute (e.g. title) or element (e.g. HTML label) that de fi nes a text alternative, return that alternative in the form of a fl at string, unless the element is marked as presentational role="presentation" or role="none".
- 131. In the following example, the <label> is explicitly associated with the <input> using matching FOR and ID values.
- 132. This means that the <label> element provides a text alternative for the <input> that can be used as an accessible name.
- 133. <label for="suburb">Your suburb</label> <input id="suburb" type="text"> Accessible name="Your suburb"
- 134. In the following example, the <img> includes an alt attribute that contains a text string.
- 135. This means that the alt attribute provides a text alternative for the <img> that can be used as an accessible name.
- 136. <img alt="Round ball" src="ball.png"> Accessible name="Round ball"
- 137. In the following example, a <button> element does not contain a text string, but does include a title attribute that contains a text string.
- 138. This means that the title attribute provides a text alternative for the <button> that can be used as an accessible name.
- 140. Step E.
- 141. We’ll skip over Step E to avoid complexity.
- 142. Step F.
- 143. Otherwise, if the current node's role allows name from content… return the accumulated text.* (* Extremely simpli fi ed version)
- 144. Some ARIA role attributes allow “Name from content”.
- 145. This means that the text within these elements becomes the accessible name.
- 146. The full list of “Roles Supporting Name from Content”: https://www.w3.org/TR/wai-aria/#namefromcontent
- 147. In the following example, an element has been given a role of button and therefore can produce an accessible name.
- 149. Step G.
- 150. Otherwise, if the current node is a Text node, return its textual contents.
- 151. In the following example, the link text is the accessible name.
- 152. <a href="#">Hello world</a> Accessible name="Hello world"
- 153. After all steps are completed, the total accumulated text is used as the accessible name or accessible description of the element that initiated the computation.
- 154. The End