UX Enhancements: web a11y improvements

[EmrahIso]

Checks

✅ This is not a duplicate of an existing issue.

✅ I have thoroughly read and understood the Ziit Contribution Guide.

✅ Do you want to work on this issue?

Describe your proposal:

UX and web accessibility improvements.

I noticed a few issues with web accessibility.

(so that it is immediately clear that the standard for web accessibility that I was guided by is the Web Content Accessibility Guidelines (WCAG) 2
Level AA Conformance, link: https://www.w3.org/WAI/WCAG2AA-Conformance, because every modern application should cover at least the AA standard).

Issues:

1. Links must have discernible text (https://dequeuniversity.com/rules/axe/4.4/link-name, content must be accessible to screen-readers, must be keyboard focusable)

specifically: a.router-link-active.router-link-exact-active.title

2. Keyboard navigation

Every element that initiates some interactivity (opening a pop-up or anything similar) should be button elements and all link (a:link) elements should be keyboard focusable, to enable control of the application with the keyboard.

All pages are missing an h1 element (bad for SEO and web a11y)

3. Settings page:

   • Labels on input elements are missing

• Links and buttons that do not have text should have either a title or an aria-label description of the functionality.
• All button / link element should be focusable ( we have to inform the users that the element is focused like changing color or highlighting button, which was not done on the settings page under the Accout Informaion buttons that enable password and email manipulation, as well as under API-key for buttons that manipulate API key input )

4. Leaderboards page:

• contrast/ratio problems (needs to be fixed due to users who have vision problems, or users reading while there is a strong light directed at the screen, so the low contrast-ratio text is not visible)

5. Form controls

• All form controls should have a label.

I would love if this issue could be assigned to me.

Settings page:

Leaderboards page:

[0PandaDEV]

Thanks for pointing out those issues. Regarding the leaderboard contrast issue, that is on purpose because that information is not relevant.

And about the SEO issue, that is unnecessary since the app is not trying to be SEO optimized because all the pages require a login anyway apart from the public stats and the leaderboard.