Jakie są minimalne kroki, które należy wykonać, aby zapewnić dostępność mojej strony internetowej?


35

Staram się przestrzegać bardzo ważnego standardu, który muszę przyznać, że do niedawna go ignorowałem. Chcę mieć pewność, że moje strony są dostępne dla dużej części osób niepełnosprawnych. Skupiam się głównie na samouczkach, które intensywnie wykorzystują tekst i obrazy, ale nie mają wideo / flash ani żadnych animacji.

Jaka jest lista kontrolna, którą mogę stosować, aby zapewnić, że wiele osób niepełnosprawnych będzie miało dobre wrażenia podczas korzystania z mojej strony internetowej i jakie niepełnosprawności powinienem być najbardziej świadomy?

Wiem, że nie mogę zadowolić wszystkich. Przeszedłem wytyczne W3C , jednak nie jestem do końca pewien, jakie standardy mnie dotyczą. Nie buduję aplikacji internetowych, tworzę głównie wiki, takie jak wymiana informacji, blogi i okazjonalne forum.


uxexchange.com?
Bobby Jack

Odpowiedzi:


18
  • Upewnij się, że każdy obraz ma tekst alternatywny.
  • Upewnij się, że Twój schemat kolorów jest odpowiedni dla osób ze ślepotą kolorów.
  • Dla osób niedowidzących zaoferuj układ o wysokim kontraście lub duży tekst.
  • Upewnij się, że linki mają sens, gdy są odczytywane poza kontekstem (tzn. Nie pisz po prostu „kliknij tutaj”).
  • Upewnij się, że witryna nadal oferuje pełną podstawową funkcjonalność, jeśli użytkownik nie obsługuje JavaScript.

W3 oferuje kilka podstawowych wskazówek dotyczących dostępności za pośrednictwem swojej strony internetowej . Joe Clark ma wersję online swojej książki „Budowanie dostępnych stron internetowych”, którą można wyświetlić za darmo, która zawiera wiele przydatnych informacji.


1
Istnieje kilka zastrzeżeń dotyczących zasady „tekstu alternatywnego”. Niestety pracowałem z ludźmi, którzy traktują to jako twardą i szybką zasadę - tj. KAŻDY obraz MUSI mieć atrybut alt. Następnie dodają takie elementy, jak „Logo naszej firmy” do obrazu logo i „duży niebieski„ t ”do obrazu powiązanego z kontem na Twitterze.
Bobby Jack

Dzięki tagowi alt uważam, że KAŻDY obraz powinien go mieć. Podczas pracy z czytnikiem ekranu musisz powiedzieć mu, co ma robić. Jeśli twój obraz jest po prostu atrakcyjny wizualnie i nie ma innej wartości, użyj alt = "", aby czytnik ekranu wiedział, że go zignorować. Jeśli twój obraz jest wykresem, a może nagłówkiem, pamiętaj o dołączeniu informacji do znacznika alt alt, aby czytnik ekranu, a także osoby wyłączające obrazy, nie umknęły.
ph33nyx

8

Uczynienie semantycznej marży znacznym krokiem w kierunku dostępności jest ogromnym krokiem, jeśli można poruszać się po witrynie bez stosowania CSS, a treść ma sens, to wszystko inne to tylko wizualny sos!


1
I dużo więcej zabawy w nagi dzień CSS :)
Tim Post

2
Haha, oczywiście! Poważnie, wiele osób uważa, że ​​dostępność ma związek z projektowaniem, jest dokładnie odwrotnie, jeśli możesz stworzyć swoje treści, aby działały bez żadnego projektu, to maszyna (a zatem człowiek) zawsze będzie mogła uzyskać dostęp to.
Toby

7

Po pierwsze, „niepełnosprawni” oznaczają nic!

Spójrzmy więc na niektóre grupy osób, które musisz sprawdzić, czy jesteś swoją witryną.

Biedna osoba, która ma tylko notes z małym ekranem

Trzeba tylko sprawdzić, czy z witryny można korzystać, gdy okno przeglądarki jest małe, bez zbytniego bólu.

Osoba niewidoma na kolory

Czy ktoś może korzystać z Twojej witryny, nie widząc koloru ikon itp., Obrazując, że uzyskiwałeś do niej dostęp na monitorze czarno-białym.

Osoba o złej stronie.

Gdy zmieniasz rozmiar czcionki w przeglądarce, cały tekst staje się większy w Twojej witrynie, a układ nadal jest OK. Czy witryna może być nadal używana na małym monitorze?

Czy Twoja witryna korzysta z układu o wysokim kontraście, jeśli nie, użytkownik może łatwo przejść na układ o wysokim kontraście?

Osoba, która nie może korzystać z myszy

Czy osoba, która nigdy wcześniej nie korzystała z Twojej witryny, ma dostęp do wszystkich funkcji / informacji za pomocą klawiatury. (Czy klawisz Tab działa w użyteczny sposób?)

Ktoś ze słabymi umiejętnościami czytania

Używasz prostego języka angielskiego w jak największym stopniu?

Ktoś, kto nie jest dobry w uczeniu się nowych rzeczy.

Czy projekt Twojej witryny jest oparty na innej witrynie, z której użytkownicy już wiedzą, jak korzystać?

Osoba niewidoma.

To jest trudne i większość tego, co czytasz, nie nadaje się do użytku !!
Najpierw zwróć uwagę na wszystkie inne problemy z dostępem, ponieważ jest o wiele więcej osób o słabym wzroku lub takich, które nie mogą korzystać z myszy niż osoby wiążące.

Następnie zrozum swoje cele , np. Jeśli witryna jest witryną rezerwacji hotelowych, może być konieczne podanie numeru telefonu do rezerwacji, a następnie udostępnienie informacji o hotelu.

Większość osób niewidomych ma trudności z korzystaniem z interaktywnych witryn, z których wcześniej nie korzystały, jednak strona jest dobrze zaprojektowana.

Więc czy powinieneś podać opcję braku sieci? (Telefon? Osoba, która je odwiedza w celu wypełnienia formularza itp.)

Po pierwsze, czy można używać witryny bez żadnych obrazów? (Tekst alternatywny to jeden ze sposobów na to)

Biorąc pod uwagę, że oprogramowanie do czytania odczytuje stronę od góry do dołu, czy można ją w ten sposób zrozumieć?

Bardzo trudno jest sprawić, by strona ze złożoną nawigacją była łatwa w użyciu dla osoby wiążącej, również osoba wiążąca nie może wiedzieć, że część strony została zaktualizowana przez JavaScript i należy ją ponownie przeczytać.

Zmiana koloru elementów w celu zmiany stanu również nie jest dobrym rozwiązaniem.

Jedynym sposobem, aby dowiedzieć się, jak sprawić, by strona działała dobrze dla osób wiążących, jest sprawdzenie, jak osoba wiążąca używa czytnika ekranu na niektórych stronach internetowych. Żaden ze standardów nie jest wystarczająco dobry, po prostu mówią ci, czego nie powinieneś robić, ale przestrzeganie ich nie wystarcza (chyba że masz tylko statyczny tekst jak na stronie z gazetami).


1
Uwielbiam pierwsze zdanie w tej odpowiedzi! (i oczywiście także inne zdania)
Tim Post



2

Uważam, że książka Mark Pilgrim do pobrania za darmo „ Zanurz się w dostępie” jest użytecznym punktem odniesienia na ten temat. Pochodzi z 2002 roku, ale nadal jest bardzo trafny. Rady takie jak „użyj wdzięcznej degradacji” nie zestarzeją się.




1

Odpowiedź nr 1 jest prosta: napisz poprawny, poprawny semantycznie kod HTML / CSS !!! Wszystkie powyższe sugestie są dobre. Oto lista kontrolna, którą napisałem kilka lat temu, która pokazuje kilka rzeczy, które powinieneś sprawdzić na wszystkich stronach: https://forge.iowa.gov/wiki/index.php/Web_Checklist . Zakłada się, że masz pasek narzędzi Web Developer na FF, ale jest to darmowy i łatwy do zdobycia.

Kilka prostych rzeczy, które czuję, mogą naprawdę zmienić:

W przypadku formularzy należy użyć znacznika LABEL. To sprawia, że ​​większy obszar do kliknięcia na rzeczy takie jak przyciski opcji, a także wiąże rzeczy do czytników ekranu.

Inną rzeczą, która moim zdaniem jest często niewłaściwie używana, są tagi h1, h2, h3 ... Jeśli są właściwie używane, mogą pomóc w łatwym poruszaniu się po Twojej stronie. Jeśli po prostu je stylizujemy i używamy ich nie chcąc, jest to bardzo mylące dla czytników ekranu i innych urządzeń I / O bez myszy.

Miło jest również pozwolić komuś, kto porusza się po Twojej stronie bez całego twojego pięknego CSS i obrazów, aby pomijać powtarzający się kod do treści. Zwykle osiąga się to za pomocą łącza SKIP ukrytego w CSS. Na przykład, <a href="#skipnav" class="noshow">Skip past navigation to content.</a>aby umożliwić pominięcie długiej nawigacji.

Jak stwierdził Tony, jednym z najlepszych testów jest usunięcie wszystkich dzwonków i gwizdów na stronie i sprawdzenie, czy nadal ma to sens.


Na temat tagów ALT ... każdy obraz powinien mieć tag ALT. Jeśli obraz jest treściowy, powinien zawierać coś opisowego w znaczniku ALT, jeśli jest to tylko dekoracja, użyj pustych cudzysłowów, alt=""aby wskazać, że czytniki ekranu takie jak JAWS mogą je pominąć.
ph33nyx
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.