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

Accessible Guides Project

Starting with an example

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

Chunk your content with lists

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.

Use the WYSIWYG to code a list in the HTML

  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.
    List items are selected. Wysiwyg icons for ordered and unordered lists are circled.
  5. Click "Save & Close."

Little known fact: The WYSIWYG will make nested lists

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

You don't have to give up the eye candy

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

The most popular request: Make a list without dots

lists using pipe-delimited format

Or would you like a pipe-delimited list?

We can help with that too:

lists using pipe-delimited format

Is it already a list?

Just open the editor..

It may look like this on the public page:

lists using pipe-delimited format

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.

lists using pipe-delimited format

>>>Advanced: Working outside the WYSIWYG<<<

How to go into the HTML and add classes to format 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).

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

Penn Libraries Home Franklin Home
(215) 898-7555