Summary: A complete list of all Results Icons used in the Pope Tech Instructor Accessibility Guide.
Errors
Items flagged by the error icon are accessibility errors that need to be fixed.
Alerts
Alerts likely have an accessibility impact but need to be reviewed manually. The accessibility impact can vary based on context.
Features
The features response category points out when the web pages contain common accessibility features. These are things that improve accessibility if used correctly.
Alternative text
Null or empty alternative text
Linked image with alternative text
Structure
Using proper structural elements in designing websites, web pages, and content can increase overall web page accessibility. Conversely, the misuse of these structural elements can result in blocked accessibility by Assistive Technologies.
Heading level 1
Heading level 2
Heading level 3
Heading level 4
Heading level 5
Heading level 6
Ordered list
Unordered listIcon Details
Missing alternative text
What It Means
Image alternative text is not present.Why It Matters
Each image must have an alt attribute. Without alternative text, the content of an image will not be available to screen reader users or when the image is unavailable.What To Do
Add an alt attribute to the image. The attribute value should accurately and succinctly present the content and function of the image. If the content of the image is conveyed in the context or surroundings of the image, or if the image does not convey content or have a function, it should be given empty/null alternative text (alt=””).The Algorithm… in English
An image does not have an alt attribute.Standards and Guidelines
Linked
image missing alternative text
What It Means
An image without alternative text results in an empty link.Why It Matters
Images that are the only thing within a link must have descriptive alternative text. If an image is within a link that contains no text and that image does not provide alternative text, a screen reader has no content to present to the user regarding the function of the link.What To Do
Add appropriate alternative text that presents the content of the image and/or the function of the link.The Algorithm… in English
An image without alternative text (missing alt attribute or an alt value that is null/empty or only space characters) is within a link that does not contain text and an image with alternative text.Standards and Guidelines
Empty heading
What It Means
A heading contains no content.Why It Matters
Some users, especially keyboard and screen reader users, often navigate by heading elements. An empty heading will present no information and may introduce confusion.What To Do
Ensure that all headings contain informative content.The Algorithm… in English
A heading element is present that contains no text (or only spaces) and no images with alternative text.Standards and Guidelines
Empty link
What It Means
A link contains no text.Why It Matters
If a link contains no text, the function or purpose of the link will not be presented to the user. This can introduce confusion for keyboard and screen reader users.What To Do
Remove the empty link or provide text within the link that describes the functionality and/or target of that link.The Algorithm… in English
An anchor element has an href attribute, but contains no text (or only spaces) and no images with alternative text.Standards and Guidelines
Empty table header
What It Means
A <th> (table header) contains no text.Why It Matters
The <th> element helps associate table cells with the correct row/column headers. A <th> that contains no text may result in cells with missing or incorrect header information.What To Do
If the table cell is a header, provide text within the cell that describes the column or row. If the cell is not a header or must remain empty (such as the top-left cell in a data table), make the cell a <td> rather than a <th>.The Algorithm… in English
A <th> element does not contain any text (or contains only spaces) and no images with alternative text.Standards and Guidelines
Very Low Contrast
What It Means
Very low contrast between foreground and background colors.Why It Matters
Adequate contrast is necessary for all users, especially users with low vision.What To Do
Increase the contrast between the foreground (text) color and the background color. Large text (larger than 18 point or 14 point bold) does not require as much contrast as smaller text.The Algorithm… in English
Text is present that has a contrast ratio less than 4.5:1, or large text (larger than 18 point or 14 point bold) has a contrast ratio less than 3:1. Elements with background images must have a background color defined that provides adequate contrast when images are disabled or unavailable.Standards and Guidelines
Suspicious alternative text
What It Means
Alternative text is likely insufficient or contains extraneous information.Why It Matters
If the alternative text for an image does not provide the same content or information conveyed by the image, that content will not be available to screen reader users and when images are unavailable.What To Do
Ensure that the alternative text for the image or image input provides a succinct, yet equivalent alternative to the content and function of the image. Screen readers and browser presentation inform the user that the object is an image, so alternative text of “image of…” (and similar) should be avoided. If the image does not convey content or if the content is presented in nearby text (e.g., a caption), null/empty alternative text (alt=””) is appropriate.The Algorithm… in English
The alt text value of an image or image button:- begins with “graphic of”, “bullet”, or “image of”,
- ends with “image” or “graphic”,
- contains only space characters (alt=” “),
- is an image file name (e.g. alt=”photo.gif”), or
- is one of the following: “image”, “graphic”, “photo”, “photograph”, “drawing”, “painting”, “artwork”, “logo”, “bullet”, “button”, “arrow”, “more”, “spacer”, “blank”, “chart”, “table”, “diagram”, “graph”, or “*”.
Standards and Guidelines
Redundant alternative text
What It Means
The alternative text for an image is the same as nearby or adjacent text.Why It Matters
Alternative text that is the same as nearby or adjacent text will be presented multiple times to screen readers or when images are unavailable.What To Do
Change either the alternative text or the adjacent text to eliminate the redundancy. In most cases, you can give the image empty/null alternative text (alt=””) because the content of the image is already provided in context through text. Linked images may often be combined with the adjacent text into one link, in which case the image may be given null/empty alternative text (alt=””).The Algorithm… in English
The alternative text is the same as text that is within 15 characters of the image.Standards and Guidelines
A nearby image has the same alternative text
What It Means
Two images near each other have the same alternative text.Why It Matters
When two images have the same alternative text, this often causes redundancy or indicates incorrect alternative text.What To Do
Ensure that the alternative text for each image or image button is appropriate while removing unnecessary redundancy. If the content of the image is already conveyed elsewhere (through text or the alternative text of a nearby image) or if the image does not convey content, the image may generally be given empty/null alternative text (alt=””). Image buttons always convey a specific function, and thus cannot be given null alternative text.The Algorithm… in English
The same alternative text (case insensitive, but not null/empty) is present for two images or image buttons (<input type=’image’>) near each other (no more than 2 other images separate them).Standards and Guidelines
Long alternative text
What It Means
An image has very long alternative text.Why It Matters
Alternative text should be succinct, yet descriptive of the content and function of an image. Lengthy alternative text (more than around 100 characters) often indicates that extraneous content or content that is not available to sighted users is being presented.What To Do
Ensure the alternative text is succinct, yet descriptive. Ensure that no content is being presented in alternative text that is not available to sighted users viewing the image. When possible, either shorten the alternative text or provide the text alternative via another method (e.g., in text near the image, through a separate description page, etc.).The Algorithm… in English
The image’s alt attribute value is more than 100 characters. Note that the 100 character limit is a rough and somewhat arbitrary length. For images that present complex content or lengthy text, alternative text longer than 100 characters may be appropriate.Standards and Guidelines
No
heading structure
What It Means
The page has no headings.Why It Matters
Headings (<h1>-<h6>) provide important document structure, outlines, and navigation functionality to assistive technology users.What To Do
Provide a clear, consistent heading structure, generally one <h1> and sub-headings as appropriate. Except for very simple pages, most web pages should have a heading structure.The Algorithm… in English
No <h1>-<h6> elements are present in the page.Standards and Guidelines
Skipped
heading level
What It Means
A heading level is skipped.Why It Matters
Headings provide document structure and facilitate keyboard navigation by users of assistive technology. These users may be confused or experience difficulty navigating when heading levels are skipped.What To Do
Restructure the document headings to ensure that heading levels are not skipped.The Algorithm… in English
A heading level is skipped (e.g., an <h1> is followed by an <h3>, with no intermediate <h2>). Note that an <h1> is not required to be the first heading within the document.Standards and Guidelines
Layout table
What It Means
A layout table is present.Why It Matters
Layout tables exist merely to position content visually – to create columns, insert spacing, or align content neatly for sighted users. Their content is not at all tabular in nature. Layout tables should not be used in HTML5. They can introduce reading and navigation order issues. Screen readers may interpret them as data tables (i.e., announcing column and row numbers), especially if they contain table header (<th>) cells. This introduces significant overhead on screen reader users.What To Do
In almost every case, layout tables can be replaced with other HTML elements and styled with CSS to achieve the desired visual presentation. If the table contains tabular data, provide appropriate header (<th>) cells. If the layout table remains, verify that the reading and navigation order of table content (based on underlying source code order) is logical and give it role=”presentation” to ensure it is not identified as a table to screen reader users.The Algorithm… in English
A <table> element is present that does not contain any header (<th>) cells.Standards and Guidelines
Possible table caption
What It Means
Text appears to be a table caption, but is not a caption element.Why It Matters
A table caption should be associated with a table using the <caption> element so it will be read by a screen reader with the table content.What To Do
If the text is a description of the table, associate the text with the table using the <caption> element (<caption> should be the first element within the <table>).The Algorithm… in English
A data table (has at least one table header) that does not already have a caption has: – A colspan attribute value of 3 or greater on the first cell of the table. – Aelement immediately before the table that contains less than 50 characters or contains less than 100 characters and is bold and/or centered.
Standards and Guidelines
Suspicious link text
What It Means
Link text contains extraneous text or may not make sense out of context.Why It Matters
Links, which are often read out of context, should clearly describe the destination or function of the link. Ambiguous text, text that does not make sense out of context, and extraneous text (such as “click here”) can cause confusion and should be avoided.What To Do
Where appropriate, reword the link text so that it is more descriptive of its destination when read out of context. Remove any extraneous text (such as “click here”).The Algorithm… in English
A link (including alt text of linked images) contains the phrase “click here” or “click”, or the link text is “click here”, “here”, “more”, “more…”, “details”, “more details”, “link”, “this page”, “continue”, “continue reading”, “read more”, or “button”.Standards and Guidelines
Redundant link
What It Means
Adjacent links go to the same URL.Why It Matters
When adjacent links go to the same location (such as a linked product image and an adjacent linked product name that go to the same product page) this results in additional navigation and repetition for keyboard and screen reader users.What To Do
If possible, combine the redundant links into one link and remove any redundant text or alternative text (for example, if a product image and product name are in the same link, the image can usually be given alt=””).The Algorithm… in English
Two adjacent links go to the same URL.Standards and Guidelines
Link to Word document
What It Means
A link to a non-Canvas Microsoft Word document is present.Why It Matters
Unless authored with accessibility in mind, Microsoft Word documents often have accessibility issues. Additionally, Word documents are typically viewed using a separate application, and can thus cause confusion and navigation difficulties.What To Do
Ensure that the Word document is natively accessible. Additionally, inform the user that the link will open a Word document. Because Word documents have limitations in accessibility (particularly for complex content) and require a separate program, HTML content should usually be used in place of or in addition to the Word document.The Algorithm… in English
A link to a .doc or .docx file is present.Standards and Guidelines
- None
Link to Excel spreadsheet
What It Means
A link to a non-Canvas Microsoft Excel spreadsheet is present.Why It Matters
Unless authored with accessibility in mind, Microsoft Excel spreadsheets often have accessibility issues. Additionally, Excel documents are typically viewed using a separate application, and can thus cause confusion and navigation difficulties.What To Do
Ensure the Excel spreadsheet is natively accessible. Additionally, inform the user that the link will open an Excel spreadsheet. Because Excel spreadsheets have limitations in accessibility (particularly for complex content) and require a separate program, HTML content should usually be used in place of or in addition to the Excel spreadsheet.The Algorithm… in English
A link to a .xls or .xlsx file is present.Standards and Guidelines
- None
Link to
PowerPoint document
What It Means
A link to a non-Canvas Microsoft PowerPoint presentation is present.Why It Matters
Unless authored with accessibility in mind, PowerPoint documents often have accessibility issues. Additionally, PowerPoint documents are typically viewed using a separate application, and can thus cause confusion and navigation difficulties.What To Do
Ensure the PowerPoint presentation is natively accessible. Additionally, inform the user that the link will open a PowerPoint document. Because PowerPoint documents have limitations in accessibility (particularly for complex content) and require a separate program, HTML content or an alternative accessible version (e.g., tagged PDF) should usually be used in place of or in addition to the PowerPoint presentation.The Algorithm… in English
A link to a .ppt, .pptx, .pps, or .ppsx file is present.Standards and Guidelines
- None
Link to PDF document
What It Means
A link to a non-Canvas PDF document is present.Why It Matters
Unless authored with accessibility in mind, PDF documents often have accessibility issues. Additionally, PDF documents are typically viewed using a separate application or plug-in, and can thus cause confusion and navigation difficulties.What To Do
Ensure the PDF document is natively accessible. Additionally, inform the user that the link will open a PDF document. Because PDF documents may have limitations in accessibility (particularly for complex content) and require a separate program, HTML content should often be used in place of or in addition to the PDF document.The Algorithm… in English
A link to a .pdf file is present.Standards and Guidelines
- None
Link to document
What It Means
A link to a non-Canvas non-HTML document is present.Why It Matters
Unless authored with accessibility in mind, documents that are not HTML often have accessibility issues. Additionally, these documents are typically viewed using a separate application, and can thus cause confusion and navigation difficulties.What To Do
Ensure the document is authored to be accessible, if possible. Additionally, inform the user that the link will open in a separate program. Because these documents have limitations in accessibility (particularly for complex content) and require a separate program, an accessible format should usually be used in place of or in addition to the document.The Algorithm… in English
A link to a .rtf, .wpd, .ods, .odt, .odp, .sxw, .sxc, .sxd, .sxi, .pages, or .key file is present. Word, PowerPoint, Excel, and PDF are identified with separate icons.Standards and Guidelines
- None
Very small text
What It Means
Text is very small.Why It Matters
Text which is very small is difficult to read, particularly for those with low vision.What To Do
Increase the text to a more readable size.The Algorithm… in English
Text is present that is sized 10 pixels or smaller.Standards and Guidelines
- None
Underlined text
What It Means
Underlined text is present.Why It Matters
Underlines almost universally indicates linked text. Consider removing the underline from the non-link text. Other styling (e.g., bold or italics) can be used to differentiate the text.What To Do
Unless there is a distinct need for the underlined text, remove the underline from it.The Algorithm… in English
A <u> element is present.Standards and Guidelines
- None
Possible List
What It Means
Text is structured like a list but lacks proper list semantics.Why It Matters
Ordered and unordered lists, when properly defined, provide useful information to users, such as an indication of the list type and number of list items. When text alone is used to present list structures and content, these benefits are lost.What To Do
If list content is presented, semantically define the list.The Algorithm… in English
Text is used to present list-type content, such as:* text
1. text
a. text
1) text
a) text
– text
Standards and Guidelines
YouTube video
What It Means
An embedded or linked YouTube video is present.Why It Matters
For video content with audio, ensure that synchronized captioning is available. While YouTube can auto-generate captions using voice recognition, these are typically not of sufficient quality to be considered equivalent.What To Do
Ensure that YouTube video presents equivalent, synchronized captions.The Algorithm… in English
An embedded (within an iframe) YouTube video is present, or a link to a YouTube video is present.Standards and Guidelines
- 1.2.1 Prerecorded Audio-only and Video-only (Level A)
- 1.2.2 Captions (Prerecorded) (Level A)
- 1.2.3 Audio Description or Media Alternative (Prerecorded) (Level A)