Re:Flexible data tables with CSS Grid
by runarberg on Saturday May 18, 2019 @06:22PM
(#19950051)
In my experience developers are really bad at implementing accessible components from scratch. There are a lot of nuanced edge cases that is easy for a mere human to miss. Like:
* Tabbing order, trapping the tab order (but still allow tabbing to the URL bar)
* Keyboard navigation, and keyboard controls, esc and arrow key behavior etc.
* Submit behavior and change events
And many more. Setting the correct `role` only adds the semantics for assistive technologies and is by no means sufficient to make things accessible.
When you just use `<table>`, `<details>`, `<button>`, <select>, `<dialog>`, etc. you get all accessibility correctly implemented for free.
Sure you can find a library that implements the component. But these are too implemented by mere humans and are likely to miss some of the nuanced edge cases. Also by that point you might as well just use the standard elements.
* Tabbing order, trapping the tab order (but still allow tabbing to the URL bar)
* Keyboard navigation, and keyboard controls, esc and arrow key behavior etc.
* Submit behavior and change events
And many more. Setting the correct `role` only adds the semantics for assistive technologies and is by no means sufficient to make things accessible.
When you just use `<table>`, `<details>`, `<button>`, <select>, `<dialog>`, etc. you get all accessibility correctly implemented for free.
Sure you can find a library that implements the component. But these are too implemented by mere humans and are likely to miss some of the nuanced edge cases. Also by that point you might as well just use the standard elements.