Intro

퍼블리싱된 아코디언 리스트 구현 방식에 대해서 회의에서 ui/ux 측면에서 언급이 나왔다.

하나는 클릭 시 가장 최근에 클릭된 요소의 아코디언 리스트만 펼치고, 나머지는 자동으로 닫히는 구조였으며,
다른 하나는 클릭 시 기존에 펼쳐진 아코디언 리스트들을 유지하면서 클릭한 아코디언 리스트를 펼치는 구조였다.

회의가 끝난 후 호기심에 2개의 서로 다른 아코디언 리스트의 기능을 분석하기 위해서 퍼블리싱을 비롯한 코드 분석 도중에 aria-expanded 속성을 발견했다.

이것과 기능상의 연관이 있을까?

👉 연관은 없었다 ㅋㅋㅋㅋ(코드를 잘못 보았다).

다만 si를 하면서 wbs나 다른 정책 사항에서 시각장애인들을 위한 웹 접근성이 자주 언급되어서 aria-라는 녀석이 어떤 녀석인지 간략히 적어보았다.

ARIA

ARIA(Accessible Rich Internet Applications)는 웹 콘텐츠와 애플리케이션의 접근성을 향상시키기 위해 설계된 일련의 HTML 속성과 규칙입니다. ARIA는 특히 동적인 웹 애플리케이션에서 보조 기술(예: 스크린 리더) 사용자가 UI 요소의 상태와 역할을 이해할 수 있도록 돕습니다.

Aria는 시각장애인 등을 위한 웹 접근성 측면에서 음성 등의 효과로 사용자 경험을 돕는 장치라고 할 수 있다.

스크린 리더는 시각 장애인을 위한 소프트웨어로, 화면에 표시된 내용을 음성이나 점자로 읽어준다. 사용자는 키보드로 웹 페이지를 탐색하며, ARIA 속성 등 접근성 정보를 통해 UI 요소의 상태와 역할을 이해할 수 있다.

aria-expanded

컨트롤의 확장 또는 축소 여부와 제어되는 요소를 표시 또는 숨김 여부를 나타내기 위한 요소 설정이다.

DOM 트리 내에서 부모 항목에 적용되어 자식 브랜치가 표시되는 지 여부를 나타낸다고 한다.

aria-labelledby

해당 요소가 어떤 레이블(설명 텍스트)에 의해 설명되는지를 정의한다.

📌 결과적으로 기본 label 속성인데 시각장애인용이라고 생각하면 된다. 기능상의 그런 큰 차이는 없다.

Reference

• https://story.pxd.co.kr/1588
  아코디언 메뉴에 WAI-ARIA를 적용해본다면?