Accessible Code for Content Providers

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

See a table of tags and gestures.

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

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:

<table>
   <tr>
      <th>Month</th>
      <th>Miles run</th>
      <th>Shoe repairs in $</th>
   </tr>
   <tr>
      <td>January</td>
      <td>60</td>
      <td>10</td>
   </tr>
   <tr>
      <td>February</td>
      <td>30</td>
      <td>30</td>
   </tr>
</table>

Table headers in the left column:

<table>
   <tr>
      <th>Month</th>
      <td>January</td>
      <td>February</td>
   </tr>
   <tr>
      <th>Miles run</th>
      <td>60</td>
      <td>30</td>
   </tr>
   <tr>
      <th>Shoe repair in $</th>
      <td>10</td>
      <td>30</td>
   </tr>
</table>

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:

• Floats - described on CSS Tricks
• Inline-blocks - also described on CSS Tricks

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.

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.

Buttons:

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

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>

Here's the default look of a description list:

And here's the html:

Do use a description list for catalog data:

Subjects:

Report writing -- Handbooks, manuals, etc.

Research -- Handbooks, manuals, etc.

Report writing.

Form/Genre:

Handbooks and manuals

 

Catalog entries are often styled like this:

Subjects:

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:

How can I verify that I attended the University of Pennsylvania?

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:

Washington's first cabinet

• Thomas Jefferson, Secretary of State
• Alexander Hamilton, Secretary of the Treasury
• Etc.

 

Here's the html:

<ul class="no-dot hanging-indent-list">
    <li>Thomas Jefferson, Secretary of State</li>
    <li>Alexander Hamilton, Secretary of the Treasury</li>
    <li>Etc.</li>
</ul>

 

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