...
Bad:
<img
...
src="exciting-photograph.jpg">
...
Good:
<img
...
src="exciting-photograph.jpg"
...
alt="a
...
man
...
walks
...
on
...
a
...
tightrope
...
between
...
two
...
skyscrapers">
...
1.1.1 - "Alt text for all img elements is the empty string ("") if the image is decorative."
...
For decorative images, assign the alt attribute an empty string - " " as alt text.
Bad:
<img
...
src="https://images.com/swoosh.png"/>
...
Good:
<img
...
src="https://images.com/swoosh.png"
...
alt=""/>
...
or
<img
...
src="https://images.com/swoosh.png"
...
alt="
...
"/>
...
1.1.1 - Alt text for all img elements that are not used as source anchors conveys the same information as the image.
...
There are different methods for larger, more complex images, such as charts and tables.
see: Complex Images
Bad:
<img
...
src="http://www.images.com/branding-tagline.png"
...
alt="tagline">
...
Good:
<img
...
src="http://www.images.com/branding-tagline.png"
...
alt="UMBC:
...
An
...
Honors
...
University">
...
1.1.1 - A long description is used for each img element that does not have Alt text conveying the same information as the image.
...
Provide a link to another webpage providing a detailed description of the information in the chart. This can be done in a number of ways that depend on the needs of the content. See: Complex Images
Bad:
<img
...
src="chart.gif"
...
alt="chart"/>
...
Good:
<img
...
src="chart.gif"
...
alt="A
...
Complex
...
Chart
...
Described
...
under
...
the
...
heading
...
Care
...
and
...
Feeding
...
of
...
your
...
Complex
...
Chart
...
/>
...
<h4>Care
...
and
...
Feeding
...
of
...
your
...
Complex
...
Chart</h4>
...
1.1.1. - Alt text for all img elements used as source anchors is not empty when there is no other text in the anchor.
...
Ensure that the alt text is meaningful inside of a link. Generally this means that the link text describes where the user will go once the link is followed.
Bad:
<a
...
href="https://www.umbc.edu">
...
<img
...
src="https://www.umbc.edu/images/x0pgh23-large.png">
...
</a>
...
In this case, the screen reader, with no alt text, will read the filename, which isn't particularly useful.
or
<a
...
href="https://www.umbc.edu/sign-up-for-online-classes/">
...
<img
...
src="sign-up.png"
...
alt="read
...
more">
...
</a>
...
In this case, the screen reader will see a link that says "read more", which is better, but it doesn't say what they are going to read more about, so it's not very useful.
Good:
<a
...
href="https://www.umbc.edu">
...
<img src="https://www.umbc.edu/images/x0pgh23-large.png"
...
alt="University
...
of
...
Maryland,
...
Baltimore
...
County">
...
</a>
...
or
<a
...
href="https://www.umbc.edu/sign-up-for-online-classes/">
...
<img
...
src="sign-up.png"
...
alt="Sign
...
up
...
for
...
online
...
classes">
...
</a>
1.1.1 - Image Alt text is short.
...
Also, don't be tempted to stuff extra words in the alt text thinking that it will boost your SEO - this practice is generally frowned upon by search engine ranking companies.
Bad:
<img
...
src="retriever.jpg"
...
alt="A
...
Chesapeake
...
Bay
...
Retriever
...
catching
...
a
...
frisbee
...
flying
...
disc
...
in
...
its
...
teeth
...
as
...
it
...
flys
...
through
...
the
...
air.
...
Chesapeake
...
Bay
...
Retrievers
...
are
...
the
...
best
...
dogs
...
in
...
the
...
world,
...
and
...
this
...
one
...
is
...
no
...
exception.">
...
Good:
<img
...
src="retriever.jpg"
...
alt="A
...
Chesapeake
...
Bay
...
Retriever
...
catches
...
a
...
flying
...
disc
...
in
...
its
...
mouth.">
1.2.1 - Links to multimedia require a text transcript.
...
When linking to a video or other multimedia, include a link to a transcript.
Bad:
<a
...
href="video.mov">Commencement
...
Address</a>
...
Good:
<a
...
href="video.mov">Commencement
...
Address
...
(text
...
description
...
follows)</a>
...
<h1>
...
Commencement
...
Address</h1>
...
...(commencement
...
address
...
transcript)
...
1.3.1 - All data tables contain th elements.
...
An added benefit is that often a <th> gets bold text styling.
Bad:
<table>
...
<tbody>
...
<tr>
...
<td>University</td>
...
<td>Mascot</td>
...
<td>Founding
...
Date</td>
...
</tr>
...
Good:
...
<tr> <td>UMBC</td> <td>Retrievers</td> <td>1966</td> </tr> <tr> <td>UC Santa Cruz</td> <td>Banana Slugs</td> <td>1965</td> </tr> <tr> <td>Syracuse University</td> <td>Orangemen</td> <td>1870</td> </tr> </tbody> </table>
Good:
<table> <caption>University Sports Mascots</caption> <tbody> <tr> <th scope="col">University</th>
...
<th
...
scope="col">Mascot</th>
...
<th
...
scope="col">Founding
...
Date</th>
...
</tr>
...
<tr>
...
<th
...
scope="row
...
">UMBC</th> <td>Retrievers</td> <td>1966</td> </tr> <tr> <th scope="row">UC
...
Santa
...
Cruz</th> <td>Banana Slugs</td> <td>1965</td> </tr> <tr> <th scope="row">Syracuse
...
University</th>
...
<td>Orangemen</td>
...
<td>1870</td>
...
</tr> </tbody>
...
</table>
...
1.3.1 - All complex data tables have a summary.
...
see: Caption and Summary
Bad:
<table>
...
<tr>
...
<td></td>
...
<td>Jan</td>
...
<td>Feb</td>
...
...
...
</tr>
...
<tr>
...
<td>Sales</td>
...
<td>$1002</td>
...
<td>$2034</td>
...
...
...
</tr>
...
</table>
...
Good:
<table>
...
<caption>
...
Sales
...
Figures
...
for
...
2020
...
</caption>
...
<thead>
...
<tr>
...
<td></td> <td>Jan</td> <td>Feb</td> ... </tr> </thead> <tbody> <tr> <td>Sales</td> <td>$1002</td> <td>$2034</td> ... </tr> </tbody> </table>
1.3.1 - All data tables contain a caption unless the table is identified within the document.
...
The best solution is to include a <caption> element inside the table. Otherwise, identify the table with descriptive text immediately before the table in the source code.
Bad:
<table>
...
<tr>
...
<td><
...
Good:
...
/td> <td>Jan</td> <td>Feb</td> ... </tr> <tr> <td>Sales</td> <td>$1002</td> <td>$2034</td> ... </tr> </table>
Good:
<table> <caption> Sales Figures for 2020 </caption> <thead> <tr> <td></td> <td>Jan</td> <td>Feb</td> ... </tr> </thead> <tbody> <tr> <td>Sales</td> <td>$1002</td> <td>$2034</td> ... </tr> </tbody> </table>
1.3.1 - Use colgroup and col elements to group columns.
...
See: Tables with irregular headers
Bad:
<table>
...
<tr>
...
<td
...
rowspan="2"></td>
...
<th
...
colspan="2"
...
scope="colgroup">Mars</th>
...
<th
...
colspan="2"
...
scope="colgroup">Venus</th>
...
</tr>
...
<tr>
...
<th
...
scope="col">Produced</th>
...
<th
...
scope="col">Sold</th>
...
<th
...
scope="col">Produced</th>
...
<th
...
scope="col">Sold</th>
...
</
...
tr> <tr> <th scope="row">Teddy
...
Bears</th>
...
<td>50,000</td>
...
<td>30,000</td>
...
<td>100,000</td>
...
<td>80,000</td>
...
</tr>
...
<tr>
...
<th
...
scope="row">Board
...
Games</th>
...
<td>10,000</td>
...
<td>5,000</td>
...
<td>12,000</td>
...
<td>9,000</td>
...
</tr>
...
</table>
...
Good:
<table>
...
<col>
...
<colgroup
...
span="2"></colgroup>
...
<colgroup
...
span="2"></colgroup>
...
<tr>
...
<td
...
rowspan="2"></td>
...
<th
...
colspan="2"
...
scope="colgroup">Mars</th>
...
<th
...
colspan="2"
...
scope="colgroup">Venus</th>
...
</tr>
...
<tr>
...
<th
...
scope="col">Produced</th>
...
<th
...
scope="col">Sold</th>
...
<th
...
scope="col">Produced</th>
...
<th
...
scope="col">Sold</th>
...
</tr>
...
<tr>
...
<th
...
scope="row">Teddy
...
Bears</th>
...
<td>50,000</td>
...
<td>30,000</td>
...
<td>100,000</td>
...
<td>80,000</td>
...
</tr>
...
<tr>
...
<th
...
scope="row">Board
...
Games</th>
...
<td>10,000</td>
...
<td>5,000</td>
...
<td>12,000</td>
...
<td>9,000</td>
...
</tr>
...
</table>
...
1.3.1 - Data tables that contain both row and column headers use the scope attribute to identify cells.
...
Use <th> elements to mark up table headers for the first cell of your columns and rows. Additionally, you should use scope="row" scope="col" to make it explicit what the <th> is identifying.
Bad:
<table>
...
<tr>
...
<td></td>
...
<td>Jan</td>
...
<td>Feb</td>
...
...
...
</tr>
...
<tr>
...
<td>Sales</td>
...
<td>$1002</td>
...
<td>$2034</td>
...
...
...
</tr>
...
</table>
...
Good:
<table>
...
<caption>
...
Sales
...
Figures
...
for
...
2020
...
</caption>
...
<thead> <tr> <td></td> <th scope="col">Jan</td>
...
<th>Feb</td>
...
...
...
</tr>
...
</thead> <tbody> <tr> <th scope="row">Sales</th>
...
<td>$1002</td>
...
<td>$2034</td>
...
...
...
</tr>
...
</tbody>
...
</table>
...
1.3.1 - All p elements are not used as headers.
...
Instead of using bold paragraphs to split up your text, use the appropriate heading. A nice bonus is that headers are often already styled to be bold, so you save some bytes on markup.
See: Header order
Bad:
<p><strong>Summary</strong></p>
...
Good:
<h3>Summary</h3>
...
1.3.3 - All layout tables make sense when linearized.
...
Note: Monsido considers a table to be a layout table when it has no <TH> element.
Bad:
<table>
...
<tr>
...
<td>
...
<img
...
src="swoosh.png"
...
alt=""/>
...
</td>
...
<td>An
...
Honors
...
University</td>
...
</tr>
...
<tr>
...
<td
...
colspan="2">UMBC</td>
...
</tr>
...
</table>
...
Read as: "An Honors University: UMBC"
Good:
...
<table> <tr> <td colspan="2">
...
<img
...
src="swoosh.png"
...
alt=""/>
...
</td>
...
</tr>
...
<tr>
...
<td>UMBC</td>
...
<td>An
...
Honors
...
University</td>
...
</tr>
...
</table>
...
Read as: "UMBC: An Honors University"
...
Rewrite the text to avoid mentioning color.
Bad:
<img
...
src="http://www.images.com/couple.jpg"
...
alt="a
...
man
...
in
...
a
...
blue
...
windbreaker
...
and
...
a
...
woman
...
in
...
a
...
yellow
...
jumpsuit
...
hold
...
hands
...
while
...
walking"/>
...
Good:
<img
...
src="http://www.images.com/couple.jpg"
...
alt="a
...
man
...
and
...
a
...
woman
...
hold
...
hands
...
while
...
walking"/>
...
1.4.1 - The luminosity contrast ratio between text and background color in all images is at least 5:1
...
It's best to use the name of the document or content you are linking to.
Bad:
<a
...
href="register.html">Click
...
Here</a>
...
Good:
<a
...
href="register.html">Register
...
For
...
Classes</a>
...
2.4.4 - Link text is meaningful when read out of context
...
Provide appropriate alt text for the image. In the case of an icon, text should be present inside of the link in some way, usually through an aria-label attribute.
Bad:
<a
...
href="https://www.umbc.edu">
...
<img
...
src="/images/logo.png"/>
...
</a>
...
or
<a
...
href="https://www.umbc.edu">
...
<span
...
class="icon-info"></span>
...
</a>
...
Good:
<a
...
href="https://www.umbc.edu">
...
<img
...
src="/images/logo.png"
...
alt="UMBC"/>
...
</a>
...
or
<a
...
href="https://www.umbc.edu">
...
<span
...
class="icon-info"
...
aria-label="Info"></span>
...
</a>
...
4.1.1 - id attributes must be unique.
...
Change the ID to something unique. Often, you can use a class to achieve the same effect if it's being used for CSS. Classes can be duplicated.
Bad:
<h2
...
id="heading">UMBC</h2>
...
<h3
...
id="heading">An
...
Honors
...
University</h3>
...
Good:
<h2
...
id="main-heading"
...
class="main-heading">UMBC</h2>
...
<h3
...
id="sub-heading"
...
class="main-heading">An
...
Honors
...
University</h3>
...
AA Level Errors
1.4.4 - b (bold) element is not used.
...
Use the <strong> element instead.
Bad:
<p>
...
The
...
OCA
...
Mocha
...
is
...
<b>my
...
favorite</b>
...
drink.
...
</p>
...
Good:
<p>
...
I
...
like
...
my
...
OCA
...
Mocha
...
with
...
<strong>oatmilk</strong>.
...
</p>
...
1.4.4 - i (italic) element is not used.
...
Use the <em> element (emphasis) instead.
Bad:
<p>
...
I
...
<i>cannot</i>
...
function
...
without
...
coffee
...
in
...
the
...
morning.
...
</p>
...
Good:
<p>
...
I
...
have
...
cut
...
back
...
on
...
caffiene
...
lately
...
and
...
I
...
feel
...
<em>great</em>!
...
</p>
...
1.4.5 - Alt text for all img elements contains all text in the image unless the image text is decorative or appears elsewhere in the document.
...
Provide adequate alt text for the image. If the image has a graphic with text or banner with text, be sure to add it to the alt text.
Bad:
<img
...
src="umbc-logo.png"
...
alt="logo">
...
Good:
<img
...
src="umbc-logo.png"
...
alt="UMBC">
...
2.4.6 - All h1 elements are not used for formatting.
...
For example, in a document, the document's title is often an <h2>, with multiple <h3> sub headings beneath that. If there are more sub headings beneath that, they should be <h4>, and beneath that, <h5>, and so on.
h2
h3
h3
h4
h4
h5
It helps to think of the headings as entries in an outline of the entire document.
...
Also, in Sites, there are header styles that correspond to the existing header styles, so if you really really need the styling for <h4> but an <h3> would be the correct header, you can apply the css class .h4 to the <h3> class and get the visual look of the <h4>.
Bad:
<h2>About
...
UMBC</h2>
...
(...
...
content
...
)
...
<h4>UMBC
...
Academics</h4>
...
Good:
<h2>About
...
UMBC</h2>
...
(...
...
content
...
)
...
<h3
...
class="h4">UMBC
...
Academics</h3>
...
2.4.6 - The header following an h1 is h1 or h2.
...
The next heading should either go back up to the top level, or drill down deeper. It's perfectly fine to have multiple <h2>s in a document, as well as <h6>, but they should progress properly in order.
Bad:
<h2>About
...
UMBC</h2>
...
(...
...
content
...
)
...
<h4>UMBC
...
Academics</h4>
...
Good:
<h2>About
...
UMBC</h2>
...
(...
...
content
...
)
...
<h3>UMBC
...
Academics</h3>
...