- Block Links, Cards, Clickable Regions, Rows, Etc. - Adrian Roselli
If you fail to make the link to display: block, it will have dead areas around words or chunks of text, which can make them feel like distinct links for a mouse user
- Blockquotes in Screen Readers — Adrian Roselli
JAWS is the only screen reader that allowed me to navigate by block quotes If the announcement of the URL in the cite attribute was not interesting (verbose) enough, JAWS also uses that to name the block quote (Chrome does not expose it that way):
- Don’t Turn a Table into an ARIA Grid Just for a Clickable Row
I show how to do it in my post Block Links, Cards, Clickable Regions, Rows, Etc That post does not use a checkbox in each row, but instead uses links and buttons
- Show Hide Script-Free (Which Means CSS Only) - Adrian Roselli
display: block; } I made a sample to show it in action: Supporting older browsers that don’t know what to do with :target can be as simple as wrapping the CSS in media queries or using conditional comments (for old Internet Explorer) From here you can layer all your nifty JavaScript animated effects, key bindings, and so on What Prompted
- A Responsive Accessible Table — Adrian Roselli
Here’s a fun fact: as soon as I changed the table styles to display: block, screen readers no longer consider this to be a table The header cells (<th>) are meaningless
- Table with Expando Rows - Adrian Roselli
If you use display: block instead of display: table-row then the browser drops all the semantics for the row and assistive technology cannot navigate it See my post Tables, CSS Display Properties, and ARIA for more detail
- Brief Note on Figure and Figcaption Support — Adrian Roselli
Code Block # NVDA reads the boundaries and VoiceOver desktop announces the caption twice in read-all mode The others ignore it Firefox 133 NVDA 2024 4 1 # Read-all (NVDA + A) Announces “figure” when entering figure Announces “caption” when entering figcaption Announces “out of caption” when exiting figcaption
- Tables, CSS Display Properties, and ARIA — Adrian Roselli
If you find you want to use CSS flex, grid, block, inline, or other display properties on a table, then maybe consider what the heck you are doing with the table
|