Notice: file_put_contents(): Write of 2854 bytes failed with errno=28 No space left on device in /var/www/tgoop/post.php on line 50

Warning: file_put_contents(): Only 16384 of 19238 bytes written, possibly out of free disk space in /var/www/tgoop/post.php on line 50
RDCLR.DEV@rdclr_dev P.74
RDCLR_DEV Telegram 74
Всем привет! На этой неделе продолжим разговор о доступности и поговорим о спецификации, позволяющей вам быстро и просто повысить доступность интерфейса не только для нового кода, но и в текущих проектах в рамках поддержки. С вами буду я, Артём, frontend-разработчик.

👌Повышаем доступность: WAI-ARIA

Спецификация ARIA или Accessible Rich Internet Applications - это простой и понятный разработчику инструмент. ARIA можно разделить на две основных секции: это role-атрибуты и собственно aria-атрибуты.

🦹‍♀️🦸‍♀️Роли

Ранее мы обсуждали необходимость применения семантической разметки в html. Самое простое, что могут предоставить role-атрибуты - это определить семантику для «чистых» элементов вроде div или span. Важный момент: речь идет только о семантике, но не о поведении или стилизации.

Например, вы можете передать элементу атрибут role="main", role="navigation" и т. д., и он станет семантически эквивалентным тегу main или nav.

Или в вашем приложении есть форма, которая работает по ajax, но по той или иной причине она не является элементом form, при помощи ARIA вы можете снабдить форму атрибутом role="form".

🗿Это так называемые landmark roles. Но задачи role-атрибутов не ограничиваются композицией и семантикой.

🚨Например, атрибуты role="alert", role="alertdialog", role="dialog" могут маркировать динамические элементы, появляющиеся на странице как реакция на действия пользователя. Первый предусмотрен для всплывающих уведомлений (об ошибке или об успешном действии), второй и третий – для обработки диалогового или модального окна, то есть для случаев, когда нужно не только максимально быстро уведомить пользователя о чем-то, но еще и получить от него фидбэк. Браузер будет обрабатывать содержимое таких элементов только тогда, когда они видимы, и игнорировать, если для них установлен display: none или visibility: hidden.

🖲Также не забудем о любимом многими role="button", который позволит сделать из любого div’а кнопку. Не совсем полноценную, а потому частичную обработку состояний вам нужно будет взять на себя. Например, состояние disabled на role="button" не реализуется браузером нативно, но такой элемент уже может получать фокус, что уже лучше, чем ничего.

#rdclr_frontend
👍5



tgoop.com/rdclr_dev/74
Create:
Last Update:

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

👌Повышаем доступность: WAI-ARIA

Спецификация ARIA или Accessible Rich Internet Applications - это простой и понятный разработчику инструмент. ARIA можно разделить на две основных секции: это role-атрибуты и собственно aria-атрибуты.

🦹‍♀️🦸‍♀️Роли

Ранее мы обсуждали необходимость применения семантической разметки в html. Самое простое, что могут предоставить role-атрибуты - это определить семантику для «чистых» элементов вроде div или span. Важный момент: речь идет только о семантике, но не о поведении или стилизации.

Например, вы можете передать элементу атрибут role="main", role="navigation" и т. д., и он станет семантически эквивалентным тегу main или nav.

Или в вашем приложении есть форма, которая работает по ajax, но по той или иной причине она не является элементом form, при помощи ARIA вы можете снабдить форму атрибутом role="form".

🗿Это так называемые landmark roles. Но задачи role-атрибутов не ограничиваются композицией и семантикой.

🚨Например, атрибуты role="alert", role="alertdialog", role="dialog" могут маркировать динамические элементы, появляющиеся на странице как реакция на действия пользователя. Первый предусмотрен для всплывающих уведомлений (об ошибке или об успешном действии), второй и третий – для обработки диалогового или модального окна, то есть для случаев, когда нужно не только максимально быстро уведомить пользователя о чем-то, но еще и получить от него фидбэк. Браузер будет обрабатывать содержимое таких элементов только тогда, когда они видимы, и игнорировать, если для них установлен display: none или visibility: hidden.

🖲Также не забудем о любимом многими role="button", который позволит сделать из любого div’а кнопку. Не совсем полноценную, а потому частичную обработку состояний вам нужно будет взять на себя. Например, состояние disabled на role="button" не реализуется браузером нативно, но такой элемент уже может получать фокус, что уже лучше, чем ничего.

#rdclr_frontend

BY RDCLR.DEV


Share with your friend now:
tgoop.com/rdclr_dev/74

View MORE
Open in Telegram


Telegram News

Date: |

How to Create a Private or Public Channel on Telegram? A Hong Kong protester with a petrol bomb. File photo: Dylan Hollingsworth/HKFP. 5Telegram Channel avatar size/dimensions Ng, who had pleaded not guilty to all charges, had been detained for more than 20 months. His channel was said to have contained around 120 messages and photos that incited others to vandalise pro-government shops and commit criminal damage targeting police stations. How to Create a Private or Public Channel on Telegram?
from us


Telegram RDCLR.DEV
FROM American