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
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
<p class='hidden-sentence' aria-hidden='true'>This is hidden from screen readers!</p>
Additionally, styling with specific values for
height can produce the same result but with caveats.
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.