Archiwum dla kategorii ‘podstawy’

Dostępne formularze - etykiety cz. 2.

18 gru 2009

Poprzednio skupiłem się na technicznych aspektach oznaczania elementów formularza. Jak obiecałem pociągnę ten temat dalej (trochę mi to zajęło niecierpliwych przepraszam ;-) ).

Grupowanie elementów

Tak jak istotna do zrozumienia idei jest najczęściej kolejność pól formularza tak, zwłaszcza w przypadku bardziej rozbudowanych, konieczny staje się ich podział na logicznie powiązane ze sobą grupy. Na fali zainteresowania użytecznością często w warstwie wizualnej podział formularza jest realizowany, i dobrze. Ale czy przy okazji pamiętamy o użytkownikach, którzy z tej warstwy nie korzystają?

W poprzednim wpisie wspomniałem o znacznikach <fieldset> i <legend>. To dwa powiązane ze sobą elementy często ignorowane, prawdopodobnie ze względu na pewne niedogodności w stylowaniu. To właśnie one najlepiej nadają się do organizowania formularzy. Czytaj dalej artykuł "Dostępne formularze - etykiety cz. 2." »

Dostępne formularze - etykiety cz. 1.

20 paź 2009

Formularze są, zwłaszcza w dobie nacisku na interakcje z użytkownikiem, nieodłączną częścią stron internetowych. Mogą jednak użytkownikom m.in. korzystającym ze screenreaderów przysporzyć trudności jeśli podczas ich tworzenia nie mamy na uwadze kilku ważnych aspektów

Ponieważ temat jest obszerny postanowiłem poświęcić mu kilka wpisów. Ten, który właśnie czytasz jest pierwszym, a zaczynamy od rzeczy bardziej oczywistych, ale czy na pewno?
Czytaj dalej artykuł "Dostępne formularze - etykiety cz. 1." »

Skip linki są (nie)potrzebne

14 paź 2009

Jak obiecałem - zajmuję się tematem tzw. skiplinków. Skiplink to anglicyzm oznaczający dodatkową nawigację (często ukrytą w warstwie wizualnej) pozwalające na szybkie przemieszczanie się pomiędzy elementami składowymi strony. Najczęściej umieszczane na początku strony pozwalają przeskoczyć np. wprost do treści z pominięciem nawigacji.Ich wykorzystanie to realizacja m.in. wytycznej 13. WCAG - Zapewnij jasny mechanizm nawigacyjny.

Podczas badania stron serwisów partii politycznych brak dodatkowej nawigacji w połączeniu z brakiem jakichkolwiek nagłówków i rozmieszczeniem elementów na stronie metodą to co po lewej (menu) pierwsze na stronach PSL wprawiał użytkowników w nie lada frustrację. A to dlatego, że biedny użytkownik musiał za każdym razem odsłuchać nazwy wszystkich elementów w menu zanim doczłapał do treści.

Układ zamiast nawigacji

W tytule postawiłem śmiałą tezę, że skip linki są niepotrzebne. Bo kto powiedział, że jasny mechanizm nawigacyjny da się zapewnić tylko w ten jeden sposób? Z obserwacji wiem, że osoby niewidome trafiając na "nową" stronę zaczynają od sprawdzenia czy strona ma nagłówki Hx. Dopiero później zwracają uwagę na alternatywne sposoby nawigacji. Jeśli więc na stronie pojawi się <h2>Menu główne</h2> ... <h2>Tytuł artykułu</h2> - zapewnimy użytkownikowi mechanizm nawigacyjny co jest naszym celem.

Nie bez znaczenia jest też układ elementów w kodzie źródłowym strony. Jeśli treść znajdzie się przed nawigacją (CSS pomoże ładnie to ułożyć potem na stronie) to w znaczącej większości wypadków zapewnimy użytkownikowi szybki dostęp do informacji, której akurat poszukuje. Skip link do treści z oczywistych powodów potrzebny nie będzie, pozostaje ew. linkowanie do nawigacji.

Jeśli dodatkowo będziemy konsekwentnie trzymać się układu i kolejności elementów na poszczególnych stronach - sukces nieomal murowany.

Nieomal, ponieważ kwestia dotyczy nie tylko niewidomych ale również użytkowników przeglądarek tekstowych (mało ich już) oraz urządzeń mobilnych. Ja sam nie raz musiałem przebierać palcami po klawiszach telefonu by przewinąć pojawiająca się stronę. Dla tychże skiplinki będą nieocenioną pomocą, a ponieważ ich realizacja nie wymaga niesamowitych umiejętności i czasu to zamiast wdawać się w jałową polemikę lepiej od razu je dodać ;-)

Na koniec kilka uwag technicznych: Czytaj dalej artykuł "Skip linki są (nie)potrzebne" »

Jak to schować i dlaczego nie display:none

05 paź 2009

Strona zrobiona semantycznie, kod się waliduje, a części nawigacji i objaśnień nie słychać, czemu?

Najczęściej dlatego, że webdeveloper skutecznie to schował. Zdarza się, że do ukrywania elementów, które maja być widoczne po wykonaniu określonej akcji (przy okazji uwaga: nie ma myszki, nie ma mouseover / :hover !) albo co gorsza do ukrycia przed widzącymi dodatkowych elementów przeznaczonych dla użytkowników screenreaderów wykorzystywane są niewłaściwe style:

  • display:none / visibility:hidden; ich użycie spowoduje, że element będzie skutecznie ukryty przed screenreaderami.
  • Podobnie w przypadku rzadziej spotykanego width:0; height:0;. Zerowymiarowe elementy wypadają z biegu (flow) dokumentu i w takiej postaci zostaną pominięte przez wiele z czytników.
  • Nieco lepiej wypada połączenie overflow:hidden z mocno ujemnym wcięciem text-indent (np. text-indent:-10000px;). Jednak w przypadku wystąpienia w takim elemencie linku w warstwie wizualnej może on się uwidocznić jako obszar aktywny od oryginalnego miejsca położenia do obecnego wymuszonego przez ujemne wcięcie. Jak to może wyglądać? Ano pojawiająca się ni stąd ni zowąd "łapka" lub obramówka linku w przypadku uzyskania fokusu.

Zatem jak? Czytaj dalej artykuł "Jak to schować i dlaczego nie display:none" »

Opera Software edukuje

15 lip 2008

Opera Web Standard Curriculum to nowa inicjatywa firmy Opera Software zmierzająca do poprawienia jakości internetu. Jest to jeden z programów edukacyjnych firmy kierowany w założeniu do początkujących webmasterów. Ben Buchanan, jeden z autorów materiałów szkoleniowych mówi, że Opera chce poprzez swoje działania zapełnić lukę, która zauważyła na rynku: "większość bazujących na standardach artykułów to materiały powyżej poziomu dla początkujących". Czytaj dalej artykuł "Opera Software edukuje" »

Treść czytelna i zrozumiała

17 mar 2008

Dziś rzecz o mniej technicznej kwestii dostępności, czyli o przejrzystej treści.

To zagadnienie podzieliłem na trzy istotne obszary:

  1. zrozumiały język przekazu
  2. intuicyjne polecenia i opcje
  3. zrozumienie treści niezależne od medium

Czytaj dalej artykuł "Treść czytelna i zrozumiała" »

Dostępność a użyteczność...

30 sty 2008

... to dwa terminy często mylone, czasem mieszane.

Dostępność już raz definiowałem, więc nie będę się powtarzał. Użyteczność to najoględniej mówiąc ergonomia serwisu WWW. I to zarówno pod względem wygody fizycznej obsługi jak i wychodzenie na przeciw schematom myślenia przy podejmowaniu przez użytkownika różnych akcji. Np. proces kupowania w sklepie internetowym. O użyteczności więcej poczytasz np. na blogu Tomka Karwatki

Jaka jest wzajemna relacja obu dziedzin wiedzy? Opinii tyle, ile możliwości ;-)

Moim skromnym zdaniem to dwie odrębne dziedziny (żadna nie zawiera się w pełni w drugiej), dla których można z mniejszą lub większą dozą pewności określić pewien obszar wspólny. Czytaj dalej artykuł "Dostępność a użyteczność..." »

Dostępny (?) Flash

12 sty 2008

Flash jest chyba najpopularniejszą obecnie technologią stosowaną do prezentacji multimedialnych/interaktywnych elementów na stronach www. Jednocześnie nieomal równie często nadużywaną.

Niestety ze względu na swoja budowę nastręcza sporej ilości problemów w dziedzinie dostępności. Czytaj dalej artykuł "Dostępny (?) Flash" »

Google, dostepność i atrybuty alt

11 sty 2008

Pisałem o korzyściach tworzenia dostępnych stron, pisałem o konieczności zapewnienia alternatywy dla treści audiowizualnej. Niejako potwierdzeniem obu opisanych zagadnień jest wideo wpis na oficjalnym blogu dla webmasterów prowadzonym przez programistów google'a (Google Webmaster Central Blog). O stosowaniu alt'ów opowiada nie kto inny jak Matt Cutts, jeden z głównych, a na pewno najlepiej znanych w blogosferze, programistów Google.

Materiał, z racji odnoszenia się do zupełnych podstaw, jest kierowany raczej do mniej zorientowanych w temacie. Nawiązanie do niego dobrze wpisuje sie tym samym w formułę mojego bloga. Starzy wyjadacze pewnie chętnie zerkną z czystej ciekawości ;-) Przedstawicieli obu grup zapraszam do zapoznania z materiałem.

Notkę o wideo wygrzebałem na blogu Marketing w Internecie.

Section 508 (Sekcja 508)

09 sty 2008

To kolejne ze słów-kluczy z którymi osoby zajmujące się dostępnością niechybnie się spotkają.

Sekcja 508 to fragment dokumentu "The Rehabilitation Act (29 U.S.C. 794d)" pod tytułem "Electronic and Information Technology" (Elektronika i technologia informacyjna). Jest to akt prawny Kongresu Stanów Zjednoczonych regulujący i gwarantujący prawa osób niepełnosprawnych. Jego polskim odpowiednikiem jest Karta Praw Osób Niepełnosprawnych.

Sekcja 508 to nowelizacja, która została dodana do aktu w 1986 roku, jako konieczna odpowiedź na nowe technologie i związane z nimi nowe zagadnienia prawne. W 1997 z podobnych przyczyn cała sekcja 508 została całkowicie zmieniona. Zainteresowanych szczegółową historią odsyłam na angielskojęzyczną stronę Wikipedii, lub oficjalny rządowy serwis informacyjny. A my skupmy się na konsekwencjach dokumentu. Czytaj dalej artykuł "Section 508 (Sekcja 508)" »


O ile nie jest to stwierdzone inaczej, wszystkie materiały na stronie są dostępne na licencji Creative Commons Uznanie autorstwa 2.5 Polska.