4 zasady pisania alt, które ratują dostępność i wygląd strony

Atrybut alt to tekst, który trafia w miejsce obrazu, gdy ten się nie wczyta, oraz do czytnika ekranu, gdy użytkownik nie widzi grafiki. Nie jest to ozdoba kodu ani pole do wrzucania słów kluczowych. Ma jedno zadanie: przekazać sens obrazu temu, kto go nie odbiera wzrokiem. Jeśli obraz nie niesie żadnej informacji, atrybut alt nadal jest potrzebny — pusty, ale obecny.

zamyka sekcję lub stronę i zwykle zawiera informacje uzupełniające: dane kontaktowe, prawa autorskie, powtórzone menu. Uwaga na pułapkę – nie musi być tylko jeden. Możesz go umieścić wewnątrz artykułu, żeby oddać przypisy lub źródła. Problem pojawia się, gdy autorzy wstawiają stopkę poza albo zagnieżdżają ją w , przez co główna treść miesza się z informacjami pobocznymi. Trzymaj jako rodzeństwo , a nie jego część.

Kolor w CSS można zapisać na kilka sposobów. Nazwy słowne, zapis szesnastkowy, rgb() i hsl() to cztery najczęstsze warianty. Każdy z nich prowadzi do tego samego efektu: przeglądarka zamienia wartość na kanały czerwony, zielony i niebieski. Różnica tkwi w tym, jak łatwo ci odczytać intencję, jak szybko poprawić odcień i czy wartość przetrwa kopiowanie między plikami.

Uważaj na łączenie wielu źródeł stylów. Kolejność arkuszy, kolejność bloków w pliku i kolejność importów sumują się w jedną wspólną listę. Reguła z arkusza dołączonego później może nadpisać wszystko, co było wcześniej, nawet jeśli w tamtym pliku wyglądała niewinnie. Podobnie jest z regułami wstawionymi bezpośrednio w atrybucie stylu — one mają wyższy priorytet niż zwykłe reguły z arkusza, więc żadna późniejsza linia ich nie przebije, dopóki nie użyjesz odpowiedniego znacznika ważności.

Gdy kontener istnieje, flexbox wyznacza oś główną. Domyślnie biegnie ona poziomo, od lewej do prawej, a oś poprzeczna pionowo. Wszystko, co robisz później, odnosi się właśnie do tych osi. justify-content działa wzdłuż osi głównej, align-items wzdłuż poprzecznej. Zamiana flex-direction na column obraca obie osie, więc właściwości zaczynają działać w innych kierunkach, niż się spodziewasz.

Nazwy słowne, jak red, navy, tomato, działają i są czytelne, ale jest ich ograniczony zestaw. W praktyce używa się ich do szybkich prototypów albo w miejscach, gdzie kolor ma być oczywisty dla każdego, kto zajrzy w kod. Uwaga na nazwy, które wyglądają podobnie: gray i grey to ten sam kolor, ale już darkgray i dimgray to dwie różne szarości. Literówka w nazwie nie zepsuje arkusza — przeglądarka po prostu zignoruje regułę i użyje koloru dziedziczonego.

Zacznij od . To znacznik przeznaczony na główną treść danego widoku i na stronie powinien występować tylko raz. Wszystko, co powtarza się na kolejnych podstronach – logo, menu, stopka – zostaje poza nim. Częsty błąd to wrzucanie do całego szkieletu, razem z nagłówkiem witryny i nawigacją. Wtedy znacznik przestaje cokolwiek opisywać, bo obejmuje dokładnie to samo co . Drugi błąd to kilka elementów na jednej stronie, co wprowadza sprzeczność.

Oś główna decyduje o wszystkim Zanim ustawisz cokolwiek innego, sprawdź, gdzie leży oś główna. Jeśli chcesz rozsunąć elementy w poziomie, zostaw domyślny wiersz i użyj justify-content: space-between. Jeśli chcesz je rozsunąć w pionie, ustaw flex-direction: column i dopiero wtedy użyj justify-content. Mylenie tych dwóch przypadków to powód, dla którego „nic się nie zmienia", gdy dodajesz regułę. Przeglądarka działa poprawnie — twoje założenie o osi jest błędne.

Wielu autorów stron traktuje znaczniki , , i jak kosmetykę – dodaje je na końcu, żeby „było nowocześnie". To odwrotna kolejność. Te elementy opisują strukturę dokumentu i od nich powinno zaczynać się budowanie każdego szablonu. Przeglądarki, czytniki ekranu i roboty indeksujące korzystają z nich, żeby ustalić, co jest treścią, a co tylko otoczeniem. Jeśli pominiesz ten krok, strona nadal będzie działać, ale stracisz czytelny podział ról.

Najczęstszy błąd to używanie tych znaczników wyłącznie po to, by coś ostylować. Jeśli potrzebujesz kontenera na tło lub margines, użyj . Znaczniki semantyczne mają znaczenie także wtedy, gdy wyłączysz CSS. Warto sprawdzić układ, usuwając style – wtedy od razu widać, czy nagłówek, treść i stopka są we właściwej kolejności. Kolejna pułapka to pomijanie przy budowie menu i zastępowanie go listą bez kontekstu. Czytnik ekranu nie poinformuje wtedy, że to nawigacja.

Flexbox zaczyna się od jednej decyzji: który element jest kontenerem. Dopóki jej nie podejmiesz, żadna właściwość flex nie zadziała. Ustaw display: flex na rodzicu i dopiero wtedy jego bezpośrednie dzieci stają się elementami flex. Wnuki nie liczą się w ogóle — to najczęstszy błąd na starcie, bo próbujesz rozciągać element, który nie jest bezpośrednim dzieckiem kontenera.