Question

Is there any alternative to <div>? My website is losing “accessibility” because I cannot set focus on a <div>. What control should I use in order to replicate <div> and still hold focus?

This is what my HTML looks like:

<div style="height:70px; overflow:hidden" id="divMsg">
   <div class="DivClass">abcdefg abcdkfjghfjdfkj</div><br>
   <div class="DivClass">abcdefg abcdkfjghfjdfkj</div><br>
</div>

Answer 1

You can add tabindex to make it focusable; however, this is usually not enough. If you want the element to be clickable, you will also need to add a keydown or keypress handler so that the user can activate it using ENTER, similar to a A link. Otherwise the user will be able to tab to it, but may not be able to do anything with the link after.

If you are trying to create a clickable element, it is sometimes simpler to start with a A tag, and then style it so that doesn’t look like a link. A elements respond to both keyboard and mouse and fire onclick for both, so you don’t have to do additional keyboard input handing like you do with a DIV.

Finally, if you are making a DIV or A that visually looks like a button or some other control, add the appropriate ARIA role so that a screenreader will call out the appropriate element type – eg.

<a HREF="javascript:void(0)" onclick="dosomething()" role="button">Complete Transaction</a>