인터랙티브 요소에 이름 붙이기 | A11y Fundamentals

[giscus[bot]]

인터랙티브 요소에 이름 붙이기 | A11y Fundamentals

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

https://frontend-fundamentals.com/a11y/semantic/required-label.html

[kjj9677]

aria-label 사용시 내부 요소가 무시될 수 있다는 내용을 주의사항으로 추가하면 어떨까요?

가령 Card component를 button 으로 wrapping 하는 경우

const CardButton = ()=> {
return <button aria-label="클릭하여 상세보기">
    <div class="card">
      <h3>제품명</h3>
      <p>가격: 29,000원</p>
      <span>재고 있음</span>
    </div>
  </button>
}

이렇게 작성하면 스크린 리더는 "클릭하여 상세보기 버튼"으로 읽고, 카드 내부의
제품명, 가격, 재고 정보를 건너뛰게 됩니다. 따라서 이런 경우는 aria-label 대신 스크린 리더 전용(sr-only class 활용) 텍스트 등을 활용해 내부 요소에 대한 정보를 차단하지 않는 것이 좋아보입니다.

[jjunohj]

다음 페이지에 aria-label을 사용하면 화면에 보이는 텍스트가 스크린 리더에 노출되지 않게 된다는 주의사항이 남겨져있네요 !

@kjj9677님의 말씀에 첨언하자면 sr-only 클래스는 단순히 시각적으로만 숨기는 CSS 기법으로,sr-only 로 숨겨진 텍스트가 스크린 리더에서 어떤 요소의 레이블이나 설명으로 작동하려면 반드시 적절한 ARIA 속성(aria-labelledby, aria-describedby) 또는 <label> 태그에 명시적으로 연결되어야 합니다. 그냥 존재한다고 해서 자동으로 읽히지는 않습니다.

주의사항으로, sr-only 클래스의 텍스트도 그저 텍스트이기 때문에 button 태그의 ARIA 속성으로 연결할 경우 스크린 리더는 결국 ARIA 속성의 텍스트를 읽을 뿐 내부 정보는 읽지 않게되는데요. 따라서 버튼 내부 정보를 모두 보여주면서 "클릭하여 상세보기"도 포함하려면 간단히 "클릭하여 상세보기"와 "내부 정보" 모두를 aria-label에 포함시키는 것이 필요합니다.

예를 들면 다음과 같이 구현할 수 있습니다.

1. 가장 단순한 방법 (정적인 방식)

const CardButton = () => {
  return (
    <button aria-label="클릭하여 상세보기 - 제품명, 가격: 29,000원, 재고 있음">
      <div className="card">
        <h3>제품명</h3>
        <p>가격: 29,000원</p>
        <span>재고 있음</span>
      </div>
    </button>
  );
};

2. 액션을 sr-only로 분리하고, 동적으로 텍스트를 가져오는 방식

const CardButton = () => {
  return (
    <button aria-labelledby="action title price stock">
      <span id="action" className="sr-only">클릭하여 상세보기</span>
      <div className="card">
        <h3 id="title">제품명</h3>
        <p id="price">가격: 29,000원</p>
        <span id="stock">재고 있음</span>
      </div>
    </button>
  );
};

• 참고로 sr-only 유틸리티 클래스는 Tailwind CSS 환경에서 기본 제공되고, 직접 구현하려면 아래와 같이 클래스를 선언하여 사용해야하니 참고해주세요 !

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

[kjj9677]

aria-label을 무조건적으로 사용해야 하는 것처럼 보일 수 있겠다 싶어 주의사항을 남겼는데, 관련 내용이 이미 다른 페이지에 있었네요. 확인 감사합니다. 🙏

첨언해주신 내용처럼, aria-label을 통해 내부 정보를 모두 포함하는 방식도 분명 좋은 해결책 중 하나인 것 같아요. 다만 1번 방식의 경우 버튼 내부 정보가 많을 때 aria-label 문자열이 길어져 관리와 유지보수 측면에서 비효율적일 수 있다는 생각이 들었습니다. 또한 aria-label 사용 주의사항이라는 점에 맞춰, 이를 사용하지 않고도 접근성을 향상시킬 수 있는 방법을 함께 제안드리고자 했습니다.

아울러 aria-label이 설정되지 않은 button 요소는 내부 텍스트 콘텐츠를 접근성 이름으로 인식하기 때문에, sr-only 텍스트를 내부에 추가하는 것만으로도 필요한 정보를 스크린 리더에 전달할 수 있다고 생각했습니다.
(혹시 이 부분에서 제가 잘못 이해한 부분이 있다면 알려주시면 감사하겠습니다. 😊)