Observation Details
CAPTCHA reload icon button not operable by keyboard
Button uses non-semantic
<span>Button is hidden by using
aria-hidden="true"
Interactive element can be operated by mouse but not by keyboard. The issue may occur when:
Non-semantic HTML elements (e.g.
<div>,<span>) are used for interactive purposes (e.g. links, buttons, inputs), instead of semantic HTML elements (e.g.<a href="">,<button>). This often also leads to other issues, concerning 4.1.2 Name, Role, Value.Semantic elements are used but required attributes are missing (e.g.
<a>, missinghrefattribute)Semantic HTML elements are mis-used (e.g.
<a>used as a button, or<button>used as a link)
Remediation Notes
Ensure, using native, semantic HTML elements for interactive elements and not re-building existing functionality with generic elements like <div> and <span>.
Ensure, choosing the proper elements, depending on purpose (e.g. links, using <a href=""> to link to resources, and <button> to perform actions).
Ensure no interactive element that must be accessible is hidden from assistive technology by method of aria-hidden="true" or any other method for that matter.
This way, the need for added JavaScript (e.g. on click events / event handlers) and ARIA methodologies is reduced to a minimum, which will ensure clean and simple code and backwards compatibility, will future-proof functionality, and will avoid issues with keyboard navigation or other assistive technology (see also 4.1.2 Name, Role, Value).