Dostępny i użyteczny komponent karty (bez JavaScript) [PL]

Na stronach i w aplikacjach komponent karty występuje bardzo często, jednak nie zawsze jego implementacja jest taka sama. Czasem ze względu na użyteczność lub bezpośrednio z designu wymagane jest, aby cała karta była klikalna. 

Pierwsze co przychodzi do głowy w takim zadaniu to po prostu owrappowanie całej treści w link lub użycie `onclick` z JavaScriptu.  Niestety te podejścia mają pewne wady, np. w kontekście nawigacji klawiaturą, wewnątrz wrappującego linka nie umieścimy kolejnych linków, uniemożliwimy zaznaczanie tekstu, a `onclick` zablokuje standardowe zastosowania prawego przycisku myszy (nowa karta, kopiowanie linku itp.).

➡ [EN] Go to the English version

Jak więc przygotować komponent karty bez uszczerbku dla usability/accessibility? W tym wpisie sprawdzimy rozwiązanie w czystym HTML i CSS, bez JavaScriptu, z użyciem tzw. pseudo-content tricku.

Zadanie

  • cała karta powinna być klikalna
  • wewnątrz karty znajduje się link “czytaj więcej”
  • karta może zawierać inne linki w treści
  • nie możemy ograniczyć klikania prawym przyciskiem myszy, kopiowania i otwierania linków w nowej karcie przeglądarki
  • widoczne powinny być adekwatne style karty dla stanów hover i focus
  • użytkownik powinien móc zaznaczyć i skopiować tekst wewnątrz karty

Dostępny komponent karty

Tego typu rzeczy najlepiej uczyć się w praktyce, dlatego od razu rzuć okiem na poniższe demo z przykładowym rozwiązaniem.

Na początek sprawdź kursorem myszy poszczególne interakcje, następnie kliknij w widoczny “Button 1” i klawiszem “Tab” przełączaj się po kolejnych elementach.

Jak osiągnąć takie rozwiązanie w HTML i CSS?

Polecam sprawdzenie kodu źródłowego w powyższym przykładzie. Poniżej krótkie podsumowanie najważniejszych rzeczy:

  1.  `position: relative` na kontenerze
  2. `position: absolute` na pseudo-elemencie `:after` głównego linka “czytaj więcej” oraz wartość `0` na jego właściwościach `top`, `right`, `bottom` i `left`
  3. Pseudo-klasy `:focus-within` i `:hover`, do stylowania różnych stanów
  4. Zaznaczenie tekstu możliwe dzięki wartości `z-index` np. `2` (musi być większa niż `z-index` pseudo-elementu `:after`)
  5. Kolejne linki wewnątrz karty dodajemy z klasą `card__separate` czyli tak jak treść możliwa do zaznaczania

Najważniejsze fragmenty kodu

HTML

<div class="card">
  <p>
    <a href="#optional" class="card__separate">Optional</span>
  </p>
  <p>
    <span class="card__separate">Lorem ipsum</span>
  </p>
  <a href="#card-link" class="card__link">Link</a>
</div>

(S)CSS

.card {
  position: relative;
  border: 3px solid green;

  // Style hover and focus states.
  &:hover,
  &:focus-within {
    border-color: red;
  }

  // Make the content selectable.
  &__separate {
    position: relative;
    z-index: 2;
  }

  // Make the whole card clickable.
  &__link::after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    content: "";
  }
}

Podsumowanie

Powyższa technika bywa nazywana “pseudo-content trick”. Nie jest to z pewnością jedyne, ani idealne rozwiązanie, jednak fajnie przedstawia koncepcję.

W tym miejscu muszę załączyć “creditsy”, bo po raz pierwszy trafiłem na ten sposób na stronie Inclusive Components. Jeśli tak jak ja masz smykałkę do kwestii dostępności, znajdziesz tam dużo więcej przykładów inkluzywnych implementacji różnych komponentów zgodnie z dobrymi praktykami dostępności. W tym także bardziej szczegółowe rozpisanie problematyki komponentu karty. Polecam!

Newsletter

Podobał Ci się ten wpis? Nie przegap kolejnej dawki przydatnej wiedzy! Tylko konkrety i najlepsze treści ze świata UX, web developmentu i produktywności. Głównie szybkie treści dla zajętych ludzi :).

Twoje dane osobowe będą przetwarzane w celu obsługi newslettera przez DamianWajer.com na zasadach opisanych w polityce prywatności. W każdej chwili możesz zrezygnować.

Komentarze

Jeśli masz jakieś przemyślenia lub komentarze, daj znać na LinkedIn lub wyślij wiadomość na stronie kontakt.