Słyszałeś więc dużo o czymś, co nazywa się dostępnością. Być może słyszałeś nawet o ludziach pozywających duże firmy za świadczenie niedostępnych usług. Ale czy wiesz dokładnie, co oznacza dostępność?
Na szczęście dostępność nie jest zbyt trudna do zrozumienia lub wdrożenia, jeśli się do niej zobowiążesz. Gdy już nauczysz się, czym jest dostępność, możesz zastosować tę teorię w praktyce, pisząc dostępne aplikacje Vue.js.
Co to jest dostępność?
Ułatwienia dostępu to popularne hasło w sieci, ale co to właściwie oznacza? Okazuje się, że nazwa jest dość opisowa. Dostępność to po prostu miara użyteczności aplikacji internetowej dla wszystkich typów ludzi.
Nie każdy doświadcza sieci w ten sam sposób. Niektórzy ludzie mają upośledzenia, które mogą wpływać na ich słuch lub wzrok. Niektórzy nie mają dostępu do nowoczesnego sprzętu lub szybkiego internetu, a ludzie często muszą korzystać z sieci w mniej niż idealnych warunkach. Ułatwienia dostępu polegają na upewnieniu się, że wszystkie te osoby mogą nadal korzystać z aplikacji internetowej tak płynnie, jak to tylko możliwe.
Dlaczego dostępność jest ważna?
Dostępność jest ważna, ponieważ gdy aplikacja jest wysoce dostępna, może służyć jak największej liczbie osób. Gdy ktoś dostarcza usługę lub informacje na stronie internetowej, jego celem jest, aby inne osoby korzystały z tej usługi lub czytały te informacje.
Optymalizacja pod kątem dostępności zapewnia, że jak najmniej osób nie będzie w stanie korzystać z aplikacji internetowej. Co więcej, aplikacje internetowe, które są bardziej dostępne, zazwyczaj zajmują wyższe pozycje w wynikach wyszukiwania. Dzięki temu jeszcze więcej osób może znajdować i korzystać z bardziej dostępnych aplikacji internetowych.
Częste błędy programistów, które szkodzą dostępności
Wiele aplikacji internetowych jest mniej dostępnych niż mogłoby być. Zwykle jest to wynikiem błędów tych, którzy je zbudowali. Oto kilka typowych błędów ułatwień dostępu, które programiści popełniają podczas tworzenia aplikacji:
Korzystanie z niedostępnych bibliotek
Możesz polegać na bibliotekach innych firm, aby zaoszczędzić czas i wysiłek podczas tworzenia aplikacji. Niestety, nie wszystkie biblioteki poważnie traktują dostępność, a zidentyfikowanie tych dobrych może być trudne. W ten sposób łatwo można przypadkowo obniżyć dostępność aplikacji.
Pomijanie semantycznego HTML podczas budowania komponentów
Semantyczny HTML to HTML, którego znaczenie i struktura są poprawne. Każdy znacznik HTML ma nieodłączny cel, który technologia wspomagająca wykorzystuje do wywnioskowania znaczenia jego treści. Na przykład tag header oznacza nagłówek strony internetowej. Czytnik ekranu powinien być w stanie ogłosić, że wszystko w tagu nagłówka jest nagłówkiem witryny.
Niestety nic nie stoi na przeszkodzie, aby użyć tagu w niewłaściwym celu. Innym częstym przykładem jest użycie znacznika przycisku do działania jak link lub odwrotnie.
Pisanie HTML w ten sposób szkodzi dostępności, ponieważ technologia wspomagająca nie może już być pewna celu jakiegokolwiek elementu HTML. Może to skończyć się dezorientacją lub frustracją dla użytkowników technologii. Aby uzyskać maksymalną dostępność, zawsze powinieneś napisz semantyczny HTML, nawet jeśli oznacza to trochę więcej pracy.
Nie testuję dostępności
Tworzenie aplikacji internetowej często może być żmudnym zadaniem z wymagającymi terminami. Pomiędzy pośpiechem, by ukończyć funkcje, a ciężarem testowania innych aspektów oprogramowania, testowanie ułatwień dostępu zajmuje miejsce na tylnym siedzeniu. Możesz pokusić się o wdrożenie aplikacji w środowisku produkcyjnym przed przetestowaniem jej pod kątem problemów z ułatwieniami dostępu.
Czemu? Testowanie wymaga czasu i może wymagać znacznych zmian w kodzie aplikacji. Ale testowanie aplikacji internetowej jest nieodzowną częścią procesu rozwoju. Powinieneś przetestować dostępność swojej aplikacji tak samo rygorystycznie, jak każdy inny aspekt.
Na szczęście istnieją narzędzia, które pomagają rozwiązać te problemy. Poniższe pięć narzędzi może pomóc w pisaniu bardziej dostępnych aplikacji Vue.js:
WAVE to zbiór narzędzi, które pomagają programistom automatycznie testować ich aplikacje pod kątem problemów z dostępnością. Chociaż WAVE nie zastępuje testów z użytkownikami końcowymi, nadal może pomóc w wyłapaniu wielu problemów z dostępnością.
WAVE udostępnia narzędzie do testowania online na swojej stronie internetowej. Oferuje również rozszerzenia przeglądarki i kilka innych narzędzi ułatwiających testowanie ułatwień dostępu dla wielu typów aplikacji internetowych.
Wiele wskazówek używanych przez aplikacje internetowe do komunikowania aktywności, takich jak paski postępu i wskaźniki ładowania, ma charakter czysto wizualny. Osoby z niepełnosprawnością wzroku lub korzystające z czytników ekranu nie mogą ich dostrzec.
Vue-announcer to biblioteka, która pozwala ogłaszać zmiany w aplikacjach Vue.js w sposób dostępny dla każdego.
Vue-skip-to to biblioteka stworzona, aby umożliwić osobom korzystającym z czytnika ekranu przejście bezpośrednio do głównej zawartości aplikacji Vue.js. Jest to przydatne, ponieważ wiele aplikacji internetowych ma łącza nawigacyjne i inne elementy przed główną treścią. Niektórzy użytkownicy mogą je łatwo pominąć, ale korzystanie z czytnika ekranu może być kłopotliwe i frustrujące.
ESLint to narzędzie, które pomaga pisać lepszy JavaScript poprzez analizę kodu i sprawdzanie go pod kątem błędów.
To narzędzie jest wtyczką ESLint, która pomaga zapewnić, że struktura komponentów Vue.js jest zgodna z zasadami dostępności.
Po zainstalowaniu ta wtyczka analizuje wszystkie pliki Vue.js i wskazuje problematyczny kod. Możesz wtedy zmaksymalizować dostępność podczas pisania aplikacji, zamiast zmieniać kod po fazie testowania.
Dużym źródłem problemów z dostępnością w aplikacjach jest korzystanie z niedostępnych bibliotek komponentów. Vuetensils to biblioteka komponentów Vue.js.
Te komponenty są zoptymalizowane pod kątem minimalnego rozmiaru, maksymalnej dostępności, łatwości użytkowania i łatwości stylizacji. Możesz zaoszczędzić czas i korzystać z tych gotowych komponentów bez szkody dla dostępności swoich aplikacji.
Dostępność w Vue.js jest łatwa
Ułatwienia dostępu to upewnienie się, że każdy może korzystać z Twojej aplikacji w dowolnym kontekście. Maksymalizacja dostępności jest ważna, aby upewnić się, że z aplikacji może korzystać jak najwięcej osób.
Programiści często popełniają typowe, ale możliwe do uniknięcia błędy w zakresie ułatwień dostępu podczas tworzenia swoich aplikacji. Typowe problemy to nie testowanie i pisanie niesemantycznego kodu HTML. Ale za pomocą kilku narzędzi łatwiej jest pisać wysoce dostępne aplikacje Vue.js.
