-
Improvement
-
Resolution: Unresolved
-
Minor
-
None
-
4.0.0-a1, 3.3.15
-
None
The <dfn> used in definition lists (.topiclist) is not used for a true semantic definition, but to provide a useful text label ("Answers", "Views", etc.) for screen readers.
The text is removed from the screen, while keeping it present in the code and accessible using this old accessibility hack in content.css:
ul.topiclist dfn {
|
/* Labels for post/view counts */ |
position: absolute; |
left: -999px; |
width: 990px; |
}
|
Suggestions:
- Simplest solution: declare the accessibility method directly on the element by replacing:
ul.topiclist dfn {/* Labels for post/view counts */
position: absolute;
left: -999px;
width: 990px;
}with:
ul.topiclist dfn {border: 0;
position: absolute;
overflow: hidden;
clip: rect(0, 0, 0, 0);
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
}And remove in bidi.css:
.rtl ul.topiclist dfn {
left: auto;
right: -999px;
}
- Or add the class 'sr-only' to all relevant <dfn> elements (15 in 7 different files).
- Or add an aria-label attribute to all parents of these <dfn> elements.

