role 속성을 명시적으로 추가해야 하는 경우를 살펴보겠습니다. 기본적으로 HTML 요소들은 자신의 태그에 따라 적절한 역할(role)을 가지고 있기 때문에 대부분의 경우에는 별도로 role 속성을 지정할 필요가 없습니다. 하지만 몇 가지 상황에서는 추가적인 role 속성을 사용하여 요소의 역할을 명확히 할 수 있습니다.
결론을 먼저 말하자면, 기본적인 태그에 똑같이 role 을 지정할 필요는 없습니다.
1. button 요소
- 사용 예시: <button>확인</button>
- 추가 고려 사항: <button> 요소는 기본적으로 버튼 역할을 가지므로 일반적으로 별도의 role="button"을 지정할 필요는 없습니다. 단, 특정 상황에서 role 속성을 사용하여 추가적인 의미를 전달할 필요가 있을 수 있습니다 (예: 사용자 정의 버튼 디자인).
2. input type="checkbox" 요소
- 사용 예시: <input type="checkbox" id="checkbox1"> <label for="checkbox1">체크박스</label>
- 추가 고려 사항: <input type="checkbox"> 요소는 기본적으로 체크박스 역할을 가지고 있습니다. 일반적으로 별도의 role="checkbox"를 지정할 필요는 없습니다. 다만, 복잡한 UI나 특정 접근성 요구사항을 충족시키기 위해 aria-checked 속성과 함께 사용할 수 있습니다.
3. dialog 요소
- 사용 예시: <dialog open>다이얼로그 내용</dialog>
- 추가 고려 사항: <dialog> 요소는 모달 다이얼로그 역할을 가지고 있으며, 일반적으로 별도의 role="dialog"를 지정할 필요는 없습니다. 그러나 스크린 리더와의 호환성을 위해 role="dialog"을 명시적으로 추가하는 것이 좋습니다.
4. nav 요소
- 사용 예시: <nav><ul><li><a href="#">링크</a></li></ul></nav>
- 추가 고려 사항: <nav> 요소는 내비게이션 역할을 가지고 있으며, 일반적으로 별도의 role="navigation"을 지정할 필요는 없습니다. 다만, 특정 상황에서 role="navigation"을 사용하여 추가적인 의미를 전달할 수 있습니다 (예: 스크린 리더에서 명확한 내비게이션 구조를 제공할 때).
요약
- HTML 요소들은 기본적으로 자신의 태그에 따라 적절한 역할을 가지고 있기 때문에 대부분의 경우 별도의 role 속성을 지정할 필요가 없습니다.
- 특정 상황에서는 추가적인 접근성 요구사항을 충족시키기 위해 role 속성을 명시적으로 사용할 수 있습니다.
- 또한, role 속성을 사용할 때는 해당 요소의 기본적인 의미와 충돌하지 않도록 주의해야 합니다.
728x90
