Skip to Main Content
Go to Penn Libraries homepage   Go to Guides homepage

Accessible Guides Project

What is a class?

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;
}

Read about CSS.

IMPORTANT!! look for our styling on the public page, NOT in the editor

Our classes do not (usually) display in the editor interface.

  • I mean the page editor, not just the box editor.
  • If you see the gold bar, you're in the editor.

Go to the preview or go to the live page to see the classes displayed.

You have to go into the HTML code. Then add a class to a tag

Open the editor for  a box and click Source to see the content and the tags that tell browser how it should be displayed.

Source is a link in the ckeditor widget

To use our classes, you will add them to the appropriate tags. Type a space after the tag name. Then type class="our-class"

4 classes to format your lists

You don't have to read this. You can ask for help from Web Unit or your Accessibility Ambassador!

So far, we've defined 4 classes to style your lists (and we're happy to add more).

  1. Do you hate the dots that come with an unordered (ul) list?

    Don't throw away the list! Use a class to throw away the dots.

    <ul class="no-dot">

  2. Do you dislike the way lists are indented?

    (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">

  3. Do you love that dot but have only one item?

    Don't use list tags! Use our fake-list class.

    <p class="fake-list">This item has a dot.</p>

  4. The pipe-separated list may look daunting, but it only needs this class:

    <ul class="pipe-sep-list">

To add a class:

  • To add a class, you have to go into the html (click "source").
  • You have to look at the public page to see the new display

The visually-hidden class hides information from sighted patrons

Use "visually-hidden" when screen readers require information that would be redundant for sighted users.

For example, use "visually-hidden" to...

  1. 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>

  2. 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.

    1. "more..." link

      <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>

    2. Help link

      <a href="mailto:LIBwebunit@o365lists.upenn.edu">Ask the Web Unit<span class="visually-hidden"> for help with font sizes</span></a>

  3. 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>

Penn Libraries Home Search the Catalog
(215) 898-7555