Menu
I need to implement a form with placeholder text and no visible labels, but still have it be accessible to non-sighted users. Setting a text-indent: -9999px on the labels hides them, but adds extra space to the form. Is there any reason not to just set the font size to 0px? Will it still be readable by screen readers?
903
To hide text from a screen reader and display it visually, use the aria-hidden attribute and set it to true. To hide text from a screen reader and hide it visually use the hidden attribute. You can also use CSS to set display: none or visibility: hidden to hide an element from screen readers and visually.
To hide an element to screen readers (and child elements), simply add the aria-hidden="true" attribute. Content can still be made accessible to ATs via aria-describedby or aria-labelledby .
In HTML, you can change the size of text with the <font> tag using the size attribute. The size attribute specifies how large a font will be displayed in either relative or absolute terms. Close the <font> tag with </font> to return to a normal text size.
The font-size CSS property sets the size of the font.
My recommendation:
.magic-text {
color:transparent;
font-size:0;
}
This will hide your text properly; font-size itself should be enough but some browsers behave differently, so we make it transparent (invisible) in those. As for those browsers who don't get convinced by font-size, selecting may reveal your text but it's a very low price to pay; also it can be avoided by locally disabling selection. If it's not an option, you can still hide your text using z-index and relative (or even absolute) positioning:
.magic-text {
position:relative;
z-index:-99; /* or just -1, whatever */
}
This will do the trick.
131
To hide text visually, but make it available for screen readers use the clip rect offscreen technique made popular by Snook.ca http://snook.ca/archives/html_and_css/hiding-content-for-accessibility
The technique is to apply a class to the text (on a span inside the label) with the following CSS applied.
.screen-reader-text {
position: absolute !important;
height: 1px; width: 1px;
overflow: hidden;
clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
clip: rect(1px, 1px, 1px, 1px);
clip-path: polygon(0px 0px, 0px 0px,0px 0px, 0px 0px);
}
In the past the following CSS has been used but this is not longer recommended because of focus problems on iOS devices and problems with RTL languages.
.screen-reader-text {
position: absolute !important;
left: -9999em;
top: -9999em;
}
Here is an example using also the clip-path technique with fallbacks for older browsers
<!doctype html>
<html>
<head></head>
<body>
<style>
.screen-reader-text {
position: absolute !important;
height: 1px; width: 1px;
overflow: hidden;
clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
clip: rect(1px, 1px, 1px, 1px);
clip-path: polygon(0px 0px, 0px 0px,0px 0px, 0px 0px);
}
.background-image {
background-image: url('https://cdn3.iconfinder.com/data/icons/abstract-1/512/go_B-512.png');
background-size:cover;
width:50px;
height:50px;
}
</style>
<button class="background-image"><span class="screen-reader-text ">Go</span></button>
</body>
</html>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
