-
Bug
-
Resolution: Fixed
-
Low
-
8.5.12
-
Severity 3 - Minor
-
-
CtB - Improve Existing
Issue Summary
The "Draft" interactive element is inappropriately coded within the <a> element.
Steps to Reproduce
- Open the home page.
- Activate the "Create from template" button> Select the "Blog post" option> Activate the "Next" button
- Navigate to the mentioned instance.
- Inspect the code and observe that the role defined inappropriately.
Screenshot
Actual Result
The “Draft” tooltip is coded using <a> element inappropriately.
As a result, screen reader users are communicated with inappropriate role information.
Expected Result
ARIA role should be appropriately used with correct semantics and its unnecessary usage should be avoided.
Do the following changes to fix this issue →
- Remove the <a> element from the mentioned interactive element.
- Code the mentioned interactive element using <button> element. Alternatively, use role=”button”, and tabindex=”0” to provide the appropriate role for the mentioned element.
- Ensure that the tooltip content is accessible for the screen reader users.
- Specify the ARIA role "tooltip" for the information displayed on hover. Specify an unique "id" attribute for the tooltip and reference it via the "aria-describedby" attribute of the mentioned button.
- Modify scripts to make the tooltip information available on hover as well as on focus. In addition along with mouse specific event handlers, use keyboard specific event handlers, such as "onfocus", "onblur"and so on to make the functionality accessible for keyboard-only users.
Workaround
Currently there is no known workaround for this behavior. A workaround will be added here when available
Environment
MacBook Pro (16-inch, 2021)
macOs Sonoma 14.6.1
Chrome - Version 128.0.6613.120 (Official Build) (arm64)
Firefox- Version 92.0 (64-bit)
Safari- Version 17.6 (19618.3.11.11.5)
JAWS- Version 2023
NVDA- Version 2021.2
Voiceover - Version Latest
