1/** 2 * @file 3 * Utility classes to hide elements in different ways. 4 */ 5 6/** 7 * Hide elements from all users. 8 * 9 * Used for elements which should not be immediately displayed to any user. An 10 * example would be collapsible details that will be expanded with a click 11 * from a user. The effect of this class can be toggled with the jQuery show() 12 * and hide() functions. 13 */ 14.hidden { 15 display: none; 16} 17 18/** 19 * Hide elements visually, but keep them available for screen readers. 20 * 21 * Used for information required for screen reader users to understand and use 22 * the site where visual display is undesirable. Information provided in this 23 * manner should be kept concise, to avoid unnecessary burden on the user. 24 * "!important" is used to prevent unintentional overrides. 25 */ 26.visually-hidden { 27 position: absolute !important; 28 overflow: hidden; 29 clip: rect(1px, 1px, 1px, 1px); 30 width: 1px; 31 height: 1px; 32 word-wrap: normal; 33} 34 35/** 36 * The .focusable class extends the .visually-hidden class to allow 37 * the element to be focusable when navigated to via the keyboard. 38 */ 39.visually-hidden.focusable:active, 40.visually-hidden.focusable:focus { 41 position: static !important; 42 overflow: visible; 43 clip: auto; 44 width: auto; 45 height: auto; 46} 47 48/** 49 * Hide visually and from screen readers, but maintain layout. 50 */ 51.invisible { 52 visibility: hidden; 53} 54