I’m interested in knowing how CSS affects accessibility on the web with the addition of things like flexbox, grid and psuedo elements that manipulate the content and the layout.
The order in which the elements are laid out in the DOM tree might be complete different from how it looks to the user and might mess up with accessibility functions like screen readers.
As we are going advanced with our layouts, are we making web less accessible for people with disabilities?
CSS nothing does with accessibility (except contrast ratio and font sizes which users can configure themselves in most cases), however, HTML itself does and a lot.
Just use right semantic tags and ARIA attributes whenever you need and like you want. If you want to focus input located above and not below when I press tab, you can do that with tabindex.
In modern apps don't forget to update all the required ARIA attributes with JS.
Ben Buchanan (200ok)
I make some bits of the web.
CSS can create accessibility issues a few ways:
So yes the new layout systems can cause accessibility issues; the answer in the end is to ensure you test the tab order is still logical, content still available to assistive tech and so on.