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

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.).

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:

`position: relative` na kontenerze
`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`
Pseudo-klasy `:focus-within` i `:hover`, do stylowania różnych stanów
Zaznaczenie tekstu możliwe dzięki wartości `z-index` np. `2` (musi być większa niż `z-index` pseudo-elementu `:after`)
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!

Podziel się

Jeśli podobał Ci się ten artykuł, może warto podzielić się z innymi?

https://www.damianwajer.com/blog/komponent-karty/

Pozostańmy w kontakcie

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 :).

Chcę być na bieżąco via email!

Nie chcesz zostawiać e-maila?

Zobacz inne opcje pozostania w kontakcie.