HTML role 속성의 역할

HTML role 속성은 장애를 가진 사용자들을 위한 웹 콘텐츠 접근성을 개선하는 강력한 도구입니다.
이 속성을 사용하여 웹 페이지의 구조와 의미를 명확하게 전달하고 상호 작용을 용이하게 만들 수 있습니다. 사용자들이 스크린 리더 및 보조 기술을 통해 웹 페이지를 이해하고 상호 작용할 수 있도록 돕는 중요한 기능입니다.

그리고, 웹 사이트의 구조와 의미를 명확하게 표현할 수 있기 때문에 검색 엔진이 웹 사이트를 더 잘 이해할 수 있게 하여 이를 통해 웹 페이지는 더욱 포괄적이고 접근 가능한 사용자 경험을 제공할 수 있습니다. 따라서 HTML role 속성을 사용하면 웹 사이트의 접근성, 검색 엔진 최적화, 구조 및 의미를 개선하는 데 도움이 됩니다.

다음의 목차로 설명합니다.

  1. role 속성이란 무엇인가?
  2. role 속성의 장점
  3. role 속성 종류 및 값
  4. role 속성 사용 시 고려해야 할 사항

HTML role 속성은
HTML 요소(Element)의 확장 개념으로 좀 더 명확한 HTML 요소의 구조와 의미를 부여하는 역할을 하는 속성입니다.

이 속성은 웹 접근성을 향상시키기 위해 HTML5부터 도입되었으며, WAI-ARIA(Web Accessibility Initiative - Accessible Rich Internet Applications) 명세의 일부입니다. 이 명세는 웹 콘텐츠의 접근성을 향상시키기 위한 표준을 제공합니다.

WAI-ARIA는 웹 접근성을 향상시키기 위해 개발된 표준으로 웹 콘텐츠와 웹 애플리케이션의 접근성을 높이기 위한 기술 사양입니다. WAI-ARIA는 HTML 요소에 추가할 수 있는 속성 집합으로, 웹 콘텐츠의 의미를 assistive technologies(보조 기술)에 전달합니다.

다음은 role 속성을 사용하여 검색 기능을 나타내는 예제입니다.

HTML 
<form role="search"> <!-- role 속성을 사용했습니다. -->
    <label for="search-input">Search:</label>
    <input type="text" id="search-input" name="search" placeholder="Search...">
    <button type="submit">Submit</button>
</form>

코드 부연설명
<button type="submit">은 양식 제출 버튼입니다. 이 버튼을 클릭하면 해당 요소가 포함되어 있는 <form> 태그로 나타내는 양식의 모든 컨트롤의 값을 제출합니다.

위의 예제에서는 <form> 요소에 role 속성을 추가하여 해당 요소가 검색 기능을 수행한다는 것을 명시했습니다. 이로써 이 요소가 검색 입력 필드와 제출 버튼을 포함한 검색 양식을 나타낸다는 것을 명확히합니다.

role 속성을 사용하여 검색 기능을 정의함으로써 스크린 리더 사용자는 이 요소가 검색 기능을 가진 양식임을 이해할 수 있습니다. 또한, role 속성을 사용함으로써 검색 엔진은 이 정보를 활용하여 웹 페이지의 구조를 이해하고, 검색 결과에 관련성을 더 정확하게 평가할 수 있습니다.

이 예제에서는 role 속성을 사용하여 검색 기능을 가진 검색 양식을 명시적으로 정의하고 있습니다. 이는 웹 접근성, 시맨틱 마크업, 검색 엔진 최적화를 개선하는 데 도움을 주는 예시입니다.

위 예제에서 살펴본 바와 같이 HTML role 속성은 여러 가지 장점을 가지고 있습니다. 이러한 장점들은 웹 접근성 개선, 시맨틱 마크업 강화, 검색 엔진 최적화 향상 등 다양한 측면에서 나타날 수 있습니다. 몇 가지 주요한 장점을 살펴보겠습니다.

웹 접근성 개선

role 속성을 사용하면 웹 페이지를 장애를 가진 사용자들이 더 잘 이해하고 조작할 수 있도록 도와줍니다. 스크린 리더 등의 보조 기술을 사용하는 사용자는 role 속성을 통해 요소의 의미와 역할을 파악할 수 있으며, 이를 통해 웹 콘텐츠에 더 쉽게 접근할 수 있습니다.

시맨틱 마크업 강화

role 속성은 HTML 요소의 의미와 역할을 명시적으로 정의하는데 사용됩니다. 이를 통해 개발자는 웹 페이지의 구조와 의미를 더 명확하게 표현할 수 있습니다. 이는 코드의 가독성과 유지 보수성을 향상시키며, 웹 페이지의 의미적 구조를 명확하게 전달하여 사용자 경험을 개선하는 데 도움이 됩니다. 이는 개발자와 사용자 모두에게 요소의 의미와 기능을 명확히 전달합니다.

검색 엔진 최적화 향상

role 속성을 사용하여 HTML 요소의 의미와 역할을 명시하면 검색 엔진은 웹 페이지의 구조를 더 잘 이해하고 해석할 수 있습니다. 이는 검색 결과에 더 정확한 정보를 제공하고 검색 엔진 최적화를 향상시킬 수 있습니다. role 속성을 사용하면 웹 페이지의 구조를 더 명확하게 전달하고 검색 가능한 콘텐츠를 효과적으로 표시할 수 있습니다.

향상된 사용자 경험

role 속성을 사용하여 적절한 역할과 의미를 부여하면 사용자는 웹 페이지를 더 쉽게 이해하고 조작할 수 있습니다. role 속성을 사용하여 접근성을 개선하고 시맨틱 마크업을 강화하면 사용자들은 콘텐츠에 더 빠르게 접근하고 필요한 정보를 더 쉽게 찾을 수 있습니다. 이는 전반적인 사용자 경험 향상에 도움이 됩니다.

이러한 장점들을 고려하면 role 속성을 적절하게 활용하여 웹 페이지를 구성하는 것이 중요하며, 웹 접근성과 사용자 경험을 개선하기 위한 필수적인 도구라고 할 수 있습니다.

해당 role 속성 값을 클릭하면 MDN(Mozilla Developer Network)에서 제공하는 관련 상세 정보(영문)를 볼 수 있습니다.

웹 접근성에 필요한 role 속성 종류 리스트 및 값에 대한 표
role="toolbar" 툴바 역할을 가리킵니다. 일반적으로 버튼, 입력 필드, 도구 모음 등을 포함하는 작업 표시줄을 나타냅니다.
role="tooltip" 툴팁 역할을 가리킵니다. 사용자가 특정 요소 위로 마우스를 이동하거나 포커스를 주었을 때 나타나는 정보를 제공하는 작은 팝업 요소를 나타냅니다.
role="feed" 피드 역할을 가리킵니다. 동적으로 변경되는 콘텐츠 스트림을 나타내며, 일반적으로 뉴스, 블로그, 소셜 미디어 등의 콘텐츠 스트림을 표현할 때 사용됩니다.
role="math" 수학적인 내용을 가리키는 역할을 나타냅니다. 수식, 수학 표기법, 수학적인 표현 등을 포함하는 요소를 나타내는데 사용됩니다.
role="presentation" 요소가 시각적인 표현을 갖지 않는다는 것을 나타냅니다. 즉, 시각적인 스타일이나 레이아웃에 영향을 주지 않는 요소임을 나타냅니다.
role="none" 요소의 역할을 제거하여 접근성 트리에 표시되지 않게 합니다.
role="note" 주석 역할을 가리킵니다. 부가적인 정보나 설명을 제공하는 주석 요소를 나타냅니다.
role="application" 애플리케이션을 나타냅니다. 웹 애플리케이션의 메인 컨테이너 또는 애플리케이션 요소에 적용할 수 있습니다.
role="article" 독립적인 문서, 페이지, 또는 섹션을 나타냅니다. 기사, 블로그 글, 포럼 게시물 등과 같이 독립적으로 구성될 수 있는 콘텐츠에 사용됩니다.
role="cell" 테이블의 셀을 나타냅니다. 데이터 테이블에서 개별 셀에 사용됩니다.
role="columnheader" 테이블의 열 헤더를 나타냅니다. 데이터 테이블에서 열 제목에 사용됩니다.
role="definition" 정의를 나타냅니다. 용어의 정의나 설명에 사용될 수 있습니다.
role="figure" 독립적인 그림, 사진, 도표 등을 나타냅니다.
role="group" 관련된 요소들의 그룹을 나타냅니다.
role="heading" 제목을 나타냅니다.
role="img" 이미지를 나타냅니다.
role="list" 목록을 나타냅니다.
role="listitem" 목록의 항목을 나타냅니다.
role="meter" 측정 단위를 가진 수치를 나타냅니다
role="row" 테이블의 행을 나타냅니다.
role="rowgroup" 테이블의 행 그룹을 나타냅니다.
role="rowheader" 테이블의 행 헤더를 나타냅니다.
role="separator" 구분선을 나타냅니다.
role="table" 테이블을 나타냅니다.
role="term" 용어를 나타냅니다.
role="scrollbar" 스크롤바를 나타냅니다. 일반적으로 스크롤 가능한 영역에 사용됩니다.
role="searchbox" 검색 입력 상자를 나타냅니다. 검색 기능을 제공하는 입력 상자에 사용될 수 있습니다.
role="separator" 포커스를 받을 수 있는 구분선을 나타냅니다. 사용자가 키보드로 구분선에 포커스를 이동할 수 있는 경우 사용됩니다.
role="slider" 슬라이더를 나타냅니다. 값을 선택하거나 조절하기 위해 사용되는 슬라이더 컨트롤에 적용됩니다.
role="spinbutton" 스핀 버튼을 나타냅니다. 값을 증가 또는 감소시키는 버튼이 있는 스핀 컨트롤에 사용됩니다.
role="switch" 스위치를 나타냅니다. 두 개의 상태를 전환하는 기능을 제공하는 스위치 컨트롤에 사용됩니다.
role="tab" 탭을 나타냅니다. 탭 형식의 네비게이션 또는 인터페이스 요소에 사용될 수 있습니다.
role="button" 버튼 역할을 나타냅니다. 이 역할을 가진 요소는 사용자가 클릭 또는 탭하여 특정한 동작이나 기능을 실행할 수 있는 버튼을 나타냅니다.
role="tabpanel" 탭 패널을 나타냅니다. 탭과 연결된 패널을 제공하는 요소에 사용됩니다.
role="treeitem" 트리 아이템을 나타냅니다. 트리 구조에서 각 항목을 나타내는 요소에 사용됩니다.
role="combobox" 조합 상자를 나타냅니다. 텍스트 입력 상자와 드롭다운 목록이 결합된 입력 컨트롤에 사용됩니다.
role="menu" 메뉴를 나타냅니다. 드롭다운 메뉴 또는 컨텍스트 메뉴에 사용될 수 있습니다.
role="menuitem" 메뉴 항목을 나타냅니다. 이 역할을 가진 요소는 메뉴 내에서 선택 가능한 항목을 의미합니다.
role="tablist" 탭 목록을 나타냅니다. 여러 개의 탭으로 구성된 인터페이스에서 탭 목록을 제공하는 요소에 사용됩니다.
role="tree" 트리 구조를 나타냅니다. 계층적인 항목으로 구성된 트리 형식의 인터페이스에서 사용됩니다.
role="banner" 웹 페이지의 글로벌 헤더인 머리글 영역을 나타냅니다. 보통 웹 페이지 상단에 위치하며, 사이트 제목, 로고, 주요 내비게이션 등이 포함될 수 있습니다.
role="contentinfo" 웹 페이지의 글로벌 푸터인 바닥글 영역을 나타냅니다. 보통 웹 페이지 하단에 위치하며, 저작권 정보, 탐색 링크, 개인 정보 보호 정책과 같은 식별 정보가 포함될 수 있습니다.
role="complementary" 보조(혹은 부가) 콘텐츠 영역을 나타냅니다. 주요 콘텐츠와 상호작용하지 않고 보조(부가)적인 역할을 하는 내용이 포함될 수 있습니다. 주로 웹 페이지의 사이드바를 나타냅니다.
role="form" 양식을 나타냅니다. 입력 필드, 버튼, 레이블 등이 포함될 수 있는 사용자 입력 영역에 사용됩니다.
role="main" 주요 콘텐츠 영역을 나타냅니다. 페이지의 핵심 내용이 포함되는 영역으로, HTML 문서에는 hidden 속성이 지정되지 않은 두 개 이상의 role="main"이 사용될 수 없습니다.
role="navigation" 탐색 영역을 나타냅니다. 사이트의 주요 내비게이션 메뉴나 링크가 포함될 수 있습니다.
role="region" 의미적인 구획을 나타냅니다. 해당 구획이 서로 독립적인 콘텐츠 영역임을 나타냅니다.
role="search" 검색 영역을 나타냅니다. 검색 필드, 검색 버튼 등이 포함될 수 있는 검색 인터페이스에 사용됩니다.
role="alert" 경고나 에러를 나타내는 중요한 메시지를 표시하는 역할을 합니다. 사용자에게 주의를 끌고 중요한 정보를 전달하는 데 사용됩니다.
role="log" 시스템 로그 또는 기록을 나타냅니다. 주로 작업 기록이나 이벤트 로그 등을 표시하는 데 사용될 수 있습니다.
role="marquee" 영역을 자주 변경되는 비필수 정보를 제공하는 라이브 영역 유형으로 정의합니다. 일반적인 용도에는 주식 티커와 광고 배너가 있습니다.
role="status" 상태 정보를 나타내는 역할을 합니다. 주로 애플리케이션의 현재 상태나 진행 상황을 표시하는 데 사용됩니다.
role="timer" 시간을 나타내는 역할을 합니다. 타이머나 카운트다운과 같이 시간과 관련된 정보를 표시하는 데 사용됩니다.
role="alertdialog" 경고 메시지를 나타내는 대화상자(Dialog)를 나타냅니다. 이 역할을 가진 요소는 사용자에게 중요한 정보나 경고를 전달하고, 사용자의 주의를 끌기 위해 모달(Modal) 형태로 표시됩니다. 사용자는 해당 대화상자에 대한 응답을 기다릴 때까지 다른 작업을 수행할 수 없습니다.
role="dialog" 대화상자(Dialog)를 나타냅니다. 이 역할을 가진 요소는 사용자와 상호작용하여 정보를 요청하거나 사용자에게 추가적인 선택을 제공하는 역할을 합니다. 대화상자는 모달 또는 모달리스 형태일 수 있으며, 사용자의 주의를 해당 대화상자로 집중시킵니다.

role 속성을 사용할 때 고려해야 할 몇 가지 사항이 있습니다.

적절한 역할 선택

각 요소에 가장 적합한 역할을 선택해야 합니다. WAI-ARIA 명세에서 제공하는 역할 중에서 가장 의미에 맞는 역할을 선택하여 요소에 적용해야 합니다.

오용과 남용 방지

role 속성은 접근성을 개선하기 위해 사용되는 도구이지만, 오용하거나 남용해서는 안 됩니다. 요소 자체가 이미 해당 역할을 가지고 있거나, HTML 요소로 충분히 의미를 전달할 수 있는 경우에는 role 속성을 사용하지 않아야 합니다. 예제로 살펴보겠습니다.

HTML role="region"은 <section> 요소와 같은 의미로 사용되기 때문에 중복으로 사용한 불필요한 마크업입니다. 
<section role="region">
    <h2>구획 요소 section</h2>
    <p>
        HTML section 요소는 HTML 문서의 독립적인 구획을 나타낼 때 사용합니다. 
    </p>
</section>

표준과 호환성 유지

role 속성을 사용할 때에도 HTML 표준과의 호환성을 유지해야 합니다. role 속성은 HTML 요소의 의미와 역할을 보완하기 위한 보조 수단으로 사용되어야 하며, HTML 요소의 기본 동작을 무시하거나 변경해서는 안 됩니다.

예제로 살펴보겠습니다.
<button> 요소는 기본적으로 사용자와 상호작용할 수 있는 버튼 역할을 가지고 있습니다. 따라서, <button> 요소를 사용하여 버튼을 만들 때에는 추가적인 role 속성을 사용할 필요가 없습니다.

HTML 
<button type="button" onclick="alert('버튼이 클릭되었습니다.')">클릭하세요</button>

위의 코드에서는<button> 요소를 사용하여 버튼을 생성하고, type 속성을 사용하여 버튼의 동작 유형을 명시하고 있습니다. onclick 속성을 사용하여 버튼이 클릭되었을 때 실행될 JavaScript 코드를 지정하고 있습니다. 이렇게 기본적인 HTML 요소를 사용하면 버튼의 의미와 역할이 명확하게 전달됩니다.

반면에, 다음 예제 코드에서는 <div> 요소에 role="button" 속성을 추가하여 버튼 역할을 부여하고 있습니다.

HTML 
<div role="button" tabindex="0" onclick="alert('버튼이 클릭되었습니다.')">클릭하세요</div>

이 코드는 <div> 요소에 role="button" 속성을 사용하여 버튼 역할을 지정하고 있습니다. 그러나 이는 HTML 표준과 호환성을 위해 권장되지 않는 방법입니다. <div> 요소는 원래 의미적인 역할을 가지지 않으며, role="button" 속성을 추가해도 이를 변경하거나 기본 동작을 제어할 수는 있습니다. 하지만, HTML 요소의 의미와 역할을 보완하기 위해서는 <button> 요소를 사용하는 것이 더 적합합니다.

위의 예제 코드를 통해 HTML 요소의 의미와 역할을 보존하고, HTML 표준과의 호환성을 유지하는 것이 중요하다는 것을 알 수 있습니다. role 속성은 기존의 HTML 요소에 추가적인 의미와 역할을 부여하기 위한 보조 수단으로 사용되어야 하며, HTML 요소의 기본 동작을 변경하거나 무시해서는 안 됩니다.

주의하세요!
role="button"은 <div> 요소를 스크린 리더 및 다른 보조 기술에 대한 버튼으로 식별하게 합니다. 하지만, 사용자에게 버튼의 컨트롤 기능은 제공하지는 않습니다. 버튼의 컨트롤 기능을 추가하려면 tabindex 속성과 자바스크립트, CSS가 추가로 필요합니다.

요약

  • role 속성은 HTML 요소의 의미와 역할을 보완하기 위해 사용되는 속성입니다.
  • role 속성을 사용하면 웹 콘텐츠의 접근성을 향상시킬 수 있습니다.
  • role 속성은 장애를 가진 사용자들에게 콘텐츠를 이해하고 상호작용할 수 있는 방법을 제공합니다.
  • role 속성을 사용하여 시맨틱한 HTML 구조를 보존하면서도 추가적인 의미와 역할을 부여할 수 있습니다.
  • role 속성은 WAI-ARIA 명세의 일부이며, 웹 표준과의 호환성을 유지해야 합니다.
  • 올바른 역할 선택, 오용과 남용 방지, 표준과의 호환성 유지 등을 고려하여 role 속성을 사용해야 합니다.

이러한 방식으로 role 속성을 사용하면 웹 콘텐츠의 접근성을 향상시키고 장애를 가진 사용자들에게 더 나은 사용자 경험을 제공할 수 있습니다.

role 속성에 대한 명세서
명세서 사양
role Accessible Rich Internet Applications (WAI-ARIA)
#WAI-ARIA Roles

참고문헌

같이 보기