echo()

Aby poprawić dostępność tabel, trzeba najpierw uzmysłowić sobie w jaki sposób czytniki ekranu je odczytują. Przede wszystkim czytnik dostarcza użytkownikowi jednowymiarowy widok strony. Nie ma możliwości odczytania tabeli np. od dołu do góry, nie dają one również możliwości przeskakiwania od komórki w górnym rogu, do komórki pośrodku tabeli. Czytnik odczytuje tabelę wiersz po wierszu, rozpoczynając od lewej strony a kończąc na prawej, komórka po komórce(to jest tzw. linearyzacja tabeli). Zatem użytkownik, który „widzi” stronę za pomocą urządzenia czytającego nie jest w stanie np. odczytać tylko interesujących go danych, a pozostałe zignorować.

Przykład odczytu prostej tabeli przez czytnik:

1. Wiersz 1 kolumna 1
2. Wiersz 1 kolumna 2
3. Wiersz 2 kolumna 1
4. Wiersz 2 kolumna 2

Jeżeli tabele używane są do prezentacji treści, dla użytkownika nie jest ważne w którym wierszu lub kolumnie aktualnie się znajduje. Inaczej jest w sytuacji, gdy tabela użyta jest zgodnie z jej semantycznym przeznaczeniem – do prezentacji danych. Wówczas niezwykle istotne jest używanie nagłówków kolumn i wierszy. Dzięki temu, przy przechodzeniu do kolejnego wiersz/kolumny użytkownik zostanie powiadomiony, w którym miejscu tabeli aktualnie się znajduje.

Jak zapewnić dostępność tabel:

1. Używanie elementów th do zdefiniowania nagłówków tabeli. Ewentualnie można zastosować znacznik td z atrybutem scope np. td scope=”col”, td scope=”row”. Wartość atrybutu określa czy nagłówek jest dla kolumny czy dla wiersza.
2. Używanie elementu caption w calu dodania podpisu do tabeli. Jeżeli tabela nie posiada widocznego podpisu, opis należy umieścić w elemencie table w atrybucie title lub summary.
3. W przypadku tabel złożonych(więcej niż jeden poziom logiczny) w elementach td należy używać atrybutu headers, np.

Struktura kodu HTML:

Jak widać w artubucie headers należy umieścić nazwy id wszyskich nagłówków, które odnoszą się do danej komórki.

Na koniec ciekawostka: dość dawno temu potępiono używanie tabel do celów zarządzania układem strony. Argumentów przytoczono na ten temat wiele, głównie z dziedziny semantyki. Warto na ten temat spojrzeć również od strony dostępności witryny. Powiedzmy, że mamy taką stronę zbudowaną na tabeli:

Oto w jakiej kolejności zostaną odczytane poszczególne części witryny:

1. Baner górny i logo firmy
2. Łącze do artykułów
3. Nagłówek tekstu wstępnego
4. Dane kontaktowe firmy
5. Łącze do produktów
6. Treść tekstu wstępnego
7. Baner reklamowy 1
8. Łącze do oddziałów
9. Baner reklamowy 2
10. Łącze do kontaktu
11. Baner reklamowy 3

Nie trzeba dużej wyobraźni by stwierdzić, że dla osoby posługującej się czytnikiem, dostarczona treść będzie trudna do ogarnięcia. Zatem kolejny argument za tym, by zrezygnować z tabel do celów zarządzania układem treść na stronie.

Dla tych, którzy interesują się dostępnością witryn internetowych polecam bardzo ciekawy raport, dotyczący użytkowników czytników ekranowych. Naprawdę można z niego wyciągnąć wiele ciekawych wniosków, które pomogę w budowaniu bardziej dostępnych witryn. Polecam! Survey of Preferences of Screen Readers Users

Brzmi jak herezja a jednak jest to możliwe(no w każedym razie korzystanie z niektórych dobrodziejstw Firebuga). Ostatnio natknęłam się na skrypt, który to umozliwia. To Firebug Lite. Używanie skryptu jest banalne: wystarczy do strony dodać następujący kod:

i już możemy się sieszyć firebugiem nawet pod IE6. Jak dla mnie rewelacja. Teraz czekam na podobne rozwiązanie wtyczki Web Developer

Dla wszystkich Web Developerów wciąż poszukujących ciekawych skryptów do wykorzystania na stronie:

75(Really) Useful JavaScript Techniques

“Dobry programista wiesza się wraz ze swoim programem”

Lubię JavaScript między innymi za to, że te same operacje można wykonywać na kilka różnych sposobów. Oto przykład: powiedzmy, że mamy następującą, prostą funkcję:

function hello(sTekstPowitalny)
{
     alert(sTekstPowitalny);
}

W samej funkcji nie ma nic nadzwyczajnego. Ot, funkcja wyświetlająca komunikat z tekstem podanym jako jej argument. Jednak w obrębie funkcji możemy użyć również innego odwołania, niż nazwa argumentu. Otóż JavaScript udostępnia nam specjalny obiekt arguments, dzięki któremu możemy odwoływać się do kolejnych parametrów funkcji. Np.

function hello(sTekstPowitalny)
{
     alert(arguments[0]);
}

Jak widać do kolejnych argumentów możemy odwoływać się podając jako indeks kolejne numery, przy czym pierwszy argument ma indeks = 0. Dzięki temu możemy np. iterować po wszystkich parametrach funkcji, co czasem może okazać się bardzo wygodne.

Obiekt arguments udostępnia również bardzo przydatną właściwość: length, dzięki której możemy dowiedzieć się ile argumentów przekazano do funkcji. Np.

function ileArgumentow()
{
     alert(arguments.length);
}

ileArgumentow("ile",2); //komunikat 2
ileArgumentow("jeden") //komunikat 1

Kiedy to może być przydatne? Przede wszystkim, jeżeli chcemy sprawdzić czy wszystkie argumenty zostały przekazane. Javascript ma tę właściwość, że nie generuje błędu, jeżeli ilość przekazanych argumentów w wywołaniu funkcji nie zgadza się z ilością argumentów w definicji funkcji. Jeżeli przekażemy ich za mało, to niezdefiniowane stają się undefined, a jeżeli przekażemy ich za dużo, to nadmiarowe będą ignorowane. Dzięki właściwości length obiektu arguments, możemy się przed tym zabezpieczyć.

Javascript, oprócz wartości prostej typu String, posiada również obiektową reprezentację napisów - klasę String. Aby utworzyć obiekt tej klasy należy posłużyć się następującą formułą:

var oNazwaZmiennej = new String("Mój napis");

Klasa String posiada tylko jedną właściwość, ale za to bardzo przydatną - length. Dzięki tej właściwości uzyskujemy informacje o ilości znaków w ciągu(UWAGA! Spacje też są liczone jako znak), np.

var oDowolnyNapis = new String("Dowolny napis");alert(oDowolnyNapis.length); //zwróci 13

Klasa String ma za to wiele metod, które mogą okazać się przydatne podczas programowania. więcej…

API Javy jest ogromne, tak jak jej możliwości. Mówiąc szczerze jako początkujący programista Javy mam niemały problem ze znalezieniem tego, czego akurat potrzebuję. Ostatnio poznaję akrana biblioteki Swing i tych wszystkich graficznych bajerów jakie oferuje Java. Szybko można się zorientować, że klasa Graphics jest jedną z kluczowych klas jeśli chodzi o rysowanie. Ma wiele ciekawych metod, których dodatkowo można się w bardzo przyjemny sposób nauczyć Jak? Polecam serię tutoriali: progzoo. Zabawa jest przednia, bo polega na rysowaniu flag różnych państw, właśnie za pomocą metod klasy Graphics. Dzięki temu łatwo je zapamiętać, a przy okazji mamy ogromną satysfakcję, gdy uda nam się prawidłowo wyrysować kolejne flagi. Miłej zabawy/nauki.

Tooltips są częstym sposobem dostarczania dodatkowych informacji dla użytkownika. Po najechaniu myszką na np. link pojawia się krótka informacja tekstowa, która pozwala dadać dodatkowe info. Przeglądarki same generują takie informacje: jeżeli w elemencie np. <img> dodamy atrybut alt=”tekst”(aby tooltip pojawiał się pod FF trzeba dodać atrybut title=”tekst”). Jeżeli chcemy dodać tooltip do jakiegoś linka, możemy to zrobić samodzielnie. Zapraszam do laktury: Pure CSS Tooltips. Na co warto zwrócić uwagę wykorzystując przedstawiony na stronie sposób:

W pseudoklasie hover musi się znaleźć jakaś deklaracja zmieniająca wygląd linka np. background-color. Inaczej całość nie będzie działać pod IE6. Wynika to z bug’a: nieodświeżanie potomków przy :hover.

Mając wprowadzonych kilka liczb przez użytkownika, czasami potrzebujemy “wyciągnąć” najwyższą wartość. Oczywiście takie zadanie można zrealizować za pomocą tablicy i funkcji sortującej. Jednak ostatnio musiałam zrealizować to zadanie bez sortowania tablicy. Oto rozwiązanie: więcej…