TYPO3 Core

When a user has the caps lock key activated and types text into the form input for username or password, an image appears on the right side of the form input.

<div class="form-notice-capslock t3js-login-alert-capslock">
  <img src="/typo3/sysext/backend/Resources/Public/Images/icon_capslock.svg" 
width="14" height="14" alt="Attention: Caps lock enabled!" title="Attention: Caps lock enabled!">
</div>

There are several accessibility problems with this image:

• This image represents a warning to the user that the caps lock key is activated. Such warnings and suggestions for form inputs need to have a special markup, so that also screenreader users are aware of the existence of such a warning. This status message is not marked up correctly for screenreader users.
• The image is positioned at the same location as the delete button, so the delete button is not visible to sighted users anymore. Screenreader users still get the information that there is a button.

  <button type="button" tabindex="-1" class="close" style="visibility: visible;">

• The title attribute of an image should be used for adding a long description for the image. In this case, the title and alt attribute have the same content and get read out twice by some screenreaders.

Recommendation

To fix the issues, apply the following implementation:

• Use the ARIA role="status" with the caps lock
• Align the delete button and the caps lock image in a way that both are visible.
• Use the title attribute of the image to provide a longer description, for example "If you activated the caps lock key accidentally, deactivate the key and enter the correct value again"