As I have noted in a couple of blog posts recently, there are some cases when CSS has quite unexpected results in screen readers (or the way web browsers create the accessibility information they hand over to screen readers). If you haven’t read them, the posts are Screen readers, list items and list-style:none and Using display:table has semantic effects in some screen readers.
Here are a few examples:
- Using
display:tableon non-table elements to get the visual layout characteristics of an HTML table without actually using one may cause screen readers to act as if there was a real table - Using
display:blockor float on table-related elements may cause screen readers to treat the table as a layout table and ignore its semantics or report an incorrect data structure - Using
list-style:noneto visually remove bullets or numbers from list items may cause screen readers to ignore them too, basically treating list items as paragraphs of text
Posted in Accessibility, CSS.
Copyright © Roger Johansson