...
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.
Why it's a problem
Alt text needs to be descriptive, but not too long, or else it's difficult or tedious to interact with.
...
1.2.1 - Links to multimedia require a text transcript.
Why it's a problem
Deaf users require text to be able to have an equivalent experience.
...
1.3.1 - All data tables contain th elements.
Why it's a problem
Screen readers generally assist users by announcing the table headings as you navigate between rows and columns. A table without explicit headings is difficult to understand with a screen reader alone.
...
1.3.1 - All complex data tables have a summary.
Why it's a problem
Navigating tables using a screen reader is hard. Often, information that would be apparent to sighted users by scanning a table eludes screen reader users.
...
1.3.1 - All data tables contain a caption unless the table is identified within the document.
Why it's a problem
Data tables without any kind of identifying information can be difficult to understand. What's this table trying to achieve?
...
1.3.1 - Use colgroup and col elements to group columns.
Why it's a problem
When a table has headers that span multiple rows and/or columns, it is complex. Simple tables alone are often problematic, let alone complicated ones. A screen reader can have trouble navigating them.
...
1.3.1 - Data tables that contain both row and column headers use the scope attribute to identify cells.
Why it's a problem
Tables are difficult for screen reader users to navigate and understand. It can be difficult, without sight, to identify the row and column that the current cell corresponds to without being able to scan to the top or left side of the table.
...
1.3.1 - All p elements are not used as headers.
Why it's a problem
It's often easier for sighted users to create paragraphs (which is usually the default element in WYSIWYG editors) and bold them to create the appearance of headers. It's pretty easy to scan down a page visually and see these ersatz headers.
...
1.3.3 - All layout tables make sense when linearized.
Why it's a problem
Using tables for layout is generally a bad idea. However, it can sometimes be necessary. When a table is used for layout, the order that the text appears in the source HTML can sometimes be different from the way you would read it as a sighted person. Tables are read by screen readers left to right and top to bottom. If the text only makes sense out of that order, it will be read backwards to a screen reader user.
...
1.4.1 - For all img elements, text does not refer to the image by color alone
Why it's a problem
When referring an image, don't use color to describe what's happening. This goes for alt text as well as any text that references the image.
...
1.4.1 - The luminosity contrast ratio between text and background color in all images is at least 5:1
Why it's a problem
It's relatively easy to detect if plain text on a background is readable, but it's harder to tell through automated means if text in an image is of the correct contrast. Images with text need to be just as readable as text.
...
2.4.2 - title describes the document
Why it's a problem
Each webpage has a title, which is generally displayed in the tab. Sighted users can use visual cues like icons, without this it can be difficult to know how to find the tab you're looking for without a detailed title.
...
2.4.4 - Suspicious link text.
Why it's a problem
Screen readers can present users with a list of all the links in a document. When navigating a document in this fashion, it's difficult or impossible to understand what the links are if they have poor quality link text. The most frequent problem here is people using the text "Click Here" or "Read More". Outside of the context of the sentences surrounding it, these links lose meaning.
...
2.4.4 - Link text is meaningful when read out of context
Why it's a problem
It's difficult to understand what will happen when you click the link without any other information. Many screen reader users navigate documents by tabbing between links. It's difficult to know where you are in the document if the link text doesn't describe what it's linking to.
...
2.4.4 - Each source anchor contains text
Why it's a problem
Links need text to be useful to screen reader users. A link that is an image but with no text is effectively invisible. Similarly, icons are often presented with no alternative.
...
4.1.1 - id attributes must be unique.
Why it's a problem
HTML elements can have IDs set, but if there is more than one element with the same ID, this can confuse screen readers that perform processing on the document.
...
1.4.4 - b (bold) element is not used.
Why it's a problem
The <b>
element has been deprecated, but it is still in use in some WYSIWYG editors, and it still works in web browsers, however, some screen readers will have trouble with it.
...
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.
Why it's a problem
If there is no alt text or if the alt text is poor quality, screen reader users are getting a worse experience than sighted users. This is especially true if the image contains text that is apparent to sighted users, but has no alt text.
...
2.4.6 - All h6 elements are not used for formatting.
Why it's a problem
Screen reader users often navigate documents using headers. An important aspect of this is that headers and sub headers need to be structured properly. Content authors often use WYSIWYG editors to format text and will change the order of headers purely for visual reasons, which can cause problems with screen reader software and cause confusion with users.
...
2.4.6 - The header following an h6 is h1, h2, h3 or h4, h5 or h6.
Why it's a problem
Headings should increase in number as they progress down the document. If a heading is jumped, say from an <h3>
to an <h5>
, with no <h4>
in between, screen reader software will have problems with this and users will have trouble navigating the document.
...