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 displaying icons that you would rather the screen reader not detect. 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 in this form to everyone. We want to hide it so only certain people with access can see it. Hide the link from users and screen readers.
Next, hide the submit button from screen readers.