WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Quick Response Needed - DL or UL?

for

From: Bryan Garaventa
Date: Apr 24, 2015 10:52AM

> I am wondering in what circumstances a "heading structure" would be an
> appropriate replacement for a list (especially a definition list). I have
> the opposite problem at the moment with a client who used a DL to implement what should have been a list with a header (an H2 for the list and then a plain UL), ... they used a DL with DD for the header and then a > nested UL in the DT ... they did this for the site-map , which is on the bottom of every page.

ARIA can be used to help this type of situation, even if the markup in this case is slightly off.

DL tags can be used effectively for formatting purposes without harming accessibility. You can test an example of this in the Change Log section at
http://whatsock.com/training/#hd37

Where all of the change log notes start with the date within a DT element, and the explanation is within a DD. Each of the DT elements include role="heading" + aria-level="3" to change the role of the element in the Accessibility Tree to a heading with a level of 3.

If there is a need to remove the 'definition' feedback for screen reader users, you can add role="presentation to the DL element tag, and this will nullify the construct in the Accessibility Tree so that it acts more like a Div, in order to rely more on the embedded structures.