Wybór właściwej czcionki i jej prezentacji: A Key to ADA Accessible Websites

Internet jest miejscem zakwaterowania publicznego, gdzie każdy ma równe prawo do uczestnictwa, dostępu, prezentacji i wyszukiwania informacji pomimo jakiejkolwiek niepełnosprawności. Americans with Disability Act (ADA) został uchwalony w celu zapewnienia równych szans dla osób niepełnosprawnych. Podczas gdy Internet był jeszcze w powijakach w tamtym czasie, rzeczywistość jest teraz taka, że odnosi się ona do wszystkich wirtualnych miejsc, w tym usług cyfrowych i treści online.

Aby wypełnić swoje prawne i moralne zobowiązania, wszystkie organizacje i firmy są zobowiązane do udostępnienia swoich stron internetowych i kanałów online osobom niepełnosprawnym. Jednym z kluczowych filarów projektowania dostępnej strony internetowej jest czytelność i zrozumiałość jej zawartości tekstowej. Jest to osiągalne tylko przy użyciu dostępnych czcionek.

Zorganizowaliśmy ten przewodnik, aby pomóc naszym czytelnikom odpowiedzieć na pytania takie jak Czym są dostępne czcionki i jaka jest najlepsza czcionka do użycia na stronie internetowej? Czytaj dalej, aby dowiedzieć się o szczegółach czcionek zatwierdzonych przez ADA i ich cechach. Pokryjemy także niektóre z cech potrzebnych do uczynienia strony internetowej dostępnej dla ludzi z wadami wzroku, dysleksją i zaburzeniami czytania.

Przegląd rodzin czcionek

Czcionki i różne rodziny czcionek zajmują ważne miejsce w typografii cyfrowej. Rodzina czcionek składa się z zestawu różnych czcionek, które mają podobne cechy i atrybuty odnoszące się do stylów projektowania. Zrozumienie ich właściwości może pomóc projektantom stron internetowych wybrać najbardziej dostępne czcionki dla ich stron. Chociaż istnieje wiele rodzin czcionek, tutaj wymieniamy cztery z nich, które mogą być również skonfigurowane przez użytkownika w przeglądarce internetowej:

• Serif: Czcionki Serif mają dekoracje lub ozdoby na końcu kreski w literze lub symbolu.
• Sans-Serif: Sans to francuskie słowo oznaczające „bez”. Czcionki bezszeryfowe są prostsze i nie mają przedłużonych linii lub ozdób na końcu każdej kreski w literze lub symbolu.
• Monospace: Czcionki Monospace mają taką samą szerokość dla każdej litery lub symbolu. Są one również nazywane czcionkami o stałej szerokości lub nieproporcjonalnymi.
• Cursive: Czcionki kursywne są pisane w sposób płynny, przypominający słowa pisane odręcznie. Poszczególne litery mogą być łączone w celu uzyskania wrażenia artystycznego.

Jednostki miary

Istnieją różne jednostki do określania rozmiarów czcionek:

• Ems (em): Jednostka ta definiuje rozmiar czcionki względem rozmiaru elementu nadrzędnego na stronie HTML. Na przykład, jeśli element nadrzędny w HTML ma 14 px, to 2 em sprawi, że będzie to 28 px.
• Rems (root ems): Podczas używania jednostek rem, wszystkie czcionki są zdefiniowane względem rozmiaru czcionki elementu root w HTML. Stąd, cały tekst w HTML jest określony w stosunku do jednej czcionki bazowej i nie zależy od tego, gdzie tekst jest umieszczony w hierarchii HTML stron internetowych.
• Piksele (px): Jest to bezwzględna jednostka miary i nie jest oparta na pomiarze względem elementu bazowego.
• Punkty (pt): Punkty są również metryką absolutną. WCAG używa wartości CSS3, gdzie 1pt to 1.333 px. Stąd, 14pt i 18pt tłumaczą się odpowiednio na 18.5px i 24px.

Co czyni czcionkę niedostępną?

Niedostępne czcionki wykluczone z listy czcionek zgodnych z ADA to te, które:

• Utrudniają czytanie tekstu
• Utrudniają rozróżnianie kształtów różnych liter i znaków
• Zmniejszają szybkość czytania użytkownika
• Mają nakładające się na siebie litery lub znaki, co utrudnia odróżnienie jednej litery od drugiej.

Jeśli czcionka jest ozdobna z ozdobnikami, staje się trudna do czytania. Wszystkie czcionki z ozdobami na końcu skoku mogą być trudniejsze do odczytania dla niektórych użytkowników. Czcionki w stylu kursywy lub pisma odręcznego również sprawiają, że tekst jest niedostępny, a zatem nie są to najlepsze czcionki do użycia na stronie internetowej.

Czym są dostępne czcionki?

Podczas projektowania strony internetowej jednym z najważniejszych aspektów jest wybór odpowiedniej czcionki i jej prezentacja. Zdecydowana większość stron internetowych wymaga dużej ilości treści tekstowej, która powinna być dostrzegalna i możliwa do przeglądania. Kluczem do stworzenia dostępnej strony internetowej jest zatem czytelność tekstu na niej zawartego, która jest wyrażona za pomocą różnych stylów i kolorów czcionek.

Które standardowe czcionki są dostępne?

Niestety, opinie ekspertów różnią się co do tego, jaka czcionka jest najbardziej czytelna dla stron internetowych i jaki krój pisma powinien być używany, ponieważ różni użytkownicy mają różne zestawy wymagań. Na przykład, publiczność z niskim wzrokiem miałaby większą potrzebę większego tekstu. Osoby o słabym polu widzenia, ale o większej jasności widzenia, potrzebowałyby większej liczby znaków, aby zmieścić się w ich polu widzenia, przy jednoczesnym zachowaniu małego rozmiaru tekstu. Osoby z dysleksją lub zaburzeniami czytania również mają swoje własne potrzeby.

Najlepiej, aby projektanci stron internetowych oferowali elastyczność, tak aby użytkownicy mogli wybierać własne czcionki. Jeśli strona internetowa używa domyślnej czcionki przeglądarki internetowej, wtedy czytelnik nie będzie musiał przełączać się na inną czcionkę za każdym razem, gdy strona jest ładowana.

Pomimo, że nie ma ustalonego wymogu rozmiaru czcionki ADA, dostępne czcionki zgodne z ADA są jasne, czyste i rozróżnialne w przeciwieństwie do stylu pisma kursywnego lub odręcznego. Ogólnie przyjmuje się, że czcionki bezszeryfowe są łatwiejsze do odczytania i bardziej dostępne niż ich odpowiedniki szeryfowe. Lista czcionek zgodnych z ADA obejmuje, ale nie jest ograniczona do Arial, Calibri, Century Gothic, Helvetica, Tahoma i Verdana.

Ważność dostępnych czcionek

Większość informacji w sieci jest przekazywana i rozpowszechniana za pomocą treści tekstowych. Jedną z metod prezentacji tekstu są obrazy tekstu w formacie .png lub .bmp. Jednakże, nie jest to realna opcja z wielu powodów. Na przykład, gdy obrazy są skalowane, ich czytelność ulega pogorszeniu. Ponadto, tekst w obrazkach nie może być odczytany na głos przez czytniki ekranu. Dlatego, cały tekst na stronie internetowej powinien składać się z dostępnych czcionek, które są czytelne i widoczne.

Projektowanie dostępnej strony internetowej przy użyciu dostępnych czcionek nie jest już tylko zaleceniem lub opcjonalną cechą. Jest to obowiązkowe; jeśli strona narusza zasady dostępności, jej host lub firma ponosi ryzyko narażenia się na wysokie kary, grzywny lub pozwy sądowe. Grzywna ta może wynosić nawet 75 000 dolarów za pierwsze naruszenie i więcej za kolejne niezgodności.

Oszacowano, że istnieje 32,2 miliona dorosłych z zaburzeniami widzenia, zgodnie z danymi National Health Interview Survey (NHIS). Obejmuje to nie tylko osoby niewidome, ale także osoby, które mają słabe widzenie pomimo noszenia okularów. CDC przewiduje, że liczba ta rośnie szybko ze względu na wiek lub choroby związane z upośledzeniem wzroku.

Przy projektowaniu stron internetowych, firm i przedsiębiorstw, które zaspokajają tej dużej mniejszości populacji będzie naturalnie cieszyć się szerszej publiczności. Wiadomo, że jeśli tekst jest trudniejszy do odczytania na stronie internetowej, będzie miał mniejszą poczytność i ograniczoną liczbę odwiedzin strony. Dlatego też, dodanie czcionek zatwierdzonych przez ADA do strony internetowej jest istotnym aspektem prowadzenia udanego biznesu.

Czcionki specjalistyczne

Brytyjskie Stowarzyszenie Dysleksji (BDA) wskazuje na następujące ważne aspekty, o których należy pamiętać przy projektowaniu stron internetowych i wybieraniu dostępnych czcionek dla osób z dysleksją:

• Wybrana czcionka powinna być zaprojektowana w taki sposób, aby użytkownicy mogli łatwo dostrzec różnicę między różnymi literami i cyframi. Na przykład, l (małe L), 1 oraz I (duże i) mogą wyglądać tak samo.
• Listy b i d oraz p i q są lustrzanymi odbiciami siebie nawzajem. Dyslektycy mogą mieć trudności z ich rozróżnieniem. Litery te powinny być tak oddane, aby nie były już lustrzanymi odbiciami.
• Większość osób ankietowanych przez BDA preferowała zaokrąglone „g” i zaokrąglone „a”. Jednak zaokrąglenie tych liter nie powinno powodować mylenia ich z literą „o”.
• Odstępy między literami powinny być wystarczające do rozróżnienia różnych znaków, np. „rn” razem może być mylone z literą „m”, więc „learn” może być mylone z „leam”.

Specjalistyczne czcionki zostały zaprojektowane dla osób z dysleksją, np. Dyslexie i OpenDyslexic. Obie te czcionki są dostępne bezpłatnie i można je pobrać bez ponoszenia kosztów. Są to jedne z najlepszych czcionek do wykorzystania na stronach internetowych dla osób z dysleksją. Podobnie, czcionka Fs Me jest przeznaczona dla osób z trudnościami w uczeniu się i jest wspierana przez brytyjską organizację charytatywną Mencap zajmującą się trudnościami w uczeniu się.

Zgodność z wytycznymi dotyczącymi dostępności treści internetowych

Wytyczne dotyczące dostępności treści internetowych (WCAG) zostały opracowane i opublikowane przez World Wide Web Consortium (W3C). Zalecenia te tworzą powszechnie akceptowany standard projektowania dostępnych stron internetowych i treści online. W Stanach Zjednoczonych, Sekcja 508 ostateczne zasady bezpośrednio wymaga WCAG być przestrzegane z co najmniej poziomu AA zgodności. W przypadku procesów sądowych związanych z ADA, Departament Sprawiedliwości i sądy amerykańskie często odnoszą się do tych wytycznych, aby ocenić dostępność publicznych stron internetowych.

WCAG ma jasne wytyczne dotyczące dostępnych czcionek dla użytkowników z upośledzeniem wzroku, w tym atrybutów i cech projektu, takich jak kolor, kontrast, rozmiar i proporcje tekstu. Istnieją również zalecenia dotyczące układu i struktury treści tekstowej, które sprawiają, że strona internetowa jest bardziej czytelna i dostępna. Istotne jest włączenie tych cech do strony internetowej, aby dostosować ją do użytkowników ze słabym wzrokiem, dysleksją, zaburzeniami czytania lub innymi zaburzeniami poznawczymi.

W tym przewodniku omówiono różne zalecenia W3C dotyczące wyboru najlepszych czcionek dla dostępności, utrzymywania czcionek zgodnych z ADA i ich ważnych cech.

Rozmiar i proporcje czcionki: pozwól użytkownikowi je kontrolować

Podczas pisania tekstu kształt jest różny, a to zależy również od języka. Niektóre kształty alfabetu są skomplikowane, podczas gdy inne są prostsze i łatwiejsze do odczytania nawet przy mniejszych rozmiarach. Jest to główny powód, dla którego minimalny rozmiar czcionki nie jest zdefiniowany w WCAG. Następujące aspekty są ważne do rozważenia przy wyborze najlepszych czcionek dla dostępności i najlepszych czcionek do czytania na ekranie:

• Rozmiary czcionek i jednostki: Zgodnie z WCAG rozmiar czcionki powinien być określony przy użyciu ems i rems, tj. wytyczna preferuje względne jednostki czcionki, a nie jednostki bezwzględne. Projektanci stron internetowych powinni unikać ustawiania podstawowego rozmiaru czcionki w elemencie głównym. Zamiast tego można użyć domyślnego rozmiaru czcionki przeglądarki, który może służyć jako punkt odniesienia do zdefiniowania wszystkich innych rozmiarów czcionek. Jeśli użytkownik zmieni bazowy rozmiar czcionki, to cała strona zmieni się odpowiednio.
• Funkcja Zoom: Użytkownicy powinni mieć kontrolę nad rozmiarem czcionki, w tym nad powiększaniem tekstu do 200%. Tekst powinien pozostać czytelny po powiększeniu bez przepełnienia lub nakładania się na siebie. Powiększenie to powinno być możliwe bez użycia technologii wspomagającej, na przykład na stronie internetowej można dodać prosty kontroler, taki jak suwak, służący do zwiększania lub zmniejszania rozmiaru tekstu. Funkcja ta powinna być dostępna na wszystkich urządzeniach, np, mobile, desktop, tablet, itp.

Odstępy między tekstami: uczyń je względnymi w stosunku do rozmiaru czcionki

WCAG 2.1 ma następujące zalecenia dotyczące odstępów między tekstami:

• Odstępy między wierszami powinny być ustawione na co najmniej 1,5-krotność rozmiaru czcionki.
• Odstęp po akapicie powinien wynosić co najmniej 2-krotność rozmiaru czcionki.
• Odstępy między literami powinny być co najmniej 0,2 razy większe od rozmiaru czcionki.
• Odstępy między słowami powinny być co najmniej 0,16 razy większe od rozmiaru czcionki.

Szerokość linii: zezwalaj na zawijanie tekstu

Generalnie, liczba znaków jest używana jako jednostka miary długości linii. Pomimo jakiejkolwiek niepełnosprawności, ludziom trudniej jest czytać dłuższe linie niż krótsze, ponieważ przerwy między liniami pozwalają oczom odpocząć. Ostatecznie długość linii nie powinna przekraczać 80 znaków.

Osoby z mniejszym polem widzenia wymagają węższych obszarów tekstu, gdzie mogą łatwo odróżnić koniec linii i początek następnej. Z tego powodu długość linii powinna być kontrolowana przez użytkownika. Jeśli dostosują rzutnię, linie tekstu powinny automatycznie zawijać się i przepływać, pozwalając użytkownikowi na czytanie tekstu bez poziomego przewijania.

Akapity: wyrównaj akapity do lewej lub prawej

Wszystkie treści stron internetowych powinny być uporządkowane i zorganizowane w krótkie akapity, a długie zdania powinny być unikane. Akapity powinny być albo wyrównane do lewej albo do prawej. Chociaż tekst wyrównany może wyglądać bardziej atrakcyjnie wizualnie, należy go unikać, ponieważ dodatkowe spacje w liniach czynią go niedostępnym. To samo dotyczy wyśrodkowanych stylów akapitów, które mogą utrudnić czytelnikowi znalezienie początku następnego wiersza.

Mądre podejście do koloru czcionki

Efektywne użycie koloru jest ważne dla przekazania użytkownikowi istotnych informacji. Na przykład, obowiązkowe pola w formularzach mogą być zaznaczone kolorowym podświetleniem, błędy mogą być pokazane na czerwono, niebieski podkreślony tekst zwykle wskazuje na hiperłącza, a szary może być zastosowany do pokazania wyłączonych pól formularza.

Ale kolory zwiększają estetykę strony internetowej, należy zwrócić uwagę, aby dostosować się do osób z niską percepcją kolorów, które mogą nie być w stanie dostrzec różnic w kolorach. WCAG 2.1 stwierdza, że alternatywne wizualne wskazówki powinny być używane do rozróżniania różnych cech oprócz tylko kolor.

Użycie koloru jest ściśle związane ze współczynnikami kontrastu. Istotne jest, aby mieć dobry kontrast kolorów dla czytelnego i dostępnego tekstu. Następujące punkty są ważne przy rozważaniu dostępnych czcionek dla niedowidzących użytkowników:

• Kontrast kolorów powinien pozwolić na odróżnienie tekstu na pierwszym planie od tła. Nie powinien być zbyt niski lub zbyt ostry.
• Kolor tekstu szary (#777777) na białym tle to minimum dla poziomu AA WCAG. Dla większego tekstu, 52 procent szarości (#828282) jest akceptowalne.
• Tekstu odwróconego, czyli jasnego koloru tekstu na pierwszym planie na ciemnym tle, należy unikać tak bardzo, jak to możliwe, ponieważ jest trudniejszy do odczytania.

Stosunek kontrastu: spraw, aby wszystko było rozróżnialne

Wytyczne WCAG 2.1 dotyczące stosunku kontrastu są wymienione poniżej:

1. 1. Nagłówki: Współczynnik kontrastu dla nagłówków tekstowych i większego tekstu powinien wynosić minimum 3:1. Tekst 18-punktowy lub 14-punktowy tekst pogrubiony jest uważany za duży tekst i powinien spełniać to wymaganie.
2. 2. Tekst główny: Dla tekstu innego niż nagłówki, należy zachować współczynnik kontrastu co najmniej 4,5:1.
3. 3. Logotyp: Tekst, który jest częścią logo lub marki, nie ma wymogu zachowania kontrastu.
4. 4. Tekst incydentalny: Tekst, który jest częścią nieaktywnego interfejsu użytkownika, czystą dekoracją, jest niewidoczny lub jest częścią obrazu i nie przekazuje istotnych informacji, nie ma wymogu kontrastu.

Istnieje kilka zalecanych sposobów utrzymania zalecanego współczynnika kontrastu. Na przykład, jeśli litera lub symbol tekstowy jest jaśniejszy na dole, może to naruszać współczynnik kontrastu całej litery. W takim przypadku projektant może albo przyciemnić tło, albo dodać cienki czarny kontur do litery, aby utrzymać wymagany współczynnik kontrastu. Względna luminancja liter na pierwszym planie lub tła może być również zmieniona w celu osiągnięcia pożądanego rezultatu. Różne narzędzia, które mogą być użyte do sprawdzenia współczynnika kontrastu są wymienione na stronie WCAG

Prezentacja tekstu

Oprócz włączenia czcionek dla użytkowników z upośledzeniem wzroku, ważne jest również zwrócenie uwagi na układ i strukturę tekstu. Jeśli chodzi o ogólną prezentację tekstu na stronie internetowej, należy przestrzegać następujących kluczowych punktów:

• Dokumenty powinny być pisane przy użyciu tej samej czcionki lub jak najmniejszej liczby czcionek. Strona zawierająca wiele czcionek, nawet jeśli są to czcionki zgodne z ADA, jest trudniejsza do odczytania.
• Nagłówkowe znaczniki HTML, np. <h1>, <h2> itp. powinny być używane w celu przekazania struktury i hierarchii dokumentu i nie powinny być stosowane tylko dlatego, że określony rozmiar czcionki był potrzebny do wizualnego wyróżnienia elementu.
• Animowany i ruchomy tekst powinien być całkowicie unikany.
• Treść tekstowa powinna być przedstawiana za pomocą danych tekstowych, a nie obrazów lub grafiki. Czcionki tekstu po powiększeniu na ogół nie tracą czytelności i zachowują swoją jakość. Obrazy tekstu wykazują tendencję do odwrotnego zachowania i ich jakość może się pogorszyć po powiększeniu.
• Należy stosować wielkość liter w zdaniu i unikać małych liter.
• Pogrubienie i kursywa nie powinny być łączone.
• Bloki tekstu z kursywą są niedostępne i trudniejsze do odczytania.
• Należy unikać podkreślania tekstu, chyba że jest to link.

Podsumowanie

Zniesienie barier cyfrowych i zapewnienie takiego samego doświadczenia internetowego dla wszystkich osób, z lub bez niepełnosprawności, powinno być głównym priorytetem wszystkich firm i organizacji. Aby to osiągnąć, WCAG zapewnia cenne zalecenia dotyczące wyboru najlepszych czcionek dla witryny, które renderują czytelny tekst dla wszystkich użytkowników, w tym tych z niskim wzrokiem, dysleksją lub zaburzeniami czytania.

Biznesy z niewielkim lub żadnym doświadczeniem ADA mogą zwrócić się do ekspertów przy projektowaniu i tworzeniu nowych stron internetowych lub naprawianiu ich istniejących stron. Bycie proaktywnym w celu zapewnienia dostępności wszystkich treści internetowych i usług online pomoże uniknąć ciężkich kar pieniężnych i szkód.

Rozsądnie jest uzyskać pomoc od zespołu programistów, projektantów i inżynierów, którzy mają wiedzę i doświadczenie w tworzeniu stron internetowych zgodnych z ADA i 508. W ramach naszych usług dostępności stron internetowych oferujemy kompletne pakiety do tworzenia stron internetowych opartych na standardach WCAG, naprawiania starszych stron internetowych i przeprowadzania regularnych audytów w celu zapewnienia dostępności Twojej witryny.