Projektowanie łatwych w obsłudze aplikacji internetowych to kluczowy element dbania o wygodę użytkowników i ogólne zadowolenie z nich. Dostępna aplikacja internetowa zapewnia równy dostęp do osób o różnych możliwościach i w różnych lokalizacjach geograficznych. Osoby z ograniczeniami związanymi ze słuchem, zdolnościami poznawczymi, mową lub wzrokiem oraz z tymczasowymi ograniczeniami wynikającymi z krótkoterminowej niepełnosprawności, wolnego połączenia z internetem czy nawet jasnego światła słonecznego powinny mieć dostęp do aplikacji internetowej. Tworząc frontend aplikacji internetowej, korzystaj z rozwiązań ułatwień dostępu od samego początku, aby zapobiec problemom z ułatwieniami dostępu i konieczności ponawiania dowolnej pracy na późniejszym etapie kompilacji. Zadbaj o to, aby treści z Twojej aplikacji były dostępne dla robotów indeksujących i czytników ekranu, a jednocześnie zapewniła użytkownikom dobre wrażenia.
W wielu krajach i branżach ułatwienia dostępu to obowiązek prawny, dlatego musisz zapoznać się z tymi wytycznymi i włączyć rozwiązania ułatwień dostępu w swoim projekcie frontendu. Wiele przypadków biznesowych podkreśla znaczenie ułatwień dostępu dla treści internetowych.
W zasobach takich jak MDN i WCAG znajdziesz istotne wskazówki i sugestie dotyczące zwiększania dostępności Twojej aplikacji internetowej. Możesz też wziąć udział w kursie Poznaj ułatwienia dostępu na stronie web.dev.
Współzależności między różnymi elementami są kluczowym aspektem udostępniania aplikacji internetowej różnym użytkownikom.
Kolor i kontrast
Użycie kolorów to podstawowy czynnik podczas oceny ułatwień dostępu aplikacji internetowej. Użytkownicy frontendu muszą być w stanie dostrzec zawartość strony oraz muszą być w stanie w znacznym stopniu wpływać na ich odbiór treści przez kolor i kontrast. Problemy z oglądaniem i związane z nimi problemy ze wzrokiem mogą mieć charakter przejściowy, sytuacyjny lub trwały. Należy je jednak wziąć pod uwagę podczas tworzenia frontendu aplikacji internetowej. Odpowiedni dobór odpowiednich ustawień kontrastu lub różnicy w jasności kolorów używanych w interfejsie może zwiększyć dostępność aplikacji internetowej dla zróżnicowanych użytkowników. Współczynnik kontrastu zapewnia różnicę w jasności tła i tekstu.
Aby zmierzyć kontrast, możesz użyć formuły współczynnika kontrastu, która zapewni minimalny kontrast dla tekstu lub ikon na tle. Istnieje wiele zaburzeń postrzegania kolorów, ale nowe modele kolorów mogą pomóc w poprawnym odbiorze treści nawet w skali szarości.
Użycie ciemnego motywu jest często zalecane, aby zapewnić obsługę kolorów i kontrastu w ramach ułatwień dostępu. Ze względu na białe światło i trudności z czytaniem często preferowany jest ciemny motyw. Aplikacje oparte na treści obejmują dużo tekstu i obrazów, dlatego tak ważne jest rozsądne korzystanie z kolorów i współczynnika kontrastu, co pozwoli odpowiednio zaspokoić różne potrzeby użytkowników.
Więcej informacji o kolorach i kontraście znajdziesz na web.dev
Typografia
Typografia odnosi się do wyboru i ułożenia tekstu w taki sposób, aby był czytelny i czytelny dla różnych użytkowników. Jednym z najczęściej zmienianych ustawień ułatwień dostępu jest domyślny rozmiar czcionki na urządzeniach. Niektórzy użytkownicy wolą zmieścić na ekranie większy tekst, używając mniejszej czcionki lub maksymalnie powiększyć tekst, dlatego tak ważne jest, aby rozmiar czcionki był elastyczny i czytelny. Poszczególne znaki tekstowe powinny być łatwe do odróżnienia od czytelnika, a cały tekst powinien być czytelny. Podczas projektowania frontendu aplikacji wybierz kroje czcionki, które zapewniają zarówno czytelność, jak i czytelność.
Krój czcionki
Krój czcionki lub rodzina czcionek wybrana do aplikacji internetowej powinien być dostępny wizualnie dla szerokiego grona czytelników. Krój czcionki to wizualny projekt liter używanych w tekście aplikacji. W wielu badaniach omówiono znaczenie kroju czcionki podczas oceny dostępności treści internetowych. Znalezienie równowagi między marką, celami interfejsu użytkownika i łatwością czytania sprawia, że korzystanie z aplikacji jest przyjemniejsze dla szerszego grona użytkowników. Tworząc frontend, weź pod uwagę wpływ na dostępność i ogólny wygląd aplikacji oraz opcje kroju czcionki i dostępne w nich opcje czcionek.
rozmiar czcionki;
Rozważ włączenie powiększenia w przeglądarce, aby pomóc użytkownikom niedowidzącym lub niedowidzącym. Czcionka tekstu w aplikacji internetowej musi być widoczna dla różnych czytelników. Warianty rozmiaru czcionki można uzyskać, przełączając się z px na rem. Jednostki rem pozwalają na stosowanie rozmiaru czcionki względem
głównego elementu aplikacji wep. To uniwersalna opcja, która zwiększa ogólną dostępność aplikacji internetowej.
Struktura i układ
Różne właściwości struktury i układu wpływają na dostępność interfejsu. Funkcje układu, które warto wziąć pod uwagę, obejmują odstępy między blokami tekstu i wyrównanie, a także odstępy między wierszami tekstu, a nawet pojedynczymi literami. Wykorzystaj siatki i zwizualizuj komponenty, które chcesz uwzględnić w projekcie. Układ i struktura treści powinny być atrakcyjne i przyjemne dla użytkowników. W przypadku niektórych użytkowników, np. osób z ADHD, złożone układy lub tło złożone z wielu bloków tekstu mogą być trudne. Pamiętaj, by w trakcie projektowania frontendu skupić się na integracji społecznej.
ARIA i HTML
ARIA (Accessible Rich Internet Applications) zawiera zestaw wytycznych i atrybutów ułatwiających dostęp użytkowników do aplikacji internetowych. ARIA uzupełnia kod HTML i umożliwia m.in. łatwo dostępne widżety JavaScript, aktualizowanie opublikowanej treści i komunikaty o błędach. Właściwe korzystanie z ARIA jest kluczowe dla ułatwienia dostępu do aplikacji internetowej. Nieprawidłowe użycie ARIA może spowodować błędy i w rzeczywistości ograniczyć dostępność aplikacji dla użytkowników.
W miarę możliwości używaj etykiet ARIA, aby wprowadzać alternatywne formaty zgodne z zamianą alfabetu Braille'a i tekstu na mowę (TTS). Role i etykiety ARIA pozwalają zmienić drzewo ułatwień dostępu, gdy różni się ono od drzewa dom. Te etykiety są też ważne w przypadku używania niestandardowych tagów, takich jak tag div używany jako klikalny przycisk. Gdy element HTML nie obsługuje ułatwień dostępu, parametr ARIA jest wymagany. Projektując aplikację opartą na treści, upewnij się, że czytniki ekranu i inne urządzenia z ułatwieniami dostępu są odpowiednio obsługiwane. Dzięki temu będzie ona łatwiej dostępna w dotarciu do jak największej liczby użytkowników.
Więcej informacji o ARIA i HTML znajdziesz na stronie web.dev
Internacjonalizacja
Internacjonalizacja oznacza projektowanie aplikacji internetowej w taki sposób, aby była dostępna dla użytkowników z różnych środowisk językowych i kulturowych. Aplikacja internetowa powinna dostosowywać się do różnych języków, regionów geograficznych i preferencji kulturowych bez konieczności wprowadzania istotnych zmian w kodzie. Kluczowe elementy internacjonalizacji obejmują m.in. obsługę wielojęzyczną, lokalizację, podział treści, formatowanie daty i godziny, kierunek tekstu i negocjowanie języków.
Dzięki umiędzynarodowieniu swojej aplikacji internetowej możesz promować integrację społeczną i przyjazną dla użytkowników szerszemu gronu odbiorców z całego świata. Internacjonalizacja ma kluczowe znaczenie w przypadku każdej aplikacji internetowej o zróżnicowanej bazie użytkowników lub celu ekspansji międzynarodowej.
Właściwości logiczne
Podczas tworzenia stylów w CSS użyj start / end, a nie właściwości takich jak top / down/ left/ right. Zapewnia to odpowiednie przesunięcie menu i układu witryny w przypadku języków z alfabetem RTL.
Treści zastępcze
Dodaj do tagu HTML atrybut lang z linkami do innych dokumentów w nagłówku, aby dodać niestandardowe znaczniki do treści. Dzięki temu przeglądarka może wybrać odpowiednią stronę, jeśli zdefiniowany język jest inny niż domyślny. Może pomóc przeglądarkom i wyszukiwarkom rozpoznać język strony, co jest ważne przy prawidłowym wyświetlaniu treści i poprawie skuteczności SEO.
Międzynarodowe
Obiekt Intl w JavaScripcie to ważne narzędzie do tworzenia wielojęzycznych oraz kulturowych aplikacji internetowych. Umożliwia on internacjonalizację i lokalizację w aplikacjach internetowych, a także sprawia, że interfejs i treści są zrozumiałe i zgodne z kulturą użytkowników na całym świecie. Funkcje udostępniane przez obiekt Intl obejmują formatowanie daty i godziny, formatowanie liczb i sortowanie ciągów znaków.
Więcej informacji o umiędzynarodowieniu znajdziesz na web.dev
Formularze
Formularze HTML są kluczowym elementem aplikacji internetowych opartych na treści. Umożliwiają interakcję z użytkownikiem i zapewniają uporządkowaną metodę zbierania informacji o nim. Jeśli formularze HTML nie są dostępne dla szerokiego grona odbiorców, mogą być frustrujące i niezadowalające.
Aby umożliwić dostępność formularzy HTML, użyj semantycznych elementów HTML we wszystkich polach formularza. Pomaga to technologiom wspomagającym zrozumieć przeznaczenie poszczególnych pól i ułatwia użytkownikom ich ukończenie. Pamiętaj też, by wyraźnie oznaczyć wszystkie pola formularza. Dzięki temu użytkownicy mogą podawać dokładne i przydatne informacje. Ważne jest też przetestowanie dostępności formularzy HTML. Można to zrobić, korzystając z technologii wspomagających, aby symulować wrażenia użytkownika, który wymaga takich technologii do obsługi treści aplikacji.