P-Programowanie

Strona przystosowana dla niewidomych

Ostatania modyfikacja: 27 września 2017, kategoria: Html & Css

Niezależnie od tego czy posiadasz małego bloga, średniej wielkości stronę internetową czy prowadzisz stronę dla jakiejś firmy, powinieneś zatroszczyć się aby była dostępna dla jak największego grona odbiorców. Prowadząc źle zaprojektowany serwis musisz mieć świadomość, że tracisz pewną ilość potencjalnych odbiorców i czytelników.

Po co i komu

Internet jest prężnie rozwijającym się źródłem wszelkich informacji a także rozrywki. Korzystają z niego wszyscy ludzie we wszystkich kategoriach wiekowych. Czy zastanawiałeś się nad dostępnością Twojej strony lub bloga?

Każda strona dostępna w internecie powinna zapewniać maksymalne wsparcie wszystkim grupom wiekowym jak i społecznym. Wrzucanie do sieci stron, które nie naddają się do czytania ludziom z problemami wzrokowymi wydaję się w XXI wieku niedopuszczalne. Niestety ciągle większość stron jest jaka jest..

Problem ze wzrokiem dotyka nie tylko osób niepełnosprawnych. Istnieje prosta zależność pomiędzy wzrokiem a wiekiem człowieka.  Z powodu wysokiej informatyzacji problemy ze wzorkiem mają także osoby młode. Ta grupa wciąż będzie się zwiększać.

Wiele stron odstrasza wyglądem już przy pierwszym kontakcie z użytkownikiem. Chociaż sam nie narzekam na swój wzrok, wchodząc na stronę z małą czcionką i kiepskim kontrastem najzwyczajniej ją zamykam, ponieważ jest niewygodna.

Poprawna składnia HTML i CSS

Istnieje szereg prostych zaleceń dotyczących tworzenia stron, aby były maksymalnie przyjazne ludziom niewidomym. Pierwszym ważnym krokiem  jest trzymanie się standardów i przestrzeganie reguł języka. Osoby z problemami wzrokowymi często używają programów głosowych podczas odwiedzania poszczególnych stron. Jeżeli struktura dokumentu jest źle napisana i zawiera błędy, wtedy program nie poradzi sobie z jej odczytaniem.

Istnieje wiele wytycznych dla webmasterów, mówiących o tym jakie normy powinna spełniać strona internetowa. Dodatkowo bardzo ważną kwestią jest fakt, że strona zoptymalizowana dla osób niewidomych to także strona zoptymalizowana dla SEO.

Tworząc stronę, przed wrzuceniem do sieci warto sprawdzić szablon w walidatorze HTML konsorcjum W3C. Wytknie nam on wszystkie błędy i wskaże miejsca gdzie należy ich szukać. Błędy, które zgłasza walidator nigdy nie są widoczne gołym okiem, więc wielu początkujących webmasterów nie zwraca na nie uwagi. Problem pojawia się z chwilą, gdy strona ma zostać przetworzona przez program głosowy, który następnie ją odczyta.

Lista najczęstszych błędów

  • brak tekstów alternatywnych dla wszelkich obrazków
  • niedomknięte znaczniki
  • nie trzymanie się standardu w jakim piszemy, mało kto odróżnia HTML od XHTML
  • niepoprawne zagnieżdżanie wszelkich znaczników
  • w strukturze HTML dokumentu, kod menu znajduje się przed treścią strony (złe dla SEO i nieoptymalne dla osób niewidomych)

Strona przyjazna dla użytkownika

Istnieją utarte zwyczaje dotyczące tworzenia stron internetowych aby były przyjazne użytkownikom. Chodzi tutaj przede wszystkim o wygląd i rozmieszczenie poszczególnych elementów witryny. Przy odrobinie szczęścia można trafić na studiach na przedmiot  „Komunikacja Człowiek Komputer”. Uczy się na nim wzajemnego oddziaływania między użytkownikiem a komputerem poprzez interfejs użytkownika, który projektuje właśnie twórca strony.

O co konkretnie chodzi? Dobrym przykładem jest wyszukiwarka na stronie, która zawsze powinna znajdować się w prawym górnym rogu. Umieszczając wyszukiwarkę w stopce strony popełniamy błąd, ponieważ nikt nigdy jej tam nie szuka.

Użyteczność szablonu zależy od rozmieszczenia poszczególnych sekcji. Najlepszy szablon to prosty szablon, zbudowany w bardzo standardowy sposób:

przyjazna strona

Swego czasu pewien portal udostępniający usługę darmowych blogów, wprowadził szablony z dwiema kolumnami pionowego menu jedna obok drugiej. Nie było możliwości połapać się na stronie.

Zwróć uwagę na sposób w jaki piszę artykuły. Definicje poszczególnych słów często umieszczam na żółtym polu. Poszczególne akapity oddzielam do siebie osobnym nagłówkiem, który sugeruje o czym będzie mówić akapit. Dzięki takim operacjom blog jest: estetyczny oraz wygodny. Artykuły pisane jednym ciurkiem, czyta się bardzo źle.

Na co warto zwrócić uwagę

  • wyszukiwarka zawsze znajduje się w prawym górnym rogu strony
  • przyciski zmiany wielkości czcionki i zmiany języka powinny znajdować się na górze w okolicy loga
  • strona powinna posiadać menu pionowe lub poziome lub oba jednocześnie, jednak trzeba je zaprojektować z głową
  • nad treścią powinna znajdować się aktualna ścieżka/lokalizacja ułatwiająca poruszanie po stronie
  • czcionka powinna być takiej wielkości aby dało się wygodnie czytać, nie piszemy artykułów dla robota Google tylko dla ludzi

Należy pamiętać, że inne zasady obowiązują podczas tworzenia prywatnego bloga, a inne podczas tworzenia strony firmy.

Dodatkowe ułatwienia

Jeżeli Twoja strona spełnia założenia dwóch pierwszych akapitów, możesz śmiało stwierdzić, że jest przystosowana dla osób niewidomych lub dla osób ze słabym wzorkiem. Ponadto jest wtedy zoptymalizowana pod kątem SEO.

Sam jesteś w stanie ocenić, dla jakiej grupy docelowej tworzysz serwis. Jeżeli będą to osoby starsze lub niepełnosprawne warto zastosować dodatkowe funkcje, usprawniające użytkowanie. Chodzi tu przede wszystkim o możliwość zmiany wielkości czcionki dokumentu i możliwość zmiany kolorystyki strony. Trzeba zadbać aby tło i literki nie zlewały się, aby był między nimi odpowiedni poziom kontrastu.

Takie skrypty bardzo łatwo napisać w JavaScript. W pierwszym wypadku tworzymy tablicę wszystkich interesujących nas obiektów, w których chcemy zmienić rozmiar czcionki. Możemy zmienić ją w całym dokumencie, lub tylko w interesujących nas sekcjach. Elementy można zapisywać do tablicy po określonym identyfikatorze lub nazwie klasy, a także po prostu po nazwie znacznika. Skrypt dotyczący zmiany kolorystyki to zwyczajna podmiana arkusza stylów, więc roboty jest jeszcze mniej.

Jeżeli tworzysz stronę przystosowaną dla ludzi niepełnosprawnych i oni będą grupą docelowych odbiorców, warto rozważyć umieszczenie dodatkowych znaczników. Chodzi o to, aby przed treścią dokumentu dodać znacznik zawierający tekst: „TREŚĆ STRONY”, a przed menu znacznik zawierający słowo „MENU STRONY”. To samo można wykonać dla poszczególnych fragmentów witryny.

Co ciekawe te napisy można ukryć używając CSS. Tzn. że będą one „widoczne” dla programów czytających strony na głos, jednak normalny użytkownik obiegający stronę wzorkiem nie będzie wstanie ich zobaczyć. Ukrywając takie znaczniki nie używaj selektora „display:none„, tylko ustawiaj minusowe marginesy, tak aby znacznik zniknął

Użytkownik Mateusz napisał:

16 stycznia 2014


Akurat tego szukałem!

Właśnie szukałem artykułu na temat przystosowania strony dla osób z wadami wzroku (słabowzroczność, daltonizm) i znalazłem dużo informacji potrzebnych do napisania projektu na KCK właśnie.

Dzięki! :)

Użytkownik Krzysztof napisał:

07 kwietnia 2016


Witam

Potrzebuję zaimplementować na stronce którą edytuję taki skryp, który robił zwiększenie i zmniejszenie czcionki oraz zmianę kontrastu strony. Czy mogę prosić o pomoc jakich skryptów użyłeś i trochę instrukcji.

Pozdrawiam

Użytkownik Leszek napisał:

06 czerwca 2016


Hej! Tutaj bardzo fajne narzędzie do zmiany wielkości czcionki i kontrastu: https://github.com/tiagoporto/accessibility-buttons
Nie jest to do końca wg WCAG 2.0, bo wielkość tylko z małej na dużą i odwrotnie (bez stopniowego powiększenia), a kontrast czarno-biały i vice-versa, ale jako podstawa wystarczy. Na http://www.altervisum.org.pl można sprawdzić. I jeszcze jedno co do opisów alternatywnych: Bootstrap oferuje taką klasę elementów sr-only. Np: opis obrazka – audiodeskrypcja sprawia, że opis jest tylko widoczny dla screen readerów

Zachęcam Cię do zostawienia komentarza!

Ilość znaków: 0