I have the following piece of markup:
<input aria-describedby="a b c">/* generic form control */
<p id="a">foo</p>
<p id="b">foo</p>
<p id="c">foo</p>
Would it be acceptable/functional with regards to assistive technologies, to replace it with the following?
<input aria-describedby="d">
<div id="d">
<p>foo</p>
<p>foo</p>
<p>foo</p>
</div>
Would it be acceptable/functional with regards to assistive technologies, to replace it with the following?
It is both acceptable and functional. The accessible description for the button becomes "foo foo foo".
What you need to be aware of is that the description is a flat string, no structure is conveyed. Also that verbosity can be an issue as each time the control recieves focus the screen reader will announce the description.
Also in you example code the button needs an end tag and the aria-describedby is not referencing anything, as you have a class attribute, it needs to be an id attribute. http://codepen.io/stevef/pen/ojBmdV
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With