Niepełnosprawni Stoły


Original: http://www.evengrounds.com/developers/accessible-tables#.USzNtFezxFd

Tabele są jednym z najbardziej typowych elementów można zobaczyć na stronach internetowych. Jeśli chcesz, aby wyświetlić informacje w wierszach i kolumnach, tworząc tabelę Twoja pierwsza i często jedynym rozwiązaniem. Na szczęście, dzięki czemu stół jest ogólnie łatwe: wystarczy wpisać dane, i wskazać, jakie są wiersze, a które są kolumny.

Ale mimo prostoty tego elementu, stoły odgrywać kluczową rolę w pomaganiu użytkownikom zrozumieć zawartość strony internetowej. Osoby niepełnosprawne nie są wyjątkiem od tego faktu. Dlatego ważne jest, aby wiedzieć, jak sprawić, by stoły dostępne dla wszystkich typów użytkowników.

Tutaj pokażę jak stworzyć tabele są dostępne.
Dwa rodzaje tabel
Tabele układu

Tabele układu dostarczy Ci środków do organizowania informacji na swojej stronie internetowej. Za pomocą tabel układu do zawartości sieci Web wyświetlane wizualnie logiczne.

Zaleca się, że zamiast tabel układu, można użyć CSS w tworzeniu układu strony. Pomaga to zmniejszyć rozmiar pliku ze stron internetowych i zwiększenia ich dostępności dla użytkowników technologii wspomagających. O ile to możliwe, należy użyć tabel tylko do przedstawiania danych.

Niemniej jednak, nie ma nic złego w korzystaniu z tabel układu w tworzeniu struktury strony. W rzeczywistości, wiele stron internetowych, za pomocą tabel układu i działają idealnie w porządku dla tych miejsc. Również tabel układu przeznaczone są do samego celu kształtowania struktury Twojej treści strony.

Tabel danych

Będziemy naprawdę skupić się na tego typu tabeli. Tabele danych, jak sugeruje ich nazwa, dostarczy Ci środki do wyświetlania danych w formie tabelarycznej. Jak wiadomo, tworzenie tabel dla danych jest łatwe. Na szczęście, tak robi tabele dostępne.
Jak zrobić tabele Niepełnosprawni

Oto kilka kroków w celu zapewnienia dostępu do tabel w swoich stronach internetowych.

Używaj nagłówków tabel

Jeśli tabele danych w witrynie, to jest bardzo ważne, aby stosować nagłówki tabeli. Musisz określić informacje, które reprezentuje nagłówek wiersza a nagłówkiem kolumny. Czasami jest to tylko dla wiersza, czasami jest tylko na kolumny, a czasami jest to dla obu stron.

Użytkownicy technologii wspomagających wiele skorzystać nagłówki tabeli. Na przykład, załóżmy, że osoba niewidoma za pomocą czytnika ekranu próbuje uzyskać dostęp do tabeli. Jeśli tabela ma nagłówki, udźwiękawiający ogłosi kolumn lub wierszy nagłówków tabeli za każdym razem użytkownik przemieszcza się z jednej komórki do drugiej. Jest to bardzo pomocne dla osoby niewidomej dostęp do stołu, bo nie mogę patrzeć na kolumny lub wiersza nagłówków podczas nawigowania przez komórki danych.
tag”>Użyj <TH> tagu

tag is one of the most common means of indicating table headers.”><th> Tag jest jednym z najbardziej popularnych środków wskazując nagłówki tabeli. tag.”>Oto przykład, w sprawie, w której należy użyć <TH> znacznik. Powiedzmy, że chcesz stworzyć kalendarz. W górnym rzędzie, będziesz miał siedem dni: niedziela, poniedziałek, wtorek, środa, czwartek, piątek i sobotę. I poniżej nich, masz numery: 1 pod Niedziela, 2 pod poniedziałek, i tak dalej.
Sample Kalendarz niedziela poniedziałek wtorek środa czwartek piątek sobota
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31

W tym momencie, informacje nagłówka zawiera dni. tag.”>Można wskazać informacje nagłówka za pomocą <TH> znacznik. Oto rzeczywisty kod do tabeli dla kalendarza. tag will be explained later in the article.”>Uwaga: korzystanie z tagu <CAPTION> zostanie wyjaśnione w dalszej części artykułu.

“><table border=”1″>

Sample Calendar”>Sample <caption> Kalendarz </ caption>

“><tr>

SundayMondayTuesdayWednesdayThursday”><th> niedziela </ th> <th> poniedziałek </ th> <th> wtorek </ th> <th> środa </ th> <th> czwartek </ th>
FridaySaturday”><th> piątek </ th> <th> sobota </ ​​th>

“></ Tr>

“><tr>

123456<td> 1 </ td> 2 </ td> 3 </ td> 4 </ td> 5 </ td> 6 </ td> <td 7″>> 7 </ td>

“></ Tr>

“><tr>

8910111213<td> 8 </ td> 9 </ td> 10 </ td> 11 </ td> 12 </ td> 13 </ td> <td 14″>> 14 </ td>

“></ Tr>

“><tr>

151617181920<td> 15 </ td> 16 </ td> 17 </ td> 18 </ td> 19 </ td> 20 </ td> <td 21″>> 21 </ td>

“></ Tr>

“><tr>

222324252627<td> 22 </ td> 23 </ td> 24 </ td> 25 </ td> 26 </ td> 27 </ td> <td 28″>> 28 </ td>

“></ Tr>

“><tr>

293031 <td> 29 </ td> 30 </ td> 31 </ td> </ td> </ td> </ td> </ “>td>

“></ Tr>

“></ Table>
Użyj atrybutu Scope

Możesz użyć atrybutu scope jeżeli masz tabelę zawierającą nagłówki obu wierszach i kolumnach. tag.”>Dodać ten atrybut do <th> tagu. Oto przykład, w sprawie, w której musisz użyć atrybutu zakresu.

Powiedzmy masz tabelę do harmonogramu zajęć. Twoje nagłówki kolumn reprezentują godziny i nagłówki wierszy reprezentuje dzień.
Plan zajęć 9:00 – 10:00 10:00 – 11:00 11:00 – 12:00
Poniedziałek polski Algebra Biologia
Wtorek Trygonometria Historia Muzyki
Środa polski Algebra Biologia
Religia czwartek Historia Trygonometria
Piątek Computer Speech Podstawowe Wychowanie fizyczne

Korzystanie z atrybutu scope, będziesz miał następujące linie kodu:

“><table border=”1″>

Class Schedule”><caption> Klasa Harmonogram </ caption>

“><tr>

“><td> </ td>

9:00 – 10:00″><TH scope=”col”> 9:00 – 10:00 </ th>

10:00 – 11:00″><TH scope=”col”> 10:00 – 11:00 </ th>

11:00 – 12:00″><TH scope=”col”> 11:00 – 12:00 </ th>

“></ Tr>

“><tr>

Monday”><TH scope=”row”> poniedziałek </ th>

English”><td> angielski </ td>

Algebra”><td> Algebra </ td>

Biology”><td> Biologia </ td>

“></ Tr>

“><tr>

Tuesday”><TH scope=”row”> wtorek </ th>

Music”><td> Muzyka </ td>

Trigonometry”><td> Trygonometria </ td>

History”><td> History </ td>

“></ Tr>

“><tr>

Wednesday”><TH scope=”row”> środa </ th>

English”><td> angielski </ td>

Algebra”><td> Algebra </ td>

Biology”><td> Biologia </ td>

“></ Tr>

“><tr>

Thursday”><TH scope=”row”> czwartek </ th>

Religion”><td> Religia </ td>

Trigonometry”><td> Trygonometria </ td>

History”><td> History </ td>

“></ Tr>

“><tr>

Friday”><TH scope=”row”> piątek </ th>

Basic Computer”><td> Podstawowe komputerowe </ td>

Speech”><td> Speech </ td>

Physical Education”><td> Wychowanie fizyczne </ td>

“></ Tr>

“></ Table>
Używaj nagłówków i atrybuty id

W przypadku tabel z dwóch lub więcej poziomów, można użyć nagłówków i atrybutów id. Atrybuty te są użyteczne w sytuacjach, gdzie trzeba połączyć wiele nagłówków z jednej komórki danych.

Aby korzystać z nagłówków i atrybuty id, trzeba najpierw zaznaczyć komórkę, która ma być nagłówek. Następnie trzeba dołączyć atrybut id do niego. Następnie należy podjąć id każdej komórki nagłówka, a następnie dodać je do atrybutu headers odpowiedniej komórki danych.

Oto przykład tabeli, która korzysta z nagłówków i atrybutów id. Ta tabela zawiera sklepu muzycznego dostępnych instrumentów i ich ilość i cenę. Wagi są podzielone na dwa typy: wiatr i instrumenty smyczkowe.

Uwaga: Podsumowanie zostanie wyjaśnione w dalszej części artykułu
Dostępnych instrumentów Instrument Cena za sztukę
Instrumenty dęte Flet 4 80,00 dolarów
Trąbka 6 100.00 dolarów
String Instruments Acoustic Guitar 5 300.00 dolarów

Są to przykładowe bloki kodu z tabeli:

“><tr>

“><td> </ td>

Instrument”><TH id=”instrument”> Instrument </ th>

Quantity”><TH id=”quantity”> Ilość </ th>

Price Per Unit”><TH id=”price”> Cena za sztukę </ th>

“></ Tr>

“><tr>

Wind Instruments”><TH rowspan=”2″ id=”wind”> Instrumenty dęte </ th>

Flute”><TH id=”flute”> flet </ th>

4″><td headers=”wind flet quantity”> 4 </ td>

$80.00″><td headers=”wind flet price”> 80,00 dolarów </ td>

“></ Tr>
Użyj podpis i Podsumowanie

Oprócz nagłówków, podpis i sumy są inne fragmenty informacji, które można przypisać do tabeli.

Podpis odnosi się do tytułu tabeli. tag after the tag.”>Umieścić znak <CAPTION> po <table>.

Tu znowu jest blok kodu z tabeli harmonogramu klasy zawierającej tag podpis:

“><table border=”1″>

Class Schedule”><caption> Klasa Harmonogram </ caption>

“><tr>

9:00 – 10:00″><TH scope=”col”> 9:00 – 10:00 </ th>

10:00 – 11:00″><TH scope=”col”> 10:00 – 11:00 </ th>

11:00 – 12:00″><TH scope=”col”> 11:00 – 12:00 </ th>

“></ Tr>

Podsumowanie zawiera krótki opis zawartości tabeli. tag, with the actual summary inside the quotes.”>Umieścić podsumowanie = “” atrybut wewnątrz <table>, z rzeczywistym podsumowanie wewnątrz cudzysłowów. W większości przypadków, gdy podsumowanie jest opcjonalne. Ale jeśli masz złożonych tabel, może chcesz dołączyć streszczenie do niego. Poprzez Podsumowując, można podkreślić najważniejsze dane w tabeli i pomóc czytelnikom szybko odnaleźć konkretne dane.
Złożone tabele

Czasami trzeba będzie pracować z bardzo dużym stołem. W tej tabeli, nie mogą być komórki, których zawartość w sobie jest stolik. To jest to, co wielu developerzy nazywają kompleks tabeli. Innymi słowy, jest to, że ma tabel Tabela wewnątrz nich.

Użyjmy naszej tabeli planie zajęć jako przykład. Jednym z tematów, w tabeli jest Historia. W złożonym tabeli, komórka dla Historii może zawierać dodatkowe informacje, takie jak profesor, tematów i zadań. I te fragmenty informacji mogą być wyświetlane w złożonej strukturze wewnątrz komórki do historii.

Możesz w jednym czasie trzeba tworzyć skomplikowanych tabel, i nie ma nic w tym złego. Ale jeśli tabela staje się zbyt skomplikowane, osób czytając stronę musiałby trudno jest zrozumieć informacje w tabeli. Ogólnie, tabela o 4 do 5 poziomów jest już zbyt skomplikowane.

O ile to możliwe, należy unikać skomplikowanych tabel. Zawsze staram się zrobić prosty strukturę tabel. Jak wspomniano powyżej, to pomaga czytelnikom szybko zrozumieć tabeli układu. Ponadto, w złożonym stole, może trzeba oznaczyć nagłówki kilku danych komórek. Czasami można nawet napisać kod osobno dla każdej komórki. Ale jeśli wyświetla dane prostą tabelę, wystarczy tylko oznaczyć nagłówki raz.