Accessibility, CSS | Type: CSSAccessible Hiding of Elements with CSS

Developers commonly use display: none to hide content on the page. Unfortunately, this simple and common action can be problematic for users of screen readers. Below is a better way:

.visually-hidden { /* https://snook.ca/archives/html_and_css/hiding-content-for-accessibility */
    position: absolute !important;
    height: 1px; width: 1px;
    overflow: hidden;
    clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
    clip: rect(1px, 1px, 1px, 1px);
}

Reference Links

https://a11yproject.com/posts/how-to-hide-content/