10 narzędzi do poprawy dostępności strony internetowej
Nie ma wątpliwości, że rozumiesz potrzebę, aby Twoja strona była dostępna dla jak największej liczby użytkowników. Ale przeczytanie wszystkich wytycznych i standardów może być nieco przytłaczające. Możesz znaleźć najnowsze rekomendacje W3C tutaj, ale czy musisz znać każde słowo i przestrzegać wszystkich wytycznych?
Dzisiaj postaramy się to wszystko nieco ułatwić za pomocą niektórych narzędzi i zasobów, które pomogą Ci poprawić dostępność strony internetowej (a może nawet niektóre kontrole, aby wziąć pod uwagę, że nie było to w twoim radaru!).
Niezależnie od tego, czy chcesz mieć wystarczający kontrast wizualny, stronę dostępną dla czytników ekranu, a nawet tworzyć dostępne e-maile, zapewniamy Ci ochronę!
1. Kolor bezpieczny
Color Safe pomaga sprawdzać (a nawet tworzyć) dostępne palety kolorów na podstawie Wytycznych WCAG dotyczących kontrastu kolorów tekstu i tła. Narzędzie i standardy używają formuły opartej na proporcjach, aby określić kombinacje kolorów, które mogą być odczytane przez wszystkich.
Wytyczne WCAG zalecają współczynnik kontrastu wynoszący 4, 5 dla tekstu małego (treści) i 3 dla tekstu dużego (cokolwiek powyżej 24 punktów).
Wystarczy wpisać swoje kolory - w oparciu o kod HEX - wybór i rozmiar czcionki i wygenerować paletę. Otrzymasz natychmiastowy stosunek do porównania i możesz zobaczyć inne podobne kolory. Sprawdź, czy coś podobnego może być lepszą opcją w zależności od kroju i rozmiaru.
2. NoCoffee
NoCoffee to rozszerzenie przeglądarki Google Chrome, które pomaga wizualizować projekt w taki sam sposób, w jaki może go zobaczyć osoba niedowidząca. (Nic nie podkreśla znaczenia dostępności, tak jak widzenie jej w ten sposób.)
Może sprawdzić i wyświetlić następujące informacje:
- Niska ostrość z małymi celami tekstowymi lub kliknięciowymi
- Problemy z niskim kontrastem z elementami tekstu i tła
- Ślepota barw
- Wizualny śnieg, blask, zjawy i zaćma
- Oczopląs, który jest szybkim mimowolnym ruchem oczu
- Zablokowane pola widzenia
3. Kontroler kontrastu
Contrast Checker umożliwia wprowadzanie kolorów tła i pierwszego planu na ekranie oraz natychmiastowe sprawdzanie zgodności z kilkoma standardami wizualnymi za pomocą natychmiastowego, zakodowanego kolorami pass / fail.
Ładne funkcje tego narzędzia obejmują możliwość przełączania między opcjami koloru i skali szarości, udostępniania próbek swoich czeków i pobierania kolorów z obrazów. Możesz również zapisać próbkę PDF. Jest to łatwe w obsłudze narzędzie z wieloma funkcjami, z których każdy może szybko korzystać.
Zapewnia również stosunek kolorów, zgodnie z wytycznymi WCAG.
4. Tota11y
Tota11y to plik JavaScript, który umieszcza mały przycisk w dolnym rogu dokumentów. Rozszerza się o pasek narzędzi, który zawiera wiele wtyczek do różnych kontroli dostępności.
- Nagłówki i naruszenia kolejności nagłówków
- Kontrast (lub jego brak)
- Łącz tekst, którego brakuje lub jest mylący
- Etykiety, których brakuje w danych wejściowych
- Obrazy bez tekstu alternatywnego
- Etykiety są charakterystycznymi elementami ARIA
- Czytnik ekranu „różdżka”, dzięki czemu możesz „czytać” witrynę tak jak czytnik ekranu
5. FALA
WAVE, czyli narzędzie oceny dostępności sieci, to solidny zbiór kontroli w jednym miejscu.
Narzędzie wykorzystuje wizualną nakładkę ikon odnoszących się do informacji na pasku bocznym, aby zapewnić szczegółowe informacje na temat wszystkiego, od kontrastu kolorów po nadmiarowe tytuły po łącza do HTML i elementów strukturalnych.
Darmowy kontroler daje prawie wszystko, co musisz wiedzieć o pojedynczej stronie, ale WAVE zawiera również płatne narzędzia na poziomie korporacyjnym dla właścicieli wielu witryn lub użytkowników, którzy chcą więcej niż jednej strony na raz. Zawiera także rozszerzenia przeglądarki Chrome i Firefox, które mogą sprawdzać intranet, chronione hasłem, dynamicznie generowane lub wrażliwe strony internetowe w prywatnym środowisku.
6. 508 Checker
Kontroler 508 testuje adresy URL w celu ustalenia, czy witryna spełnia wytyczne dotyczące zgodności z USA 508, która jest wymagana przez prawo dla każdej organizacji otrzymującej fundusze federalne.
Chociaż to narzędzie jest bezpłatne, musisz się zarejestrować, aby zobaczyć pełne wyniki skanowania.
Witryna zawiera również inne narzędzia i zasoby, w tym quiz, który pomaga organizacjom dowiedzieć się, czy podlegają one zgodności z przepisami 508 oraz konkretnym zasobom dla szkolnictwa wyższego, organizacji non-profit i organów rządowych.
7. HTML_CodeSniffer
HTML_CodeSniffer to skrypt po stronie klienta, który sprawdza kod źródłowy i wyszukuje naruszenia zdefiniowanych standardów. Sprawdza zarówno wytyczne dotyczące dostępności treści internetowych 2.0, jak i amerykańską sekcję 508.
Wklej kod bezpośrednio na stronie w celu sprawdzenia lub skorzystaj z bookmarkletu.
Jest łatwy w użyciu i możesz wybrać rodzaj wyświetlanych informacji - błędy, ostrzeżenia lub powiadomienia, a także przejrzeć raport opisujący wszelkie wątpliwości z kontroli.
8. Dostępny e-mail
Accessible Email to internetowy kontroler i edytor HTML, który pomoże Ci poprawić kod biuletynu e-mail przed jego wysłaniem. (Możesz także sprawdzić wcześniejsze / wysłane kampanie).
Przy tak dużej komunikacji cyfrowej i generowaniu potencjalnych klientów pochodzących z poczty e-mail, nie powinno to być jednym z zapomnianych elementów witryny pod względem dostępności, ale często tak jest. Te same zasady dotyczące dostępności w Internecie dotyczą również wysyłania wiadomości e-mail.
Narzędzie jest bezpłatne i zaprojektowane w celu promowania dostępności i użyteczności marketingu e-mailowego.
9. Amara
Amara to narzędzie do tworzenia napisów i napisów do filmów.
Zapewnienie sposobu połączenia bez dźwięku lub w innym języku może otworzyć elementy projektu dla większej liczby osób, szczególnie jeśli wideo jest kluczowym elementem projektu.
To narzędzie zawiera bezpłatne i korporacyjne opcje, które ułatwiają wyświetlanie języka na ekranie w czytelnym formacie, który działa na stronach internetowych i platformach do przesyłania strumieniowego wideo, takich jak YouTube.
10. MobiReady
MobiReady zapewnia test dostępności mobilnej w formie wizualnej i raport wyników, dzięki czemu możesz zobaczyć, gdzie Twoja witryna może nie działać na najmniejszych urządzeniach.
Możesz porównać swoją witrynę z Alexa 1000, rankingiem najlepszych witryn na świecie; uzyskaj szczegółowe wyniki techniczne z zaleceniami i zobacz rendering swojej witryny na różnych ekranach, w tym na urządzeniach wysokiego, średniego i niskiego poziomu.
Jedną z najlepszych części tego testu jest to, że jest oceniany w kilkudziesięciu obszarach i istnieją sugestie ulepszeń w przypadku każdego „niepowodzenia”.
Wniosek
Jeśli chodzi o dostępność witryny, należy wziąć pod uwagę użyteczność i czytelność dla wszystkich typów użytkowników. Zastanów się nad kolorem, rozmiarem i rozmieszczeniem elementów, podpisów i napisów, odpowiednim kodem HTML i strukturą, a nawet pocztą e-mail, aby zapewnić jak najlepszą obsługę jak największej liczbie osób.
Ważne jest również sprawdzenie, czy nie ma regionalnych lub krajowych zasad zgodności, które mogłyby mieć zastosowanie do twoich projektów, takich jak wspomniane powyżej standardy zgodności 508.
A w razie wątpliwości lepiej pomylić się po stronie dostępności. Poprawianie kolorów z palety lub zwiększanie rozmiaru czcionki jest w porządku, aby więcej osób mogło z łatwością zrozumieć zawartość ekranu.
