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

Accessible Code for Content Providers


HTML tags are not eye candy.

HTML tags mean something. Do not use html tags only because you like the way they look.

Do use html tags to define your content - and to chunk it:

This is what I mean by chunking:

  • List tags (ol or ul, li): The screen reader announces a list with 20 items. The screen reader says there are 2 lists on the page.
  • Table tags (table, tr, th or td): The screen reader announces a table of data. The screen reader says there's 1 table on the page.
  • Link tags vs. button tags (a or button): Read this sad tale.
  • Blockquote tag: The screenreader announces a quoted passage. User may decide to skip it as an embellishment to the main text.
  • Description list tags (dl, dt, dd):
    • The screen reader announces a description list with 20 items. First item is question/answer. User understands that the others will also be question/answer.
    • The screen reader announces a description list with 10 items. First item is term/values in a catalog record. User can skip the metadata and go to request functionality.

The accessible bottom line:  Patrons can skip entire chunks or skip around within the chunks.

CSS is eye candy. (We can make pigs Pig wearing jet engines and pilot gogglesfly out of it.)

Do use css to get any look you want.

Screen Reader Gestures

Screen readers require different gestures for different tags. Using the wrong tags throws everything out of whack!

See a table of tags and gestures.

Use List Tags for Lists!

What if you hate the dots that come with an unordered (ul) list? Don't throw away the list! Use CSS to throw away the dots.

<ul style="list-style-image: none; list-style-type: none; margin: 0; padding-left: 0;">

Here's the breakdown:

  • Get rid of the dot:: list-style-image: none; list-style-type: none;
  • Get rid of the indentation: margin: 0; padding-left: 0;

What if you love that dot but you have only one item? Don't use list tags! Use a dot character in your html. Use CSS to indent. .

• This item has a dot.

<p style="margin-left: 30px;">&#x2022; This item has a dot.</p>

Here's the breakdown:

  • Indent the line: margin-left: 30px;
  • This is a dot character: &#x2022;

Tables are only for tabular data. Tables are not needed for column layouts.

Do use tables for tabular data.

Table header tags are required and they cannot be empty: (<th>Header label</th>).
Use headers across the top row, down the left column, or both.
Use the visually-hidden trick if you don't want sighted users to see the headers.

Table headers in the top row:

         <th>Miles run</th>
         <th>Shoe repairs in $</th>

Table headers at the top and in the left column:

         <th>Miles run</th>
         <th>Shoe repair in $</th>

Here's the table

Month January February
Miles run 60 30
Shoe repair in $ 10 30

Do not use tables for layouts.

If a table column is used to make room for a sidebar, the screen reader will struggle to read your page as data in 2 columns (with missing headers!). What's more, for sighted users, the table will look terrible on a mobile device.

Lay out sidebar and other non-tabular columns using:

Buttons VS Links

If it walks like  a link and talks like a link, it shouldn't be a button.

Here's a test:
If a "Back" action should be possible, make it a link.

Blog post: A blind person describes the problem

Links (a-tags)

  • Screen readers announce links as "Link."
  • Links navigate. They navigate to new pages or they navigate to another part of the page.
  • Links are part of an accessible all-links menu. Screen readers provide these options:
    • Show list of all links.
    • Go to next link.
    • Go to next unvisited link.
    • Go to next visited link.


  • Screen readers announce buttons as "Button."
  • Buttons trigger actions:
    • Submit, reset a form.
    • Open a modal.
    • Expand/collapse an accordion panel.
    • "Download,” “Sign up,”  “Log out."

Were you asked to display super important links as buttons?

You can code it like a link and style it like a button. At least the link will be accessible for screen readers.

Here's an example from the University of Pennsylvania website:
Our History

Below is the html. Notice that the link has class="upenn-linkbtn"

<a class="upenn-linkbtn" href="">Our History</a>

And here's the css for that class - a section for its default state and a section for the hover state:

a.upenn-linkbtn {
  background: #transparent;
  border: solid 1px #011f5b;
  border-radius: 32px;
  text-decoration: none;
  text-transform: uppercase;
  font-family: Arial, sans-serif;
  font-size: 1.4rem;
  letter-spacing: .03rem;
  line-height: 1.3;
  text-align: center;
  font-weight: bold;
  padding: 2.4rem;
  color: #011f5b;
a.upenn-linkbtn:hover {
  background: #011f5b;
  border: none;
  text-decoration: none;
  color: #fff;

Blockquotes VS Indents

Blockquote tags come under the heading "I need that too"!

According to the MLA Handbook:

A quotation that runs more than four lines in your prose should be set off from the text as a block indented half an inch from the left margin....A verse quotation of more than three lines in the source should be set off from your text as a block....In a play...set the quotation off from the text when quoting an exchange between speakers. [Sorry, I can't spin this out to 4 lines.]

Did you read the MLA passage above or did you skip it? Someone who uses screen reader should also have the option of skipping long quotes, and that's what the blockquote tag provides.

If you want to indent just for the look of it, use css:

<p style="margin-left: 4rem; margin-right: 4rem;">My indented text</p>

Description Lists (DL) vs Hanging Indents

Here's the default look of a description list:


And here's the html:


Do use a description list for catalog data:

Report writing -- Handbooks, manuals, etc.
Research -- Handbooks, manuals, etc.
Report writing.
Handbooks and manuals

Catalog entries are often styled like this:

Report writing -- Handbooks, manuals, etc.
Research -- Handbooks, manuals, etc.
Report writing.

Here's the css for that look:

dt {float:left; width: 9rem;}
 dd {margin-left: 9rem;}

Do use a description list for Q and A: for example, FAQs and interviews:

Q: How can I verify that I attended the University of Pennsylvania?
A: Verification (or Academic Certification) is obtained through the Registrar’s Office.

You can use css to make the question bold and separate it from other questions. :

dt {font-weight: bold; margin-top: .5rem;}

Then flatten the default indent on the <dd>tag:

dd {margin-left: 0;}

Do not use a description list for a hanging indent.
Do use css for a hanging indent.

Here's a list with that look:

Books for Asian American and Pacific Islander Heritage

  • Banyan Moon by Thao Thai: When Ann Tran gets the call that her fiercely beloved grandmother, Minh, has passed away, her life is already at a crossroads.
  • Stories for South Asian Supergirls by Raj Kaur Khaira: Inspirational stories of 50 famous and under-celebrated women from Afghanistan, Pakistan, India, Bangladesh, Nepal, and Sri Lanka.
  • Etc.


Here's the html:

<ul class="no-dot hanging-indent-list">
    <li>Banyan Moon by Thao Thai: etc.</li>
    <li>Stories for South Asian Supergirls by Raj Kaur Khaira: etc.</li>


Here's the css for class="hanging-indent-list"

.hanging-indent-list li {text-indent: -3rem; margin-left: 3rem;}

And here's the css for class="no-dot"

.no-dot {list-style-image: none; list-style-type: none;}

Penn Libraries Home Franklin Home
(215) 898-7555