Przejdź do treści głównej

LepszyWeb. Przewodnik po stylach

Karty (cards) podstawowe

  • Upewnij się, że wskaźnik fokusu jest widoczny na wszystkich elementach, które muszą być podświetlone (otrzymują fokus).
  • Każdy <img> , który dodasz do swojej strony musi mieć atrybut alt. Jeśli obrazek jest informacyjny, wpisz w alt tekst z treścią równoważną obrazowi.
  • Jeśli obrazek jest dekoracyjny lub zbędny w stosunku do ilustrowanego tekstu, ustaw alt="" (pusty), aby przekazać użytkownikom technologii wspomagającej, że obrazek nie jest potrzebny do zrozumienia strony.
  • Unikaj używania ogólnych słów, takich jak „zdjęcie”, „obrazek” lub „ikona” jako fragmentu wartości alt, ponieważ nie przekazują one użytkownikowi cennych treści. Bądź możliwie jak najbardziej opisowy.
  • Możesz dodać class="visuallyhidden" z tekstem opisowym, aby nadać więcej kontekstu przyciskowi lub celowi łącza.

Zasoby

Wytyczne WCAG 2.1

1.1.1 Treść nietekstowa - Wszelkie treści nietekstowe przedstawione użytkownikowi posiadają swoją tekstową alternatywę, która pełni tę samą funkcję, z kilkoma wyjątkami. (Poziom A)

Uwaga: Jeśli zawartość nietekstowa jest czystą dekoracją, jest używana tylko do formatowania wizualnego, lub nie jest prezentowana użytkownikom, to nie potrzebuje alternatyw tekstowych.

1.4.3 Kontrast (minimalny) - Wizualna prezentacja tekstu lub obrazu tekstu posiada współczynnik kontrastu wynoszący przynajmniej 4.5:1, poza kilkoma wyjątkami (Poziom AA)

1.4.5 Obrazy tekstu - Jeśli wykorzystywane technologie mogą przedstawiać treść wizualnie, do przekazywania informacji wykorzystuje się tekst, a nie obraz tekstu, z kilkoma wyjątkami (Poziom AA)

2.4.7 Widoczny fokus - Każdy interfejs posiadający możliwość obsługi przy pomocy klawiatury ma tryb obsługi, w którym fokus klawiatury jest stale widoczny. (Poziom AA)

Portret astronauty Gusa Grissoma

Gus Grissom

Astronaut, NASA
Adres biura
123 Maple St.
West Lafayette, IN
555-555-1212

Virgil Ivan „Gus” Grissom (ur. 3 kwietnia 1926 w Mitchell, zginął 27 stycznia 1967 na przylądku Canaveral w pożarze kabiny statku Apollo 1) – amerykański astronauta, podpułkownik United States Air Force.

  • Losowo generowany potret sławnego Nica Caga.
    Nic Cage
  • Losowo generowany potret sławnego  Stevena Segala.
    Steven Segal
  • Losowo generowany potret sławnego Billa Murray'a.
    Bill Murray

Przystając pod lasem w śnieżny wieczór

Robert Frost

Wiem, czyj to las: znam właścicieli.
Ich dom jest we wsi; gdzieżby mieli
Dojrzeć mnie, gdy spoglądam w mroku
W ich las, po brzegi pełen bieli.

Koń nie wie, czemu go w pół kroku
Wstrzymałem: żadnych zagród wokół;
Las, lód, jeziora - tylko tyle
W ten najciemniejszy wieczór roku.

Dzwonkiem uprzęży koń co chwilę
Pyta, czy aby się nie mylę.
Tylko ten brzęk - i świst zawiei
W sypiącym gęsto białym pyle.

Ciągnie mnie w mroczną głąb tej kniei,
Lecz woła trzeźwy świat nadziei
I wiele mil od snu mnie dzieli,
I wiele mil od snu mnie dzieli.

Brązowy niedźwiedź fruwający na skałach w rzece.

Wyróżniona karta z dużym zdjęciem po lewej stronie

In convallis euismod nibh a ornare. Integer vitae ultrices lectus, quis semper leo. Sed tempus massa vel arcu dapibus tempus. Quisque dignissim ac diam et auctor. In hac habitasse platea dictumst. Vestibulum ut tellus eu magna varius tempus. Sed vitae scelerisque odio, ut tempor dolor. Vivamus non ultrices nisl. Donec maximus vehicula consequat. Integer sed fermentum nisl. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Opcjonalnie łącze Dowiedz się więcej
Brązowy niedźwiedź fruwający na skałach w rzece.

Wyróżniona karta z małym zdjęciem po lewej stronie

In convallis euismod nibh a ornare. Integer vitae ultrices lectus, quis semper leo. Sed tempus massa vel arcu dapibus tempus. Quisque dignissim ac diam et auctor. In hac habitasse platea dictumst. Vestibulum ut tellus eu magna varius tempus. Sed vitae scelerisque odio, ut tempor dolor. Vivamus non ultrices nisl. Donec maximus vehicula consequat. Integer sed fermentum nisl. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Opcjonalnie łącze Dowiedz się więcej
Brązowy niedźwiedź fruwający na skałach w rzece.

Wyróżniona karta z dużym zdjęciem po prawej stronie

In convallis euismod nibh a ornare. Integer vitae ultrices lectus, quis semper leo. Sed tempus massa vel arcu dapibus tempus. Quisque dignissim ac diam et auctor. In hac habitasse platea dictumst. Vestibulum ut tellus eu magna varius tempus. Sed vitae scelerisque odio, ut tempor dolor. Vivamus non ultrices nisl. Donec maximus vehicula consequat. Integer sed fermentum nisl. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Opcjonalnie łącze Dowiedz się więcej
Brązowy niedźwiedź fruwający na skałach w rzece.

Wyróżniona karta z małym zdjęciem po prawej stronie

In convallis euismod nibh a ornare. Integer vitae ultrices lectus, quis semper leo. Sed tempus massa vel arcu dapibus tempus. Quisque dignissim ac diam et auctor. In hac habitasse platea dictumst. Vestibulum ut tellus eu magna varius tempus. Sed vitae scelerisque odio, ut tempor dolor. Vivamus non ultrices nisl. Donec maximus vehicula consequat. Integer sed fermentum nisl. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Opcjonalnie łącze Dowiedz się więcej
Na górę