Accessible Guides Project

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.

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.

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!

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

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>