HTML tags mean something. Do not use html tags only because you like the way they look.
This is what I mean by chunking:
The accessible bottom line: Patrons can skip entire chunks or skip around within the chunks.
Do use css to get any look you want.
Screen readers require different gestures for different tags. Using the wrong tags throws everything out of whack!
<ul style="list-style-image: none; list-style-type: none; margin: 0; padding-left: 0;">
Here's the breakdown:
list-style-image: none; list-style-type: none;
margin: 0; padding-left: 0;
• This item has a dot.
<p style="margin-left: 30px;">• This item has a dot.</p>
Here's the breakdown:
margin-left: 30px;
•
There's a class for hiding list formatting.
<ul class="no-dot">
There's a class for inserting a dot for fake-list formatting. This dot matches the unindented gray-dots used in Guides lists:
<p class="guides-fake-list">This item has a dot.</p>
Or use this code for a standard, indented black dot:
<p class="fake-list">This item has a dot.</p>
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>
<thead>
<tr>
<th>Month</th>
<th>Miles run</th>
<th>Shoe repairs in $</th>
</tr>
</thead>
<tbody>
<tr>
<td>January</td>
<td>60</td>
<td>10</td>
</tr>
<tr>
<td>February</td>
<td>30</td>
<td>30</td>
</tr>
</tbody>
</table>
<table>
<thead>
<tr>
<th>Month</th>
<th>January</th>
<th>February</th>
</tr>
</thead>
</tbody>
<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>
</tbody>
</table>
Month | January | February |
---|---|---|
Miles run | 60 | 30 |
Shoe repair in $ | 10 | 30 |
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:
There's a fix (though it's better to clean things up). Add role="presentation"
to that inappropriate table tag:
<table role="presentation">
Here's a test:
If a "Back" action should be possible, make it a link.
Blog post: A blind person describes the problem
You can code it like a link and style it like a button. At least the link will be accessible for screen readers.
Below is the html. Notice that the link has class="upenn-linkbtn"
<a class="upenn-linkbtn" href="https://upenn.edu/about">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;
}
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>
There's a class for imitating the blockquote indent - but just on the left:
<p class="indent">
Here's the default look of a description list:
And here's the html:
<dl>
<dt>Term</dt>
<dd>Detail</dd>
<dd>Detail</dd>
</dl>
Catalog entries are often styled like this:
Here's the css for that look:
dt {float:left; width: 9rem;}
dd {margin-left: 9rem;}
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;}
Here's a list with that look:
Books for Asian American and Pacific Islander Heritage
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>
<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;}
Here are the Guides classes for dl tags and a list with hanging indents:
<dl class="catalog-list">
<dl class="flat-faq">
<ul class="hanging-indent-list">