6 простых способов улучшить доступность HTML-таблиц
27 января 2023 г.n HTML-таблицы — отличный способ визуального представления данных в табличном формате. Они позволяют пользователям усваивать информацию, которую в противном случае было бы труднее прочитать. Например, пользователи могут связать данные в каждой ячейке с другими, просматривая таблицу.
Однако это также означает, что слепые пользователи не могут так же легко связать эти ячейки друг с другом. И если они не смогут легко получить доступ к вашим таблицам, вы лишите возможности большого количества людей использовать ваш продукт.
Что мы можем сделать, чтобы решить эту проблему, так это написать правильный HTML-код, который программы чтения с экрана могут хорошо интерпретировать. А для этого вам нужно научиться улучшать доступность HTML-таблиц.
В этой статье вы узнаете больше о доступности таблиц HTML и о том, как сделать таблицы доступными. Вы также узнаете, как можно ускорить создание таблиц HTML со специальными возможностями в своем приложении с помощью редактора WYSIWYG. Начнем с более подробного изучения таблиц HTML со специальными возможностями.
Краткая информация об элементе таблицы HTML
Мы все знакомы с таблицами HTML. Это элементы HTML, которые упорядочивают и отображают данные в табличном формате (строки и столбцы разной длины). Они также могут содержать различные типы информации, такие как текст, изображения, ссылки и элементы HTML, включая вложенные таблицы.
HTML-таблицы универсальны, потому что их можно использовать где угодно, если вам нужно упорядоченно представлять связанные данные. На самом деле, они необходимы для некоторых областей или задач, таких как наука о данных или аналитика.
Вы не должны использовать HTML-таблицы в качестве метода макета страницы, даже если это возможно. Это связано с тем, что их целью является отображение данных, а не макет страницы. Кроме того, их использование для макета может привести к снижению качества кода и трудностям в реализации функций адаптивности и специальных возможностей.
Что такое доступность таблиц HTML?
Функции специальных возможностей помогают людям с ограниченными возможностями в использовании программных приложений или веб-сайтов. Эти функции включают в себя сочетания клавиш, преобразование текста в речь, доступность для дальтоников, субтитры, монофонический звук и многое другое. Так что же такое доступность таблиц HTML? Это относится к тому, чтобы сделать HTML-таблицы такими же удобными для людей с ограниченными возможностями, как и для остальных.
А когда дело доходит до доступности таблиц, программа чтения с экрана — один из лучших инструментов. Программы чтения с экрана — это функция специальных возможностей, которую слепые люди используют для усвоения содержимого веб-сайта или приложения. Эти полезные инструменты расшифровывают теги HTML и считывают информацию для пользователя. Но как программы чтения с экрана интерпретируют HTML-таблицы?
Программы чтения с экрана читают HTML-таблицы слева направо и сверху вниз. Из-за этого им обычно трудно интерпретировать размещение ячейки или ее отношение к другой ячейке или заголовку. Поэтому разработчики должны писать правильный HTML-код, который могут прочитать вспомогательные технологии. Давайте обсудим, как это сделать, в следующем разделе.
Как улучшить доступность таблиц HTML?
Поначалу некоторые могут сбиваться с толку, создавая доступные HTML-таблицы. Но не беспокойтесь слишком сильно, потому что существует множество ресурсов, которые могут вам помочь. Чтобы сэкономить ваше время, я собрал несколько лучших способов улучшить доступность HTML-таблиц для программ чтения с экрана.
По возможности используйте подписи.
Используете ли вы обычные заголовки (например, h2, h3) для заголовков таблиц? Если это так, вам следует подумать о переходе на тег
Это, в свою очередь, упрощает жизнь людям, использующим программы чтения с экрана. Кстати, тег заголовка всегда должен быть первым элементом в таблице HTML, чтобы он работал.
Правильно используйте заголовки таблиц.
Ячейки заголовков () позволяют программам чтения с экрана сообщать пользователям контекст, сообщая им, где они находятся. Они также сообщают пользователям, как ячейка связана с другими. Что еще более важно, заголовки строк и столбцов (наряду с обычными ячейками данных) никогда не должны иметь пустое значение. Это связано с тем, что это может нарушить процесс чтения программой чтения с экрана.
Но как это сделать, если во многих таблицах верхняя левая ячейка пуста? Ответ заключается в том, чтобы сделать «визуально скрытый» контент невидимым для визуальных пользователей, но видимым для программ чтения с экрана. Один из способов сделать это — использовать класс Bootstrap 5 visually-hidden. . Важно отметить, что это также относится к обычным ячейкам данных.
Используйте атрибут области действия.
Атрибут области действия элемента дополнительно уточняет контекст ячеек. Например, если вы добавите «scope = row» к элементу , программа чтения с экрана будет знать, что эта ячейка заголовка применяется ко всем ячейкам в тот ряд. Точно так же «scope = col» связывает каждую ячейку в столбце с этой ячейкой заголовка.
Используйте атрибут alt для изображений в таблицах.
Нам часто приходится добавлять в таблицы необходимые изображения. Например, что если вы создаете таблицу отчета, содержащую сравнение визуальных результатов двух процессов (например, графики)?
Добавление атрибута alt к изображениям гарантирует, что люди, использующие программы чтения с экрана, смогут также переварить эти типы контента. Конечно, альтернативный текст должен быть четким или достаточно подробным.
Учитывайте сложность таблицы
Как правило, чем проще таблица (чем меньше объединенных ячеек или вложенных элементов), тем она доступнее. Это связано с тем, что программам чтения с экрана проще интерпретировать простые таблицы, чем сложные.
Однако, когда сложные таблицы неизбежны, использование атрибута scope становится необходимым. По возможности всегда следует упрощать таблицы, ограничивая заголовки строк и столбцов одним. Вы также можете разделить таблицы на несколько, а не объединять их, чтобы еще больше упростить их.
Будьте осторожны при использовании сокращений и специальных символов.
К сожалению, программы чтения с экрана не всегда могут правильно читать аббревиатуры и специальные символы. Например, программа чтения с экрана может произнести аббревиатуру «IT» как местоимение «it». К счастью, для этого есть решения:
* Добавляйте точку после каждой буквы аббревиатуры (например, от «ИТ» до «ИТ»).
* Добавьте визуально скрытый текст, используя атрибут aria-hidden="true" для визуального текста (например, IT< /span>Информационные технологии )
* Используйте тег HTML .
Есть и другие советы, как сделать таблицы HTML доступными, но обычно достаточно следовать тем, которые мы обсуждали выше. Если вы хотите узнать больше, ознакомьтесь с учебным пособием W3C's Web Accessibility Initiative по таблицам здесь. В противном случае это все, что вам нужно для улучшения доступности таблиц в ваших проектах.
Но что, если я скажу вам, что есть более простой и быстрый способ сделать это, особенно если ваше приложение позволяет пользователям создавать свои собственные таблицы (например, блоги или форумы)? В этом методе используется редактор WYSIWYG (что видишь, то и получаешь), о котором мы расскажем в следующем разделе.
Как сделать HTML-таблицу мгновенно доступной с помощью WYSIWYG-редактора
Редакторы WYSIWYG – это инструменты, которые позволяют пользователям легко редактировать контент и видеть, как он будет выглядеть после публикации. И разработчики, и пользователи приложений или веб-сайтов могут использовать эти редакторы для любых нужд редактирования. Редактор WYSIWYG обычно имеет возможности редактирования форматированного текста в сочетании с обработкой изображений, редактированием в реальном времени и другими дополнительными функциями.
Вот одна из забавных особенностей этих редакторов: они позволяют пользователям сразу создавать доступные таблицы. Пользователям нужно только нажать кнопку для таблиц, выбрать размер, настроить макет таблицы и написать свое содержимое. Это позволяет даже тем, кто не знаком с HTML, быстро создавать доступные, стильные и адаптивные таблицы. Другими словами, редакторы WYSIWYG имеют встроенный генератор таблиц.
Однако вам следует оценить возможности редактирования и работы с таблицами в редакторе WYSIWYG, прежде чем выбрать его. Хотя все WYSIWYG-редакторы полезны, большинство из них обрабатывают таблицы по-разному. Чтобы быть в безопасности, вы должны выбрать тот, который обладает функциями, скоростью, элегантностью, удобством использования и доступностью, которые нужны вашему приложению. Froala — один из таких редакторов, завоевавший титул главного редактора G2 WYSIWYG и сердца разработчиков по всему миру.
Повысьте производительность с помощью Froala Editor
В HTML-редакторе Froala есть много вещей, которые вам нравятся. Это снижает усилия, необходимые для создания высококачественных приложений или веб-контента. Благодаря поддержке фреймворка и многосекундному процессу интеграции разработчики могут легко интегрировать его в свои приложения. Он также упрощает добавление и удаление функций для разработчиков благодаря своей модульной (на основе подключаемых модулей) архитектуре.
Кроме того, пользователи приложения могут положиться на Froala для самого простого и удобного редактирования. Froala легкая, многофункциональная и интуитивно понятная, что означает, что она выводит пользовательский опыт на новый уровень. Вы даже можете выбрать (или позволить своим пользователям выбирать) между стандартным, встроенным и документальным режимами Froala.
Наконец, в этом редакторе уже есть поддержка специальных возможностей, поэтому вам не придется делать тяжелую работу. Существует множество причин, почему это полезно. Вот некоторые вещи, которые вы должны ожидать, выбирая Froala:
* Простая интеграция в ваши проекты, особенно для популярных библиотек и фреймворков, таких как React и Angular * Базовые и расширенные возможности редактирования форматированного текста * Отзывчивость и мобильность * Редактирование в реальном времени * Функциональность уценки * Тщательно организованная панель инструментов, элегантный интерфейс * Совместимость с любой платформой и браузером * Высокая степень кастомизации * Доступность и языковая поддержка * Масштабируемость * Не требует обслуживания * Поддержка сообщества, документация и поддержка Froala * Более 100 функций
Когда дело доходит до производительности и доступности, Froala — хороший выбор. Тем не менее, вы всегда должны обращаться к советам по доступности таблиц HTML, которые мы рассмотрели в этой статье. Как разработчики, мы должны гарантировать, что создаваемые нами приложения и веб-сайты удовлетворят потребности каждого на нашем целевом рынке.
К ним относятся, в частности, люди с ограниченными возможностями. А для этого мы должны знать, какие шаги необходимо предпринять, включая добавление специальных возможностей и языковой поддержки, чтобы сделать наши проекты максимально удобными в использовании.
Эта статья изначально была опубликована в блоге Фроалы.
Оригинал