#фишка дня
Не забывайте помогать своим пользователям вводить нужные данные. Используйте атрибут
Особенно неприятно, когда просят ввести числа, а открывается полная клавиатура. Уж ввод e-mail пережить как-то можно 😊
#css #html #mobile #keyboard
Не забывайте помогать своим пользователям вводить нужные данные. Используйте атрибут
inputmode на полях ввода: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmodeОсобенно неприятно, когда просят ввести числа, а открывается полная клавиатура. Уж ввод e-mail пережить как-то можно 😊
#css #html #mobile #keyboard
#заметка дня
Недавно я читал обзор автомобиля и автор, в лучших традициях, решил запихать в статью огромную таблицу.
Таблица находилась в выделенном контейнере и приводила к появлению горизонтального скролла в нём. Мне пришлось тянуться к мыши, зажимать Shift чтобы скроллить горизонтально… Какая прелесть.
И вот тут ты понимаешь, с какими неожиданными проблемами могут столкнуться люди, ограниченные в движениях.
Решение же на самом деле до безумия простое: tabindex=“0” на контейнер и дело в шляпе. Это позволит пользователю установить фокус на желаемый блок и скроллить стрелками.
По пути, раз уж пошло дело, стоит установить стили фокуса и атрибуты role и aria-labelledby для соответствия Web Content Accessibility Guidelines.
Документ здоровый, но для практического применения нужны лишь несколько пунктов: «2.1.1 Keyboard», «4.1.2 Name, Role, Value», «1.4.10 Reflow», «2.4.7 Focus Visible».
Названия разделов говорят сами за себя: установите возможность клавиатурного фокуса, не забыв дать визуальную подсказку, и предотвратите скролл всей страницы целиком.
В общем, не ленитесь. Дайте людям возможность прочитать статью так, как удобно им. Особенно когда это ничего вам не стоит 😉
#css #table #keyboard #focus #a11y
Недавно я читал обзор автомобиля и автор, в лучших традициях, решил запихать в статью огромную таблицу.
Таблица находилась в выделенном контейнере и приводила к появлению горизонтального скролла в нём. Мне пришлось тянуться к мыши, зажимать Shift чтобы скроллить горизонтально… Какая прелесть.
И вот тут ты понимаешь, с какими неожиданными проблемами могут столкнуться люди, ограниченные в движениях.
Решение же на самом деле до безумия простое: tabindex=“0” на контейнер и дело в шляпе. Это позволит пользователю установить фокус на желаемый блок и скроллить стрелками.
По пути, раз уж пошло дело, стоит установить стили фокуса и атрибуты role и aria-labelledby для соответствия Web Content Accessibility Guidelines.
Документ здоровый, но для практического применения нужны лишь несколько пунктов: «2.1.1 Keyboard», «4.1.2 Name, Role, Value», «1.4.10 Reflow», «2.4.7 Focus Visible».
Названия разделов говорят сами за себя: установите возможность клавиатурного фокуса, не забыв дать визуальную подсказку, и предотвратите скролл всей страницы целиком.
В общем, не ленитесь. Дайте людям возможность прочитать статью так, как удобно им. Особенно когда это ничего вам не стоит 😉
#css #table #keyboard #focus #a11y
#codepen дня
Я, стыдно признаться, очень мало работал с горячими клавишами в вебе. И до недавнего времени даже не мог сказать, в чём отличие which, code и key.
Но для моего пет-проекта пришлось немного покурить тему. И в итоге я наткнулся на прекрасный пример, поясняющий за всю хурму: https://codepen.io/denilsonsa/pen/epmoma
И key, и code, и repeat, и модификаторы, и, собственно, события. Прекрасно.
Конечно же стоит обратить внимание и на MDN: key, code. Там тоже есть интерактивные примеры.
А в пет-проекте было просто прекрасное. Я разрабатываю расширение для Chrome DevTools и никак не мог понять, почему я не могу перехватить стандартные клавиатурные сочетания. Даже чёртов Esc открывал консоль.
А всё оказалось просто: я привык вешать слушатели на window или document, а ребята из Chrome повесили их на document.body. Просто прекрасно.
Впрочем, победить получилось и теперь моё расширение управляется с клавиатуры на ура.
#key #code #js #javascript #hotkeys #keyboard
Я, стыдно признаться, очень мало работал с горячими клавишами в вебе. И до недавнего времени даже не мог сказать, в чём отличие which, code и key.
Но для моего пет-проекта пришлось немного покурить тему. И в итоге я наткнулся на прекрасный пример, поясняющий за всю хурму: https://codepen.io/denilsonsa/pen/epmoma
И key, и code, и repeat, и модификаторы, и, собственно, события. Прекрасно.
Конечно же стоит обратить внимание и на MDN: key, code. Там тоже есть интерактивные примеры.
А в пет-проекте было просто прекрасное. Я разрабатываю расширение для Chrome DevTools и никак не мог понять, почему я не могу перехватить стандартные клавиатурные сочетания. Даже чёртов Esc открывал консоль.
А всё оказалось просто: я привык вешать слушатели на window или document, а ребята из Chrome повесили их на document.body. Просто прекрасно.
Впрочем, победить получилось и теперь моё расширение управляется с клавиатуры на ура.
#key #code #js #javascript #hotkeys #keyboard
👍2
#заметка дня
Недавно я читал обзор автомобиля и автор, в лучших традициях, решил запихать в статью огромную таблицу.
Таблица находилась в выделенном контейнере и приводила к появлению горизонтального скролла в нём. Мне пришлось тянуться к мыши, зажимать Shift чтобы скроллить горизонтально… Какая прелесть.
И вот тут ты понимаешь, с какими неожиданными проблемами могут столкнуться люди, ограниченные в движениях.
Решение же на самом деле до безумия простое: tabindex=“0” на контейнер и дело в шляпе. Это позволит пользователю установить фокус на желаемый блок и скроллить стрелками.
По пути, раз уж пошло дело, стоит установить стили фокуса и атрибуты role и aria-labelledby для соответствия Web Content Accessibility Guidelines.
Документ здоровый, но для практического применения нужны лишь несколько пунктов: «2.1.1 Keyboard», «4.1.2 Name, Role, Value», «1.4.10 Reflow», «2.4.7 Focus Visible».
Названия разделов говорят сами за себя: установите возможность клавиатурного фокуса, не забыв дать визуальную подсказку, и предотвратите скролл всей страницы целиком.
В общем, не ленитесь. Дайте людям возможность прочитать статью так, как удобно им. Особенно когда это ничего вам не стоит 😉
Ну и повторю решение: https://codepen.io/alinaki/pen/xxgpmeZ
#css #table #keyboard #focus #a11y
Недавно я читал обзор автомобиля и автор, в лучших традициях, решил запихать в статью огромную таблицу.
Таблица находилась в выделенном контейнере и приводила к появлению горизонтального скролла в нём. Мне пришлось тянуться к мыши, зажимать Shift чтобы скроллить горизонтально… Какая прелесть.
И вот тут ты понимаешь, с какими неожиданными проблемами могут столкнуться люди, ограниченные в движениях.
Решение же на самом деле до безумия простое: tabindex=“0” на контейнер и дело в шляпе. Это позволит пользователю установить фокус на желаемый блок и скроллить стрелками.
По пути, раз уж пошло дело, стоит установить стили фокуса и атрибуты role и aria-labelledby для соответствия Web Content Accessibility Guidelines.
Документ здоровый, но для практического применения нужны лишь несколько пунктов: «2.1.1 Keyboard», «4.1.2 Name, Role, Value», «1.4.10 Reflow», «2.4.7 Focus Visible».
Названия разделов говорят сами за себя: установите возможность клавиатурного фокуса, не забыв дать визуальную подсказку, и предотвратите скролл всей страницы целиком.
В общем, не ленитесь. Дайте людям возможность прочитать статью так, как удобно им. Особенно когда это ничего вам не стоит 😉
Ну и повторю решение: https://codepen.io/alinaki/pen/xxgpmeZ
#css #table #keyboard #focus #a11y
👍17
#статья дня
Помните, не так давно мы обсуждали правильное использование кодов клавиш?
Как оказалось, есть очень яркий пример, почему нужно использовать code. И пример этот — игры.
Когда-то было решено, что стрелки для перемещения персонажей в FPS-играх использовать неразумно: далеко от остальных клавиш и слишком близко к мыши (для правшей). А вот WASD — самое то. Но вот удивительное дело: половина Европы использует не QWERTY, а AZERTY раскладку. И тут у тех, кто использует key, случается конфуз, как на картинке.
Все примеры и подробности тут: https://www.bram.us/2022/03/31/wasd-controls-on-the-web/
#keyboard #js
Помните, не так давно мы обсуждали правильное использование кодов клавиш?
Как оказалось, есть очень яркий пример, почему нужно использовать code. И пример этот — игры.
Когда-то было решено, что стрелки для перемещения персонажей в FPS-играх использовать неразумно: далеко от остальных клавиш и слишком близко к мыши (для правшей). А вот WASD — самое то. Но вот удивительное дело: половина Европы использует не QWERTY, а AZERTY раскладку. И тут у тех, кто использует key, случается конфуз, как на картинке.
Все примеры и подробности тут: https://www.bram.us/2022/03/31/wasd-controls-on-the-web/
#keyboard #js
👍7🥰2
#заметка дня
Недавно я читал обзор автомобиля и автор, в лучших традициях, решил запихать в статью огромную таблицу.
Таблица находилась в выделенном контейнере и приводила к появлению горизонтального скролла в нём. Мне пришлось тянуться к мыши, зажимать Shift чтобы скроллить горизонтально… Какая прелесть.
И вот тут ты понимаешь, с какими неожиданными проблемами могут столкнуться люди, ограниченные в движениях. А я всего лишь пил чай!
Решение же на самом деле до безумия простое: tabindex=“0” на контейнер и дело в шляпе. Это позволит пользователю установить фокус на желаемый блок и скроллить стрелками.
По пути, раз уж пошло дело, стоит установить стили фокуса и атрибуты role и aria-labelledby для соответствия Web Content Accessibility Guidelines.
Документ здоровый, но для практического применения нужны лишь несколько пунктов: «2.1.1 Keyboard», «4.1.2 Name, Role, Value», «1.4.10 Reflow», «2.4.7 Focus Visible».
Названия разделов говорят сами за себя: установите возможность клавиатурного фокуса, не забыв дать визуальную подсказку, и предотвратите скролл всей страницы целиком.
В общем, не ленитесь. Дайте людям возможность прочитать статью так, как удобно им. Особенно когда это ничего вам не стоит 😉
Ну и повторю решение: https://codepen.io/alinaki/pen/xxgpmeZ
#css #table #keyboard #focus #a11y
Недавно я читал обзор автомобиля и автор, в лучших традициях, решил запихать в статью огромную таблицу.
Таблица находилась в выделенном контейнере и приводила к появлению горизонтального скролла в нём. Мне пришлось тянуться к мыши, зажимать Shift чтобы скроллить горизонтально… Какая прелесть.
И вот тут ты понимаешь, с какими неожиданными проблемами могут столкнуться люди, ограниченные в движениях. А я всего лишь пил чай!
Решение же на самом деле до безумия простое: tabindex=“0” на контейнер и дело в шляпе. Это позволит пользователю установить фокус на желаемый блок и скроллить стрелками.
По пути, раз уж пошло дело, стоит установить стили фокуса и атрибуты role и aria-labelledby для соответствия Web Content Accessibility Guidelines.
Документ здоровый, но для практического применения нужны лишь несколько пунктов: «2.1.1 Keyboard», «4.1.2 Name, Role, Value», «1.4.10 Reflow», «2.4.7 Focus Visible».
Названия разделов говорят сами за себя: установите возможность клавиатурного фокуса, не забыв дать визуальную подсказку, и предотвратите скролл всей страницы целиком.
В общем, не ленитесь. Дайте людям возможность прочитать статью так, как удобно им. Особенно когда это ничего вам не стоит 😉
Ну и повторю решение: https://codepen.io/alinaki/pen/xxgpmeZ
#css #table #keyboard #focus #a11y
👍11🔥3
#ссылка дня
Готовьтесь к большим изменениям!
…наверное.
Корчое, начиная с версии 108, Хром начнёт иначе реагировать на экранную клавиатуру: https://developer.chrome.com/blog/viewport-resize-behavior/
В чём разница, в двух словах?
Действие по умолчанию будет точно таким же, как на iOS: изменяться будет т. н. visual viewport (видимая область экрана) — то, что видно на экране в данный момент. На масштабе 100% видимая область экрана совпадает с layout viewport — область раскладки. Чтобы было проще понять, позиционированные с помощью position: fixed элементы прикрепляются к области раскладки, а не к видимой области.
Короче, суть в том, что в новом Хроме на андроид ваши зафиксированные элементы будут скрыты за клавиатурой. Как на iOS.
Но будут добавлены meta-атрибуты, чтобы это поведение изменить.
Демо-сайт, объясняющий новое поведение: https://viewport-resize-behavior.netlify.app/
#chrome #keyboard #fixed
Готовьтесь к большим изменениям!
…наверное.
Корчое, начиная с версии 108, Хром начнёт иначе реагировать на экранную клавиатуру: https://developer.chrome.com/blog/viewport-resize-behavior/
В чём разница, в двух словах?
Действие по умолчанию будет точно таким же, как на iOS: изменяться будет т. н. visual viewport (видимая область экрана) — то, что видно на экране в данный момент. На масштабе 100% видимая область экрана совпадает с layout viewport — область раскладки. Чтобы было проще понять, позиционированные с помощью position: fixed элементы прикрепляются к области раскладки, а не к видимой области.
Короче, суть в том, что в новом Хроме на андроид ваши зафиксированные элементы будут скрыты за клавиатурой. Как на iOS.
Но будут добавлены meta-атрибуты, чтобы это поведение изменить.
Демо-сайт, объясняющий новое поведение: https://viewport-resize-behavior.netlify.app/
#chrome #keyboard #fixed
👌12👍2👎1
#codepen дня
Есть тут любители механических клавиатур, кому на работе или жена запрещает использование из-за клацанья?
I got you!
Глядите, какая штука, симулятор механической клавиатуры:
https://codepen.io/ykadosh/pen/bGKgxbe
Набираете циферки на своей — клацает экранная. Ну разве не прелесть?
Прелесть.
#keyboard #sound
Есть тут любители механических клавиатур, кому на работе или жена запрещает использование из-за клацанья?
I got you!
Глядите, какая штука, симулятор механической клавиатуры:
https://codepen.io/ykadosh/pen/bGKgxbe
Набираете циферки на своей — клацает экранная. Ну разве не прелесть?
Прелесть.
#keyboard #sound
🔥8😁2👍1👌1
#заметка дня
Недавно я читал обзор автомобиля и автор, в лучших традициях, решил запихать в статью огромную таблицу.
Таблица находилась в выделенном контейнере и приводила к появлению горизонтального скролла в нём. Мне пришлось тянуться к мыши, зажимать Shift чтобы скроллить горизонтально… Какая прелесть.
И вот тут ты понимаешь, с какими неожиданными проблемами могут столкнуться люди, ограниченные в движениях. А я всего лишь пил чай!
Решение же на самом деле до безумия простое: tabindex=“0” на контейнер и дело в шляпе. Это позволит пользователю установить фокус на желаемый блок и скроллить стрелками.
По пути, раз уж пошло дело, стоит установить стили фокуса и атрибуты role и aria-labelledby для соответствия Web Content Accessibility Guidelines.
Документ здоровый, но для практического применения нужны лишь несколько пунктов: «2.1.1 Keyboard», «4.1.2 Name, Role, Value», «1.4.10 Reflow», «2.4.7 Focus Visible».
Названия разделов говорят сами за себя: установите возможность клавиатурного фокуса, не забыв дать визуальную подсказку, и предотвратите скролл всей страницы целиком.
В общем, не ленитесь. Дайте людям возможность прочитать статью так, как удобно им. Особенно когда это ничего вам не стоит 😉
Ну и повторю решение: https://codepen.io/alinaki/pen/xxgpmeZ
#css #table #keyboard #focus #a11y #бородач
Недавно я читал обзор автомобиля и автор, в лучших традициях, решил запихать в статью огромную таблицу.
Таблица находилась в выделенном контейнере и приводила к появлению горизонтального скролла в нём. Мне пришлось тянуться к мыши, зажимать Shift чтобы скроллить горизонтально… Какая прелесть.
И вот тут ты понимаешь, с какими неожиданными проблемами могут столкнуться люди, ограниченные в движениях. А я всего лишь пил чай!
Решение же на самом деле до безумия простое: tabindex=“0” на контейнер и дело в шляпе. Это позволит пользователю установить фокус на желаемый блок и скроллить стрелками.
По пути, раз уж пошло дело, стоит установить стили фокуса и атрибуты role и aria-labelledby для соответствия Web Content Accessibility Guidelines.
Документ здоровый, но для практического применения нужны лишь несколько пунктов: «2.1.1 Keyboard», «4.1.2 Name, Role, Value», «1.4.10 Reflow», «2.4.7 Focus Visible».
Названия разделов говорят сами за себя: установите возможность клавиатурного фокуса, не забыв дать визуальную подсказку, и предотвратите скролл всей страницы целиком.
В общем, не ленитесь. Дайте людям возможность прочитать статью так, как удобно им. Особенно когда это ничего вам не стоит 😉
Ну и повторю решение: https://codepen.io/alinaki/pen/xxgpmeZ
#css #table #keyboard #focus #a11y #бородач
👍19
#заметка дня
Недавно я читал обзор автомобиля и автор, в лучших традициях, решил запихать в статью огромную таблицу.
Таблица находилась в выделенном контейнере и приводила к появлению горизонтального скролла в нём. Мне пришлось тянуться к мыши, зажимать Shift чтобы скроллить горизонтально… Какая прелесть.
И вот тут ты понимаешь, с какими неожиданными проблемами могут столкнуться люди, ограниченные в движениях. А я всего лишь пил чай!
Решение же на самом деле до безумия простое: tabindex=“0” на контейнер и дело в шляпе. Это позволит пользователю установить фокус на желаемый блок и скроллить стрелками.
По пути, раз уж пошло дело, стоит установить стили фокуса и атрибуты role и aria-labelledby для соответствия Web Content Accessibility Guidelines.
Документ здоровый, но для практического применения нужны лишь несколько пунктов: «2.1.1 Keyboard», «4.1.2 Name, Role, Value», «1.4.10 Reflow», «2.4.7 Focus Visible».
Названия разделов говорят сами за себя: установите возможность клавиатурного фокуса, не забыв дать визуальную подсказку, и предотвратите скролл всей страницы целиком.
В общем, не ленитесь. Дайте людям возможность прочитать статью так, как удобно им. Особенно когда это ничего вам не стоит 😉
Ну и повторю решение: https://codepen.io/alinaki/pen/xxgpmeZ
#css #table #keyboard #focus #a11y #бородач
Недавно я читал обзор автомобиля и автор, в лучших традициях, решил запихать в статью огромную таблицу.
Таблица находилась в выделенном контейнере и приводила к появлению горизонтального скролла в нём. Мне пришлось тянуться к мыши, зажимать Shift чтобы скроллить горизонтально… Какая прелесть.
И вот тут ты понимаешь, с какими неожиданными проблемами могут столкнуться люди, ограниченные в движениях. А я всего лишь пил чай!
Решение же на самом деле до безумия простое: tabindex=“0” на контейнер и дело в шляпе. Это позволит пользователю установить фокус на желаемый блок и скроллить стрелками.
По пути, раз уж пошло дело, стоит установить стили фокуса и атрибуты role и aria-labelledby для соответствия Web Content Accessibility Guidelines.
Документ здоровый, но для практического применения нужны лишь несколько пунктов: «2.1.1 Keyboard», «4.1.2 Name, Role, Value», «1.4.10 Reflow», «2.4.7 Focus Visible».
Названия разделов говорят сами за себя: установите возможность клавиатурного фокуса, не забыв дать визуальную подсказку, и предотвратите скролл всей страницы целиком.
В общем, не ленитесь. Дайте людям возможность прочитать статью так, как удобно им. Особенно когда это ничего вам не стоит 😉
Ну и повторю решение: https://codepen.io/alinaki/pen/xxgpmeZ
#css #table #keyboard #focus #a11y #бородач
codepen.io
Proper a11y table
...
❤11