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

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

Ярлыки WP: DTT MOS: DTT WP: DTABTUT МОС: DTABTUT

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

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

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

Обзор основ [ править ]

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

{| class = "wikitable"| + [текст подписи]| -! scope = "col" | [заголовок столбца 1]! scope = "col" | [заголовок столбца 2]! scope = "col" | [заголовок столбца 3]| -! scope = "row" | [заголовок строки 1]| [нормальная ячейка 1,2] || [нормальная ячейка 1,3]| -! scope = "row" | [заголовок строки 2]| [нормальная ячейка 2,2] || [нормальная ячейка 2,3]...|}

который дает:

Заголовок ( |+)

Заголовок - это заголовок таблицы, описывающий ее характер. ^{[WCAG 2]}

Заголовки строк и столбцов (  ! )

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

Область заголовков (  ! scope="col" | and ! scope="row" | )

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

Макет заголовков таблиц [ править ]

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

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

{| class = "wikitable plainrowheaders"! scope = "row" style = "font-size: больше;" | [заголовок строки 1]

Надлежащие подписи и сводки таблиц [ править ]

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

Подпись [ править ]

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

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

Временный случай |+неиспользования заголовка - это в определенных ситуациях при использовании сворачиваемой таблицы . По состоянию на сентябрь 2010 ^{[Обновить]}года элемент управления сворачиванием «[скрыть]» / «[показать]» должен находиться внутри заголовка таблицы (до тех пор, пока не будет улучшен сценарий сворачивания), и он должен быть достаточно большим, чтобы содержать его. Если таблица не имеет заголовка или имеет только очень маленький заголовок, обычным решением было поместить текст заголовка в заголовок таблицы, к которому может присоединиться контроллер сворачивания. ^{[ требуется разъяснение ]}

Пример правильной подписи из Тобина Белла # Фильмография :

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

Избегайте заголовков столбцов в середине таблицы [ править ]

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

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

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

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

Заголовки столбцов: плохой пример [ править ]

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

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

Другие аналогичные примеры можно найти в Yvonne van Gennip , Masters Athletics World Records и Comparison of layout engine (Cascading Style Sheets) #Selectors .

Заголовки столбцов: хороший пример 1 [ править ]

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

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

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

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

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

Заголовки столбцов: хороший пример 2 [ править ]

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

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

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

Сложные таблицы [ править ]

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

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

Возьмем, к примеру, эту таблицу:

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

Изображения и цвет [ править ]

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

Изображения [ редактировать ]

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

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

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

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

Цвет [ править ]

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

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

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

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

Плохое использование цвета [ править ]

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

Хорошее использование цвета [ править ]

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

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

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

Избегайте вложенных таблиц данных [ править ]

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

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

Посетители, использующие программы чтения с экрана и дисплеи Брайля, могут пролистывать страницы одно слово за другим или переходить от одного «элемента» к другому, где «элементы» определяются разметкой HTML. Команды для перемещения по элементам на странице различаются от системы к системе, но мы будем моделировать этот процесс как нажатие клавиши Tab.

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

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

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

-  Джо Кларк, Таблицы и рамки, joeclark.org ^[3]

Ресурсы [ править ]

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

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

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

Заметки [ править ]

Ссылки [ править ]

Ссылки WCAG [ править ]