Выпадающий стиль a11y и без js?

Question

Есть ли способ оформить выпадающее меню HTML, которое является a11y и не имеет JS?

На данный момент я вижу только решения с JS, jQuery или webkit-appearance: none; Но мне это совсем не нравится, потому что a11y: /

Answer 1

Please check the following url for reference

> Blockquote

https://codepen.io/srirachachacha/pen/VPKjjx

Answer 2

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

Вы не можете сделать доступным выпадающее меню меню без JavaScript. Для этого есть несколько причин: -

1. Вы должны иметь возможность переключать aria-expanded на кнопку, открывающую выпадающий список.
2. Выпадающий список должен отображаться только при нажатии введите или пробел (с введите , как обычный способ сделать это).
3. Вам необходимо управлять состояниями фокуса так, чтобы при кто-то вкладывает последний элемент в раскрывающемся меню, он переходит к следующему элементу меню верхнего уровня и автоматически закрывает раскрывающееся меню.
4. Навигация в раскрывающемся меню должна выполняться с помощью стрелки. ключи в идеале (не обязательно, но приятно иметь).

Существуют и другие причины, но это должно дать вам представление о том, зачем нужен JavaScript.

С учетом сказанного Если вы беспокоитесь о людях, у которых не включен JavaScript, вы можете предоставить запасную ссылку на карту сайта HTML. Вы можете сделать это, используя тег <noscript>.

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