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':
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.