A co, gdybym powiedział wam, że istnieją projektanci stron internetowych, którzy są ludźmi, którzy mogą odwiedzić twoją stronę internetową i nie obchodzi ich, jak to wygląda?
Osoby niedowidzące poruszają się po Internecie z tych samych powodów, co my wszyscy, aby znaleźć informacje, dokonać zakupów i wykonać wiele ważnych zadań za pomocą aplikacji internetowych. Jednak osoby z dysfunkcją wzroku doświadczają sieci inaczej i musimy być wrażliwi na ich potrzeby, kiedy projektujemy i tworzymy strony internetowe.
Według US Census Bureau oraz ONZ i Banku Światowego ponad 47 milionów Amerykanów i do 650 milionów ludzi na całym świecie cierpi na jakąś niepełnosprawność. Każdy odwiedzający strony, które zaprojektujesz, musi być w stanie znaleźć informacje, których szuka, i wykonywać zadania, które zamierzają wykonać, niezależnie od tego, jak wygląda strona lub aplikacja. Wiele różnych czynników wpływających na tworzenie strony internetowej lub aplikacji może mieć wpływ na dostępność.
Bierzesz niebieską pigułkę - historia się kończy, budzisz się w swoim łóżku i wierzysz w to, w co chcesz wierzyć. Bierzesz czerwoną pigułkę - zostajesz w Krainie Czarów i pokazuję ci, jak głęboka jest dziura w króliku. - Macierz
Czy jesteś gotowy, aby zejść z królika dostępności ze mną? Będziemy musieli zanurkować w technicznych aspektach stron internetowych. HTML jest szkieletem strony internetowej, a CSS, JavaScript i obrazy wzbogacają HTML. Często osoby niedowidzące tracą te wszystkie ulepszenia. Chociaż dostępność jest głównie zadaniem programisty, czasami wymagania techniczne wymagane do zachowania lub zwiększenia dostępności wpłyną na wygląd strony internetowej. Oznacza to, że projekt, kopiowanie, doświadczenie użytkownika i rozwój muszą współpracować, aby zapewnić dostęp do elementów sterujących nawigacji, formularzy, przycisków, nagłówków, przycisków, łączy i innych elementów.
projektowanie, kopiowanie, wrażenia użytkownika i rozwój wymagają współpracy, aby mieć pewność, że elementy sterujące nawigacją, formularze, przyciski, nagłówki, przyciski, łącza itp. są dostępne
Osoby niewidome, niedowidzące, niepiśmienne lub uczące się niepełnosprawne korzystają z technologii wspomagających nawigację w Internecie. Czytniki ekranu są najczęściej stosowaną technologią wspomagającą w Internecie, te programy próbują interpretować to, co jest wyświetlane na stronie internetowej i przekazywać je użytkownikowi, zwykle poprzez konwersję tekstu na mowę, ale czasami za pomocą urządzenia wyjściowego brajla. Lupy ekranowe są również często używane w połączeniu z czytnikiem ekranu. Zazwyczaj program udźwiękawiający próbuje sparsować kod HTML z górnej części pliku HTML na dół i wypowiedzieć odpowiednie elementy użytkownikowi. W idealnej sytuacji program udźwiękawiający pozwoli użytkownikowi na przeniesienie wirtualnego kursora w dół strony w celu wypełnienia pól formularza, kliknięcia przycisków i dokonania wyboru z rozwijanych menu i innych elementów sterujących.
Aby dokładnie przetestować dostępność, musisz upewnić się, że witryna lub aplikacja działa dobrze na każdym z wielu dostępnych czytników ekranu. Na każdej platformie znajduje się kilka popularnych darmowych i / lub otwartych czytników ekranu SZCZĘKI , i NVDA . Użytkownicy Microsoft mogą korzystać z NVDA, podczas gdy komputery Apple i iOS są dostępne Voice Over która może powiększać kontrole klawiatury i czytać zawartość ekranu, a na urządzeniach Unix jest Orca . Przeglądarka Chrome ma dwie wtyczki wspomagające, ChromeVox do odczytu ekranu i ChromeVis dla powiększenia.
Większość problemów z dostępnością sieci pojawia się, gdy wirtualny kursor czytnika ekranu zostanie uwięziony w źle zaprojektowanej formie lub przeskoczy nad ważną kontrolką lub ważną częścią informacji tekstowej. Sprawdzenie, czy strony internetowe rzeczywiście nadają się do użytku, jest podobne do testowania przeglądarki, ponieważ każdy czytnik ekranu ma inne wymagania i ograniczenia. Dlatego ważne jest zrozumienie zachowania każdego czytnika ekranu. Potrzeby różnych czytników ekranu można dostosować, dodając różne specjalne znaczniki HTML do ważnych elementów strony.
Współczesny dynamiczny interfejs sieciowy może być szczególnie problematyczny dla dostępności, ponieważ ważne elementy są dynamicznie dodawane do strony przy użyciu JavaScript. Niestandardowe rozwijane menu, modały, podpowiedzi, zawartość akordeonu oraz dynamiczne błędy i powiadomienia mogą być trudne do zrozumienia dla czytelników ekranu z powodu podziału komunikacji pomiędzy HTML, JavaScript i czytnikiem ekranu. Natywny HTML i JavaScript nie mają możliwości przekazania aktualizacji strony (Document Object Model) do czytników ekranu. Programiści muszą przenieść "fokus" (wirtualny kursor czytnika ekranu) do części zmienionego interfejsu użytkownika. Kiedy modal otwiera się, programiści muszą skupić się na tym modalu, aby czytnik ekranu mógł odczytać tę zawartość, a użytkownik może ją zrozumieć i z nią korzystać.
WAI-ARIA może wypełnić luki między tym, co mówi surowy HTML strony, a tym, co widzą widzący użytkownicy
Odbywa się to za pomocą specjalnych tagów HTML o nazwie WAI-ARIA tagi. WAI-ARIA (Accessible Rich Internet Applications) może wypełnić luki między tym, co mówi surowy HTML strony, a tym, co widzą użytkownicy, zapewniając ustandaryzowany sposób dla programistów, aby nadać dodatkowe znaczenie stanom, właściwościom, relacjom, rolom i regionom na żywo, które czytnik ekranu inaczej by tego nie zrozumiał. Programiści mogą używać poziomu arii do wyjaśnienia czytelnikom hierarchii każdego nagłówka na stronie. Dzięki projektantom etykiet aria można dodać nagłówek opisujący cel oddzielnego elementu na stronie. Pomaga to programistom tworzyć wyraźne relacje między różnymi elementami. Programiści mogą również zwrócić uwagę na ważne elementy sterujące, etykietując je znacznikami arii-rola, na przykład przycisk menu rozwijanego będzie oznaczony etykietą: Aria-ma wyskakujące okienko: prawda.
Zobacz pióro Proste dostępne karty Scott Vinkle ( @svinkle ) na CodePen .
W HTML w powyższym przykładzie zakładki są tworzone przy użyciu nieuporządkowanej listy z klasami na każdym elemencie listy. JQuery przechwytuje zdarzenia kliknięcia po kliknięciu karty i dodaje do wybranej karty "aria-selected": "true" i "tab-widget__tab-content-active" i ukrywa inne karty dodając "wybrane przez arię": " false 'do pozostałych zakładek. W linii 127 ustawione są początkowe atrybuty zakładek, razem z tymi odsyłaczami pomocni czytelnicy rozpoznają, która zakładka jest widoczna. JavaScript on line 35 dodaje również obsługę klawiatur do kart. Reszta pliku obsługuje przechwytywanie zdarzeń kliknięcia i klawiatury, dzięki czemu jQuery może dodawać atrybuty "roli" i "prezentacji" do aktualnie wybranej karty.
Znaczniki Aria mogą pomóc czytnikom ekranu zinterpretować niestandardowe elementy sterujące jako przyciski opcji, gdy formant niestandardowy jest oznaczony etykietą: Aria-role = przycisk radiowy. Gdy aplikacja ma obszar obszaru izolowanego, który komunikuje informacje zwrotne lub aktualizacje użytkownikowi, można go oznaczyć tagiem regionu na żywo: Aria-live. Gwarantuje to, że po zmianie tekstu na tym elemencie zostanie on automatycznie przekazany użytkownikowi za pomocą czytnika ekranu.
Odświeżanie stron jest kluczową częścią sieci dla czytników ekranu, ponieważ po odświeżeniu strony sygnalizuje czytelnikowi ekranu, że powinien ogłosić nową stronę użytkownikowi i ponownie przeczytać zawartość strony użytkownikowi. Oznacza to, że aplikacje internetowe na jednej stronie stanowią szczególne wyzwanie dla dostępności. W jednej aplikacji strony nie ma pełnej strony odświeżania, więc czytnik ekranu, a tym samym użytkownik nie zostanie powiadomiony o zaktualizowanej zawartości. W rezultacie użytkownik nie otrzyma informacji zwrotnej na temat swoich działań. Najlepszym rozwiązaniem jest emulacja zachowania odświeżania strony natywnej. Po wczytaniu widoku zaktualizuj tytuł strony i ogłosić go użytkownikowi.
Pełna specyfikacja WAI-ARIA jest obsługiwana przez W3, podobnie jak specyfikacje samego HTML w ramach inicjatywy Web Accessibility Initiative (WAI), ale czasami wskazówki mogą być bardziej przydatne niż specyfikacje, więc oto kilka ogólnych wskazówek dla projektantów:
Istnieje kilka prostych decyzji, które możesz podjąć podczas tworzenia strony internetowej, która uczyni witrynę bardziej dostępną, bez zbytniego zagłębiania się w specjalne znaczniki ułatwień dostępu czy testowania czytników ekranu. Upewniając się, że Twój kod HTML przekazuje znaczenie poprzez jego strukturę, pomożesz czytelnikom ekranu przetwarzać informacje w taki sam sposób, w jaki pojawiają się na stronie dla widzących użytkowników. Jest to ważne dla użytkowników, którzy używają lupy w połączeniu z czytnikiem ekranu.
Stosowanie odpowiedniego znacznika HTML dla nagłówków, list, tabel i innych elementów umożliwia czytnikowi ekranu klasyfikowanie struktury strony dla użytkownika w znany sposób. W przypadku bardziej złożonych układów HTML5 zapewnia dodatkowe elementy, takie jak
Zaszliśmy bardzo daleko w tej króliczej dziurze, ponieważ potencjalni beneficjenci tej całej pracy są szerszą grupą, niż moglibyście przypuszczać. Jeśli kiedykolwiek próbowałeś użyć aplikacji mobilnej jedną ręką, ponieważ twoja druga ręka coś nosi, jeśli kiedykolwiek próbowałeś użyć myszy z ręką, która nie zdominowała, z powodu obrażeń, które zostały ci upośledzone. I czy to nie jest cudowne, gdy palce są lepkie i nadal możesz poruszać się po stronie internetowej za pomocą klawiatury z palcami? Wszyscy jesteśmy niestety podatni na upośledzenia wynikające ze starzenia się, takie jak utrata pamięci, niedosłyszenie, pogorszenie widzenia i ograniczony ruch.
Potęga sieci ma swoją uniwersalność. Dostęp dla wszystkich bez względu na niepełnosprawność jest niezbędnym aspektem. - Tim Berners-Lee, dyrektor W3C i wynalazca World Wide Web
Wyróżniony obraz, obraz dostępności przez Shutterstock.