Поддержка сайта

Высокие позиции в поисковой системе, на прямую зависят от развития вашего сайта.

Продвижение сайтов

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

Создание сайтов

Мы делаем сайты быстро, недорого и профессионально. От работы с нами, у вас останутся только положительные эмоции.

Продвинутый уровень веб-доступности

.

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

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

Указанный атрибут применяется к заголовку и может иметь два значения: row и col. Иначе говоря, он как бы сообщает браузеру (и прочим технологиям, обращающимся к нему): «Эй, видишь эту заглавную ячейку? Все, что ниже, относится к ней, не забывай это!» В коде ниже вы можете видеть, как это выглядит формально:

Таблица нашего проектного сайта содержит заглавные ячейки только для столбцов, но вам может попасться и таблица с наименованиями строк, например, показанная на рис. 6.10.

Рис. 6.10. Применение атрибутов scope=row и scope=col к заглавным ячейкам таблицы

Вот HTML-код для этого примера:

Если вы объедините ячейки с помощью colspan и rowspan, то будет сложнее пометить столбцы и строки для обеспечения доступности. Для этого предназначены такие инструменты, как атрибут headers и идентификаторы. О них хорошо написано в статье Bring on the Tables Роджера Йоханссона (Roger Johansson).

Я, в свою очередь, скажу — старайтесь делать таблицы как можно более простыми. Если вы сконструировали очень сложную таблицу с использованием rowspan, col span, headers и i d-атрибутов, то устройства наподобие экранных дикторов могут обрабатывать ее не совсем корректно. Даже если эти устройства поддерживают восприятие комплексных таблиц, пользователю нужно уметь работать со специальными методами, позволяющими получить доступ к такой информации. Поэтому относитесь критически к тому, чему я вас только что научил.

Резюме

Итак, когда вам нужно представить информацию в аккуратном, упорядоченном виде, таблица — наилучший вариант, а в HTML есть много важных инструментов для работы с ней. Мы рассмотрели, как с помощью простейших HTML-элементов расположить данные в необходимом порядке, а также использовать CSS для придания таблицам привлекательного внешнего вида. Мы также затронули вопрос о том, как сделать таблицу доступной для всех.

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

.

Читайте так же:
Not found