Visually Hidden

The .visuallyhidden class keeps content in the DOM, but hides it visually. This is important for screenreaders to get context (e.g. skip navigation, a caption or h1 heading) that isn’t in the design mock-up.

This is located in the _helper.scss stylesheet at src/scss/utilities/_helper.scss.


Caption for table

<table class="fixed-table__wrapper">
    <caption class="visuallyhidden">UCLA Freshman and Transfer important dates for applying.</caption>

Heading for pop-up modal

<div class='cookie'>
    <h2 class="visuallyhidden">Cookie Policy</h2>
    <p class="cookie__copy">...</p>
    <button class="cbtn cookie__btn--accept" type="button" id="cookie-policy-btn">I Accept</button>