What fresh hell is THIS now? - Patrick Lauke
[Jordan Scales, a11y] hey all! I develop a tool called tota11y and I’m looking into making its error reporting more accessible. in the following example I have an <input>
on the document, then I place an “annotation” above the <input>
, letting the user know that it has a violation. that “annotation” is then linked to an entry in the “info panel” with some more information.
particularly, I’m interested in connecting the “annotation” with the input such that the user could navigate between the two easily with a keyboard
<figure>
aria-describedby
on the figure and boom, they are linked
<figure>
though! very interesting
<figure aria-describedby="long-description"> <!-- Example here --> <figcaption>Input is missing a label</figcaption> </figure> <div id="long-description"> <h2>Input is missing a label</h2> <p>Inputs should have labels you dimwit</p> </div>
<figure>
because they’re not necessarily close to each in the DOM - but I can work that out
[Jordan Scales, a11y] what if the input was aria-describedby the detailed error message in the info panel? and the annotation itself was just inaccessible (it doesn’t provide any extra information)
Note accdescriptions are conveyed as a text string, no semantics.