HTML의 역할 속성

1. HTML의 role 속성 소개
2. HTML에서 접근성을 위해 role 속성 사용

이 기사에서는 HTML 역할 속성과 그 목적을 소개합니다.

HTML의 role 속성 소개

HTML의 role 속성은 [WAI-ARIA](Web Accessibility Initiative – Accessible Rich Internet Applications) 사양에 속합니다. WAI-ARIA의 주요 목적은 장애인을 지원하기 위해 웹 인터페이스의 접근성을 높이는 것입니다.

이를 통해 스크린 리더는 우리가 제공한 정보를 사용하여 HTML 문서의 내용을 읽을 수 있습니다. role 속성은 시맨틱을 설명하는 HTML 요소의 역할을 정의합니다.

먼저 시맨틱 HTML 요소와 비시맨틱 HTML 요소의 차이점을 이해해 봅시다. <p>, <table> 및 <li>와 같은 요소는 의미를 나타내는 의미 요소입니다.

외관보다는 기능에 더 중점을 둡니다. 요소의 특정 의미가 브라우저와 개발자에게 표시됩니다.

예를 들어 <p> 태그는 단락을 만듭니다.

반면에 비의미적 HTML 요소는 내용에 대한 명확한 설명이 없는 요소입니다. <div> 및 <span>과 같은 태그가 그 예입니다.

이러한 태그에는 내부 콘텐츠에 대한 정보가 없습니다. 즉, 의미 체계가 없습니다.

role 속성은 HTML의 비의미적 요소에 의미를 제공합니다. role="role_type" 형식을 사용하여 요소의 역할을 작성할 수 있습니다.

여기서 role_type은 ARIA에 지정된 역할입니다. 아래 섹션에서는 role 속성의 다양한 사용 사례를 볼 수 있습니다.

HTML에서 접근성을 위해 role 속성 사용

역할 속성의 주요 목적 중 하나는 특히 시각 장애가 있는 사용자에게 접근성을 제공하는 것입니다. 스크린 리더를 사용하면 role 속성이 특정 요소의 정확한 목적 또는 동작을 읽습니다.

웹 애플리케이션 사용자가 시각 장애가 있는 시나리오를 생각해 봅시다. 사용자를 로그인하는 버튼을 만들어야 합니다.

그러나 프레임워크에서는 <button> 요소를 사용할 수 없습니다. 프레임워크의 무능력에도 불구하고 <a> 태그를 사용하여 여전히 가능하게 만들 수 있습니다.

그러나 역할 속성을 사용하지 않는 한 시각 장애인에게 로그인 버튼이 있음을 알릴 방법이 없습니다.

이러한 상황에서 role 속성을 사용하여 링크를 버튼으로 정의할 수 있습니다. role 속성의 값을 "버튼"으로 작성하면 됩니다.

결과적으로 스크린 리더는 로그인이 버튼임을 사용자에게 읽습니다. 따라서 그는 시스템에 로그인할 수 있습니다.

크롬 브라우저용 크롬 웹 스토어에서 스크린 리더 확장 프로그램을 추가할 수 있습니다. 사용자가 키보드를 통해 <a> 태그를 탐색하면 스크린 리더는 로그인을 버튼으로 읽습니다.

예제 코드:

<a href="#" role="button"> Login </a>