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 #4

Open
usigna opened this issue May 18, 2021 · 0 comments
Open

WCAG #4

usigna opened this issue May 18, 2021 · 0 comments

Comments

@usigna
Copy link

usigna commented May 18, 2021

STRONA GŁÓWNA

  1. Brakuje ustawionego języka strony, czyli:
    <html lang="pl">

  2. W miejscach gdzie pojawia się słowo, które wymawia się po angielsku powinno dać się lang="en" dla elementu, czyli np.

zamiana z:
<p class="slogan">Restartujemy Hackerspace. Nowa nazwa. Nowy adres. Ci sami ludzie.</p>
na:
<p class="slogan">Restartujemy <span lang="en">Hackerspace</span>. Nowa nazwa. Nowy adres. Ci sami ludzie.</p>
  1. Brakuje alt dla grafiki loga, dobrze aby opisywał jak wygląda logo wraz z kolorami. Limit znaków dla alt to około 100-110.

  2. Tam gdzie są ikonki z "wepnij się" (dla wszystkich):

zamiana z:
<i class="las la-door-open"></i>
na:
<span class="las la-door-open" aria-hidden="true"></span>
  1. Tam gdzie jest statut
zamiana z:
<p><a href="/assets/status_hsp.pdf" target="_blank">Statut Stowarzyszenia</a></p>
na:
<p><a href="/assets/status_hsp.pdf" target="_blank">Statut Stowarzyszenia <span class="sr-only">otwórz pdf w nowej karcie</span></a></p>

Klasa sr-only w css:
.sr-only { border: 0 !important; clip: rect(1px, 1px, 1px, 1px) !important; -webkit-clip-path: inset(50%) !important; clip-path: inset(50%) !important; height: 1px !important; margin: -1px !important; overflow: hidden !important; padding: 0 !important; position: absolute !important; width: 1px !important; white-space: nowrap !important; }

  1. Kontrast w kalendarzu jest zdecydowanie zbyt słaby, czyli ten kolor: #00cc99 jest w nim do zmiany na inny. W tym narzędziu https://whocanuse.com/ jeżeli pokaże się kontrast minimum 4,5:1 to będzie spoko. Mniej jest źle.

  2. Focus przy poruszaniu się po stronie za pomocą klawiatury jest zbyt słaby, bo to ten wbudowany w przeglądarkę. Warto dodać tam jakieś obramowanie, zaleca się 2px dotted kolor (np. ten z logo, chociaż często poleca się niebieski).

  3. Brakuje "title" w head.

  4. Dla "iframe" brakuje "title"

  5. Takie rzeczy jak to "więcej(o_nas)" bym zmieniła na np. sprawdź zakładkę o nas.

  6. Jeżeli gdzieś link otwiera się jako nowa karta to do jego kodu należy dodać informację:
    <span class="sr-only">otwórz w nowej karcie</span>

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

1 participant