Skip to content

WCAG #49

Open
Open
WCAG#49
Assignees
thinkofher
@usigna

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>

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