Classes are great! By adding class="something-predefined" inside an HTML tag, you can completely change the appearance (or disappearance) of an element on your page.
For example, our visually-hidden class hides elements from sighted (visual) users. It limits the visual size of an element to 1px x 1px and then it instructs the element to go fly a kite somewhere outside the browser window.
Here's how we've defined the class visually-hidden in our CSS:
.visually-hidden:not(:focus)
{
position: absolute !important;
white-space: nowrap;
clip: rect(0 0 0 0);
clip-path: inset(50%);
padding: 0 !important;
border: none !important;
height: 1px !important;
width: 1px !important;
overflow: hidden;
}
Our classes do not (usually) display in the editor interface.
Go to the preview or go to the live page to see the classes displayed.
Open the editor for a box and click Source to see the content and the tags that tell browser how it should be displayed.
To use our classes, you will add them to the appropriate tags. Type a space after the tag name. Then type class="our-class"
You don't have to read this. You can ask for help from Web Unit or your Accessibility Ambassador!
Don't throw away the list! Use a class to throw away the dots.
<ul class="no-dot">
(Confession: I styled lists without the indent in Guides. But I won't be doing that in the next version.)
This class will smush your dots up against the left margin:
<ul class="no-indent-list">
Don't use list tags! Use our fake-list class.
<p class="fake-list">This item has a dot.</p>
<ul class="pipe-sep-list">
Use "visually-hidden" when screen readers require information that would be redundant for sighted users.
For example, use "visually-hidden" to...
Add headers: Sometimes sighted users don't need a header tag, but, without it, there will be a hole in your H-tag hierarchy.
Solution: Add a visually-hidden H-tag like this:
<h4 class="visually-hidden">Sources for government documents</h4>
Make linking text more complete: Usually it's clear from the preceding text where a "more..." link points or a help link points, but it won't be clear to a screen reader skipping from link to link.
Solution: Add a visually-hidden span tag to hold explanatory text.
<ul>
<li><a href="URL">Link to one government document</a></li>
<li><a href="URL">Link to another government document</a></li>
<li><a href="URL">more<span class="visually-hidden"> government documents</span>...</a></li>
</ul>
<a href="mailto:LIBwebunit@o365lists.upenn.edu">Ask the Web Unit<span class="visually-hidden"> for help with font sizes</span></a>
Describe images more fully: Sometimes an image conveys more information than can be described in 150 characters.
Solution: Add the description in visually-hidden tags.
Below, you'll see a visually-hidden H-tag and a visually-hidden unordered list tag.
<h3 class="visually-hidden">First floor: East wing and connector between wings:</h3>
<ul class="visually-hidden">
<li>Moelis Family Grand Reading Room</li>
<li>popular magazines</li>
<li>reference stacks</li>
<li>the Collaborative Classroom</li>
<li>Government Documents</li>
<li>Goldstein Electronic Classroom (Room 114)</li>
<li>,</li>
<li>Kamin Gallery</li>
<li>Card Catalog</li>
<li>PennCash center</li>
<li>Class of 1964 Electronic Look-up Center</li>
<li>Moelis Lounge</li>
<li>Moelis Electronic Research Center</li>
<li>Information Desk</li>
<li>Circulation</li>
<li>Current Periodicals</li>
<li>Class of 1963 Microtext Center</li>
<li>Daily Newspapers</li>
<li>New Books</li>
<li>New York Times (NYT) Best Sellers</li>
<li>S. T. Lee Lounge</li>
<li>Interactive Learning Porch</li>
</ul>