Проблема с вашим текущим шаблоном
Я знаю, что это расстраивает, когда вы задаете простой вопрос о том, как мне это сделать, а кто-то говорит, сделайте это вместо этого, но, поскольку вы отметили это как доступность, способ, которым вы это реализуете в данный момент, проблематичен.
Например, <input type="checkbox"> не должен существовать вне <form>, поэтому, чтобы сделать ваш HTML действительным, вам придется обернуть его в элемент <form>. Затем это изменяет поведение пользователя программы чтения с экрана, поскольку программа чтения с экрана переходит в режим форм, который изменяет поведение программы чтения с экрана. Есть и другие причины, такие как режим форм, ожидающий, что Enter отправит что-то и т. д. и т. д.
Поскольку вы, кажется, ищете что-то, что будет работать без JavaScript (в качестве запасного варианта... вам все еще нужен JavaScript для постепенного повышения доступности), могу ли я предложить гораздо более простой способ.
<details> и <summary>
Нечасто я могу прописать волшебную таблетку для решения проблемы, но <details> и <summary> на самом деле довольно крутые.
Во-первых, поддержка довольно хорошая, и большая часть семантики обрабатывается автоматически!
Способ его использования довольно прост: <details> — это ваша внешняя оболочка, содержащая элемент <summary>. Элемент <summary> фактически является заголовком раздела аккордеона, а затем вы можете добавить все, что хотите, в разделе <details> под ним.
См. следующую скрипку:
<details>
<summary>Item 1</summary>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ipsum, reiciendis!</p>
</details>
Как вы можете видеть, вы получаете так много запеченных в функциональности. Вы также получаете автоматические свойства, такие как раскрытие/свертывание, объявленное в большинстве комбинаций браузера/программы чтения с экрана. Наконец, в браузере, который его не поддерживает, он просто возвращается к статическому контенту.
Как насчет Internet Explorer и т. д.?
Теперь есть пара проблем с <details> и <summary>. Internet Explorer не поддерживает его.
Здесь мы используем JavaScript для улучшения доступности.
Если мы немного изменим HTML, включив в него aria-expanded, tabindex="0" и role="button", это решит проблему. Однако нет смысла делать это для любого браузера, кроме IE, поэтому я бы добавил его условно.
<details>
<summary role="button" aria-expanded="false" tabindex="0">Item 1</summary>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ipsum, reiciendis!</p>
</details>
<details>
<summary role="button" aria-expanded="false" tabindex="0">Item 2</summary>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ipsum, reiciendis!</p>
</details>
Вы также можете добавить aria-controls для полноты картины, но я хотел дать вам решение, совместимое на 99 %, как можно проще.
Также имейте в виду, что вам нужно будет обрабатывать переключение состояния aria-expanded и фактически скрывать и отображать содержимое и т. д.
Полифилл, который я нашел, который может помочь, и последнее слово о заголовках
Это полифилл Я обнаружил, что для <details> и <summary> это выглядит неплохо. Я подтвердил, что это лицензия MIT, поэтому вы можете ее использовать.
Я бы поделился своим собственным полифиллом, но он имеет несколько зависимостей, тогда как этот является автономным.
похоже, что он также касается части, которую я до сих пор не обсуждал, — заголовков. Если вы используете заголовки (от <h2> до <h6>) для обозначения каждого раздела (зависит от структуры страницы, правильной или нет), то в идеале они должны располагаться вокруг <summary>.
Это потому, что <summary> рассматривается как кнопка. Однако, кроме заголовков и элементов раздела, почти все остальное может быть включено в элемент <summary>, поскольку он принимает фразовое содержание.
**В большинстве случаев я бы сказал, что полезно обернуть <summary> в соответствующий уровень от <h2> до <h6> из-за того, как пользователи программ чтения с экрана перемещаются, но это не является обязательным требованием. **
Стайлинг и т.д.
Последнее, что может быть не сразу очевидно. Если вы хотите применить стиль на основе текущего начала (расширенный/закрытый), он предоставляет атрибут open при расширении.
<details open> (расширенный) и <details> (закрытый).
Вы можете использовать это для селекторов CSS с details['open'] для оформления контейнера и details[open]>summary для оформления сводки.
24.09.2020
