| title | date | submitter | number | tags | discussion | ||
|---|---|---|---|---|---|---|---|
I want to be able to visually hide something without hiding it from assistive tech |
2019-09-13 23:43:08 UTC |
Adam Norris |
71 |
|
There are times when building a web interface where you need text which is available for screen readers and search engines but not actually visible on the page. As an example, on the gov.uk homepage they have a hidden h2 that introduces a section of content.
<h2 id="services-and-information-label" class="visuallyhidden">Services and information</h2>The current way to do this is to have some hacky CSS that hides content visually by either clipping the text or moving it offscreen. WebAIM have a good example of this technique. You can even see this technique used in popular CSS libraries such as Bootstrap.
Since there is a clear need for this type of display, it should be added natively to CSS, possibly as a value for the display property (e.g., display: visuallyhidden). A dedicated property value would also be useful when wanting to visually hide content contained in a pseudo element (e.g. ::before) as it's not possible to add a "visuallyhidden" class to these types of elements.