자주 묻는 질문 답변을 위한 디스클로저 (노출/숨김) 예제

접근성 특징

• FAQ의 의미론 구조가 네이티브 dl, dt, dd 엘리먼트로 전달됩니다. 보조 기술에 목록 구조가 전달되도록 하기 위해, dt 엘리먼트에 버튼 역할을 부여하는 대신 dt 엘리먼트 내부에 button 엘리먼트가 포함됩니다. 마찬가지로, 버튼에 의해 보여지거나 숨겨질 수 있는 답변 컨텐츠를 포함하는 각 div 엘리먼트는 dd 엘리먼트의 자식입니다. 일부 답변이 숨겨져 있다하더라도 모든 dd 엘리먼트가 DOM에 존재하기 때문에, dl 구조는 항상 완전합니다.
• 시각 장애를 가진 사람들이 디스클로저를 상호작용하는 것으로 식별하고 디스클로저 버튼이나 레이블을 클릭하는 것이 확장 상태를 변경함을 쉽게 인지 할 수 있도록 하기 위해, 포인터를 버튼이나 레이블 위로 가져가면 배경색이 변경되고 테두리가 나타나며 커서가 포인터로 변경됩니다.
• 투명한 테두리는 운영 체제 고대비 설정이 활성화 된 일부 시스템에서 보일 수 있기 때문에, 초점을 얻은 엘리먼트와 다른 엘리먼트 사이의 시각적 차이를 만드는데 투명도가 사용될 수 없습니다. 투명도 사용 대신, 초점을 얻은 엘리먼트는 더 두꺼운 테두리와 적은 패딩을 가집니다. 엘리먼트가 초점을 얻으면, 테두리는 0에서 2px로 변경되고 패딩은 2px 감소합니다. 엘리먼트가 초점을 잃으면, 테두리는 2px에서 0으로 변경되고 패딩은 2px 증가합니다.
• 고대비 설정이 색상을 반전할 때, CSS의 인라인 SVG 화살표 그래픽이 배경과 충분한 대비를 가지도록 하기 위해, 화살표 색상이 텍스트 컨텐츠 색상과 동기화 됩니다. 예를 들어, 화살표 색상은 화살표를 그리는데 사용되는 polygon 엘리먼트의 stroke와 fill 속성에 대해 CSS currentcolor 값을 지정하여 고대비 모드 텍스트의 전경색과 일치하도록 설정됩니다. polygon 속성을 지정하는데 특정 색상이 대신 사용된다면, 그 색상은 고대비 모드에서 동일하게 유지되어, 화살표와 배경색 간 대비를 불충분하게 하거나 색상이 고대비 모드 배경과 일치하는 경우 화살표가 보이지 않게 만들 수도 있습니다.
  참고: SVG 엘리먼트는 currentcolor 값이 고대비 모드에서 업데이트 되도록 auto로 설정된 forced-color-adjust 속성을 가질 필요가 있습니다. 일부 브라우저는 기본 값으로 auto를 사용하지 않습니다.

키보드 지원

Role, Property, State, Tabindex 어트리뷰트

Javascript와 CSS 소스 코드

• CSS: disclosure-faq.css
• Javascript: disclosureButton.js

HTML Source Code