ESR Service Desk Accessibility Issues - ESR Hub
|
Issue Title |
Accessibility issue description |
Known Fault Ref |
Current Status |
|
Violation - Empty Table Header |
Next to Service Request field |
DT421934 |
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. The Algorithm A <th> element does not contain any text (or contains only spaces) and no images with alternative text. Standards and Guidelines |
|
Violation - Contrast Errors |
Element has insufficient colour contrast of 3.05 between the foreground and shadow colour (foreground colour: #efefef, text-shadow colour: #e06300, font size: 12.0pt (16px), font weight: bold). Expected contrast ratio of 4.5:1 Query and Select Action fields |
DT421934 |
What It Means Very low contrast between text and background colors. Why It Matters Adequate contrast of text is necessary for all users, especially users with low vision. The Algorithm 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. When text is presented over a background image, the text must have a background colour defined (typically in CSS) that provides adequate text contrast when the background image is disabled or unavailable WCAG Level AAA requires a contrast ratio of at least 7:1 for normal text and 4.5:1 for large text. Standards and Guidelines |
|
Violation ¿ Missing Alternative Text |
Image alternative text is not present. |
DT421934 |
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. How to Fix It 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 An image does not have an alt attribute. Standard and Guidelines |
|
Violation - Zooming and Scaling Must Not be Disabled |
Zooming and scaling must not be disabled ¿ (Content can reflow without loss of information or functionality, and without requiring scrolling in two dimensions). |
PMR TS018242065 |
Why it Matters The user-scalable="no" parameter inside the content attribute of <meta name="viewport"> element disables zooming on a page. The maximum-scale parameter limits the amount the user can zoom. This is problematic for people with low vision who rely on screen magnifiers to properly see the contents of a web page. The Web Content Accessibility Guidelines calls for developers to design pages so that they support resize up to 200%. Rule Description The document must not use the user-scalable="no" parameter in the <meta name="viewport"> element because it disables text scaling and zooming which is essential to users with low vision. Guideline 1.4.4 Resize Text |
|
Violation - Interactive Controls Must Not be Nested |
Ensure interactive controls are not nested as they are not always announced by screen readers or can cause focus problems for assistive technologies (save, clear, back and forward, Route Workflow, New Service Request, Print Service Request Details, Print Catalog Request Details icons) |
DT421934 |
Why it Matters Focusable elements with an interactive control ancestor (any element that accepts user input such as button or anchor elements) are not announced by screen readers and create an empty tab stop. That is, you could tab to the element but the screen reader will not announce its name, role, or state. Rule description Nested interactive controls are not announced by screen readers https://dequeuniversity.com/rules/axe/4.9/nested-interactive?application=msftAI Guidelines: 4.1.2 Name, Role, Value |
|
Violation ¿ Form elements must have labels |
Hyperlink label is missing (in SSC of paperclip and description) since upgrade the text does not appear, can either have one or the other. |
DT397155 |
Why it Matters Effective form labels are required to make forms accessible. The purpose of form elements such as checkboxes, radio buttons, input fields, etcetera, is often apparent to sighted users, even if the form element is not programmatically labeled. However, screen readers users require useful form labels to identify form fields. Adding a label to all form elements eliminates ambiguity and contributes to a more accessible product. Screen readers cannot programmatically determine information about input objects without an established label relationship Rule Description Each form element must have a programmatically associated label element. https://dequeuniversity.com/rules/axe/4.7/label?application=AxeChrome Guidelines: 4.1.2 Name, Role, Value |
|
Violation - Required ARIA attributes must be provided.
|
Accessibility - Required ARIA attributes must be provided, screen readers may not be able to convey the definition of what the element's role is to the users.
|
DT421934 |
Why it Matters ARIA widget roles require additional attributes that describe the state of the widget. The state of the widget is not communicated to screen reader users if a required attribute is omitted. Certain roles act as composite user interface widgets. As such, they typically act as containers that manage other, contained widgets. When an object inherits from multiple ancestors and one ancestor indicates support for one property while another ancestor indicates that the same property is required, the property becomes required on the inheriting object. In some cases, default values are sufficient to meet ARIA attribute requirements. When required state and property attributes for specific roles (and subclass roles) are not present, screen readers may not be able to convey the definition of what the element's role is to the users. Rule Description ARIA widget roles must have appropriate attributes describing the state or properties of the widget. https://dequeuniversity.com/rules/axe/4.7/aria-required-attr?application=AxeChrome Guidelines: 1.3.1 Info and Relationships
|