1.1.1 Description: Do not use the ‘small’ tag to alter text size. If the page is written in HTML5, this issue can be ignored. Context: HTML tags should denote semantic meaning instead of just styling. In HTML5 it is acceptable to …

1.1.1, 1.3.1, 2.4.4, 3.3.2, 4.1.2 Description: The WAI-ARIA ‘aria-labelledby’ attribute has a reference to an ID that does not exist or an ID that is not unique. Context: All ARIA tags must reference elements that exist on the page, an ID should …

1.3.1, 2.4.4 Description: The WAI-ARIA ‘aria-describedby’ attribute has a reference to an ID that does not exist or an ID that is not unique. Context: All ARIA tags must reference elements that exist on the page, an ID should only be used once …

1.3.1 Description: Do not use the ‘s’ or ‘strike’ tags. Context: In HTML5 the ‘del’ tag has been semantically designated for text that should be removed instead of ‘s’ or ‘strike’. The ‘ins’ tag is used to indicate recently inserted, or …

1.3.1 Description: Do not use the ‘big’ tag to alter text size. Context: In HTML 5 the ‘big’ tag has been deprecated, the CSS property ‘font-size’ should be used to handle any text size adjustments that are not related to …

1.3.1 Description: The ‘bold’ tag is used to highlight text. Context: Screen-readers and other assistive technology cannot understand the context of a bold tag (as bolded text can play numerous roles). Using semantic elements such as “header” or “strong” tags …

1.3.1 Description: The HTML center tag has been used to center content. HTML should not be used for presentational purposes, but only for semantics to allow for different presentations of the content. Context: Styling-specific tags are discouraged for ADA-compliance, adjustments to appearance …

1.3.1 Description: Do not use the ‘font’ tag to create changes in typography. Context: Styling-specific tags are discouraged for ADA-compliance, adjustments to appearance strictly for aesthetics should be restricted to CSS. <font color=”#000000″ size=”2″ face=”Arial”> Deans of the <br> Colleges of Arts …

1.3.1 Description: The same access key is used for several items on the page. Context: Any properties used to assist in navigation (ID’s, access keys, tab orders, etc) must be unique for readers to navigate through the page properly. <a href=”https://kahualike.manoa.hawaii.edu/horizons” title=”Mānoa …

1.3.1 Description: Presentational attributes such as ‘border’, ‘align’, or ‘bgcolor’ are used. CSS should be used for styling instead. Context: To prevent extraneous text from being read by screen readers, it is best practice to keep the HTML as uncluttered as possible, …

1.3.1 Description: A local link (anchor link) occurs but the destination does not exist. Context: All references need to be linked properly for a page to allow assistive technology to navigate properly between items. <a href=”#toplink” class=”backup tipsy-tooltip” title=”scroll up”> <span class=”fa …

1.3.1 Description: An empty heading occurs. Context: HTML without any content can clutter the HTML making it difficult for readers to scan through it properly. It should either be filled with content or removed entirely. <h3></h3> How to fix it: The tag for …

1.3.1, 4.1.1 Description: The ID used for an element on the page is also used for another element on the page Context: Any properties used to assist in navigation (ID’s, access keys, tab orders, etc) must be unique for readers to navigate through …

1.3.1, 4.1.2, 2.4.6 (AA) Description: The form element has a label but text has not been added (label is empty). Context: HTML without any content can clutter the HTML making it difficult for readers to scan through it properly. It should either be filled with …

1.3.1 Description: The label for the form control is not explicitly connected to anything, since it refers to an element ID that does not exist on the page. Context: Label elements should be used to provide context to a form element, they …

1.3.1, 3.3.2, 4.1.2 Description: Input fields should always have a description that is explicitly associated with the field to make sure that users of assistive technologies will also know what the field is for. Context: All inputs should have some form of description, such …

1.3.1, 3.3.2 Description: When a form contains elements that are logically connected to each other it is necessary to group them. Context: Screen readers require additional assistance to group related content together correctly, especially for inputs. <label> Announcement Interests </label> <label> <input type=”checkbox” …

1.3.1 Description: The u tag is used to underline text. Context: Styling-specific tags are discouraged for ADA-compliance, adjustments to appearance strictly for aesthetics should be restricted to CSS. <u> <b> <a href=”summer_housing”>Summer Housing</a> </b> </u> How to fix it: Consider the following: If …

1.1.1 Description: Adjacent links, one with a link text, the other with an iconic representation of that link, point to the same destination. Context: To prevent extraneous text from being read by screen readers, it is best practice to keep the HTML …

1.1.1 Description: The alternative text for an image link is a repetition of the adjacent link text. Context: To reduce redundancy, if the image alt text is not providing any “new” content for a screen-reader, the alt text is unnecessary. <a href=”http://manoa.hawaii.edu/library/research/collections/russia/”> …

1.1.1 Description: The alternative text for an image must reflect the purpose of the image and not contain the image file name. (The problem often occurs with auto-generated alternative texts). The alternative text is used by a screen reader to read …

1.4.2 Description: Audio content starting automatically seems to occur. Context: It is best practices to not have any auto-playing audio content on your website, but if this is not possible, you must provide a way to stop it without adjusting audio outside …

1.1.1, 2.4.4 Description: On the image map an ‘area’ element occurs with no alternative text. Context: Area tags generally do not have descriptive content within them, making it difficult for readers to understand them without additional information. <area shape=”circle” coords=”687,281,8″ target=”bottom” href=”plantbrochuretour.html#63″> How …

1.4.3 Description: The color of the text and the color of the background are not in sufficient contrast to each other. Context: For compliance, all text must be displayed in a way that provides sufficient contrast against it’s background. Users with vision …

1.2.1 Description: If the element is not video or audio this criterion can be disregarded. Context: For compliance, video or audio should not be the only way to obtain information. Alternatives should be available on the page, or at a minimum, information …

2.4.7 Description: With keyboard navigation it is important that the focused component can be visually identified. If the focused component is not somehow highlighted, the user cannot be sure which component has focus. Context: While browsers should handle this by default, certain …

3.3.2 Description: The input field does not have a visible label indicating the purpose of the input field. Context: An input field should always have it’s label visible if it is visible. For fields where this isn’t desirable, an ARIA-label is preferred. …

4.1.2 Description: The frame has no ‘title’ attribute or the ‘title’ attribute is empty. Context: Titles allow users using screen-readers to understand the content of a given iFrame/frame and elect to skip it if it is not relevant. Preventing them from needing …

4.1.2 Description: The iFrame has no ‘title’ attribute or the ‘title’ attribute is empty. Context: Titles allow users using screen-readers to understand the content of a given iFrame/frame and elect to skip it if it is not relevant. Preventing them from needing …

1.1.1 Description: An image button (‘input’ element) is missing an alternative text. Context: When using different elements as buttons outside of the native ‘button’ element, the element should be clearly marked as button so users may interact with it properly. <input type=”image” …

2.4.4 Description: The image link is missing an alternative text stating the purpose of the link. Context: All images should provide an alternative <a style=”color: rgb(12, 109, 72);” href=”https://uhmanoa.lib.hawaii.edu/vwebv/searchBasic?sk=manoa”> <img class=”img-responsive” src=”/library/wp-content/uploads/2017/07/canoe-1.png” alt=””> </a> How to fix it: If for instance it links …

1.1.1 Description: The image does not have an ‘alt’ attribute (alt=””). Context: All images are expected to at a minimum have an alt attribute, even if it is empty to allow screen-readers to decide how best to read out content regarding the …

4.1.2 Description: A WAI-ARIA element contains roles, states or properties that are not allowed on this type of element. Context: Invalid aria elements could cause the element to be read incorrectly by assistive technology. <span class=”tribe-icon-list” aria-hidden=”true” role=”none”></span> How to fix it: Check …

1.2.2 Description: If the element does not contain audio, this criteria can be disregarded. Context: Video content should be subtitled to aid users with hearing impairments. How to fix it: If the element is video or audio, provide an alternative, (unless it is …

2.4.3 Description: Ensure that the tabbing order defined on the page is logical. Context: Tabbing is very important to assist users who primarily navigate pages with their keyboard, making sure the tab order is set in a logical portion can assist them …

3.1.2 Description: The value for the language attribute is not set to a valid language code. Valid language codes must be used to programmatically determine the human language of pages and parts of content. Context: The language attribute has a strict set …

1.4.1 Description:It appears that color is the only distinguishing feature about links in blocks of text. If links in blocks of text are identified only by color, the color contrast ratio between the link text and the surrounding text needs …

2.4.4 Description: The link text is generic text that does not identify the link purpose. The link does not seem to have any programmatically determined link context that can aid in identifying the purpose either. Context: Information about the link can be …

3.2.2 Description: The page contains a form but there is no submit button. Context: Any form should contain a way to submit directly within the form. If this is not the case, the best approach is most likely to re-organize the content …

4.1.2 Description: The WAI-ARIA element does not follow the specification in regards to which states and properties should be present for this type of element. Context: ARIA elements have strict guidelines for what states and properties can be used for each element. …

1.3.1 Description: No headings on page Context: Heading tags are crucial to allowing content to be divided and scanned intelligently by assistive devices, such as finding titles or important subsections. <p align=”left”> <font face=”Arial” size=”3″> <b> About the Colleges of Arts &amp; …

2.4.1 Description: A means of bypassing blocks of content that are repeated on multiple web pages must be provided. Context: Manually maneuvering through content takes significantly longer on assistive devices, by providing a way to skip directly to relevant content browsing becomes …

1.1.1, 1.2.3 Description: An element of the type ‘object’ is present but the element does not have an alternative text. Provide a description of the content, within the ‘object’-tags. Context: All elements should have a clear indication of what they are. Usually semantic …

2.2.1 Description: This warning will always appear on your pages since your assessment is needed. Context: Assistive technology inherently will take longer to navigate a page, therefore time limits on any content are not best practice. If time limits must be in …

1.3.1, 4.1.2, 3.3.2, 3.2.2 Description: Drop down menus (select boxes or role=”listbox”) should always have a description that is explicitly associated with the field to make sure that users of assistive technologies will also know what the field is for. Context: <div class=”carousel-inner” role=”listbox”> …

1.3.1, 4.1.2, 3.3.2 Description: Text areas should always have a description that is explicitly associated with the area to make sure that users of assistive technologies will also know what the area is for. Context: Form elements should always be tied back to a …

1.1.1 Description: The image does not have an alt text which indicates that the image is used for decorative purposes. At the same time there is a mouse over text (title attribute) present on the image. Context: An image with a title …

1.3.1, 3.3.2 Description: A group created with the WAI-ARIA role=”group” or role=”radiogroup” is missing a name. Context: Once the role ‘group’ has been assigned, it becomes required to specify a name as well. <ul id=”random5c8c100f1f1f41_group” role=”group” style=”” tabindex=”-1″> <!–Content–> </ul> How to fix …

1.1.1 Description: The WAI-ARIA image, created with role=”img”, does not have an accessible name. Context: Adding the role=”img” attribute means that the element must adhere to the same standards as a standard ‘img’ tag, including the labeling requirements. <svg class=”icon icon-bars” aria-hidden=”true” …

3.3.1 Description: A WAI-ARIA validation error message is already present on the page when the page is loaded. Context: Validation messages should not automatically display when a page is first loaded. Messages should only display after the element has been interacted with. …

2.4.2 Description: Webpages should have a single title. It is incorrect for a webpage to either have no title or to have multiple titles. The first thing a screen reader encounters when the web page has loaded is the text within …

2.4.2 Description: This page has no title. Context: All pages should have titles defined in HTML. <title></title> How to fix it: The web page needs a title describing the topic of the page. The webpage ‘title’ is added in the page ‘head’. The …