Inevitably, at some point, a web page will need to hide content from users somehow. There are a variety of ways to do this, but each one has different use cases and implications.
The first way that content could be hidden is by hiding it from everyone. In this case, everyone refers to both human users viewing the web page and screen readers. To hide content from everyone in this manner, you can set the visibility
property to hidden
or set the display
property to none
.
The second method is to hide content only visually. This means that content will still be accessible to screen readers, but not human users. This method is more complex as browser quirks can come into play, and considerations needing to be made around focusing the elements via things like keyboard navigation.
The third method is to hide the content semantically, hiding it from screen readers only but displaying it visually. This method is useful for obscuring content that provides no meaningful context to screen reader users, such as decorative icons and repeated text. This can be done by setting the aria-hidden
HTML attribute to 'true'
:
<p class='hidden-sentence' aria-hidden='true'>This is hidden from screen readers!</p>
Additionally, styling with specific values for text-indent
, font-size
, or height
can produce the same result but with caveats.
Instructions
There is currently a protected link that is being shown within this form to everyone. We want to hide it so only certain people with access can see it.
In styles.css, find the selector for .protected-link-container
and apply a style that will hide it from users and screen readers.
Next, return back to index.html and locate the <h3>
element just before the form begins that has the same text as the <h2>
near the top of the page, “Codecademy Survey”. Style that <h3>
element such that screen readers will not read the duplicated text.