Kobolkova Projektowanie stron Internetowych


Moduł 6
Projektowanie dostępnych stron internetowych i dostęp do Internetu przy pomocy
programu Internet Explorer z JAWS dla Windows

Martina Kobolkova

Wstęp
Poniższy materiał stanowi próbę podręcznika dla osób, szkolących niewidomych, przygotowujących
kursy szkoleniowe na temat projektowania łatwo dostępnych stron internetowych, a także dla
projektantów stron internetowych, pragnącychuczynić swe strony bardziej dostępnymi dla
czytelników, w tym osób niewidomych i niedowidzących.

W momencie rozpoczęcia czytania niniejszego rozdziału, przydatna jest podstawowa wiedza na temat
środowiska Windows w połączeniu ze Screen Readerem JAWS.
Rozdział rozpoczyna się od krótkiego wprowadzenia do terminologii internetowej oraz funkcji
programu do odczytu ekranu JAWS. Dla osób, zainteresowanych wyłącznie projektowaniem
stron internetowych, informacja na temat JAWS może być pomocna w zrozumieniu potrzeb,
jakie mogą mieć czytelnicy ich stron internetowych, mający taką czy inną wadę wzroku.
Dlaczego tak uważamy?

Nie jest łatwo mówić o dostępności, nie mając zupełnie pojęcia o technikach, stosowanych przez osoby
niewidome przy odczytywaniu stron internetowych, korzystaniu, np., z Internet Explorera 5 w
połączeniu z JAWS (JAWS dla Windows 3.31 może tu stanowić dobry przykład). Mimo, że
korzystanie z takiego oprogramowania poprawia czytelność stron internetowych, trzeba stale
pamiętać także o użytkownikach tekstowych przeglądarek internetowych. Wiele elementów
kodu html może powodować trudności dla obu tych grup czytelników.

Poniżej zamieszczony jest rozdział na temat HTML (Hypertext Mark-up Language - język do
oznaczania hipertekstu) w wersji 4.0. Staraliśmy się tu podkreślić logiczną strukturę
dokumentów HTML. Dlatego właśnie wybraliśmy połączenie niektórych opisów elementów
HTML i odpowiadających im funkcji edytora kodu HTML typu WYSIWYG
FrontPage
Express (FPE). Mimo, że mamy tu do czynienia z dwiema odmiennymi technikami, znajomość
ich obu może przynieść korzyść.

Poniższy materiał nie jest ani zestawieniem tagów HTML, ani indeksem skrótów klawiszowych i
elementów menu programu FPE. Mamy tu jedynie załączniki do niniejszego opracowania w
skróconej formie.

Treść i struktura niniejszego opracowania zostały poprawione po kursie szkoleniowym,
przeprowadzonym w Bratysławie w grudniu 1999 roku. Próbowaliśmy uaktualnić go zgodnie z
reakcjami uczestników kursu. Skróty klawiaturowe zostały przeniesione do Załącznika,
materiał, dotyczący HTML został podzielony na dwie części
część o przeglądaniu oraz część
o projektowaniu stron internetowych. Omawiając elementy HTML (część na temat
projektowania stron internetowych), przygotowujemy stronę domową wirtualnego stworka

Judy (folder Judy).

W związku ze wszystkim, co zostało tu do tej pory powiedziane, podręcznik, który państwo aktualnie
czytają ma następującą strukturę:
1. Podstawowe pojęcia Internetowe;
2. Krótkie wprowadzenie do Screen Readera JAWS;
3. Poruszanie się po stronach w programie IE (ogólne
tekst i hiperlinki; szczegółowe
ramki i
formularze);
4. Kwestie dostępności, możliwości oceny (część ta może stanowić pierwszą dla projektantów a
ostatnią dla tzw. Surferów);
5. Elementy HTML i FPE z akcentem na dostępność projektowanych stron internetowych.

Dzięki wskazówkom dra Branislava Mamojki, Ludmiły Jakovej i Zuzany Kubincovej, pomysł
stworzenia niewielkiego podręcznika mógł przerodzić się w rzeczywistość.

Autor

I. Podstawowe pojęcia

a. Terminologia internetowa

WWW
Te trzy litery oznaczają jedną z najpopularniejszych usług internetowych. Światowa sieć (World-Wide
Web
dosł. Wszechświatowa pajęczyna) to zbiór dokumentów hipertekstowych, tzw. "stron
internetowych" czy "witryn internetowych". Różni ludzie tworzą własne strony internetowe i
umieszczają je na serwerach, aby mogły być oglądane przez wszystkich. Światowa sieć (www)
pozwala użytkownikom przeskakiwać z jednego dokumentu do drugiego
poprzez hiperlinki.
Gdy użytkownik uaktywni link w dokumencie, zostaje mu przedstawiony powiązany tym linkiem
nowy dokument.

Przeglądarka internetowa
Przeglądarka internetowa to zintegrowane narzędzie, które zapewnia dostęp do dokumentów
ipertekstowych, grup newsowych i archiwów FTP. Niektóre przeglądarki oparte są na
środowisku tekstowym, inne mają interfejs graficzny. Ogromna większość dostępnych w sieci
dokumentów zawiera wbudowaną grafikę i dźwięk. Niektóre elementy na stronach
internetowych mogą być ignorowane przez przeglądarki tekstowe, w rezultacie czego następuje
utrata części zawartych na stronach informacji.

URL
Zadanie odnalezienia dokumentu, powiązanego z oglądanym aktualnie, odbywa się niewidocznie dla
użytkownika, dzięki oprogramowaniu o nazwie Uniwersalna Wyszukiwarka Zasobów (ang.
Universal Resource Locator
URL). Każdy rodzaj zasobów internetowych można określić
jako usługa://serwer/ścieżka-do-katalogu.

Przykład: http://www.uns.sk

HTML
Język oznaczania hipertekstu (Hypertext Markup Language
HTML) to język, dominujący w
dziedzinie przygotowywania stron internetowych. W wersji HTML 4.0 dodanych zostało kilka
funkcji ułatwień dostępu (np., atrybut dla długich opisów tabel, grafik i ramek
"longdesc").

Dokument html
Dokument hipertekstowy to zbiór elementów html. Składa się on zwykle z jakiegoś tekstu, grafik,
dźwięków, skryptów... Do tworzenia dokumentu html można skorzystać ze specjalnego edytora
html (np., HotDog Express), edytora, stanowiącego składnik zestawu narzędzi internetowych
(np., Netscape Composer), procesora tekstów z możliwością konwersji na format html (np.,
Worda) lub prostego edytora tekstowego (np., Notatnika).

Funkcja Zapisz Jako w Wordzie
Możliwe jest przygotowanie po prostu dokumentu w Wordzie i zapisanie go w formacie html. Należy
przejść do paska menu, otworzyć menu Plik i wybrać okno dialogowe Zapisz Jako..., po czym
przejść do listy wyboru Zapisz Jako Typ: i stąd wybrać dokument sieciowy (w Wordzie 97 -
Dokument HTML). Operację należy zakończyć wciśnięciem klawisza Enter.

Dokumenty hipertekstowe mogą mieć jedno z dwóch przedłużeń
htm lub html. To krótsze
przedłużenie dotyczy tych platform, które nie obsługują długich nazw plików (np., DOS).
Niezależnie od tego, które wybierzemy, musimy pamiętać, że nie można ich ze sobą mieszać.

Przykład: Jeśli URL nazywa się http://www.uns.sk/english/eenat/index.html, nie można w zamian użyć
adresu http://www.uns.sk/english/eenat/index.htm
wyświetlony zostanie komunikat o błędzie.
W IE 5 możliwa jest przeciwna zamiana.

HTTP, serwer sieciowy, klient i agent użytkownika
Hipertekstowy Protokół Transferu (Hypertext Transfer Protocol
HTTP) to działający na poziomie
aplikacji protokół, dla systemów dystrybuowanej, współdziałającej informacji hipermedialnej.
Mówiąc prościej
http opisuje komunikację pomiędzy serwerem sieciowym a agentem
użytkownika.

Agent użytkownika to klient, inicjujący zapytanie. Często jest to przeglądarka czy edytor tekstów.

Klient sieci to program aplikacyjny, ustanawiający połączenie w celu przesłania zapytania.

Serwer sieciowy to program aplikacyjny, przyjmujący połączenie w celu obsłużenia zapytań poprzez
przesyłanie odpowiedzi zwrotnych.

B. JAWS dla Windows 3.3
JAWS dla Windows (ang. Job Access With Speech
dostęp do zadań poprzez mowę)
to
oprogramowanie do odczytu zawartości ekranu, tzw. screen reader, działające w środowisku
Windows NT 4.0, Windows 2000 Professional, Windows 98 i Windows 95.

JAWS for Windows zawiera zaawansowany software'owy syntezator mowy Eloquence for JFW,
mówiący siedmiu różnymi językami (amerykańskim angielskim, brytyjskim angielskim,
niemieckim, włoskim, francuskim, kastylijskim hiszpańskim i latynoamerykańskim hiszpańskim),
a także moduł Text-to-Speech firmy Microsoft. JAWS może korzystać z zainstalowanej w
komputerze karty dźwiękowej lub ze specjalnego syntezatora (np., Apollo II).

JAWS korzysta ze standardowych komend klawiszowych środowiska Windows
standardowych
klawiszy odczytu, zdefiniowanych własnych skryptów oraz trybów specjalnych.

Kursor PC i Kursor JAWS
Windows korzysta z różnych narzędzi w celu wskazania, gdzie na ekranie znajduje się fokus Windows.

Kursor PC reprezentuje kursor wstawiania oraz kursor zaznaczenia. Aby uaktywnić kursor JAWS
należy wcisnąć klawisz minus na klawiaturze numerycznej. JAWS powie "JAWS Cursor"
Kursor JAWS). Jest to kursor, który przemieszcza się, gdywpisujemy tekst lub korzystamy ze
standardowych klawiszy czytania.

Kursor JAWS reprezentuje kursor myszy. Aby przejść do kursora PC, należy wcisnąć klawisz plus na
klawiaturze numerycznej. JFW poinformuje "PC Cursor" (Kursor PC). Podczas pisania kursor
tennie jest przemieszczany.

Przy pomocy kursora JAWS można na różne sposoby oglądać ekran:
- automatycznie
Insert+strzałka w dół odczytuje całą zawartość ekranu od położenia kursora
JAWS do prawego dolnego rogu ekranu;
- elementami
wciskając Ctrl+strzałka w prawo i Ctrl+strzałka w lewo przemieszczamy się od
elementu do elementu;
- wierszami
wciskając strzałkę w górę lub w dół;
- znakami
wciskając strzałkę w prawo lub strzałkę w lewo.

Ustawienia JFW
Należy przejść do okna JAWS
Insert+j (można to uzyskać również kombinacją Alt+Tab).

Należy przejść do paska menu, tu do pozycji Utilities (programy użytkowe), wewnątrz podmenu
Utilities
do Configuration Manager (Menedżer Konfiguracji). W Menedżerze konfiguracji
należy otworzyć plik browseui.jcf. Następnie przejść do paska menu, tu do menu Set Options
(ustaw opcje), gdzie należy wybrać okno dialogowe Advanced Options (opcje
zaawansowane).

Wewnątrz tego okna dialogowego, okienko zaznaczenia Użyj Wirtualnego kursora PC winno być
zaznaczone. Jeśli okienko to nie jest zaznaczone, można korzystać z przeglądarki w taki
sposób, jak w IE 4.1.

Zaleca się również korzystanie z domyślnych ustawień JFW:
Verbosity (wielomówność)
Beginner (początkujący)
NumLock
wyłączony

Więcej szczegółów znajdzie czytelnik w dokumentacji JAWS.

2. Internet Explorer 5 z JAWS 3.3 dla Windows

a. Zalecane ustawienia
Dla wygody przeglądania Internetu przy pomocy JAWS, zalecane są następujące ustawienia:

Kolory
- Należy dopilnować, by zaznaczona była opcja "Ignoruj kolory na stronach internetowych"
menu
Narzędzia, okno dialogowe Opcje Internetowe, zakładka Ogólne, okno dialogowe Ułatwienia
Dostępu.
- Można ustawić kolor tekstu, tła, linków odwiedzonych, linków nie odwiedzonych, czy mają być
wykorzystywane windowsowe kolory dla tekstu i tła oraz kolory linków wskazanych myszką
(gdy mysza spoczywa nad linkiem). Menu Narzędzia, okno dialogowe Opcje Internetowe,
zakładka Ogólne, okno dialogowe Kolory.

Właściwości tekstu
- Do wyboru jest pięć zdefiniowanych z góry rozmiarów czcionki, które będą wykorzystywane jako
czcionka bazowa. Należy przejść do menu Widok, do podmenu Rozmiary Tekstu. Można tu
wybrać jedną z następujących pozycji
Największa, Większa, Średnia, Mniejsza i
Najmniejsza.
- Dalsze opcje ułatwień dostępu można ustawić w menu Narzędzia, w oknie dialogowym Opcje
Internetowe, na zakładce Ogólne, w oknie dialogowym Ułatwienia Dostępu:
- Pole zaznaczenia Ignoruj styl czcionki, podany na stronach internetowych
- Pole zaznaczenia Ignoruj wielkość czcionki, podaną na stronach internetowych
- Pole zaznaczenia Formatuj dokument korzystając z mojego arkusza stylów

Paski narzędzi
- Jeśli chcemy korzystać z paska narzędzi IE, winniśmy najpierw włączyć etykiety tekstowe na
przyciskach. Należy przejść do paska menu, menu Widok, podmenu Narzędzia
i zaznaczyć
Etykiety Tekstowe.
- Pamiętajmy, że korzystać da się jedynie z widocznych przycisków (a nie ze wszystkich przycisków
paska narzęńdzi). Aby dodać lub usunąć jakiś pasek narzędzi czy przyciski, należy skorzystać z
menu Widok, podmenu Paski Narzędzi. Można zaznaczyć lub odznaczyć (przy pomocy Entera)
następujące paski narzędzi: Przyciski Standardowe, Pasek Adresu, Linki, Radio. Innym
sposobem dostosowywania pasków narzędzi do własnych potrzeb jest skorzystanie z okna
dialogowego Dostosuj.

Opcje zaawansowane
Należy zaznaczyć kilka opcji zaawansowanych. Należy przejść do paska menu, menu Narzędzia, okna
dialogowego Opcje Internetowe, zakładki Zaawansowane.
W części Dostęp należy zaznaczyć następujące elementy:
- Przenoś kursor systemowy ze zmianami fokusa/zaznaczenia.
- Zawsze rozwijaj całość tekstu dla grafiki.

W dziale Przeglądanie, należy usunąć zaznaczenie następujących elementów:
- Pokaż pasek kanału przy uruchomieniu.
- Pokazuj przyjazne strony.
- Używaj ciągłego przewijania.
- Włącz przejścia stron.

Podczas przeglądania stron internetowych można korzystać ze specjalnych kombinacji klawiszowych
JAWS i z następujących trybów nawigacji:
1. trybu wirtualnego kursora PC
2. trybu konwencjonalnego
3. trybu formularzowego (z trybu wirtualnego kursora PC należy wcisnąć Enter lub Slash z klawiatury
numerycznej)

Tryb wirtualnego kursora PC JAWS
Tryb ten uaktywniany jest automatycznie w momencie uruchomienia IE 5 (domyślne ustawienie JAWS),
przy czym JAWS zaczyna wypowiadać tekst na ekranie, jak tylko ściąganie danej strony
zostanie zakończone. Tryb ten reaguje na normalne klawisze odczytu w ten sam sposób, jak w
innych aplikacjach, ale nie ma widzialnej wskazówki aktualnego obszaru odczytywania na
ekranie. Aby tekst, który znajduje się poza ekranem, wyświetlić, należy wcisnąć Insert+Escape,
(co odświeża zawartość ekranu i aktualizuje stan informacji modułu pozaekranowego) lub
korzystać zpasków przewijania.

Ctrl+Home wyświetla początek dokumentu na widzialnym ekranie.

Page Down (up) przewija o 24 wiersze w dół (w górę).

Możliwe jest także odczytywanie tekstu znakami, wyrazami, wierszami, zdaniami lub akapitami.

Tryb konwencjonalny JAWS
Tryb ten działa jak w IE 4.1 z jego opcjami przeformatowywania z kursorem JAWS i kursorem PC,
gdy kursor wirtualny jest wyłączony.

Uwaga: Do przełączania się chwilowo pomiędzy trybem kursora wirtualnego włączonym a wyłączonym,
służy kombinacja klawiszowa Insert+z.

Poniższe kombinacje klawiszy dostępne są wyłącznie w trybie z wyłączonym wirtualnym kursorem PC:
- Insert+F5
przeformatuj dokument
- Ctrl+Insert+strzałka w dół
odczytaj główny tekst przy pomocy kursora JAWS
- Ctrl+PgDn
odczytaj kolejny ekran
- Ctrl+PgUp
odczytaj poprzedni ekran

B. Okno aplikacji

Uwaga: Zakładamy, że wirtualny kursor PC jest włączony i że użytkownik może przeglądać ekran przy
pomocy standardowych klawiszy odczytu.

Okno IE 5 jest bardzo podobne do okna innych aplikacji. Składa się z następujących elementów:
- pasek tytułu (Insert+t)
poziomego paska tuż pod górną ramką okna, pomiędzy okienkiem menu
kontrolnego (Alt+Spacja) w lewym, górnym rogu, a przyciskami Przywróć (Insert+End) w
prawym dolnym rogu okna;

Podpowiedź: Insert+t odczytuje sam tytuł okna, Insert+End odczytuje dodatkowo przyciski Przywróć i
Zamknij.

- Pasek menu (Alt)
poziomy pasek pod paskiem tytułu. Znajdują się na nim wyszczególnione
wszystkie pozycje menu IE
Plik, Edycja, Widok, Ulubione, Narzędzia i Pomoc.

Podpowiedź: Litera podkreślona stanowi skrót do uaktywnienia danego elementu menu.

- Paski narzędzi (Insert+F8): Przyciski Standardowe, Pasek Adresu, Linki, Radio, Dostosuj...

Podpowiedź: wielokropek (...) oznacza, że dany element to okno dialogowe.

- Pasek Eksploratora, dostępny poprzez menu Widok: Wyszukaj, Ulubione, Historia, Foldery,
Porada Dnia.

- Pasek Stanu (Insert+PgDn to poziomy pasek na dole okna aplikacji. Wyszczególnione są na nim
informacje stanu, takie jak: stan danego zadania (łączenie ze stroną, otwieranie strony,
zakończone), URL lub wskazany link, wskaźnik pracy w trybie off-line, ...

Pozostała część okna należy do aktywnego dokumentu.

Uwaga: Kombinacje klawiszowe, zawierające Insert+, do kombinacje klawiszowe JAWS.

C. Otwieranie stron
Po otwarciu okna IE 5, ładowana jest strona domowa. Jest to dokument HTML, którego adres (URL)
określany jest w menu Narzędzia, w oknie dialogowym Opcje Internetowe, na zakładce
Ogólne.

Aby otworzyć inną stronę można skorzystać z jednego z opisanych poniżej sposobów:
- Uaktywnić wskazany link (wciskając Enter, gdy wirtualny kursor PC jest na nim, lub gdy włączony
jest kursor PC).
- Wpisać jej URL w oknie dialogowym Otwórz (Ctrl+o), dostępnym poprzez menu Plik i wcisnąć
Enter.
- Przejść na Pasek Adresu (Alt+d lub Insert+a wciśnięte dwukrotnie w krótkim odstępie czasu),
wpisać jej URL i wcisnąć Enter.

Podpowiedź: Należy wcisnąć Ctrl+strzałkę w dół, aby otworzyć listę wyboru adresów, następnie
wybrać URL i wcisnąć Enter.

Można także otworzyć bieżącą stronę w nowym oknie (Ctrl+n lub z menu Plik
podmenu Nowy

Element Okna). Aby ją zamknąć, należy wcisnąć Ctrl+w lub przejść do menu Plik, tu do
komendy Zamknij.

D. Ogólne informacje o poruszaniu się po stronach

Poruszanie się po bieżącej stronie
W momencie otwarcia nowej strony, usłyszymy liczbę linków (wypowiedzianą oddzielnymi cyframi).

Tryb wirtualnego kursora PC:
1. Można korzystać ze standardowych klawiszy odczytu w celu odczytywania tekstu znakami (strzałka
w lewo i w prawo), wyrazami (Ctrl+strzałka w lewo lub strzałka w prawo), ..., przy czym
usłyszymy informację "link" lub "Visited link" (link odwiedzony), jeśli bieżący element to link.
2. Można przy pomocy kombinacji klawiszowej Insert+F7, otworzyć okno dialogowe JAWS,
zawierające linki, w celu:
- Przejścia do danego linku lub
- Uaktywnienia linku.

Grupa przycisków radiowych Wyświetlanie (w celu zdecydowania, które linki będą wyświetlane):
- Wszystkie linki
- Tylko linki odwiedzone
- Linki nie odwiedzone

Grupa przycisków radiowych Sortuj Linki (w celu dostosowywania porządku wyświetlania linków):
- w porządku tabulacji
- alfabetycznie

Tryb konwencjonalny:
Uwaga: Do chwilowego przełączania pomiędzy trybem wirtualnego kursora PC a trybem
konwencjonalnym, służy kombinacja klawiszowa Insert+z.

3. Pomiędzy linkami można poruszać się przy pomocy klawisza Tab i kombinacji Shift+Tab (podobnie
jak bez działającego JAWS).

Podpowiedź: W trybie konwencjonalnym, wciśnij Insert+Tab, aby odczytać wskazany link ponownie.

Przechodzenie z jednej strony na drugą (jednego dokumentu na inny)
Podczas przechodzenia z jednej strony na inną, budowana jest sekwencja linków. Można przejść do
poprzedniego lub do następnego linku w sekwencji.

Komendy nawigacyjne wyszczególnione są w menu Widok:
- Podmenu Idź Do:
- Wstecz
Alt+strzałka w lewo (przejdź wstecz do poprzedniego linku);
- Dalej
Alt+strzałka w prawo (przejdź dalej do kolejnego linku);
- Strona Domowa
Alt+Home (przejdź na stronę domową).
- Przerwij
Escape (przerwij ściąganie strony);
- Odśwież
F5 (załaduj ponownie aktywny dokument).

Odczytywanie tekstu w kolumnach
W trybie konwencjonalnym można przeformatować ekran (Insert+F5), co powoduje rozszpaltowanie
tekstu. Kolumny (szpalty) IE zostaną odczytane jedna po drugiej, dzięki czemu tekst będzie
lepiej czytelny przy pomocy mowy.

E. Szczegóły poruszania się po stronach

Ramki
Gdy otwarta jest strona, zawierająca ramki, JAWS informuje o liczbie ramek na stronie.
- Można wybrać ramkę z okna dialogowego Lista Ramek JAWS. Insert+F9 służy do otwierania tego
okna dialogowego. Poruszamy się w nim przy pomocy klawiszy strzałek
po wciśnięciu Enter
JAWS zaczyna odczytywać wskazaną ramkę.
- Możliwe jest też przejście do kolejnej ramki przy pomocy Ctrl+Tab, lub do poprzedniej

Ctrl+Shift+Tab.

Uwaga: Z ramkami można pracować w taki sam sposób, jak z całymi stronami. Poprzez Menu
Kontekstowe (klawisz Aplikacyjny lub Shift+F10), można dla nich tworzyć skróty, dodawać
do Ulubionych. Dostępny jest też widok źródłowy i inne opcje.

Tryb formularzowy JAWS
Jest to specjalny tryb, przygotowany do wypełniania formularzy. Działa on wyłącznie w trybie
wirtualnego kursora PC. Gdy wirtualny kursor PC znajduje się na danym polu formularza,
należy wcisnąć Enter lub Slash z klawiatury numerycznej, aby tryb ten włączyć. W rezultacie:
- Jeśli jesteśmy na przycisku
przycisk ten zostanie wciśnięty.
- Jeśli jesteśmy na przycisku radiowym, który nie jest zaznaczony, zostanie on zaznaczony i
odwrotnie.
- Jeśli jesteśmy na polu edycyjnym
na początku pola edycyjnego zostanie umieszczony kursor PC.
- Jeśli jesteśmy na liście wyboru
zaznaczona zostanie pierwsza pozycja z listy.

Podpowiedź: Przy pomocy Ctrl+Insert+Home można przejść do pierwszego pola formularza.

Przy pomocy klawiszy Plus z klawiatury numerycznej opuszczamy tryb formularzowy i powracamy do
trybu wirtualnego kursora PC.

Korzystanie ze Schowka
- Należy - przy pomocy standardowych skrótuw klawiszowych
zaznaczyć tekst w
trybiewirtualnego kursora PC (np., Ctrl+Shift+strzałka w prawo w celu zaznaczenia jednego
wyrazu).
- Aby pracować ze Schowkiem, należy posługiwać się standardowymi komendami używanej
aplikacji. Znajdują się one w menu Edycja. Menu Edycja programu IE 5 jest bardzo podobne
do menu Edycja pozostałych aplikacji Windows. Znajdują się tu następujące elementy: Wytnij
(Ctrl+x), Kopiuj (Ctrl+c), Wklej (Ctrl+v), Zaznacz Wszystko (Ctrl+a) i okno dialogowe
Wyszukaj (na tej stronie) (Ctrl+f).

Ściąganie plików
Nawet wówczas, gdy możemy skorzystać ze Schowka w celu przenoszenia zaznaczonych fragmentów
tekstu do innych aplikacji, przydatne jest niekiedy ściąganie całych dokumentów HTML. W
szczególności w przypadku większych plików, zalecane jest zapisywanie ich poprzez okno
dialogowe Zapisz Jako z menu Plik. W oknie tym można wybrać:
Zapisz Jako Typ:
- Strona Internetowa, w całości (HTM, HTML
także grafika i style w oddzielnych folderach);
- Archiwum internetowe dla poczty elektronicznej (MHT);
- Strona Internetowa, tylko HTML (HTM, HTML);
- Plik tekstowy (txt
plain text format).

Kodowanie, np., Środkowoeuropejski (DOS), Środkowoeuropejski (Windows), ...

Drukowanie dokumentów
Jeśli chodzi o drukowanie, mówimy tu jedynie o powszechnie stosowanych funkcjach, funkcje
specjalne omówione są w dalszym ciągu opracowania.
- Okno dialogowe Ustawienia Strony w menu Plik, okno dialogowe Rozmiar Papieru, Żródło
Papieru, Nagłówek, Stopka, Orientacja, Marginesy i Drukarka.

Nagłówek i Stopka:
&w tytuł strony
&u adres strony (URL)
&d lub &D data w formacie skróconym (&d) lub długim (&D)
&t lub &T czas w 12 (&t) lub 24 godzinnyms formacie (&T)
&p lub &P numer bieżącej strony (&p) lub całkowita liczba stron (&P)
&b lub &b&b tekst wyrównywany do prawej (&b) lub tekst środkowany (&b&b) następuje (błąd w
Pomocy IE 5)
&& pojedynczy znak "and"

- Drukuj... (Ctrl+p)
Drukarka/Do Pliku, Zakres Wydruku, Kopie, Drukuj Ramki, Drukuj
Wszystkie Powiązane Dokumenty, Drukuj Tabelę Linków).

Podpowiedź: Należy pamiętać, że można również wydrukować zaznaczony tekst (przycisk radiowy
Zaznaczenie w grupa Zakres Wydruku).

Drukowanie powiązanych dokumentów
Opcja ta przydatna jest przy drukowaniu całych witryn internetowych (zestawów powiązanych stron
internetowych).

Menu Plik, okno dialogowe Drukuj...
następujące okienka zaznaczenia:
- Drukuj wszystkie powiązane dokumenty
- Drukuj tabelę linków

Drukowanie dokumentów z ramkami
Menu Plik, okno dialogowe Drukuj...
grupa przycisków radiowych Drukuj Ramki:
- jak wyświetlone na ekranie (układ strony zostanie zachowany)
- tylko ramka zaznaczona
- wszystkie ramki oddzielnie (ramki zostaną wydrukowane jak oddzielne dokumenty)

Powiązane programy
Menu Narzędzia, okno dialogowe Opcje Internetowe, zakładka Programy:
- edytor HTML, e-mail, wywołanie internetowe, kalendarz, lista kontaktów... informuje, jakie
programy będą wykorzystywane automatycznie do obsługi dodatkowych usług internetowych
(np., gdy uaktywniony zostanie link Mailto, otwarte zostanie odpowiednie oprogramowanie).
- Okno dialogowe Resetuj ustawienia internetowe...
- Internet Explorer winien sprawdzać czy jest domyślną przeglądarką internetową
okienko
zaznaczenia.

Uwaga: Jeśli opcja ta jest zaznaczona, IE 5 pozostaje domyślną przeglądarką internetową, nawet
wówczas, gdy zostanie zainstalowane dodatkowe oprogramowanie do przeglądania internetu.
Jeśli inny program zostanie zarejestrowany jako domyślna przeglądarka internetowa, program
zapytuje czy chcemy IE pozostawić jako domyślną przeglądarkę.

4. Dostępność dla każdego

Twórcy stron internetowych winni zdać sobie sprawę, że z ich pracy korzystali będą użytkownicy o
bardzo odeminnych spojrzeniach
może osoby z wadami wzroku, osoby niedosłyszące lub
głuche, osoby z upośledzeniem narządu ruchu itp.

Co to takiego dostępność? "Dostępność oznacza zapewnienie odpowiedniej elastyczności,
umożliwiającej zapewnienie spełnienia potrzeb i preferencji jak największej liczby
użytkowników. W kontekście internetowym, dostępność to uczynienie technologii
komputerowej i zasobów internetowych dostępnymi dla większej liczby osób, niż byłoby to
możliwe w innym wypadku".

a) Możliwości oceny
Aby upewnić się czy nasza strona internetowa jest co najmniej możliwa do odczytania przez osoby z
takim czy innym rodzajem trudności w dostępie, możemy sprawdzić jej poziom dostępności:
- przy pomocy narzędzi automatycznych:
1) Bobby Approved - http://www.cast.org/bobby
2) ? W3C HTML Validator - http://validator.w3.org
3) ? CSS validator, lub

sprawdzenie przez użytkownika:
1) na moniorze monochromatycznym
2) przy pomocy przeglądarki tekstowej (np., Lynx http://lynx.browser.org)
3) przy pomocy przeglądarki z udźwiękowieniem własnym (Ibm HomePage Reader)
4) przy użyciu kilku przeglądarek graficznych z wyłączonymi możliwościami oglądania grafiki,
dźwiękami, skryptami, ramkami i apletami
5) bez myszy (jedynie z wykorzystaniem klawiatury do przechodzenia ze strony na stronę)
6) poprzez żółtą folię

Bobby Approved 3.1
Bobby to automatyczne narzędzie do oceny stron internetowych
oprogramowanie, oparte na tezach,
dotyczących dostępności W3C. Można z niego korzystać:
- jako z apletu sieciowego - http://www.cast.org/bobby
- jako z aplikacji (plik instalacyjny: installbobby.exe, 6376 KB, jest dostępny na stronie domowej
CAST).

Bobby to bezpłatny program, który analizuje strony internetowe pod kątem ich dostępności dla osób z
niepełnosprawnościami. Program ten odnajduje też problemy kompatybilności ze standardem
HTML, które uniemożliwiają prawidłowe wyświetlanie się stron na różnych przeglądarkach
internetowych.

(Ilustracja)

Można umieścić ikonę programu Bobby na swojej stronie, jeśli strona ta nie zawiera błędów z punktu
widzenia dostępności.

Uruchamianie analizy dostępności
1. Kiedy uruchomimy Bobby, kursor wejściowego pliku znajduje się w polu URL, w pobliżu
dolnej krawędzi ekranu. Należy wpisać tu URL (np., http://www.uns.sk), aby zanalizowana
została strona, opublikowana w Internecie. Aby zanalizować lokalny plik, należy kliknąć
przycisk Przeglądaj lub wpisać URL pliku )np., plik:/c:/docs/uns/index.html).
2. Jeśli chcemy, by Bobby zanalizował automatycznie kilka stron, winniśmy zmienić pozycję
"Nie idź za linkami" na jedną z pozostałych opcji. W razie potrzeby należy zmienić maksymalne
zagłębienie poziomu linków, aby ograniczyć stopień zagłębienia od poziomu oryginalnej strony.
3. Wciskamy teraz przycisk Go.

Sprawdzanie rezultatów
Aby sprawdzić wyniki analizy dostępności, nawet jeszcze w trakcie wykonywania przez Boby analizy
stron, należy:
- wskazać URL z listy, a następnie wcisnąć przycisk Raport Bobby, aby uzyskać raport o
dostępności, albo
- po zakończeniu przez program Bobby analizy stron pod kątem ich dostępności, należy wcisnąć
przycisk Raport Podsumowujący, aby otrzymać podsumowujący raport dostępności
wszystkich stron, przetestowanych w trakcie sesji.

Uzyskiwanie pomocy
Więcej informacji na temat korzystania z programu Bobby, zajrzyj na stronę Bobby, dotyczącą często
zadawanych pytań. W tym celu należy wybrać "Bobby FAQ" z menu Pomoc, lub użyć
kombinacji klawiszowej Ctrl+h. Więcej informacji można uzyskać na stronie internetowej
CAST (http://www.cast.org/bobby/).

IV. HTML i Front Page Express z JAWS dla Windows

A. O edytorze Front Page

Edytor Front Page wer. 2 (w dalszej części tekstu nazywany w skrócie FPE), pozwala na tworzenie
stron internetowych nawet wówczas, jeśli nie mamy pojęcia o języku HTML. Korzystanie z
tego edytora przypomina bardzo korzystanie z edytora tekstu takiego jak Microsoft Word 97.
Jest to metoda określana mianem WYSIWYG co widać, to jest (od ang. "what you see is what
you get"). Możliwe jest także przejrzenie kodu źródłowego HTML w menu Widok w oknie
dialogowym HTML...

Podpowiedź: Zawsze można znaleźć "rozróżniające wybory" okno dialogowe Właściwości... w menu
Edycja (Alt+Enter). Na przykład, jeśli nie zostanie dokonany żaden wybór, dostępne jest okno
dialogowe Właściwości Czcionki...

Okno aplikacji
Okno programu FPE składa się z paska tytułu, paska menu, pasków narzędzi, paska stanu u dołu okna
oraz pulpitu
podobnie jak wiele innych standardowych aplikacji Windows.

B. Proste elementy HTML

Uproszczona wersja dokumentu HTML może wyglądać w następujący sposób.


Mój pierwszy dokument HTML


Witam wszystkich!



Elementy wewnątrz nawiasu <> noszą nazwę tagów HTML i stanowią podstawowe narzędzie
oznaczania HTML.

identyfikuje dany plik jako dokument HTML. na końcu dokumentu informuje o
końcu dokumentu HTML. Umieszczanie "/" przed większością tagów oznacza zakończenie
danego elementu.

Po mamy , zawierający informację nagłówkową, która nie jest wyświetlana w
oknie dokumentu. Wyświetlana jest ona na pasku tytułu aplikacji. oznacza
zakończenie informacji nagłówkowej.

Informacja, zawarta pomiędzy i wyświetlana jest w oknie dokumentu.

Tagi zawierające
Tag zawierający składa się z tagu otwierającego i tagu zamykającego .

Przykład:

...

- Paragraf to tag zawierający.

- Linia Pozioma nie jest tagiem zawierającym.

Komentarz
Przeglądarki ignorują tekst, napisany w komentarzu, chyba, że posiada on specjalne znaczenie (np.,
przy definiowaniu stylu, pisaniu skryptów itp.).




To jest nagłówek H3, napisany zieloną, kursywową czcionką Arial.


a

ten fragment też.






Uwaga: Tagi komentarza, zagnieżdżone wewnątrz tagów


Komenda @import działa bardzo podobnie do tagu , ale jej składnia jest nieco
odmienna.

Połączenie omówionych powyżej technik
Połączony arkusz stylów może dopomóc nam zachować spójny wygląd i charakter całej naszej
witryny internetowej. Jeśli jednak chcemy, by określona strona wyposażona była w
dodatkowe atrybuty stylu, możemy także włączać style w nagłówku danego
konkretnego dokumentu HTML.

Uwaga: Możliwe jest używanie więcej niż jednego arkusza stylów w tym samym dokumencie, z
wykorzystaniem różnych poziomów ważności. Jeśli zdefiniujemy sprzeczne style dla
tego samego tagu HTML, definicja najbardziej wewnętrzna (najbliższa tagu) rządzi.

Zaawansowane funkcje stylów
Definicja stylu to połączenie określonej właściwości i jej wartości, oddzielonych od siebie
dwukropkiem. Aby w tej samej definicji pomieścić kilka właściwości, należy po prostu
oddzielić je od siebie średnikami:
H3 { font-family: Arial; font-style: italic; color: green }

Aby zdefiniować więcej niż jedną wartość dla jednej właściwości, należy je kolejno dopisywać,
oddzielając przecinkami:
H3 { font-family: Arial, Helvetica, sans-serif;
font-style: italic;
color: green }

Definiowanie nowych klas i ID

Klasa
Dowolny tag HTML może być selektorem, ale można także zdefiniować nową klasę, nadając
jej nazwę, zawsze poprzedzoną kropką. Zdefiniowanej w ten sposób klasy można używać
z dowolnym tagiem HTML w dokumencie w celu zastosowania stylu, bez ograniczania
samego tagu do konkretnego stylu.
.bmaroon {font-style: italic; color: maroon}
To jest wytłuszczony, kursywowy tekst koloru kasztanowego.


ID
ID są stosowane zasadniczo w ten sam sposób, z tą różnicą, że są poprzedzane znakiem #
(hash), nie kropką:
#bright { font-weight: bolder; color: #00ff00 }

Dodajemy je do tagów HTML w następujący sposób:

Ten tekst jest trudny do odczytania.



Selektory kontekstowe
STRONG EM { color: red }

Ten rodzaj selektora określa się mianem selektora kontekstowego, ponieważ tekst,
zakodowany przy pomocy tagu będzie miał kolor czerwony jedyniew kontekście
tagu , innymi słowy, gdy będzie w nim zagnieżdżony:
To jest tekst pogrubiony, a ten jest pogrubiony, kursywowy i
czerwony

Ten tekst jest pisany tylko kursywą.

Grupowanieselektorów
Można także grupować selektory o wspólnym stylu w celu ograniczenia rozmiarów arkusza
stylów i powtarzania się w nim elementów. Należy je po prostu oddzielać od siebie
przecinkami:
H1, STRONG EM, TD { font-family: Arial; color: blue; }

Dodatkowe formatowanie
Jeśli chcemy, żeby któryś z selektorów posiadał dodatkowe atrybuty formatowania, musimy
go po prostu na nowo zdefiniować:
H1 { font-style: italic }

Skróty w definicjistylu
W samej definicji stylu można używać skrótów, np. :
EM {font: 12pt/14pt bolder Arial, Helvetica}
Stanowi skrót dla
EM {font-family: Arial, Helvetica; font-size: 12pt; line-height: 14pt; font-weight: bolder}

Pseudoklasy zakotwiczenia
Pseudoklasy mogą również rozszerzać css tak, by obejmowały one właściwości tagów, które
nie stanowią elementuspecyfikacji HTML, które jednakże obsługiwane są przez
przeglądarki. Na przykład, tag nie ma atrybutów LINK, ACTIVE czy
VISITED (aktywny czy odwiedzony), natomiast przeglądarki obsługują różne kolory
linków, w zależności od ich statusu. Możliwe jest definiowanie pseudoklas tagu
przy pomocy znaku kolorowego:
A:link {color: red}
A:visited {color: blue}
A:active {color: maroon}

Takie ustawienie powoduje, że nie odwiedzone linki zyskują kolor czerwony, odwiedzone linki

niebieski, a linki aktywne (klikane)
kasztanowy.

O czym nie było dotychczas mowy?

Struktura dokumentu HTML
Dokument HTML 4.0 składa się z trzech części:
1. Wiersza, zawierającego informację o wersji HTML
HTML 4.0 specyfikuje trzy definicje typu dokumentu (DTD), autorzy zatem muszą umieścić w
dokumencie jedną z następujących deklaracji typu dokumentu. DTD różnią się
obsługiwanymi elementami.

Strict DTD:
"http://www.w3.org/TR/REC-html40/strict.dtd">

Transitional DTD = Strict DTD plus elementy nie zalecanych:
"http://www.w3.org/TR/REC-html40/loose.dtd">

FRAMESET DTD = Transitional DTD + ramki
"http://www.w3.org/TR/REC-html40/frameset.dtd">

2. Deklaratywnej sekcji nagłówkowej (ograniczanej elementem HEAD)
3. Sekcji zasadniczej (BODY), zawierającej faktyczną treść dokumentu.

Część zasadnicza może być ustanawiana elementami BODY lub elementami FRAMESET.

Informacja nagłówkowa
-opis, słowa kluczowe, Odpowiedz i inne informacje, wykorzystywane przez
wyszukiwarki.
Parametry: NAME, HTTP-EQUIV, CONTENT
Zmienne użytkownika:





Zmienne systemowe:




W FPE: menu Plik, okno dialogowe Właściwości Strony..., zakładka własne
Zmienne Systemowe i
Zmienne Użytkownika.

określa ścieżkę głównego katalogu. Używanie tagu BASE:



Ścieżka dostępu do pliku cat.gif będzie interpretowana jako
http://www.unss.sk/course/martina/chimes.wav

W FPE: Menu Plik, okno dialogowe Właściwości Strony, zakładka Ogólne, pole edycyjne Lokalizacja
Katalogu Głównego.

Definiowanie skryptów (szczegóły w sobotę)
Definiowanie stylów czcionki (szczegóły w sobotę)

Języki
Po co określać używane na stronach internetowych języki?
- wspomaganie wyszukiwarek
- wspomaganie syntezatorów mowy
- pomoc dla agenta użytkownika w doborze wariantu kroju czcionki dla wysokiej jakości
typografii
- pomoc dla agenta użytkownika w doborze zestawu cudzysłowów
- pomoc dla agenta użytkownika w decydowaniu o przenoszeniu wyrazów, akcentach i
odstępach wyrazowych
- wspomaganie programów do korekty ortografii i gramatyki

Przykład:
"http://www.w3.org/TR/html4/strict.dtd">


Kilka języków


Interpretowane jako angielski...

Interpretowane jako hiszpański...

Ponownie interpretowane jako angielski...

Angielski tekst, przetykany odrobiną japońskiego Tu ponownie zaczyna
się angielski...



Dwuliterowe kody różnych języków, to, między innymi, FR (francuski), DE (niemiecki), IT
(włoski), NL (holenderski), EL (grecki), ES (hiszpański), PT (portugalski), AR
(arabski), HE (hebrajski), RU (rosyjski), ZH (chiński), JA (japoński), HI (język Hindi),
UR (język Urdu) czy SA (Sanskryt).

V. Załącznik

D. Komendy klawiszowe JFW 3.3

Uwaga: Tę samą informację można uzyskać w Pomocy programu JAWS.

Poniższe kombinacje klawiszowe są przydatne generalnie:
Insert+F1
pomoc kontekstowa (gdzie jestem, co mogę teraz zrobić)
Insert+h
pomoc JAWS odnośnie klawiszy gorących w aktywnej aplikacji
Insert'w
standardowe klawiaturowe klawisze gorące dla aplikacji
5 na klawiaturze numerycznej
odczyt wyrazu w kontekście (klawisze dostępu dla elementów
menu)

Komendy JAWS odnoszące się do IE 5
Insert+a
odczyt paska adresu bez przemieszczania fokusa
Insert+a wciśnięte dwukrotnie w krótkim odstępie czasu
przeniesienie kursora JAWS na
pasek adresu
Insert+Escape
odświeżenie ekranu i zaktualizowanie pozaekranowego modułu
Insert+Tab
wypowiedzenie wskazanego linku
Insert+F7
zaznacza link
Insert+Enter
przejście do kolejnego bloku nie stanowiącego linku tekstu, którego rozmiar
przekracza 50 znaków
Insert+F8
wejście na listę widocznych przycisków paska narzędzi
Insert+F9
wybór ramki
Insert+z
przełączanie pomiędzy włączonym i wyłączonym trybem wirtualnego kursora PC, w
dokumencie internetowym klawisz ten przełącza pomiędzy interfejsem trybu
konwencjonalnego a interfejsem trybu wirtualnego kursora PC

Komendy JAWS, odnoszące się do FPE
Ctrl+Insert+strzałka w dół
odczytanie aktualnego ekranu
Insert+Delete
wypowiada wiersz
Insert+F8
wejście do listy widocznych przycisków paska narzędzi
Insert+Tab
wypowiedzenie promptu i tekstu okna

Uwaga: Menu kontekstowe, do którego wchodzi się przy pomocy klawisza Aplikacyjnego, nie
odnosi się do kursora wirtualnego.

E. Skróty klawiszowe programu IE 5
Można po stronach internetowych poruszać się nie posługując się myszką, jedynie używając
klawiatury. W tym celu należy korzystać z komend paska menu i standardowych
skrótów klawiszowych programu IE 5.

Uwaga: Tę samą informację można uzyskać w Pomocy programu IE 5. Należyprzejść do paska
menu, wybrać komendę Pomoc, podmenu Spis Treści i Skorowidz, zakładkę Indeks,
wpisać wyraz "skrót" w polu edycyjnym "wpisz poszukiwane słowo". Teraz należy
wcisnąć klawisz Tab, aby przejść do okna listy z tematami pomocy, wybrać temat
Klawisze Skrótów i wcisnąć Enter lub Tab, aby przejść do pola Wyświetl, po czym
należy wcisnąć Enter, aby faktycznie wyświetlić wskazany temat pomocy.
Tab
następny link
Shift+Tab
poprzedni (wcześniejszy) link
Enter
uaktywnienie zaznaczonego linku
Ctrl+Tab lub F6
następna ramka
Ctrl+Shift+Tab
poprzednia (wcześniejsza) ramka
Alt+strzałka w lewo lub Backspace
Wstecz
Alt+strzałka w prawo
Dalej
Alt+Home
przejdź do strony głównej
F5 lub Ctrl+r
odświeżanie bieżącej strony internetowej
Escape
przerwanie ściągania strony
Ctrl+o lub Ctrl+l - przejście do nowego adresu
Ctrl+e
otwarcie Wyszukaj na pasku Eksploratora
Ctrl+i
otwarcie ulubionych na pasku Eksploratora
Ctrl+h
otwarcie historii na pasku Eksploratora
Ctrl+f
Wyszukaj
Ctrl+s
Zapisanie bieżącej strony
Ctrl+p
wydrukowanie bieżącej strony
Ctrl+n
otwarcie nowego okna
Ctrl+w
zamknięcie bieżącego okna

Poniższe kombinacje klawiszowe mogą być przydatne podczas korzystania z paska adresu:
Alt+d
zaznaczenie tekstu na pasku adresu
F4
wyświetlenie historii paska adresu
Ctrl+strzałka w lewo
przejście kursorem w lewo do kolejnego podziału logicznego (kropki lub
znaku slash)
Ctrl+strzałka w prawo
przejście kursorem w prawo do kolejnego logicznego podziału (. Lub /)
Ctrl+Enter
dodanie na początku "www." oraz ",com" na końcu wpisanego tekstu
Strzałka w górę
przejście do przodu na liście elementów automatycznie uzupełnianych
Strzałka w dół
przejście wstecz na liście elementów automatycznie uzupełnianych

Poniższe kombinacje klawiszowe mogą być użyteczne podczas korzystania z Ulubionych:
Ctrl+d
dodanie bieżącej strony do Ulubionych
Ctrl+b
otwarcie okna dialogowego Organizuj Ulubione
Alt+strzałka w górę
przeniesienie zaznaczonego elementu o pozycję wyżej na liście
Ulubionych
Alt+strzałka w dół
przeniesienie zaznaczonego elementu o jedną pozycję w dół na liście
Ulubionych

F. Skróty klawiszowe programu Front Page
Alt+Enter
edytowanie właściwości wskazanego elementu (także dostępne poprzez menu
Edycja)
Ctrl+k
wstawienie hiperlinku
Alt+o
przycisk OK. w widoku HTML
Alt+c
przycisk Anuluj w widoku HTML
Alt+s
pokazanie okienka zaznaczenia kodowania kolorów w widoku HTML
Alt+i
oryginalny przycisk radiowy w widoku HTML
Ctrl+Tab
przełączanie się pomiędzy otwartymi stronami
F6 lub Shift+F6
przełączanie się pomiędzy ramkami

G. Wskazówki odnośnie ułatwień dostępu

Tekst
- Należy zachowywać układ i interfejs podobny na poszczególnych stronach i pilnować, by
wszystkie istotne elementy nawigacyjne były spójne, jeśli chodzi o ich lokalizację.
- Nie ograniczać rozmiaru okna swoich stron. Wielu użytkowników korzysta z dużych
monitorów w celu polepszenia widoczności bądź używa alternatywnych urządzeń i
technologii internetowych.
- Małe bloki tekstu na dużych obszarach białej przestrzeni poprawiają czytelność.
- Należy zapewniać informację kontekstową i informacyjną, pomagającą użytkownikom
rozumieć złożone strony i elementy (tytułować wszystkie ramki, dzielić duże bloki
informacji na mniejsze, ...).
- Unikać używania kilku rodzajów czcionki na raz, a także stosowania czcionek bardzo
wąskich i ozdobnych.
- Unikać używania wielokolumnowych prezentacji oraz tabel (niektóre programy do odczytu
ekranu zaczynają już potrafić rozszpaltowywać pewne prawidłowo kodowane strony
HTML).
- Unikać grafiki ASCII
stosować w zamian grafikę i
jako alternatywę
tekst opisowy.
- Unikać kursywy, tekstu podkreślonego oraz tekstu, pisanego samymi dużymi literami (jest
on trudny do odczytywania dla niektórych osób niedowidzących).
- Tekst o rozmiarach standardowych jest najkorzystniejszy
nie za duży i nie za mały, gdyż
odwiedzający naszą stronę mogą dostosować sobie rozmiary tekstu do własnych potrzeb
(dokonując odpowiednich zmian w ustawieniach swojej przeglądarki).
- Nie należy stosować jakiegokolwiek kodowania w HTML, które ograniczałoby możliwość
ustawiania przez użytkownika własnych czcionek, rozmiaru czcionki czy kolorów.
- Jeśli używamy list nie uporządkowanych, informujmy o liczbie pozycji na początku listy.
- Nie używajmy tagu HR
obrazek linii z tekstem jest lepszą alternatywą.
- Korzystajmy z atrybutu LANG

... ... ...


- Używajmy elementów ABBR i ACRONYM, podawajmy ich pełne znaczenia.
ID
WWW
- Nie używajmy PRE do tworzenia tabelarycznego układu tekstu
używajmy tabel.
- Nie używajmy nagłówków H1, H2, ..., H6 do tworzenia większego tekstu
używajmy arkuszy
stylów
nagłówków używajmy do przedstawiania struktury dokumentu.
- Nie używajmy elementu BLOCKQUOTE do uzyskiwania wcięcia akapitu, który nie jest
cytatem.
- Twórzmy logiczny porządek tabulacji wszystkich linków, elementów formularzy i obiektów
(atrybut TOPINDEX).

Tabele
- Używajmy tabel do prezentacji rzeczywiście tabelarycznej informacji, tzw. "tabel danych",
nie w celu tworzenia takiego czy innego układu strony, chyba, że przy odczycie linearnym
dana tabela jest sensowna.
- Identyfikujmy nagłówki wierszy i kolumn (TD i TH).
- Gdy tabela ma podziały strukturalne inne, niż widoczne w oparciu o wiersze i kolumny,
stosujmy odpowiednie oznaczenia, identyfikujące te podziały (THEAD, TFOOT, TBODY,
COL, COLGROUP; AXIS, SCOPE HEADER).
- Nie używajmy elementu TH w przypadku innych komórek niż nagłówek tabeli, po to, by
tekst w takiej komórce był wycentrowany i wytłuszczony.
- Używajmy skrótów etykiet tabel (przy pomocy atrybutu "ABBR" na TH).
- Przygotowujmy podsumowania tabel (atrybut "SUMMARY" lub używajmy atrybutu
LONGDESC, odsyłającego do opisu lub danych.
- We wszystkich tabelach, układających tekst równolegle, kolumny z zawijaniem wyrazów
wymagają alternatywnego tekstu linearnego (na bieżącej lub innej stronie).

Linki
- Używajmy w nazwach linków wystarczającej ilości słów, by były same w sobie zrozumiałe

nie używajmy sformułowań typu "kliknij tutaj", "To", "Kliknij", "Idź", ...
- Identyfikujmy jasno docelowe miejsce każdego linku
wybierajmy dla linków znaczące
słowa czy sformułowania.
- Sąsiadujące ze sobą linki winny być oddzielone (nie samym Enterem, używajmy tekstu lub
grafiki).
- Zważajmy, by linki były podkreślane, aby screen readery mogły je rozpoznawać, nie
podkreślajmy natomiast tekstu, który nie jest linkiem.
- Wyposażajmy ważne linki w skróty klawiszowe (LABEL, A, CAPTION, LEGEND)
...
- Rozważmy umieszczenie wewnętrznych linków w obrębie dłuższych stron, aby użytkownicy mogli
przeskakiwać od jednego do drugiego fragmentu strony jednym kliknięciem.
- Sprawdzajmy regularnie wszystkie linki z naszej strony, aby upewnić się czy są aktualne.

Zawartość dźwiękowa i wizualna
- Wszystkie linki graficzne i przyciski winny być duże i łatwe do klikania.
- Nietekstualna zawartość winna być opatrzona alternatywnym opisem tekstowym (obrazki, symbole,
obszary z mapami graficznymi, animacje, aplety, grafika ASCII, ramki, skrypty, grafiki
wykorzystywane jako elementy wyliczania na listach, elementy odstępne, przyciski graficzne,
dźwięki, samodzielne pliki dźwiękowe, video, ...).
...
- Używajmy ALT= dla elementów wizualnych, które nie niosą ze sobą znaczącej informacji.
- Nie bazujmy wyłącznie na kolorze.
- Używanie tapet dla tła i przesuwających się obrazów rozprasza i sprawia, że strona jest znacznie
trudniejsza, a niekiedy niemożliwa do odczytania dla wielu czytelników.
- Upewniajmy się czy połączenie kolorów tekstu i tła zapewnia wystarczający kontrast (połączenia
kolorów w rodzaju brązowy na czekoladowym czy zielony na szarym nie stanowią najlepszego
wyboru; unikajmy połączenia żółci i niebieskiego oraz czerwonego z zielonym ze względu na
użytkowników z pewnymi rodzajami daltonizmu).
- Pilnujmy, aby wybrany przez nas zestaw kolorów można było w razie potrzeby zastąpić własnym
ustawieniem przeglądarki.
- Dopilnujmy, aby obiekty i strony poruszające się, migoczące, przewijające się i automatycznie
uzupełniające się, dało się zatrzymywać (ze względu na osoby z upośledzeniami kognitywnymi czy
wzrokowymi).
- Twórzmy mapy po stronie klienta, zapewniające dostępny tekst dla tzw. miejsc gorących
map graficznych; jeśli używamy map po stronie serwera, przygotowujmy odpowiadające im
linki tekstowe.
- Zapewniajmy opisy lub omówienia zawartości elementów dźwiękowych.
- Zapewniajmy opisy tekstowe lub dźwiękowe zawartości video.
- Używajmy jednostek względnych zamiast bezwzględnych


Ramki
- Tytułujmy każdą ramkę, aby użytkownicy mogli rozpoznawać ramki po tytułach.
- Nie hamujmy przewijania się ramek
nie jesteśmy w stanie przewidzieć jaką rozdzielczość,
wielkość czcionki, krój i inne opcje, będzie miał ustawione użytkownik.

Ogólne
- Datowanie stron w momencie ich aktualizacji czy edycji pozwala użytkownikowi orientować
się, na ile aktualne są informacje na naszej stronie, zwiększając zaufanie do zawartych tam
treści.
- Stworzenie wyszukiwarki na naszej stronie pozwoli użytkownikowi przeskakiwać do tego,
co ich interesuje.
- Archiwa należy organizować w sposób logiczny
np., latami, tematami
przy czym winno
być możliwe przeszukiwanie ich przy pomocy słów kluczowych.

Idealna witryna internetowa
To nie taka, która dla grupy ludzi jest atrakcyjna,
Ale jest to strona, którą może odwiedzić każdy
I uzyskać z niej tyle samo informacji.

Bibliografia i źródła
(dla informacji tytuły są w miarę możliwości tłumaczone)
[1] Barta, J.: Form Tutor v2.01 (uczymy się formularzy)
[2] Guidelines for designing accessible HTML Documents. (Wskazówki odnośnie tworzenia
dostępnych dokumentów HTML). Web Accessibility Initiative (WAI) http://www.w3.org/WAI/.
[3] Chong, S.: Design of Accessible Web pages. (Projektowanie dostępnych stron internetowych).
[4] Hints for designing accessible Websites. (Sugestie odnośnie tworzenia dostępnych witryn
internetowych). http://www.rnib.org.uk .
[5] Dokumentacja JAWS for Windows. http://www.hj.com .
[6] KNOWLEDGE: Accessible HTML. (Dostępny HTML). http://www.utoronto.ca/atrc/rd.html.
[7] Dokumentacja pomocy programu Internet Explorer 5. http://www.microsoft.com.
[8] RNIB
Hints for designing accessible Web sites. (Królewski Narodowy Instytut dla
Niewidomych
sugestie odnośnie tworzenia dostępnych witryn internetowych).
http://www.rnib.org.uk.
[9] Morley, S.:Windows 95 Explained, A Guide for Blind and Visually Impaired Users, (Windows
95 wyjaśnione. Przewodnik dla niewidomych i niedowidzących użytkowników), RNIB,
Peterborough, UK, 1997.
[10] Rehabilitacyjny Ośrodek Badawczo-Szkoleniowy Stanu Zachodnia Virginia: Getting A Grip on
HTML version 3.0. (Zrozumieć HTML wer. 3.0).
[11] Valdes, L.: Accessibility on the Internet. (Dostępność w Internecie). Biuro ds. Wzroku,
Vancouver, British Columbia, cannada, 1998.
[12] Web Accessibility v. 1.1 (Dostępność Internetu).
http://www.austin.ibm.com/sns/sccessweb.html.
[13] Chisholm, W.-Vanderheiden,G.-Jacobs,I.: Web Content Accessibility Guidelines 1.0
(Wskazówki ku dostępności treści internetowych). http://www.w3.org/TR/1999/WAI-
WEBCONTENT-19990505.
[14] Wendy Chisholm, Mark Novak: Increasing the Accessibility of the Web through style sheets,
scripts, and "plug-ins". (Poprawianie dostępności Internetu poprzez arkusze stylów, skrypty i
wtyczki).
[15] World Wide Web Consortium http://www.w3.org
Module 6: Design of Accessible Web Pages and Access to WWW... 34


Wyszukiwarka

Podobne podstrony:
Opis zawodu Projektant stron internetowych
Projektant stron internetowych!3202
projektowanie stron internetowych
Projektowanie stron internetowych Przewodnik dla poczatkujacych webmasterow po X HTML CSS i grafice
Najgłupsze adresy stron internetowych
Funkcjonalność stron internetowych Banki internetowe
kurs tworzenia stron internetowych w języku html
kurs tworzenia stron internetowych w języku htmlii
10 mitow pozycjonowania stron internetowych Arkadiusz Podlaski

więcej podobnych podstron