TGViewer
<divelopers> <divelopers> @alexnozer_dev · 1.19K subscribers
Post #14 199
Список для карточек

Речь о паттерне, когда создаётся список <ul> и в его элементы <li> вкладываются карточки. Небольшой тред о пользе списков для ассистивных технологий.

Семантика.

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

Количество.

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

Шорткаты.

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

***

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

В качестве альтернативы списку можно использовать <div role="group">, это тоже сообщает пользователю о группе каких-то элементов, но без информации о количестве и позиции, чтобы не спамить лишней информацией.
  • 🔥 2
  • 👍 1
More from @alexnozer_dev
  1. Sep 30, 2026Управление маркерами CSS-каруселей После релиза CSS-каруселей в Chrome 135 перед Google I/…
  2. Sep 28, 2026You don’t know HTML: SGML, HTML, XML, XHTML За свою историю язык разметки гипертекста HTML…
  3. Sep 23, 2026Images Preview На некоторых сайтах, где надо показывать изображения в высоком качестве, дл…
  4. Sep 21, 2026Реализация пользовательских атрибутов Под конец прошлого года я рассказывал об API пользов…
  5. Sep 14, 2026Подклассы Event вместо CustomEvent Многие библиотеки предоставляют систему событий в качес…
  6. Sep 11, 2026Эволюция стилей в темах Shopify Адам Ватан на днях поделился новостью, что Shopify выкупил…
Threads Profile ViewerView any public Threads profile without an account.Open ThreadLook →Writing with AI? Make it sound human.Metric37 rewrites AI drafts so they read naturally. Free AI detector, 1,500 words free.Try Metric37 →