Successfully reported this slideshow.
Your SlideShare is downloading. ×

Siteimprove TechTalk: Demystifying Accessible Names

Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Loading in …3
×

Check these out next

1 of 34 Ad

Siteimprove TechTalk: Demystifying Accessible Names

Download to read offline

Siteimprove internal TechTalk.
Discussing what Accessible Names mean in a web context and how to add good Accessible Names through code and copywriting.

Siteimprove internal TechTalk.
Discussing what Accessible Names mean in a web context and how to add good Accessible Names through code and copywriting.

Advertisement
Advertisement

More Related Content

Slideshows for you (20)

Similar to Siteimprove TechTalk: Demystifying Accessible Names (20)

Advertisement

Recently uploaded (20)

Siteimprove TechTalk: Demystifying Accessible Names

  1. 1. Demystifying accessible names
  2. 2. Tobias Christian Jensen ≠ T19n Accessibility = A11y
  3. 3. TL;DR Accessible names are what we typically refer to as labels or alt texts.
  4. 4. Accessible name: “button Save” label role
  5. 5. Accessible name: “Brugernavn: edit required” label role property
  6. 6. Accessible name: “menu button collapsed subMenu Filter” role state relationship label
  7. 7. <button>Text</button> <label /> alt aria-label aria-labelledby title value …and more…
  8. 8. Accessible Name Computation
  9. 9. 1. Initialize: Set the root node to the given element, the current node to the root node, and the total accumulated text to the empty string (""). 2. Compute the text alternative for the current node: 1. If the current node is hidden and is not directly referenced by aria-labelledby or aria-describedby, nor directly referenced by a native host language text alternative element (e.g. label in HTML) or attribute, return the empty string. Comment: By default, assistive technologies do not relay hidden information, but an author can explicitly override that and include hidden text as part of the accessible name or accessible description by using aria-labelledby or aria-describedby. 2. Otherwise: 1. if computing a name, and the current node has an aria-labelledby attribute that contains at least one valid IDREF, and the current node is not already part of an aria-labelledby traversal, process its IDREFs in the order they occur: 2. or, if computing a description, and the current node has an aria-describedby attribute that contains at least one valid IDREF, and the current node is not already part of an aria-describedby traversal, process its IDREFs in the order they occur: 1. Set the accumulated text to the empty string. 2. For each IDREF: 1. Set the current node to the node referenced by the IDREF. 2. Compute the text alternative of the current node beginning with step 2. Set the result to that text alternative. 3. Append the result, with a space, to the accumulated text. 3. Return the accumulated text. 3. Otherwise, if computing a name, and if the current node has an aria-label attribute whose value is not the empty string, nor, when trimmed of white space, is not the empty string: 1. If traversal of the current node is due to recursion and the current node is an embedded control as defined in step 2E, ignore aria-label and skip to rule 2E. 2. Otherwise, return the value of aria-label. 4. Otherwise, if the current node's native markup provides an attribute (e.g. title) or element (e.g. HTML label) that defines a text alternative, return that alternative in the form of a flat string as defined by the host language, unless the element is marked as presentational (role="presentation" or role="none"). Comment: For example, in HTML, the img element's alt attribute defines a text alternative string, and the label element provides text for the referenced form element. In SVG2, the desc and title elements provide a description of their parent element. 5. Otherwise, if the current node is a control embedded within the label (e.g. the label element in HTML or any element directly referenced by aria-labelledby) for another widget, where the user can adjust the embedded control's value, then include the embedded control as part of the text alternative in the following manner: 1. If the embedded control has role textbox, return its value. 2. If the embedded control has role menu button, return the text alternative of the button. 3. If the embedded control has role combobox or listbox, return the text alternative of the chosen option. 4. If the embedded control has role range (e.g., a spinbutton or slider): 1. If the aria-valuetext property is present, return its value, 2. Otherwise, if the aria-valuenow property is present, return its value, 3. Otherwise, use the value as specified by a host language attribute. 6. Otherwise, if the current node's role allows name from content, or if the current node is referenced by aria-labelledby, aria-describedby, or is a native host language text alternative element (e.g. label in HTML), or is a descendant of a native host language text alternative element: 1. Set the accumulated text to the empty string. 2. Check for CSS generated textual content associated with the current node and include it in the accumulated text. The CSS :before and :after pseudo elements [CSS2] can provide textual content for elements that have a content model. 1. For :before pseudo elements, User agents MUST prepend CSS textual content, without a space, to the textual content of the current node. 2. For :after pseudo elements, User agents MUST append CSS textual content, without a space, to the textual content of the current node. 3. For each child node of the current node: 1. Set the current node to the child node. 2. Compute the text alternative of the current node beginning with step 2. Set the result to that text alternative. 3. Append the result to the accumulated text. 4. Return the accumulated text. 7. Important: Each node in the subtree is consulted only once. If text has been collected from a descendant but is referenced by another IDREF in some descendant node, then that second, or subsequent, reference is not followed. This is done to avoid infinite loops. 8. Comment: This step can apply to the child nodes themselves, which means the computation is recursive and results in text collected from all the elements in the current node's subtree, no matter how deep it is. However, any given descendant node's text alternative can result from higher precedent markup described in steps B through D above, where "Namefrom: author" attributes provide the text alternative for the entire subtree. 9. Otherwise, if the current node is a Text node, return its textual contents. 10. Otherwise, if the current node is a descendant of an element whose Accessible Name or Accessible Description is being computed, and contains descendants, proceed to 2F.i. 11. Otherwise, if the current node has a Tooltip attribute, return its value. Comment: Tooltip attributes are used only if nothing else, including subtree content, has provided results. 3. Append the result of each step above, with a space, to the total accumulated text. 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.
  10. 10. Take-Aways
  11. 11. Accessible name: “button Remove:” #1: Precedence 1. aria-labelledby 2. aria-label 3. title / <label> 4. Text
  12. 12. Accessible name: “Hibiscus: It’s a flower, I think. region” #2: Concatenation
  13. 13. Accessible name: “button Save” #3: Referring to hidden elements
  14. 14. Accessible name: “button Egg” #4: No infinite loops
  15. 15. Accessible name: “button Filter: Errors” #5: Self-reference
  16. 16. Fight your creativity
  17. 17. We should be leaning on established conventions. What should be innovative and the kind of thing that excites users is the content and the functionality. Not the way that we create the functionality. Heydon Pickering
  18. 18. Benefit #1: It is obvious to ourselves when something is not up-to-date. Use the existing text
  19. 19. Ctrl + F Benefit #2:
  20. 20. Benefit #3: Screen reader users can see it and follow along on their screen.
  21. 21. Wait, what?
  22. 22. 1.3 billion 3% Blind 33% Distance vision impairment 64% Near vision impairment Credit: World Health Organisation
  23. 23. Assistive Technology Other Tools that highlight text as it is read Custom styles (for example with Stylish, Stylus, or user style sheets) Browser settings to change colors High contrast mode or settings Browser text sizing settings Browser zoom controls (zooms all page content) Screen reader Screen magnification software or system settings 0% 10% 20% 30% 40% 50% 60% Credit: WebAIM https://webaim.org/projects/lowvisionsurvey2/
  24. 24. Writing the copy
  25. 25. Be as brief as you can but still meaningful AwesomeProduct™ Read information Tooltip Information Learn more In this section, you can learn… Learn about AwesomeProduct™
  26. 26. Responsibilities
  27. 27. Consider Who should pick our colors? Who should write our copy? …And is that always the case today?
  28. 28. Accessibility ownership o IX Designer: 37% (14) o Content Author: 24% (9) o Developer: 21% (8) o Vx Designer: 16% (6) o Business Owner: 3% (1) Developers only own 1 in 5 criteria. Developers are 3rd in ownership. Need to work with other roles. 95% of decisions come before code. Credit: “Roled-Based Analysis of WCAG 2.0” by Bill Tyler
  29. 29. Naming is hard. So I’m building a guide. Step 1: Go to Confluence Step 2: Search for “Accessible Name” Step 3:

×