Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

WCAG audit and improvements #124

Open
krzysztofrewak opened this issue Aug 20, 2024 · 1 comment
Open

WCAG audit and improvements #124

krzysztofrewak opened this issue Aug 20, 2024 · 1 comment
Assignees

Comments

@krzysztofrewak
Copy link
Member

I would like to check if everything here is good accordingly to current WCAG. This gonna be website for teachers, so we need to apply all accesibility features.

@Blusia
Copy link
Member

Blusia commented Sep 3, 2024

This comment will be edited when I find things related to accessibility.

  • I think that in the place where the link of the page is located, e.g. Blumilk or repo Keating there should be a "label" telling us to open a new tab, e.g. "Otwiera nowe okno". Each place that, when clicked by the user, opens a new tab must be appropriately marked.
    obraz

  • Each available image must have an appropriate "alt" description. Decorative images should have an empty alt="" attribute so that the reader can skip the image without reading the description. Missing alt on main login page - university logo.
    <img src="https://dev.keating.blumilk.pl/cwup-full.png" class="mx-auto w-[360px]">
    obraz

  • Customize the link so that users can skip repetitive elements like the navigation panel, etc. When I click on the tab on the grades page, I select a semester, and when I want to select the next semester, the tab takes me through the entire navigation panel again. (btw. I still need to verify this)

  • Zooming and scaling shouldn't be disabled. Maximum-scale on <meta> tag disables zooming on mobile devices. Currently browsers like chrome on android allow you to force the page to be zoomed in, but these are additional settings that need to be enabled by user.

After logging in:
Dashboard:

  • links and buttons must have accesible inner text that is visible to screen readers.

  • There is also a problem with color contrast for parts such as "Uczelnia", "Słowniki", "Ogólne", "Dashboard".

  • "Uczelnia", "Słownik"," Ogólne" - change this text colour #9ca3af for example to this #71757e on #ffffff background color - contrast ratio will be 4.62:1,

  • "Dashboard" and other active sections - change this text colour #0284c7 for example to this #0076b3 on #f9fafb background color - contrast ratio will be 4.73:1
    obraz

  • The content under the h2 heading also has contrast that is not appropriate in terms of accessibility - "Formularz edycji ustawień" - png attachment below - change this text colour #6b7280 for example to this #656c79 on #f3f4f6 background color - contrast ratio will be 4.8:1
    obraz

WebAIM: Contrast Checker
(Referring to the word "Dashboard", maybe it would be a good idea to use a Polish equivalent here? Like "Panel"?)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants