design-system
design-system copied to clipboard
Test support for `clip-path` with assistive technology
The following block of code is a common pattern when visually hiding text in a way that still allows it to be read by assistive technology:
border: 0;
clip: rect(0 0 0 0);
height: auto;
margin: 0;
overflow: hidden;
padding: 0;
position: absolute;
white-space: nowrap;
width: 1px;
As noted in this comment by @tysongach, the clip property is deprecated. However, support for its replacement, clip-path, may not be announced properly by assistive technology, especially older or less feature-rich versions of it.
We should extensively test if clip-path is a suitable replacement by creating a reduced test case and checking it with a wide range of assistive technology solutions before deploying it to production.