Короткие тактические видеоуроки от создателя Tailwind CSS
Это полный урок, в котором рассказывается о действительно полезном трюке, позволяющем сделать полностью интерактивные карточки доступными для пользователей программы чтения с экрана. Ознакомьтесь с исходным кодом для этого приложения https://play.tailwindcss.com/P4CmmkDXaB, если вы хотите поиграть с ним, чтобы лучше понять, как оно работает. Короткие тактические видеоуроки от создателя Tailwind CSS: 00:00 Введение • Адам Уэйвин, создатель Tailwind CSS, представляет серию видео о трюках для создания идеального интерфейса. • Видео посвящены компонентам, которые должны работать на разных устройствах, адаптироваться к контенту и быть доступными для пользователей с клавиатурой и программами чтения с экрана. 00:29 Пример сайта блога • Демонстрация сайта блога с списком статей, основанного на шаблоне Spotlight. • Весь блок статей кликабельный, что реализовано с помощью тега привязки. 01:08 Проблема с тегом привязки • Тег привязки оборачивает весь контент, что может быть неудобно для пользователей программ чтения с экрана, так как программа читает весь контент ссылки, а не только заголовок. 01:59 Решение проблемы • Замена тега привязки на div и сделать ссылкой только заголовок статьи. • Добавление пустого span с классом absolute и нулевым отступом для заполнения пространства и создания кликабельности. 03:44 Настройка z-индекса • Проблема с элементом time, который имеет относительное положение, решается путём задания z-индекса 10 для span и добавления local-z-index для содержащего div. 04:34 Результат • Теперь при наведении курсора на элемент time курсор появляется, и программа чтения с экрана сообщает только название статьи, а не весь контент ссылки.
Это полный урок, в котором рассказывается о действительно полезном трюке, позволяющем сделать полностью интерактивные карточки доступными для пользователей программы чтения с экрана. Ознакомьтесь с исходным кодом для этого приложения https://play.tailwindcss.com/P4CmmkDXaB, если вы хотите поиграть с ним, чтобы лучше понять, как оно работает. Короткие тактические видеоуроки от создателя Tailwind CSS: 00:00 Введение • Адам Уэйвин, создатель Tailwind CSS, представляет серию видео о трюках для создания идеального интерфейса. • Видео посвящены компонентам, которые должны работать на разных устройствах, адаптироваться к контенту и быть доступными для пользователей с клавиатурой и программами чтения с экрана. 00:29 Пример сайта блога • Демонстрация сайта блога с списком статей, основанного на шаблоне Spotlight. • Весь блок статей кликабельный, что реализовано с помощью тега привязки. 01:08 Проблема с тегом привязки • Тег привязки оборачивает весь контент, что может быть неудобно для пользователей программ чтения с экрана, так как программа читает весь контент ссылки, а не только заголовок. 01:59 Решение проблемы • Замена тега привязки на div и сделать ссылкой только заголовок статьи. • Добавление пустого span с классом absolute и нулевым отступом для заполнения пространства и создания кликабельности. 03:44 Настройка z-индекса • Проблема с элементом time, который имеет относительное положение, решается путём задания z-индекса 10 для span и добавления local-z-index для содержащего div. 04:34 Результат • Теперь при наведении курсора на элемент time курсор появляется, и программа чтения с экрана сообщает только название статьи, а не весь контент ссылки.