Проблема доступности с чистым аккордеоном CSS - PullRequest
Новая
       7

Проблема доступности с чистым аккордеоном CSS

0 голосов
/ 30 января 2019

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

Есть ли способ сделать его доступным?Я все еще изучаю доступность сети.Буду признателен за любые советы!

.accordion {
  width: 100%;
  box-shadow: 0 12px 12px -6px rgba(0, 0, 0, 0.2);
}

.accordion input[name="panel"] {
  display: none;
}

.accordion label {
  position: relative;
  display: block;
  padding: 1em;
  background: rgba(65, 64, 66, 0.8);
  border-radius: 0.2em 0.2em 0 0;
  width: auto;
  font-size: 1.2em;
  color: #fff;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-family: FSHumanaRegular;
  margin-top: 1em;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.865, 0.14, 0.095, 0.87);
}

.accordion label:after {
  content: "+";
  position: absolute;
  right: 1em;
  width: 1em;
  height: 1em;
  color: #eee;
  text-align: center;
  border-radius: 50%;
  background: #fdb600;
}

.accordion label:hover {
  color: #fdb600;
}

.accordion input:checked + label {
  color: #fdb600;
}

.accordion input:checked + label:after {
  content: "-";
  line-height: 0.8em;
}

.accordion .accordion_content {
  overflow: hidden;
  max-height: 0px;
  position: relative;
  padding: 0 1.425em;
  background: rgba(255, 255, 255, 0.6);
  box-sizing: content-box;
  transition: all 150ms cubic-bezier(0.865, 0.14, 0.095, 0.87);
}

.accordion .accordion_content .accordion_body {
  line-height: 1.4em;
  padding: 1.8em 0 1.5em;
}

input[name="panel"]:checked ~ .accordion_content {
  max-height: 1000em;
}
<div class="accordion" id="myAccordion">
							<div>
								<input type="checkbox" name="panel" id="accordionContent">
								<label for="accordionContent">Historical Data</label>
								<div class="accordion_content">
									<div class="accordion_body">
                    <!-- CONTENT -->
                    <p>Hello, world!</p>
									</div>
								</div>
							</div>
</div>

1 Ответ

0 голосов
/ 30 января 2019

Для начала, вы не должны использовать флажок, чтобы свернуть / развернуть любой элемент (плохая практика).Вместо этого вы можете использовать <button>, который будет запускать / контролировать эту функцию, и на этой кнопке вы должны дополнительно добавить правильные значения ARIA.

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

           aria-expanded="false" 
           aria-controls="collapsedElementId"

Например, реализация Bootstrap компонента свертывания использует такую ​​разметку для улучшения доступности: https://getbootstrap.com/docs/4.1/components/collapse/#accessibility

...