If you build websites, you inevitably run into problems. Maybe there’s no way to achieve an aspect of your design using CSS. Or maybe there’s a device feature you really wish you could tap into using JavaScript. Or perhaps the in-browser DevTools don’t give you a key insight you need to do your job. We want to hear about it!
title: An HTML attribute to indicate an element that is for screen readers only
date: 2022-06-24T13:29:40.914Z
submitter: Joppe Kroon
number: 62b5bc44621ffa0058c5203c
tags: [ ]
discussion: https://github.com/WebWeWant/webwewant.fyi/discussions/
status: [ discussing || in-progress || complete ]
related:
To add some necessary context or labelling for non-visual screen reader users, e.g. an icon button, you have to add some text that is visually hidden.
One option is "aria-label", but this is not always a viable solution, and it has long standing issues with translation software, etc.
The other solution is to apply a convoluted set of CSS declarations that cause the element to be invisible, but the browser doesn't realize it so it won't optimize it away.
See "CSS clip" at https://webaim.org/techniques/css/invisiblecontent/#techniques
Although the CSS clip trick works well, it
requires looking up the exact set of declarations, they are non-obvious.
might break in the future when browsers realize the element is invisible, and start optimizing it away.
often requires CSS to be downloaded.
A HTML attribute on the other hand would be
easy to remember and communicate,
would be forward compatible and easily polyfillable
is in place with the HTML
May allow browsers to optimize calculations as the element will never actually require rendering.
title: An HTML attribute to indicate an element that is for screen readers only date: 2022-06-24T13:29:40.914Z submitter: Joppe Kroon number: 62b5bc44621ffa0058c5203c tags: [ ] discussion: https://github.com/WebWeWant/webwewant.fyi/discussions/ status: [ discussing || in-progress || complete ] related:
title: url: type: [ article || explainer || draft || spec || note || discussion ]
To add some necessary context or labelling for non-visual screen reader users, e.g. an icon button, you have to add some text that is visually hidden.
One option is "aria-label", but this is not always a viable solution, and it has long standing issues with translation software, etc.
The other solution is to apply a convoluted set of CSS declarations that cause the element to be invisible, but the browser doesn't realize it so it won't optimize it away. See "CSS clip" at https://webaim.org/techniques/css/invisiblecontent/#techniques
Although the CSS clip trick works well, it
A HTML attribute on the other hand would be
If posted, this will appear at https://webwewant.fyi/wants/62b5bc44621ffa0058c5203c/