Konspekt strony

    Czytelność

      Ustawienia

      Alert

      Przeglądaj demo na nowej karcie. Wróć do dokumentacji.

      Kontrast i etykiety formularzy

      Upewnij się, że w ustawieniach TAD włączone są opcje Kontrast i Etykiety.

      Na tej stronie: Kontrast Etykiety

      Kontrast

      Wtyczka kontrastu stworzona przez Jason Day.

      Aby zapobiec fałszywym alarmom, dodano prosty warunek wykluczający wszystkie elementy, których szerokość i wysokość są mniejsze niż 1 piksel overflow:hidden;. Niektóre wtyczki kontrastu fałszywie wskazują wizualnie ukryty tekst dla czytników ekranu, ponieważ kontrast nie działa.

      Podpowiedzi wskażą, czy jest to tekst o dużym, czy małym (zwykłym) rozmiarze, w tym fragment tekstu, który nie spełnia wymagań testu.

      Przykład 1 - Zwykły tekst

      Ten kolor zawodzi przy małym rozmiarze.

      Przykład 2 - Duży tekst

      Ten kolor zawodzi również przy dużym rozmiarze.

      Przykład 3 - Pole formularza

      Kolor wprowadzanego tekstu jest za słaby.

      Przykład 4 - Ostrzeżenie

      Ostrzeżenia dotyczące tekstu na tle.

      Tekst na tle obrazu wymaga ręcznego sprawdzenia


      Pola formularzy

      Testy dostępności pól wejściowych formularzy.

      Przykład 1

      Błąd: Pole bez etykiety lub z brakującym id.

      Przykład 2

      Błąd: Pole z ID, ale etykieta pola nie ma atrybutu for.

      Przykład 3

      Ostrzeżenie: Pole z etykietą zapewnioną przez aria-label lub aria-labelledby. Upewnij się, że etykieta jest widoczna. Nie zaleca się tej metody etykietowania pól, bo etykieta zwykle nie jest widoczna.

      Przykład 4

      Dobrze: Pole formularza ma id i etykietę powiązaną za pomocą atrybutu for.

      Przykład 5

      Ostrzeżenie: Pole tekstowe, w którym type='reset'.

      Przykład 6

      Dobrze: Pole tekstowe, w którym type='submit'

      Przykład 7

      Dobrze: Pole tekstowe, w którym type='button'.

      Przykład 8

      Dobrze: Etykieta domyślna. <label>Imię: <input type="text"/><label>

      Przykład 9

      Błąd: Etykieta domyślna bez tekstu. <label><input type="text"/><label>

      Przykład 10

      Błąd: Lista wyboru bez powiązanej etykiety.

      Przykład 11

      Błąd: Etykieta obszaru tekstowego nie jest z nim powiązana.

      Przykład 12

      Dobrze: Obszar tekstowy ma etykietę.

      Przykład 13

      Błąd: Pole tekstowe, w którym type="image", ale nie ma atrybutu alt lub aria-label (dotyczy ikony).

       

      Przykład 14

      Dobrze: Pole formularza ma id, które pasuje do atrybutu for w etykiecie znajdującej się pod polem.


      Przykład 15

      Dobrze: Pola formularza mają atrybut title jako dostępną nazwę.