Login page is not accessible

[MarlonLange]

As it stands, the login page is not accessible.
The following steps are necessary to ensure accessibility.

1. Buttons with an icon but no text, like the clear button or the visibility toggle button of the password input, must have a name so that their function can be recognized by screen readers.

• the “title” attribute would provide a tooltip here
• the “aria-label” attribute is only detectable by screen readers.

2. Input fields require programmatically linked labels.

<label for="username">Your name</label> <input type="text" id="username" />

3. The focus of input fields and buttons needs to be highlighted more clearly. This should be achieved through visual means rather than colour.

• Border or box shadow

4. Placeholder text lacks sufficient contrast with the background. Currently 3.87, but 4.5 is required. This text also needs a visual distinction from the input text. For example, normal text in bold and placeholder text in normal font, or normal text in normal font and placeholder text in italics.

• increase Contrast by changing to lighter or darker colours

5. No text overlap in the mobile view

• all Components are flexible and dont use fixed positions

6. The error message has an appropriate role for recognition and does not receive focus when an incorrect password is entered

<div id="alertContainer" role="alert"></div>

[nicosammito]

Thank your for the issue, I will investigate and create sub issues or linking issues within our component library