Accessible Guides Project

The screen reader announces a list and announces the number of items. Don't take away that efficiency just because you hate the dots.

Sighted users do not read web pages the way they read paper. They see chunks of content and they skip around and across the chunks.

On web page - especially libraries web pages? - lists are a dominant chunk, so we're starting there.

Patrons may skip a list. Or (in Franklin, for example)  they may think, "Here's the real stuff!" Either way, they see a list and make a choice.

A list says:

• These items belong to the same group
• For a dot-list (unordered list): These items are similar in importance
• For a numbered list (ordered list): These items are ranked or they're steps in a process.

People who use screen readers want the same information.

The accessible bottom line: Everyone wants web content chunked. Everyone wants to skip around or read carefully. Everyone wants the same efficiency and the same choice.

1. Log into the guide.
2. For the box with an uncoded list, click the edit icon at bottom right (under the content). The box editor opens (it calls itself “rich text editor”).
3. Select the list (see the blue selection in the screenshot below).
4. In the WYSIWYG toolset, select either the icon for an ordered list or the icon for an unordered list.
   
5. Click "Save & Close."

• A survey of Penn Libraries shows that many uncoded lists are nested lists (= sublists).
• You can use the wysiwyg to make a nested list
  • First put everything into a flat list - all top level items
  • Then select the items that should be in the nested list
  • Click tab
• Tada!

Web Unit or your Accessibility Ambassador can give you exactly the look you want!

The most popular request: Make a list without dots

Or would you like a pipe-delimited list?

We can help with that too:

Just open the editor..

It may look like this on the public page:

But, if it IS coded as a list, it will look like this in the editor. Our list fixes display on the public page only. In the editor, you'll see default formatting.

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

Read "How To Use Our Classes" (it's linked in the sidebar).

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

Instructions for using our classes are here.

• 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