JavaScript 및 액세스 가능성:아코디언

최초 발표www.a11ywithlindsey.com.
내가 처음으로 JavaScript and Accessibility에 관한 글을 썼을 때, 나는 그것을 시리즈로 만들겠다고 약속했다.나는 나의 patreon 투표로 다음 블로그가 무엇인지 결정하기로 결정했다.이 화제가 이겼으니, 나는 마침내 더 많은 시간을 자바스크립트를 쓸 수 있게 되었다.
그래서 이 화제는 어떻게 하면 아코디언을 더욱 쉽게 사용할 수 있는지 깊이 있게 연구할 것이다!우리의 중점은 다음과 같다.

키보드를 사용한 아코디언 액세스

화면 판독기 지원

HTML 구조

나는 HTML 구조에 관한 연구를 좀 했다.나는 a11y project에서 Scott O'Hara's Accordion code까지의 링크를 읽었다.그리고 Don's take about aria-controls-TL도 읽었어요.하 의사는 그들이 대변이라고 생각한다.나는 많은 기준을 설정했기 때문에 독서를 피할 수 없다. WAI-ARIA Accordion example나는 무엇이 이상인지에 관한 모든 정보를 통해 왜 이곳의 모든 것이 중요한지 이해할 수 있기를 바란다.이것은 사람을 어찌할 바를 모르게 하기 쉽다. 나는 도와주러 왔다.
그래서 만약에 제 댓글3 Simple Tips to Improve Keyboard Accessibility을 읽었다면 HTML에 대한 저의 사랑이 떠올랐을 것입니다.

If you need JavaScript for accessibility, semantic HTML makes your job significantly easier.

내가 발견한 많은 예들은 모두 의미 단추 요소를 아코디언 제목으로 사용한다.그리고 예를 들어div 표시를 형제로 사용합니다.다음은 내 코드를 시작하는 방법입니다.

ARIA 속성 추가

나는 ARIA가 aprevious post의 의미인 HTML을 대체할 수 없다고 썼다.새로운 HTML 특성이 ARIA를 대체하고 있습니다.이상적인 상황에서 나는 사용할 것이다details element.불행히도 IE9111은 지원되지 않습니다.브라우저 지원이 개선되기 전에, 나는 구식 방식을 고수할 것이다.나는 필요에 따라 영탄조를 첨가할 것이다.Edge로 호환성 확장을 기대하고 있습니다!
우선div에 aria-hidden 속성을 추가하여 아코디언 내용의 상태를 표시할 것입니다.축소된 요소가 닫힌 경우 화면 판독기에 숨겼으면 합니다.너는 네가 흥미가 없는 내용을 읽는 것이 얼마나 짜증날지 상상할 수 있니?

- <div id="accordion-section-1">
+ <div id="accordion-section-1" aria-hidden="true">
...
...
- <div id="accordion-section-2">
+ <div id="accordion-section-2" aria-hidden="true">
...
...
- <div id="accordion-section-3">
+ <div id="accordion-section-3" aria-hidden="true">

다음에 우리가 해야 할 일은 단추가 aria-expanded 속성을 가지고 있는지 확인하는 것이다.우리가 버튼을 눌렀을 때, 그것은 우리에게 무엇이 팽창했는지 무너졌는지 알려줄 것이다.

- <button id="accordion-open-1">
+ <button id="accordion-open-1" aria-expanded="false">
...
...
- <button id="accordion-open-2">
+ <button id="accordion-open-2" aria-expanded="false">
...
...
- <button id="accordion-open-3">
+ <button id="accordion-open-3" aria-expanded="false">

영탄조로 말하자면, 나에게는 적으면 많다.이것으로 끝내고 향후 섹션에서 JavaScript를 사용하여 ARIA 속성의 상태를 전환합니다.

브라우저 호환성 섹션 스타일 추가

나는 CSS의 세부 사항에 지나치게 관심을 두지 않을 것이다.CSS 리소스가 필요하다면 알리 스피텔과 엠마 위드킨드의 게시물이 모두 훌륭합니다.
우선, 더 잘 측정할 수 있도록 클래스를div와 단추에 추가합니다.

- <button id="accordion-open-1" aria-expanded="false">
+ <button id="accordion-open-1" class="accordion__button" aria-expanded="false">
    Section 1
  </button>
- <div id="accordion-section-1" aria-hidden="true">
+ <div id="accordion-section-1" class="accordion__section" aria-hidden="true">

그리고 나는 버튼에 몇 가지 스타일을 추가했다.나는 SCSS로 이 비밀번호펜을 썼다.
(간략한 설명: iframe의 삼각형에 대해 나는 CSS 기교 중의 를 사용했다.
다음 코드를 명시하고 싶습니다.

.accordion {
  // previous styling
  &__button.expanded {
    background: $purple;
    color: $lavendar;
  }
}

단추를 열 때의 모양을 지정하고 싶습니다.나는 그것이 너의 눈과 주의력을 개방적인 부분으로 끌어들이는 것을 좋아한다.이제 나는 그것들의 일반적인 모습을 보았고, 나는 그것들을 접기 위해 스타일을 추가할 것이다.그 밖에 나는 개방적인 스타일링도 첨가했다.

  &__section {
    border-left: 1px solid $purple;
    border-right: 1px solid $purple;
    padding: 1rem;
    background: $lavendar;
+   max-height: 0vh;
+   overflow: hidden;
+   padding: 0;
  }

+ &__section.open {
+   max-height: 100vh;
+   overflow: auto;
+   padding: 1.25em;
+   visibility: visible;
+ }

마지막으로 버튼에 초점과 정지 스타일을 추가합니다.

  $purple: #6505cc;
+ $dark-purple: #310363;
  $lavendar: #eedbff;

  &__button {
    position: relative;
    display: block;
    padding: 0.5rem 1rem;
    width: 100%;
    text-align: left;
    border: none;
    color: $purple;
    font-size: 1rem;
    background: $lavendar;

+   &:focus,
+   &:hover {
+     background: $dark-purple;
+     color: $lavendar;
+
+     &::after {
+       border-top-color: $lavendar;
+     }
+   }

빠른 알림: .accordion__button[aria-expanded="true"] 또는 .accordion__section[aria-hidden="false"] 를 추가해서 스타일을 추가할 수 있습니다.그러나 저는 개인적으로 속성이 아니라 클래스를 사용해서 스타일을 디자인하는 것을 좋아합니다.사람마다 필치가 다르다!

CSS 삼각형 문서 JavaScript 전환

이제 손풍금의 재미있는 부분을 편리한 방식으로 전환해 봅시다.우선, 나는 모든 .section__button 원소를 잡고 싶다.

const accordionButtons = document.querySelectorAll('.accordion__button')

그런 다음 JavaScript에서 반환하는 HTML 컬렉션의 각 요소를 단계적으로 탐색하고 싶습니다.

accordionButtons.forEach(button => console.log(button))
// returns <button id="accordion-open-1" class="accordion__button" aria-expanded="false">
//    Section 1
//  </button>
//  <button id="accordion-open-2" class="accordion__button" aria-expanded="false">
//    Section 2
//  </button>
//  <button id="accordion-open-3" class="accordion__button" aria-expanded="false">
//    Section 3
//  </button>

그리고 이 항목들 중 하나에 대해 나는 시각적 조형을 하기 위해 클래스의 시작과 끝을 바꾸고 싶다.만약 우리가 이전에 추가한 .open과.expanded류를 기억한다면, 이것은 우리가 그것들을 전환하는 곳이다.버튼의 해당 섹션은 ID에서 일치하는 숫자를 사용합니다.

accordionButtons.forEach(button => {
  // This gets the number for the class.
  // e.g. id="accordion-open-1" would be "1"
  const number = button
    .getAttribute('id')
    .split('-')
    .pop()

  // This gets the matching ID. e.g. the
  // section id="accordion-section-1" that is underneath the button
  const associatedSection = document.getElementById(
    `accordion-section-${number}`
  )
})

현재 우리는 리셋과 관련 부분에서 현재 값button이 있다.이제 우리는 수업을 시작할 수 있다!

button.addEventListener('click', () => {
  button.classList.toggle('expanded')
  associatedSection.classList.toggle('open')
})

우리가 하고 싶은 것은 교대만이 아니다.우리는 또 아리아 속성을 바꾸고 싶다.이전 절부터 아리아 속성은 화면 리더에게 상태를 전달합니다.클래스를 변경하면 화면 판독기가 아닌 시각 사용자에게 무슨 일이 일어났는지 보여 줍니다.다음에, 나는 단추가 그 중의 한 요소에 이 종류를 포함하는지 검사한다.그렇다면 상태aria-hidden와 aria-expanded로 바꿀게요.

button.addEventListener('click', () => {
  button.classList.toggle('expanded')
  associatedSection.classList.toggle('open')

+ if (button.classList.contains('expanded')) {
+   console.log('open?')
+ }
})

우리가 클래스를 설정하면 조건이 자극됩니다. 클래스가 확장되면 열려 있습니다.그래서 이것은 우리가 상태를 사용하고 개방적이라고 전달하고자 하는 것이다.

button.addEventListener('click', () => {
  button.classList.toggle('expanded')
  associatedSection.classList.toggle('open')

  if (button.classList.contains('expanded')) {
    button.setAttribute('aria-expanded', true)
    associatedSection.setAttribute('aria-hidden', false)
  } else {
    button.setAttribute('aria-expanded', false)
    associatedSection.setAttribute('aria-hidden', true)
  }
})

이제 우리는 스페이스 바나 리턴 키로 아코디언을 켜고 닫을 수 있다!
내가 아코디언의 제목을 열지 않았을 때, 그들은 부분에서 읽지 않을 것이다.이것은 좋은 일이다!내가 그것을 열었을 때, 나는 그것을 읽을 수 있었다.

점진적 증강

이제, 나는 우리가 자바스크립트 불러오기, 특히 우리가 사용하는 모든 프레임워크에 얼마나 의존하는지 안다.이제 우리는 기능을 이해했으니 코드를 재구성합시다.JavaScript가 활성화되어 있지 않거나 연결 문제가 있는 경우 누구나 아코디언에 액세스할 수 있도록 하는 것이 목표입니다.
제 마지막 점은요.

기본적으로 모든 아코디언 부분을 엽니다(HTML 부분에 .open클래스 추가)

JavaScript를 로드한 후 open 클래스를 삭제합니다.

자바스크립트를 사용하여 모든 아리아 속성을 추가하고 HTML에서 삭제

제 단추와 부분에서 각각 삭제하고 싶습니다aria-expanded="false"와aria-hidden="true".나는 또한 open클래스를 html에 추가하고 싶기 때문에 기본적으로 보기 좋게 열 수 있다.

- <button id="accordion-open-1" class="accordion__button" aria-expanded="false">
+ <button id="accordion-open-1" class="accordion__button">
    Section 1
  </button>
- <div id="accordion-section-1" class="accordion__section" aria-hidden="true">
+ <div id="accordion-section-1" class="accordion__section open">

이 속성을 설정하고 accordionButtons forEach 순환에서 클래스를 삭제하고 싶습니다.

accordionButtons.forEach(button => {
+ button.setAttribute('aria-expanded', false);
  const expanded = button.getAttribute('aria-expanded');

그리고 나는 accordionsSections 변수를 만들고 두 가지 일을 하고 싶다.

설정aria-hidden속성

류를 뜯어내다.open류.

const accordionSections = document.querySelectorAll('.accordion__section');

accordionSections.forEach(section =>  {
  section.setAttribute('aria-hidden', true)
  section.classList.remove('open')
})

우리 망했어!다른 코드나 이벤트 탐지기를 삭제하지 않았다는 것을 기억하십시오.이 모든 속성은 JavaScript를 사용하여 추가되었습니다.

결론

이 댓글 어때요?도움이 되셨나요?당신은 <details>원소에 대해 흥분했습니까?너의 생각을 나에게 알려줘!그리고 저 지금 하나 있어요 !만약 네가 나의 일을 좋아한다면, 스폰서가 되는 것을 고려해라.만약 당신이 5달러 이상을 약속한다면, 당신은 미래의 블로그 게시물에 투표할 수 있습니다.건배!일주일 잘 보내세요!