search

octopusthink / nautilus

Inclusive, open-source design system and React component library.
https://nautilus.octopusthink.com
MIT License
2 stars 0 forks source link

VisuallyHidden styles sometimes aren't visually hidden! #222

Closed sarahmonster closed 4 years ago

sarahmonster commented 4 years ago

Because our VisuallyHidden styles have a height and width of 1px, in some cases elements can actually be visible as a tiny little coloured dot on the page.

It seems like we need that 1px size for elements to be read out, so maybe the clip properties just need to be fixed?

Related reading:

https://snook.ca/archives/html_and_css/hiding-content-for-accessibility

sarahmonster commented 4 years ago

Looks like it should be as follows:

clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
  clip: rect(1px, 1px, 1px, 1px);

But when I tried that, the SkipLink doesn't seem to appear on focus, so we'll need to adjust more.

https://github.com/octopusthink/getmicdrop.com/commit/725093ca6dc3f0c3d6e219dd6d45a83c9488c867