Перейти к содержанию
Новости искусства и дизайна
Всё о мировых событиях в мире графического, промышленного и веб дизайна, современного искусства,
Новости искусства и дизайна
  • Главная
  • Рубрики статей
  • Контакты
  • Главная
  • Рубрики статей
  • Контакты

Стол с рядами Expando | Адриан Розелли

Вы здесь:
  1. Главная
  2. Статьи по дизайну
  3. Стол с рядами Expando |…
Сен232019
Статьи по дизайну


1 сентября 2019 года ; 4 комментария

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

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

):

  1. Убедитесь, что вы используете свойство строки таблицы CSS display вместо блока block и
  2.  

  3. Используйте виджет раскрытия в качестве переключателя.

Содержание статьи

  • 1 Пример
  • 2 Виджет Раскрытия
    • 2.1 CSS
    • 2.2 Сценарий
  • 3 Столы
    • 3.1 CSS
  • 4 Считыватели экрана
    • 4.1 JAWS / IE11
    • 4.2 NVDA / Firefox
    • 4.3 VoiceOver / Safari
  • 5 Метки
  • 6 Другие сообщения

Пример

Вы можете посетить перо, чтобы поиграть с ним, или посмотреть в режиме отладки, чтобы проверить его в своем любимом AT (вспомогательная технология).

Обратите внимание, что этот пример не реагирует.

   См. Pen .
  Стол с рядами экспандо
Адриана Розелли (@aardrian)
  на CodePen.

Виджет Раскрытия

Виджет раскрытия является собственным HTML

              […]      […]

Значение aria-controls представляет собой разделенный пробелами список идентификаторов id строк, на которые вы воздействуете. Если поддерживается aria-controls подтвердите, что его объявление в программах чтения с экрана (только сегодня JAWS) не слишком многословно для ваших пользователей. Если это так, вы можете удалить его полностью. Его отсутствие не приведет к возникновению барьера, но может сделать виджет более удобным для использования некоторыми пользователями, когда начнет появляться полезная поддержка программы чтения с экрана.

CSS

Самый простой способ убедиться, что программное состояние кнопки соответствует визуальным стилям, — это использовать селекторы атрибутов, такие как кнопка кнопка [aria-expanded="true|false"]. Стили для обеих таблиц примеров меняют только SVG.

 .cell button [aria-expanded="true"] svg {
  преобразование: вращение (90 градусов);
}
.row button [aria-expanded="true"] svg {
  преобразование: вращение (180 градусов);
} 

Конечно, ваши собственные стили могут отличаться.

Сценарий

Функция ничего особенного. Он берет список id и передает их в селектор запросов, а также берет id кнопки. Он проверяет, затем переворачивает значение aria-extended на кнопке, одновременно меняя значение класса между показанными и скрытыми .

Если бы я мог использовать соседние селекторы братьев и сестер (отключив значение aria-extended ), я бы переключил видимость строк. Структура таблицы HTML исключает это, и это единственная причина, по которой я использую класс для этой работы.

Это не готовый к работе сценарий. Однако он учитывает Internet Explorer, не используя classList.replace который IE не поддерживает.

 функция переключения (btnID, eIDs) {
  // Подача списка идентификаторов в качестве селектора
  var theRows = document.querySelectorAll (eIDs);
  // Получить кнопку, которая сработала
  var theButton = document.getElementById (btnID);
  // Если кнопка не развернута ...
  if (theButton.getAttribute ("aria-extended") == "false") {
    // Перебираем строки и показываем их
    для (var i = 0; i

При загрузке страницы строки в моем примере не скрыты с помощью встроенного CSS. Вы скрываете или отображаете их при начальной загрузке от имени Progressive Enhancement, зависит от вас и вашего варианта использования. Любой из них может быть верным подходом, но учитывайте его и в своей функции.

Столы

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

Другой пример имеет виджет раскрытия в своем собственном столбце, что, вероятно, облегчает его избежание. Это также гарантирует свой собственный заголовок столбца. Это значение Toggle и я использую хорошо проверенную технику, чтобы визуально скрыть его (частично потому, что NVDA не поддерживает атрибут abbr в

                                              

CSS

CSS для двух классов, которые настраивают отображение строки имеет решающее значение. Если вы используете display: block вместо display: table-row то браузер удаляет всю семантику для строки, и вспомогательная технология не может перемещаться по ней. См. Мой пост Таблицы, CSS Display Properties и ARIA для более подробной информации.

 tr.shown, tr.hidden {
  цвет фона: #eee;
   дисплей: строка таблицы; 
}

tr.hidden {
  дисплей: нет;
} 

Считыватели экрана

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

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

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

JAWS / IE11

  Извините, ваш браузер не поддерживает встроенные видео, но не беспокойтесь, вы можете скачать его. Файл подписи также доступен на случай, если ваш видеоплеер сможет его импортировать.
 
Использование JAWS 2018 и Internet Explorer 11 для навигации по таблице с помощью виджета раскрытия, который находится в одной ячейке. Обратите внимание, что JAWS визуально выделяет первую ячейку в строке с содержимым, а не пустые ячейки. Также не выделяются кнопки.

NVDA / Firefox

  Извините, ваш браузер не поддерживает встроенные видео, но не беспокойтесь, вы можете скачать его. Файл подписи также доступен на случай, если ваш видеоплеер сможет его импортировать.
 
Использование бета-версий NVDA 2019 и Firefox 69 для навигации по таблице с виджетом раскрытия, который находится в ячейке, охватывающей все столбцы. NVDA только визуально выделяет интерактивные элементы управления (красная рамка вокруг кнопки перехода).

VoiceOver / Safari

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

                Мэри Шелли
). См. визуально скрытый класс чтобы украсть стили.

HTML-код для строки не является сложным. Просто id и class причем последний переключается с помощью скрипта.

 
Эмма Дороти Элиза Невитт Саутворт Неизвестный; или Тайна вороньих скал 1889
исчезает, когда раскрытие раскрыто (оно перемещается ниже таблицы); Я понятия не имею, почему, и я не потратил время, чтобы погрузиться в него.

Метки

доступность, css, стандарты, таблицы, удобство использования

Другие сообщения

      

  

Предыдущий пост: Архив браузера evolt.org 20 лет

  

Более новое сообщение: Недостаточно сконструированный текстовый блок

Category: Статьи по дизайну23.09.2019
Теги: AdrianExpandoРозеллирядамисстол

Пожалуйста, поставьте рейтинг статье:
1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд (Пока оценок нет)
Загрузка...
Поделиться этой записью
Share with FacebookShare with TwitterShare with Google+Share with PinterestShare with LinkedInShare with WhatsApp

Навигация по записям

ПредыдущаяПредыдущая запись:Чип Кидд о бренде и мастерстве Бэтмена за 80 лет комиксов — ОсобенностиСледующаяСледующая запись:Победители конкурсов на Freelance.Boutique за 5-19 сентября 2019

Связанные записи

Такуто Охта исследует эстетический потенциал японского кедра
10.06.2025
Прокачай перо — 10 главных навыков успешного копирайтера / Полезное / Сайты и биржи фриланса. Обзоры фриланс бирж. Новости. Советы. Фриланс для начинающих. FREELANCE.TODAY
09.06.2025
Самое интересное из мира дизайна и искусства: с 9 по 15 июня
09.06.2025
В Детройте откроется хранилище мебели Herman Miller и Knoll
08.06.2025
Юлий Борисов: визионерская архитектура, которая служит людям
07.06.2025
Воздушный интерьер квартиры с панорамным видом на Москву — проект Оксаны Галактионовой
06.06.2025

Самые свежие статьи

  • Такуто Охта исследует эстетический потенциал японского кедра Такуто Охта исследует эстетический потенциал японского кедра
  • Прокачай перо — 10 главных навыков успешного копирайтера / Полезное / Сайты и биржи фриланса. Обзоры фриланс бирж. Новости. Советы. Фриланс для начинающих. FREELANCE.TODAY Прокачай перо — 10 главных навыков успешного копирайтера / Полезное / Сайты и биржи фриланса. Обзоры фриланс бирж. Новости. Советы. Фриланс для начинающих. FREELANCE.TODAY
  • Самое интересное из мира дизайна и искусства: с 9 по 15 июня Самое интересное из мира дизайна и искусства: с 9 по 15 июня
Useful Links
Go to Top

Поделитесь статьей!

  • Facebook
  • Google
  • Twitter
close-link