Centrum pomocyDostępność cyfrowa
Przegląd dostępności bloków na stronach Tilda i funkcji w blokach w celu jej poprawy.
Większość bloków w bibliotece bloków Tilda jest już zoptymalizowana do użytku przez osoby ze stałą, tymczasową lub sytuacyjną niepełnosprawnością. W tym artykule wyjaśnimy, jakie możliwości istnieją i jakie ustawienia warto skonfigurować, aby poprawić dostępność witryny.
Krótka lista kontrolna dotycząca poprawy dostępności stron internetowych
- 1Sprawdź, czy tytuły SEO są ustawione dla bloków nagłówków
- 2Ustaw teksty alternatywne dla obrazów i upewnij się, że ujawniają one zawartość obrazu.
- 3Sprawdź, czy bloki menu znajdują się na stronie nagłówka, a stopka na stronie stopki.
- 4W ustawieniach treści dla bloków z formularzami online sprawdź, czy każde pole ma nagłówek pola i czy określono komunikat o powodzeniu po przesłaniu formularza
- 5Sprawdź kontrast czcionek na stronie i upewnij się, że nie ma tekstów na tle o podobnym kolorze lub obrazach, które sprawiają, że są mniej czytelne.
- 6Sprawdź, czy język projektu jest ustawiony w Ustawieniach witryny → Więcej
- 7Sprawdź wytyczne dotyczące dostępności elementów w Zero Block
Optymalizacja czytnika ekranu
Czytnik ekranu to oprogramowanie, które wypowiada to, co jest wyświetlane na ekranie. Często czytniki ekranu są już wstępnie zainstalowane i są używane za pomocą ustawień dostępności w systemie operacyjnym. Bloki
Tilda są albo automatycznie zoptymalizowane do pracy z czytnikami ekranu, albo zawierają niezbędne ustawienia do oznaczania treści, tak aby były prawidłowo wypowiadane przez czytnik ekranu.
Tilda są albo automatycznie zoptymalizowane do pracy z czytnikami ekranu, albo zawierają niezbędne ustawienia do oznaczania treści, tak aby były prawidłowo wypowiadane przez czytnik ekranu.
Tagi tytułów H1-H6
Jeśli zawartość strony ma przejrzystą strukturę, można ustawić znaczniki H1, H2 i H3 dla nagłówków. Nagłówki na różnych poziomach pomogą czytnikowi ekranu lepiej zinterpretować strukturę strony, a także przełączać się między treściami za pomocą klawiatury.
Tagi H1-H3 można ustawić w ustawieniach dowolnego bloku, który ma tytuł w sekcji "SEO: Tag tytułu". W innych blokach, na przykład w podtytułach kart, można ustawić nagłówki innych poziomów aż do H6.
Tagi H1-H3 można ustawić w ustawieniach dowolnego bloku, który ma tytuł w sekcji "SEO: Tag tytułu". W innych blokach, na przykład w podtytułach kart, można ustawić nagłówki innych poziomów aż do H6.
Ważne. Na każdej stronie może znajdować się tylko jeden tag H1. Możesz mieć dowolną liczbę tagów innych poziomów, o ile przestrzegana jest hierarchia (np. brak tytułów H2 w H3).
Tekst alternatywny (Alt) dla obrazów
Tekst alternatywny dla obrazów jest odczytywany przez czytnik ekranu, więc warto go ustawić, aby osoby niedowidzące mogły zrozumieć, czego dotyczy obraz. Tekst alternatywny jest również wyświetlany w przypadku innych ograniczeń dostępności, takich jak wolne połączenie.
Aby ustawić tekst alternatywny dla obrazu, otwórz kartę Zawartość bloku i kliknij trzy kropki obok przesłanego obrazu.
Aby ustawić tekst alternatywny dla obrazu, otwórz kartę Zawartość bloku i kliknij trzy kropki obok przesłanego obrazu.
Jeśli obraz jest po prostu dekoracyjny, na przykład jako tło jakiegoś elementu na stronie, może nie wymagać alternatywnego tekstu, weź to pod uwagę.
Aby dodać tag alt dla obrazów w blokach z kategorii "Galeria", otwórz zakładkę Zawartość i kliknij "Tekst" obok przesłanego obrazu. Następnie w polu "Image alt for SEO" określ opis obrazu.
Oto jak określić tekst alternatywny dla obrazu na karcie Zawartość bloku na stronie Tilda
Aby zwiększyć dostępność, tekst alternatywny powinien precyzyjnie przekazywać treść obrazu i zwracać się do odwiedzających, którzy mogą nie być w stanie zobaczyć obrazu z tego czy innego powodu.
Weźmy to zdjęcie jako przykład:
Słabe przykłady tekstów alternatywnych:
"Pies"
"Pudel".
Dobry przykład tekstu alternatywnego:
"Szczeniak pudla siedzi na trawie na podwórku murowanego domu".
Słabe przykłady tekstów alternatywnych:
"Pies"
"Pudel".
Dobry przykład tekstu alternatywnego:
"Szczeniak pudla siedzi na trawie na podwórku murowanego domu".
Wskazówki dotyczące projektowania stopek i nagłówków
Bloki w nagłówku i stopce są automatycznie oznaczane w sposób, który pozwala czytnikowi ekranu rozpoznać, że odwiedzający znajduje się obecnie w takim bloku. Na przykład w nagłówku można pominąć czytanie wszystkich elementów menu i przejść bezpośrednio do głównej treści strony.
Bloki zawierające nagłówek i stopkę muszą koniecznie znajdować się na oddzielnych stronach nagłówka i stopki, aby zapewnić prawidłowe znaczniki.
Bloki zawierające nagłówek i stopkę muszą koniecznie znajdować się na oddzielnych stronach nagłówka i stopki, aby zapewnić prawidłowe znaczniki.
Aby poprawnie ją skonfigurować, obejrzyj ten samouczek wideo lub zapoznaj się z artykułem Nagłówek i stopka w Centrum pomocy.
Wskazówki dotyczące wypełniania formularzy online
Większość pól wejściowych w blokach z kategorii "Formularze" jest dostępna dla czytnika ekranu. Komunikaty o powodzeniu lub błędzie są wyrażane przez czytnik ekranu.
Należy również pamiętać o określeniu tytułów pól wejściowych, aby dla każdego pola było jasne, co dokładnie należy w nim wpisać.
Należy również pamiętać o określeniu tytułów pól wejściowych, aby dla każdego pola było jasne, co dokładnie należy w nim wpisać.
Proces dostosowywania pól formularza i wyskakujących komunikatów o pomyślnym wypełnieniu formularza opisano w naszym samouczku wideo na temat konfigurowania formularzy online.
Wskazówki dotyczące kontrastu i rozmiaru czcionki
Wystarczający kontrast czcionki pomaga odwiedzającym łatwiej postrzegać tekst na stronie internetowej. Przestrzeganie wytycznych dotyczących kontrastu jest ważne nie tylko ze względu na osoby niedowidzące, ale także dlatego, że odpowiedni kontrast poprawia ogólne wrażenia użytkownika.
W Internecie istnieje standard określania kontrastu tła i tekstu, który opiera się na WCAG (Web Content Accessibility Guidelines). Zgodnie z tym standardem kontrast jest definiowany jako liczba razy jasność najjaśniejszego i najciemniejszego koloru różni się i jest zapisywana jako stosunek tej jasności: 3:1, 4.5:1, 10:1. Im niższa wartość, tym niższy kontrast (maksymalny współczynnik kontrastu wynosi 21:1).
Aby strona była dostępna dla osób niedowidzących, należy zwiększyć kontrast czcionek, niektóre określone zakresy wartości dla elementów opisano poniżej.
Możesz użyć narzędzia kontrastu tła i koloru czcionki, aby uzyskać wartość kontrastu i sprawdzić ją w stosunku do poniższych wartości. Aby to zrobić, po prostu skopiuj wartości tła i koloru z wstępnie zaprojektowanych bloków lub Zero Block, dodaj je do usługi określonej poniżej i uzyskaj współczynnik kontrastu.
W Internecie istnieje standard określania kontrastu tła i tekstu, który opiera się na WCAG (Web Content Accessibility Guidelines). Zgodnie z tym standardem kontrast jest definiowany jako liczba razy jasność najjaśniejszego i najciemniejszego koloru różni się i jest zapisywana jako stosunek tej jasności: 3:1, 4.5:1, 10:1. Im niższa wartość, tym niższy kontrast (maksymalny współczynnik kontrastu wynosi 21:1).
Aby strona była dostępna dla osób niedowidzących, należy zwiększyć kontrast czcionek, niektóre określone zakresy wartości dla elementów opisano poniżej.
Możesz użyć narzędzia kontrastu tła i koloru czcionki, aby uzyskać wartość kontrastu i sprawdzić ją w stosunku do poniższych wartości. Aby to zrobić, po prostu skopiuj wartości tła i koloru z wstępnie zaprojektowanych bloków lub Zero Block, dodaj je do usługi określonej poniżej i uzyskaj współczynnik kontrastu.
W przypadku zwykłego tekstu minimalna wartość kontrastu wymagana do rozróżnienia tekstu wynosi 4,5:1. Wartości 7:1 i wyższe będą już oznaczać, że tekst ma zwiększony kontrast (w standardowych kategoriach - AAA).
W przypadku większych tekstów (takich jak nagłówki) minimalna wartość kontrastu wynosi 3:1. Od wartości 4,5:1 tekst jest uważany za wzmocniony, tj. odpowiedni do użytku przez osoby z wadami wzroku.
W przypadku elementów nietekstowych (przycisków, elementów sterujących nawigacją itp.) konieczne i wystarczające jest utrzymanie współczynnika kontrastu większego niż 3:1.
W przypadku większych tekstów (takich jak nagłówki) minimalna wartość kontrastu wynosi 3:1. Od wartości 4,5:1 tekst jest uważany za wzmocniony, tj. odpowiedni do użytku przez osoby z wadami wzroku.
W przypadku elementów nietekstowych (przycisków, elementów sterujących nawigacją itp.) konieczne i wystarczające jest utrzymanie współczynnika kontrastu większego niż 3:1.
Możesz również skorzystać z usługi online Wave (Web Accessibility Evaluation Tools), aby sprawdzić kontrast i dostępność strony. Pokazuje ona wizualnie możliwe problemy z kontrastem i dostępnością elementów strony. Jednak nie wszystkie zalecenia dostarczone przez tę usługę mogą być trafne i poprawne, w szczególności nie wszystkie elementy mogą wymagać tekstu alternatywnego.
Jak określić język strony internetowej
Aby zapewnić lepszą dostępność, należy określić język witryny w Ustawieniach witryny → Więcej. Pomoże to oprogramowaniu innych firm w lepszej interakcji z witryną.
Nawigacja między blokami witryny za pomocą klawiatury
W przypadku niektórych rodzajów ograniczeń wygodniej jest korzystać z klawiatury do nawigacji po zawartości strony internetowej. Bloki Tilda zostały zaprojektowane w szczególności w celu ułatwienia nawigacji za pomocą klawiatury:
- Podczas nawigacji za pomocą klawiatury dostępna jest kolorowa ramka fokusu, aby zrozumieć, z którym elementem aktualnie się wchodzi w interakcję.
- Bloki z menu, podmenu, formularzami, kafelkami, odtwarzaczami wideo, zakładkami, suwakami są automatycznie oznaczane, dzięki czemu można po nich nawigować za pomocą klawiatury.
Wskazówki dotyczące dostępności dla Zero Block
Obecnie prace nad dostępnością wszystkich elementów Zero Block wciąż trwają. Ważne jest jednak, aby postępować zgodnie z ogólnymi wytycznymi opisanymi poniżej.
Zachowaj właściwą kolejność warstw. Dla odwiedzających, którzy wchodzą w interakcję ze stroną za pomocą klawiatury, prawidłowa kolejność punktów skupienia jest niezbędna.
Podczas poruszania się po elementach za pomocą klawisza Tab, elementy zostaną wybrane w kolejności, w jakiej pojawiają się w układzie strony. Aby upewnić się, że ta kolejność jest prawidłowa, należy umieścić elementy we właściwej kolejności. Nawigacja będzie odbywać się w odwrotnej kolejności niż określona w warstwach, od ostatniego elementu do pierwszego.
Podczas poruszania się po elementach za pomocą klawisza Tab, elementy zostaną wybrane w kolejności, w jakiej pojawiają się w układzie strony. Aby upewnić się, że ta kolejność jest prawidłowa, należy umieścić elementy we właściwej kolejności. Nawigacja będzie odbywać się w odwrotnej kolejności niż określona w warstwach, od ostatniego elementu do pierwszego.
Nie pozostawiaj pustych elementów, zwłaszcza jeśli pełnią one rolę semantyczną, taką jak znacznik H1. Dołącz linki, tagi SEO i tekst wewnątrz elementów. W przypadku obrazów, które nie są dekoracyjne, użyj tekstu alternatywnego (alt).
