Wikipedia:Руководство по стилю/Доступность/Учебник по таблицам данных

Эта страница справки представляет собой практическое руководство . В нем объясняются концепции или процессы, используемые в Wikipedia:Руководство по стилю/доступности. Это не является политикой или руководством Wikipedia и может отражать различные уровни консенсуса .

Ярлыки ВП:ДТТ МОС:DTT WP:DTABTUT MOS:DTABTUT MOS:ТАБЛИЦЫ ДАННЫХ

Это руководство является руководством, которое, как часть Руководства по стилю Википедии , призвано помочь тем, кто создает таблицы данных (или, чаще, списки ), в обеспечении доступности контента для всех . Для получения дополнительной информации о том, как создавать и редактировать таблицы, см. Help:Table .

Руководящие принципы на этой странице отсортированы в первую очередь по приоритету, затем по сложности. Уровни приоритета определяются рейтингами критериев доступности A, AA и AAA (в порядке убывания важности в качестве соображений доступности) Руководящих принципов доступности веб-контента (WCAG) 2.0 Консорциума Всемирной паутины (W3C) . ^{[WCAG 1]} Сложность показывает , насколько легко или нет пользователям Википедии соблюдать руководящие принципы.

Руководящие принципы здесь в основном следуют подходу WCAG 2.0 и некоторым дополнительным авторитетным источникам, таким как WebAIM , когда это уместно. Обзор эксперта по доступности был необходим для обеспечения правильной интерпретации WCAG 2.0; этот обзор был сделан в сентябре 2010 года. ^{[примечание 1]}

• Приоритет: высокий (уровень доступности: A)
• Уровень сложности: легкий (синтаксис довольно прост и редакторы к нему привыкают; макет может изменить привычки пользователей)

{| class = "wikitable" |+ caption text |- ! scope = "col" | заголовок столбца 1 ! scope = "col" | заголовок столбца 2 ! scope = "col" | заголовок столбца 3 |- ! scope = "row" | заголовок строки 1 | данные 1 || данные 2 |- ! scope = "row" | заголовок строки 2 | данные 3 || данные 4 |}           

Подпись — это название таблицы, описывающее ее характер. ^{[WCAG 2]}

Как и заголовок, они помогают посетителям представить информацию в логической структуре. ^{[WCAG 3]} Заголовки помогают программам чтения с экрана отображать информацию заголовка о ячейках данных. Например, информация заголовка озвучивается до данных ячейки, или информация заголовка предоставляется по запросу. ^[1]

Это четко определяет заголовки как заголовки столбцов или заголовки строк соответственно. ^{[примечание 2] [WCAG 4]}

Как видно из примера выше, заголовки строк по умолчанию форматируются как жирные, центрированные и с более темным фоном. Это обычное поведение в Интернете и стандартный рендеринг в большинстве браузеров. В некоторых обстоятельствах может быть желательно применить стиль, настроенный для конкретного случая. Класс plainrowheadersбудет применять выравнивание по левому краю и форматирование с нормальным весом, чтобы редакторы не чувствовали необходимости переопределять форматирование заголовка с помощью встроенных объявлений CSS для каждой ячейки. ^{[примечание 3]} При использовании самого по себе plainrowheadersзаголовки будут выглядеть как неизмененные ячейки данных, за исключением более темного фона.

Чтобы использовать plainrowheaders, поместите его (например wikitable) в classатрибут в начале таблицы. В примере ниже показан нежирный, выровненный по левому краю заголовок строки с пользовательским более крупным шрифтом:

{| class = "wikitable plainrowheaders" |- ! scope = "col" | заголовок столбца 1 ! scope = "col" | заголовок столбца 2 |- ! scope = "row" style = "font-size: larger;" | заголовок строки | данные |}        

Разметка таблиц предусматривает как подписи , так и резюме , оба очень полезны для обеспечения доступности таблиц. Подпись представляет собой описательный заголовок для таблицы, а резюме представляет собой «краткое изложение» ее содержания. Если хотите, можете считать их аналогами, соответственно, заголовка и аннотации журнальной статьи.

• Приоритет: высокий (уровень доступности: A)
• Уровень сложности: легкий (синтаксис довольно прост и уже используется; макет немного меняет привычки пользователей)

Все таблицы данных нуждаются в заголовке таблицы , который кратко описывает, о чем таблица. ^{[WCAG 2]} Он играет роль заголовка таблицы и рекомендуется в качестве наилучшей практики. ^[2] Обычно вам в любом случае понадобится какой-то заголовок или описание, представляющее новую таблицу, и именно для этого существует функция заголовка. Заголовки таблиц создаются с помощью |+. ^{[примечание 4]} Заголовок может быть стилизован с помощью CSS и может включать в себя вики-ссылки, ссылки на источники и т. д. Он может быть явно размещен слева, как и другие заголовки Википедии с помощью style="text-align: left;"(хорошая идея, особенно для широких таблиц). Заголовки не используются для макетов таблиц (они устарели в Википедии, а также в более широком смысле, но некоторые редакторы временно прибегают к ним, пока более поздние редакторы не викикодят то, чего они пытались достичь.)

Временный случай не использования |+заголовка — определенные ситуации при использовании сворачиваемой таблицы . С сентября 2010 года ^[update]элемент управления сворачиванием "[hide]" / "[show]" должен находиться внутри заголовка таблицы (пока скрипт сворачиваемости не будет улучшен), и он должен быть достаточно большим, чтобы вместить его. Если у таблицы нет заголовка или только очень маленький заголовок, распространенным решением было поместить текст заголовка в заголовок таблицы, к которому может быть присоединен контроллер сворачивания. ^{[ необходимо разъяснение ]}

Пример правильной подписи от Tobin Bell#Credits :

Подписи должны быть краткими; если таблица нуждается в расширенном введении, предоставьте его в обычной прозе статьи, затем предоставьте более простую подпись. Однако подписи таблиц, состоящие из одного слова, например «Актер», «Фильм» или «Телевидение» – как в предыдущей редакции фильмографии Тобина Белла – неадекватны, поскольку они недостаточно описательны.

• Приоритет: высокий (уровень доступности: A)
• Сложность: средняя (требуются значительные изменения в таблицах, редакторы, похоже, неохотно разделяют таблицы, требуется больше тестирования и обратной связи)

Не размещайте заголовки столбцов в середине таблицы, чтобы визуально разделить таблицу. Например, программа чтения с экрана, читающая ячейку «Штутгарт, Германия», может связать ячейку со следующими заголовками: «Место проведения, Представляя Советский Союз, Представляя Беларусь». Три заголовка читаются вслух. Первый и третий являются правильными и ожидаемыми. Но «Представляя Советский Союз» не относится к нижней половине таблицы, и машина этого не понимает. Таким образом, машина не сможет правильно связать заголовок и ячейки и предоставит пользователю вводящую в заблуждение информацию о структуре таблицы.

В большинстве случаев более простым решением является разделение таблицы на несколько подтаблиц с пояснительными подзаголовками (второй пример).

От Василия Каптюха и продюсера {{ AchievementTable }} :

Год	Соревнование	Место проведения	Позиция	Примечания
Представляя Советский Союз
1985	Чемпионат Европы среди юниоров	Котбус , Восточная Германия	3-й
1986	Чемпионат мира среди юниоров	Афины, Греция	3-й
1990	Чемпионат Европы	Сплит , Югославия	4-й	63,72 м
Представляю Беларусь
1993	Чемпионаты мира	Штутгарт, Германия	7-й	61,64 м
1995	Чемпионаты мира	Гётеборг , Швеция	3-й	65,88 м
	Финал Гран-при ИААФ	Монте-Карло , Монако	4-й

Другие похожие примеры можно найти в статьях Ивонн ван Геннип, «Мировые рекорды по легкой атлетике среди мастеров» и «Сравнение движков компоновки (каскадные таблицы стилей)#Selectors».

Первое решение, при котором таблица разделена на несколько подтаблиц.

Достижения Василия Каптюха, представляющего Советский Союз 

Соревнование	Год	Место проведения	Позиция	Примечания
Чемпионат Европы среди юниоров	1985	Котбус , Восточная Германия	3-й
Чемпионат мира среди юниоров	1986	Афины, Греция	3-й
Чемпионат Европы	1990	Сплит , Югославия	4-й	63,72 м

Достижения Василия Каптюха, представляющего Беларусь 

Соревнование	Год	Место проведения	Позиция	Примечания
Чемпионаты мира	1993	Штутгарт, Германия	7-й	61,64 м
Чемпионаты мира	1995	Гётеборг , Швеция	3-й	65,88 м
Финал Гран-при ИААФ		Монте-Карло , Монако	4-й

Альтернативный вариант, реализация которого займет немного больше времени, — это добавление столбца для представления.

Достижения Василия Каптюха

Соревнование	Год	Представляя	Место проведения	Позиция	Примечания
Чемпионат Европы среди юниоров	1985	Советский Союз	Котбус , Восточная Германия	3-й
Чемпионат мира среди юниоров	1986	Советский Союз	Афины, Греция	3-й
Чемпионат Европы	1990	Советский Союз	Сплит , Югославия	4-й	63,72 м
Чемпионаты мира	1993	Беларусь	Штутгарт, Германия	7-й	61,64 м
Чемпионаты мира	1995	Беларусь	Гётеборг , Швеция	3-й	65,88 м
Финал Гран-при ИААФ	1995	Беларусь	Монте-Карло , Монако	4-й

В отличие от простых таблиц, в которых заголовки охватывают только один столбец ( ! scope="col" | ) или одну строку ( ! scope="row" | ), некоторые заголовки могут охватывать несколько столбцов или строк с использованием атрибутов colspanили rowspan. Чтобы четко определить отношения и избежать проблем с доступом, используйте , ! scope="colgroup" colspan="2" | когда заголовок столбца охватывает два столбца и ! scope="rowgroup" rowspan="2" | когда заголовок строки охватывает две строки, корректируя число, если охватывает больше. ^{[WCAG 4]}

{| class = "wikitable" |- ! scope = "col" rowspan = "2" | заголовок столбца 1 ! scope = "col" rowspan = "2" | заголовок столбца 2 ! scope = "colgroup" colspan = "2" | группа заголовков столбцов |- ! scope = "col" | заголовок столбца 3 ! scope = "col" | заголовок столбца 4 |- ! scope = "rowgroup" rowspan = "2" | группа заголовков строк ! scope = "row" | заголовок строки 1 | данные || данные |- ! scope = "row" | заголовок строки 2 | данные || данные |- ! scope = "row" colspan = "2" | заголовок строки 3 | данные || данные |}                        

Для таблиц с более сложными заголовками рекомендуется упростить таблицу или разбить ее на более мелкие таблицы. Если это невозможно, вам придется связать каждую ячейку с соответствующим заголовком(ами), используя атрибуты idи headersвместо scope. В заголовках установите idдля неразмеченное значение, уникальное на странице. В ячейках, которые описываются заголовками, установите для «заголовков» размеченный список описывающих значений «id» в том порядке, в котором программа чтения с экрана должна их читать. ^{[WCAG 5]} Например, в следующей разметке заголовок «Company» описывает компанию «ABC» ( ! id="col1" | Companyи | headers="col1" | ABC).

Ниже приведен пример сложной таблицы с заголовками, которые визуально не понятны, но используют idand headersвместо scopeдля связывания заголовков столбцов и строк с отдельными ячейками. Опять же, рекомендуется упростить таблицу, чтобы заголовки были визуально понятны, разделив ее на таблицы "d" и "e", если это возможно, где текст в ячейках "d" и "e" перемещен в заголовок каждой таблицы.

{| class = "wikitable" |- ! id = "a" | a ! id = "b" | b ! id = "c" | c | - ! colspan = " 3 " id = " d " | d | - ! id = "w" headers = "d a" | w (da) | headers = "db w" | dbw | headers = "dc w" | dcw |- ! id = "x" headers = "d a" | x (da) | headers = "db x" | dbx | headers = "dc x" | dcx |- ! colspan = "3" id = "e" | e |- ! id = "y" headers = "e a" | y (ea) | headers = "eb y" | eby | headers = "ec y" | ecy |- ! id = "z" заголовки = "e a" | z (ea) | заголовки = "eb z" | ebz | заголовки = "ec z" | ecz |}                                         

Обратите внимание, что цвета и изображения с контрастностью, соответствующей требованиям доступности, будут хорошо печататься в оттенках серого в качестве индуцированного эффекта (помимо других преимуществ).

• Приоритет: высокий (уровень доступности: A)
• Сложность: неизвестно (для точной оценки необходимы дополнительные тесты и отзывы)

Изображения внутри таблицы должны соответствовать общим требованиям в Wikipedia:Альтернативный текст для изображений . Однако, маленькие значки являются основным случаем, встречающимся в таблице. Они делятся на две категории:

1. Значки символов должны иметь минимальный альтернативный текст, передающий ту же информацию, что и значок (например: если указывает на увеличение, то он имеет |alt=increase);
2. Декоративные значки (значки, не несущие никакой информации или связанные с текстом, содержащим похожую информацию) должны быть отвязаны и иметь пустой alt-текст ( |link=|alt=). Если их невозможно отвязать, будет достаточно минимального alt-текста.

Обратите внимание, что изображения в заголовках могут быть особенно раздражающими для пользователей экранных ридеров , если они плохо обработаны. Если изображение не соответствует вышеуказанным критериям, имя файла будет частью заголовка. Имя файла будет прочитано вслух в каждой ячейке под заголовком, содержащим значок. Альтернативный текст также будет повторяться, как и имя файла, что также может быть неприятно, если он не имеет отношения к теме или слишком длинный.

• Приоритет: высокий (уровень доступности: A)
• Сложность: средняя (для точной оценки необходимо тестирование и отзывы)

Цвета внутри таблицы должны соответствовать требованиям к цвету .

• Цветовой контраст, измеряемый бесплатным анализатором цветового контраста, должен быть достаточным.
• Очень простой инструмент, который может быть полезен для выбора контрастных цветов, — это Color Oracle, «бесплатный симулятор дальтонизма для Windows, Mac и Linux».

Но что еще важнее, информация не должна передаваться только цветом. Информация должна быть доступна и в текстовом виде. Сноска или текстовый знак ^{[примечание 5]} также могут использоваться для указания на то, что ячейка имеет определенное значение.

Из финансового календаря#График различных финансовых лет:

Примечание: Это пример использования цвета вместо предоставления доступных таблиц. Размещение заголовка таблицы в заголовке таблицы вместо этого приводит к недоступной таблице.

Условные обозначения: ячейки, отмеченные знаком « ✓ », включены в финансовый год.

От Дуэйна Чемберса (с улучшенной подписью к таблице и структурой; но оригинальное использование цвета хорошее):

• Приоритет: высокий (уровень доступности: A)
• Уровень сложности: неизвестен (еще не оценен)

Вложенные таблицы могут сбивать с толку пользователей программ чтения с экрана , однако при правильном использовании по ним можно перемещаться так же, как и с помощью любого другого подхода к кодированию для желаемого отображения.

Ключевым принципом в их разработке и реализации является поддержание нормального потока, т. е. обеспечение того, чтобы порядок содержимого в коде страницы соответствовал порядку, в котором содержимое должно быть представлено. Это также применимо к другим подходам к кодированию, таким как div с CSS-стилем или атрибуты ячеек HTML rowspan и colspan.

Вложенность таблиц данных с ячейками заголовков также затрудняет их разумный анализ для пользователей со специальными навыками чтения, поэтому ее следует избегать.

Вложенные таблицы могут быть наиболее подходящим методом, когда ячейки родительской таблицы должны быть разделены неравномерными внутренними разрывами строк или столбцов. Обратите внимание, что каждая таблица должна начинаться с новой строки.

В следующем примере вложенные таблицы используются для отображения подтаблиц с различной высотой ячеек:

{| class = "wikitable" | {| class = "wikitable" | Вставить 1up |- | Вставить 1down: < br >   < br > Выше, чем вставка 1up |} | {| class = "wikitable" |   < br > Вставить 2 < br > полной высоты < br >   |} | {| class = "wikitable" | Вставить 3up < br >   < br > Высокая ячейка здесь |- | Вставить 3down |} | {| class = "wikitable" | Вставить 4up < br >   |- | Вставить 4down < br > То же, что и выше |} |}      

Для сравнения, использование rowspan не только потребовало бы тщательной подмены позиций и значений, но и нарушило бы нормальный поток, разделив каждое подмножество данных и даже приведя к тому, что Insert 3down и Insert 4down будут считываться в неправильном порядке:

{| class = "wikitable" | Вставить 1up | rowspan = "4" | полная высота | rowspan = "3" | Вставить 3up < br >   < br > Высокая ячейка здесь | rowspan = "2" | Вставить 4up |- | rowspan = "3" | Вставить 1down: < br >   < br > Выше, чем вставка 1up |- | rowspan = "2" | Вставить 4down < br > То же, что и выше |- | Вставить 3down |}           

CSS также имеет свойства отображения таблиц, которые можно применять к другим элементам, таким как div, и можно использовать для создания макета с правильным нормальным потоком. Но для этого требуется пользовательская таблица стилей, определяющая различные классы заменяющей сущности. Более того, это нарушает формальное разделение структуры HTML и стиля CSS, используя язык стилей для отображения правильной структуры на экране. Это не нужно и не рекомендуется.

Дополнительную информацию можно найти в руководстве по таблицам данных/Внутренние рекомендации . Однако эта рекомендация не является обязательной и служит лишь в качестве ресурса для участников WikiProject Accessibility.

Это примеры таблиц, озвученных экранными дикторами. Они могут быть полезны в качестве конкретных примеров для демонстрации сообществу, когда сообщество испытывает трудности с пониманием того, как доступная таблица приносит пользу пользователю экранного диктора.

• Таблица с использованием атрибутов SCOPE ^{[ нерабочая ссылка ‍ ]} (NVDA с использованием голоса Crystal от NaturalSoft)
• Таблица с использованием атрибута ID ^{[ нерабочая ссылка ‍ ]} (NVDA использует голос eSpeak по умолчанию)