Skip to content

WCAG #49

Open
Open
WCAG#49
Assignees
thinkofher

Description

@usigna
usigna
opened on Aug 9, 2021

Mini audyt dostępności strony Hakierspejs Łódź

Przydatny kod:

.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;
}

Propozycje:

  • 1. Strona jest głównie po polsku, więc zamiana <html lang="en"> na <html lang="pl">.

  • 2. Warto dodać skip linki (tutaj przykład dla strony głównej):

HTML

<ul class="skip-links wrapper">
  <li><a href="#main" class="skip-link">Przejdź do treści</a></li>
  <li><a href="#event" class="skip-link">Przejdź do wydarzeń</a></li>
  <li><a href="#map" class="skip-link">Przejdź do lokalizacji</a></li>
</ul>

CSS

.skip-link {
  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;
  position: absolute !important;
  width: 1px !important;
  white-space: nowrap !important;
  text-align: center;
  text-decoration: none;
  padding: 0.5rem 1.5rem;
  position: absolute;
  top: 1rem;
  left: 1rem;
  z-index: 999;
  color: black;
  background: white;
  border: 2px dotted white;
}

.skip-link:focus,
.skip-link:active {
    clip: auto !important;
    -webkit-clip-path: none !important;
    clip-path: none !important;
    height: auto !important;
    margin: auto !important;
    overflow: visible !important;
    width: auto !important;
    white-space: normal !important;
  }
}

  • 3. Jeżeli link kieruje do PDF, np. deklaracja to fajnie dodać zrobić coś takiego w kodzie:
    <a href="https://raw.githubusercontent.com/hakierspejs/statut/master/deklaracja/deklaracja.pdf">deklaracja<span class="sr-only">przenosi do dokumentu PDF</span></a>

  • 4. Warto dodać focus dla linków i przycisków, np. 2px dotted white, bo strona jest czarna. Warto przy tym sprawdzić jak to wygląda i czy nie trzeba dodać padding.

  • 5. Brakuje title dla iframe z mapą.

  • 6. Zdjęcia nie mają dodanego atrybutu "alt", czyli opisu dla zdjęcia. Np. Drewniane brązowe biurko na którym leży komputer.

  • 7. Warto dodać "title" dla linków, które przenoszą na git lub wiki, np.
    <a href="//github.com/hakierspejs/wiki/wiki" title="przenosi na inną stronę">wiki</a>

  • 8. Do strzałek i kropek dla slidera warto dodać w "sr-only" lub "title" informację co one robią, np.:
    <div class="fotorama__arr fotorama__arr--prev" tabindex="0" role="button" title="Poprzedni slajd"></div>

  • 9. Myślę, że fajnie gdyby te kółeczka z slidera były trochę większe. Jeżeli ktoś ma "grubsze" palce, to może mieć problem z trafieniem w nie na smartfonie.

  • 10. Kontrast tekstu w stopce jest zbyt niski (https://whocanuse.com/?b=000000&c=444444&f=20&s=). Powinien wynosić minimum 4.5:1.

  • 11. Jeżeli tekst lub słowo jest w innym języku niż polski, to warto dodać do niego atrybut "lang", np.
    <p lang="en">Built with <a href="https://pages.github.com/">Github Pages</a>, <a href="https://jekyllrb.com/">Jekyll</a> and <a href="https://igoradamenko.github.io/awsm.css/">awsm.css</a>.</p>

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

Labels

No labels
No labels

Type

No type

Projects

No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions