Jak świetny projekt wpływa na dostępność strony internetowej

Szukasz punktu wyjścia do rozległej dyscypliny dostępności? Zagłębimy się w prawdziwe praktyki i narzędzia, które możesz wdrożyć w procesie projektowania, aby ulepszyć swoje produkty cyfrowe, włączając je do większej liczby użytkowników.

Czym jest dostępność?

Dostępne witryny internetowe umożliwiają szerszej gamie użytkowników bezproblemowe korzystanie z treści w witrynie. Niezależnie od tego, czy podchodzimy do tematu z perspektywy interfejsu użytkownika, czy UX, koncentrujemy się na stworzeniu wysokiej jakości produktu, który odpowiada zróżnicowanym odbiorcom.

Ta różnorodna publiczność „dociera do każdego, kto doświadcza trwałej, tymczasowej lub sytuacyjnej niepełnosprawności, np. posiadanie tylko jednej ręki jest stanem trwałym, posiadanie zranionej ręki jest tymczasowe, a trzymanie dziecka w jednym ramieniu jest sytuacyjne – w każdym przypadku użytkownik jest w stanie wykonywać zadania jedną ręką.” (Avinash Kaur, 2018).

Dlaczego dostępność jest ważna?

Jako projektanci mamy obowiązek upewnić się, że projektujemy w sposób dostępny dla wszystkich użytkowników, niezależnie od ich sytuacji, umiejętności czy kontekstu. W rezultacie sieć może być przestrzenią, która obejmuje wszystkich, bez względu na to, czy mają niepełnosprawność poznawczą, wzrok czy fizyczną.

Stworzenie dostępnej strony internetowej nie musi wymagać dużych nakładów budżetowych ani zmian. Ponieważ nie wymaga żadnych dodatkowych funkcji ani treści, dostępność można osiągnąć poprzez edukację i świadomość na początku projektu projektowego.

Jest to również prawdopodobnie ważne dla biznesu: badania pokazują, że dostępne strony internetowe mają lepsze wyniki wyszukiwania, docierają do większej liczby odbiorców, są przyjazne dla SEO, mają krótszy czas pobierania, zachęcają do dobrych praktyk kodowania i zawsze mają lepszą użyteczność.

Jak osiągamy dostępność?

Aby mieć pewność, że projektujesz zgodnie z różnymi umiejętnościami, wiekiem i poziomem doświadczenia z urządzeniami, musisz wprowadzić pewne poprawki i postępować zgodnie z ramami.

Dostępność to samodzielna dyscyplina, która stale ewoluuje w celu dopasowania do produktów cyfrowych. Ale w ten sam sposób rozwijają się również rozwiązania programowe. To znaczy, że nie możemy omówić wszystkiego w temacie, ale jeśli uznasz ten artykuł za przydatny, możemy zrobić część 2!

Zagłębimy się w 5 dużych obszarów:

1. Kontrast kolorów
2. Alternatywny tekst
3. Stany skupienia
4. Formularze
5. Typografia

Kontrast kolorów

Zapewnienie odpowiedniego kontrastu kolorów między tekstem a tłem pomaga użytkownikom, którzy mają problemy ze wzrokiem. Dotyczy to większej liczby użytkowników niż oczekiwano i często jest ignorowane jako problem. Jednak aż 1 na 12 mężczyzn jest daltonistami, a wielu innych niedowidzących lub niewidomych.

Po pierwsze, wytyczne dotyczące ułatwień dostępu mówią, że kolor nigdy nie powinien być jedynym sposobem przekazywania informacji. Innymi słowy, musi istnieć dodatkowa wskazówka dla tych użytkowników, którzy inaczej postrzegają kolor i mogą przegapić nasze instrukcje dotyczące kolorów.

Aby zachować przyzwoity kontrast między tekstem a tłem, dobry stosunek do naśladowania to minimum 4,5 do 1. Pozwala to użytkownikom słabo widzącym lub osobom niewidomym na kolory na rozróżnienie między nimi.

Współczynnik kontrastu 4,5 do 1 jest zgodny z poziomem zgodności AA (z trzech poziomów: A, AA i AAA), ale zmienia się to w zależności od rozmiaru czcionki i poziomu zgodności, który chcesz osiągnąć. Większe czcionki wymagają mniejszego współczynnika kontrastu, wynoszącego tylko 3 do 1, jeśli czcionka ma rozmiar 18 pt (lub 14 pt pogrubioną czcionką).

Te minimalne współczynniki nie dotyczą tekstu znajdującego się w logo lub nazwie marki, ale warto samodzielnie sprawdzić współczynnik kontrastu za pomocą tego poręcznego narzędzia.

Alternatywny tekst

W przypadku użytkowników, którzy uzyskują dostęp do sieci za pomocą czytników ekranu, wyświetlana treść nie zawsze jest przekazywana prawidłowo. Tekst alternatywny (alternatywny) jest używany przez czytnik ekranu do informowania użytkownika, jakie obrazy znajdują się na stronie.

Można to zrobić, konwertując tekst alternatywny na alfabet Braille'a, audiodeskrypcję lub wizualnie czytając tekst. Oznacza to, że ważne jest dokładne opisanie tego, co dzieje się na obrazie, dla tych, którzy go nie widzą.

Czasami może nie być konieczne dodanie tekstu alternatywnego. Na przykład może być wystarczająco dużo wskaźników kontekstowych otaczających obraz lub obraz nie ma innej funkcji niż estetyczna.

Stany skupienia

Najprawdopodobniej znasz już wskaźniki ostrości, nie zdając sobie z tego sprawy. Stany fokusa to (często) niebieskie kontury, które pojawiają się po wybraniu elementu, np. łącza, menu, przyciski i pola formularzy.

Sygnalizują one, na którym elemencie użytkownik jest aktualnie skupiony podczas korzystania z klawiatury. Często te wskaźniki są postrzegane jako brzydkie lub nie służą celowi, ale w rzeczywistości są bardzo ważne. Wielu użytkowników ogranicza się do korzystania tylko z klawiatury, a osoby niedowidzące korzystające z czytników ekranu również wymagają wskaźników ostrości, które ułatwiają nawigację po stronie.

Wskaźniki koncentracji to prosty sposób na to, aby nawigacja po stronie była przejrzysta i dostępna przy niewielkim wysiłku, a jednocześnie dużej różnicy dla użytkownika. Można je bezproblemowo wkomponować w markę za pomocą odpowiednich kolorów, wystarczy kontrastować, żeby elementy się wyróżniały.

Formularze

Formularze mogą być skomplikowane dla każdego, ale osoby z dodatkowymi problemami z dostępnością mogą często mieć problemy, gdy formularze są zbyt minimalistyczne i niejasne. Poniżej wymieniono niektóre typowe elementy, którymi należy się zająć, aby poradzić sobie z dostępnością:

• Etykiety — używanie tekstu zastępczego jako etykiety zamiast tekstu poza polem powoduje zamieszanie, ponieważ tekst znika, gdy użytkownik zaczyna pisać. Pomijanie kluczowych dla użytkownika wskazówek na rzecz minimalizmu lub estetyki jest poważnym błędem, którego należy unikać.
• Obramowania – coś tak prostego jak obramowanie wokół wpisanego tekstu jest ważne dla użytkowników z niepełnosprawnością poznawczą, więc jest jasne, gdzie muszą kliknąć
• Dodatkowe instrukcje – często formularze stosują minimalistyczne podejście, próbując uporządkować projekt, jednak utrudnia to użyteczność, a tym samym dostępność.
• Komunikaty o błędach – powinny być wskazywane przez wiele elementów, najczęściej używany jest kolor, ale dodatkowo błędy powinny być wskazywane za pomocą symboli lub tekstu.
• Recenzja – formularze powinny zapewniać pewien okres weryfikacji przed przesłaniem, aby umożliwić użytkownikowi poprawienie wszelkich informacji.

Typografia

Informacje są łatwiejsze do strawienia, gdy nie są zaśmiecone i zapełnione w jednym miejscu. Dotyczy to również dostępnych stron internetowych. Jak wspomniano wcześniej, rozmiar czcionki może zmienić minimalne wymagania dotyczące współczynnika kontrastu, ale rozmiary czcionek nie powinny spaść poniżej 10 pt.

Jak widać, trudno jest czytać w 9 pt.

Zwiększenie ilości odstępów między wierszami tekstu i pojedynczymi słowami może pomóc użytkownikom niedowidzącym lub cierpiącym na dysleksję. Poniższe minimalne odstępy zapewniają spełnienie wymagań tych użytkowników:

• Odstępy między literami: x0.12 rozmiar czcionki
• Rozstaw słowo: x0.16 rozmiar czcionki
• Odstępy między wierszami: x1.5 rozmiar czcionki
• Rozstaw ust x2 rozmiar czcionki

Wniosek

Co zaskakujące, te małe zmiany mogą mieć duży wpływ na dostępność. Dostosowanie witryny do wytycznych dotyczących ułatwień dostępu do treści internetowych nie wymaga dużych budżetów i dużej ilości czasu, ale może radykalnie zmienić wrażenia użytkownika, a tym samym wzmocnić również Twój biznes.

Włączenie tych sugestii do procesu projektowania może stać się drugą naturą, torując drogę dla przyszłości bardziej dostępnych stron internetowych – to zależy od nas jako projektantów.

Jeśli potrzebujesz pomocy ze swoim Creative, nie wahaj się z nami skontaktować.