버튼 안에 버튼 넣지 않기 | A11y Fundamentals

[giscus[bot]]

버튼 안에 버튼 넣지 않기 | A11y Fundamentals

프론트엔드 접근성의 모든 것

https://frontend-fundamentals.com/a11y/structure/button-inside-button.html

[oikkoikk]

아래 예시에서 aria-label="서비스 검토 관리"는 텍스트 콘텐츠와 중복되어있는데, 이러한 경우는 앞서 언급한 테스트 용이성을 위한 것이라 보아야할까요?

이러한 경우에, 유지보수시에 관리포인트가 2곳이 되어 의도치 않은 side effect가 발생하지는 않을까요? 다른 분들의 의견이 궁금합니다...!!!

<div
  style="position: relative; isolation: isolate;"
  className="wrapper"
  role="listitem"
  aria-label="서비스 검토 관리"
>
  <button 
    className="detail-button"
    style="position: absolute; inset: 0; opacity: 0"
  >
    상세보기
  </button>
  서비스 검토 관리
  <div style="position: relative; z-index: 2;">
    <button aria-label="삭제">x</button>
  </div>
</div>

[Pridesd]

저도 동의합니다. 부모 요소인 div에 "서비스 검토 관리"라는 aria-label 값이 있어 하위에 있는 요소들이 스크린리더에 의해 읽히지 않을 수 있습니다. 더 좋은 방법으로는 각 버튼에 스크린리더에만 읽히는 hidden text를 넣어 어떤 기능을 하는 버튼인지 부가 설명을 주는 방법이 더 바람직해 보입니다.