Kontrast czy jasność: co naprawdę decyduje o czytelności tekstu?

Etykieta label w formularzach HTML może wskazywać tylko jedno pole formularza, ale to nie znaczy, że nie da się obsłużyć kilku pól jedną etykietą. Najczęściej wystarczy powiązać label z jednym polem, a pozostałe opisać zwykłym tekstem lub użyć pola grupowego. Jeśli mimo to chcesz, aby kliknięcie w etykietę ustawiało fokus na kilku kontrolkach, musisz zastosować inne rozwiązanie niż samo przypisanie atrybutu for.

Jak sprawdzić kontrast bez specjalistycznego oprogramowania Wystarczy znać wartości kolorów w zapisie szesnastkowym i skorzystać z prostego wzoru albo gotowego kalkulatora dostępnego w narzędziach dla projektujących interfejsy. Wpisuje się kolor mieszkanie w bloku tekstu i kolor tła, a wynik pojawia się natychmiast. Warto sprawdzić nie tylko główny tekst, ale też podpisy, etykiety przycisków, komunikaty o błędach i zastrzeżenia drobnym drukiem. To właśnie tam kontrast najczęściej zawodzi.

Atrybut alt to tekst, który zastępuje obraz w sytuacjach, gdy obraz nie może zostać wyświetlony lub odczytany. Trafia do czytników ekranu, które odczytują go na głos osobom niewidomym. Pojawia się też wtedy, gdy plik graficzny się nie wczyta, gdy użytkownik wyłączy obrazy w przeglądarce albo gdy wyszukiwarka indeksuje stronę. Bez alt obraz jest dla tych odbiorców pustką — nie wiadomo, co przedstawia i po co został wstawiony.

Format pliku decyduje o tym, jak obraz będzie wyglądał na ekranie i ile będzie ważył. Zły wybór kończy się albo rozmytymi krawędziami, albo plikiem, którego nie da się sensownie przesłać. Should you loved this short article and you would want to receive more details relating to przeczytaj więcej please visit our web-page. Poniżej praktyczne różnice między JPG, PNG i SVG oraz sytuacje, w których każdy z nich zawodzi.

Kiedy kontener flex ma ograniczoną szerokość, a w środku znajduje się kilka elementów, przeglądarka najpierw sumuje ich bazowe rozmiary (z flex-basis lub width). Jeśli suma przekracza dostępne miejsce, rozpoczyna się kurczenie. Każdy element kurczy się proporcjonalnie do iloczynu swojego flex-shrink i szerokości bazowej. To znaczy, że element o większej szerokości bazowej skurczy się bardziej niż mniejszy, nawet przy tym samym flex-shrink. Przykład: dwa elementy o szerokości bazowej 200px i 100px, oba z flex-shrink: 1, w kontenerze o szerokości 240px. Nadmiar do zabrania to 60px. Pierwszy element straci 40px, drugi 20px, bo proporcja 200:100 to 2:1.

Podstawą jest luminancja względna. Dla każdego kanału koloru (czerwony, zielony, niebieski) przelicza się wartość na skalę od zera do jednego, a potem waży je współczynnikami odpowiadającymi wrażliwości oka. Zielony waży najwięcej, niebieski najmniej. Z tych trzech liczb powstaje jedna wartość opisująca jasność koloru. Kontrast to iloraz jaśniejszej i ciemniejszej luminancji, powiększony o stałą. Wynik podaje się jako proporcję, na przykład 4,5 do 1. Im wyższa, tym lepiej.

SVG to format wektorowy: zamiast siatki pikseli zapisuje matematyczny opis kształtów. Dzięki temu ikona, logo czy wykres wyglądają ostro w każdym rozmiarze i ważą niewiele. Nadaje się wyłącznie do grafiki płaskiej, złożonej z linii i wypełnień — zdjęcia i tekstury w SVG nie mają sensu. Praktyczna zasada: rysuj ikonę w programie wektorowym, a nie obrysowuj bitmapę automatycznym narzędziem, bo dostaniesz setki przypadkowych ścieżek. Przed eksportem usuń zbędne warstwy, sprowadź kształty do prostych figur i pozbądź się metadanych edytora. Pamiętaj też, że SVG wstawiony na stronę to kod, więc plik z zewnętrznego źródła może zawierać niechciane skrypty — otwieraj go w edytorze tekstu i sprawdź zawartość przed publikacją.

Unikaj powtarzania tego samego tekstu w alt i w podpisie pod obrazem. Jeśli podpis już opisuje zdjęcie, alt może być pusty albo krótko uzupełniać informację. Nie wklejaj też do alt słów kluczowych dla pozycjonowania — to szkodzi zarówno użytkownikom, jak i wiarygodności strony. Czytnik ekranu odczyta taki ciąg jako bełkot, a wyszukiwarka może uznać to za manipulację. Alt ma służyć człowiekowi, nie robotowi.

Przezroczystość i ikony: kiedy PNG, a kiedy SVG PNG stosuje kompresję bezstratną i obsługuje kanał alfa, czyli przezroczystość. To domyślny wybór dla elementów interfejsu, logotypów, zrzutów ekranu i grafik, które mają leżeć na zmiennym tle. Uwaga na dwa typowe błędy: zapisywanie zdjęcia jako PNG, co daje plik kilkanaście razy większy niż JPG bez widocznej korzyści, oraz eksportowanie ikony w zbyt małym rozmiarze. PNG nie skaluje się bez utraty jakości — powiększony okaże się rozmyty. Jeśli potrzebujesz przezroczystości przy fotografii, lepszym rozwiązaniem bywa WebP, ale nie każdy odbiorca go obsłuży, więc warto mieć zapasowy PNG.

Footer zamyka dokument lub sekcję. W stopce znajdą się informacje o prawach autorskich, dane kontaktowe, linki pomocnicze. Podobnie jak header, footer może być użyty wewnątrz article lub section. Uważaj na typowy błąd: umieszczanie całej nawigacji w footerze i pomijanie nav. Linki w stopce nadal warto opakować w nav, jeśli tworzą spójny zbiór. Kolejny częsty problem to zagnieżdżanie main w innych elementach strukturalnych. Main ma być bezpośrednio w body lub w wydzielonym kontenerze strony, ale nie wewnątrz article czy aside.