HTML role
속성의 역할
HTML role
속성은 장애를 가진 사용자들을 위한 웹 콘텐츠 접근성을 개선하는 강력한 도구입니다.
이 속성을 사용하여 웹 페이지의 구조와 의미를 명확하게 전달하고 상호 작용을 용이하게 만들 수 있습니다. 사용자들이 스크린 리더 및 보조 기술을 통해 웹 페이지를 이해하고 상호 작용할 수 있도록 돕는 중요한 기능입니다.
그리고, 웹 사이트의 구조와 의미를 명확하게 표현할 수 있기 때문에 검색 엔진이 웹 사이트를 더 잘 이해할 수 있게 하여 이를 통해 웹 페이지는 더욱 포괄적이고 접근 가능한 사용자 경험을 제공할 수 있습니다. 따라서 HTML role
속성을 사용하면 웹 사이트의 접근성, 검색 엔진 최적화, 구조 및 의미를 개선하는 데 도움이 됩니다.
다음의 목차로 설명합니다.
role
속성이란 무엇인가?
HTML role
속성은
HTML 요소(Element)의 확장 개념으로 좀 더 명확한 HTML 요소의 구조와 의미를 부여하는 역할을 하는 속성입니다.
이 속성은 웹 접근성을 향상시키기 위해 HTML5부터 도입되었으며, WAI-ARIA(Web Accessibility Initiative - Accessible Rich Internet Applications) 명세의 일부입니다. 이 명세는 웹 콘텐츠의 접근성을 향상시키기 위한 표준을 제공합니다.
WAI-ARIA는 웹 접근성을 향상시키기 위해 개발된 표준으로 웹 콘텐츠와 웹 애플리케이션의 접근성을 높이기 위한 기술 사양입니다. WAI-ARIA는 HTML 요소에 추가할 수 있는 속성 집합으로, 웹 콘텐츠의 의미를 assistive technologies(보조 기술)에 전달합니다.
다음은 role
속성을 사용하여 검색 기능을 나타내는 예제입니다.
<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>
위의 예제에서는 <form>
요소에 role
속성을 추가하여 해당 요소가 검색 기능을 수행한다는 것을 명시했습니다. 이로써 이 요소가 검색 입력 필드와 제출 버튼을 포함한 검색 양식을 나타낸다는 것을 명확히합니다.
role
속성을 사용하여 검색 기능을 정의함으로써 스크린 리더 사용자는 이 요소가 검색 기능을 가진 양식임을 이해할 수 있습니다. 또한, role
속성을 사용함으로써 검색 엔진은 이 정보를 활용하여 웹 페이지의 구조를 이해하고, 검색 결과에 관련성을 더 정확하게 평가할 수 있습니다.
이 예제에서는 role
속성을 사용하여 검색 기능을 가진 검색 양식을 명시적으로 정의하고 있습니다. 이는 웹 접근성, 시맨틱 마크업, 검색 엔진 최적화를 개선하는 데 도움을 주는 예시입니다.
role
속성의 장점
위 예제에서 살펴본바와 같이 HTML role
속성은 여러 가지 장점을 가지고 있습니다. 이러한 장점들은 웹 접근성 개선, 시맨틱 마크업 강화, 검색 엔진 최적화 향상 등 다양한 측면에서 나타날 수 있습니다. 몇 가지 주요한 장점을 살펴보겠습니다.
웹 접근성 개선
role
속성을 사용하면 웹 페이지를 장애를 가진 사용자들이 더 잘 이해하고 조작할 수 있도록 도와줍니다. 스크린 리더 등의 보조 기술을 사용하는 사용자는 role
속성을 통해 요소의 의미와 역할을 파악할 수 있으며, 이를 통해 웹 콘텐츠에 더 쉽게 접근할 수 있습니다.
시맨틱 마크업 강화
role
속성은 HTML 요소의 의미와 역할을 명시적으로 정의하는데 사용됩니다. 이를 통해 개발자는 웹 페이지의 구조와 의미를 더 명확하게 표현할 수 있습니다. 이는 코드의 가독성과 유지 보수성을 향상시키며, 웹 페이지의 의미적 구조를 명확하게 전달하여 사용자 경험을 개선하는 데 도움이 됩니다. 이는 개발자와 사용자 모두에게 요소의 의미와 기능을 명확히 전달합니다.
검색 엔진 최적화 향상
role
속성을 사용하여 HTML 요소의 의미와 역할을 명시하면 검색 엔진은 웹 페이지의 구조를 더 잘 이해하고 해석할 수 있습니다. 이는 검색 결과에 더 정확한 정보를 제공하고 검색 엔진 최적화를 향상시킬 수 있습니다. role
속성을 사용하면 웹 페이지의 구조를 더 명확하게 전달하고 검색 가능한 콘텐츠를 효과적으로 표시할 수 있습니다.
향상된 사용자 경험
role
속성을 사용하여 적절한 역할과 의미를 부여하면 사용자는 웹 페이지를 더 쉽게 이해하고 조작할 수 있습니다. role
속성을 사용하여 접근성을 개선하고 시맨틱 마크업을 강화하면 사용자들은 콘텐츠에 더 빠르게 접근하고 필요한 정보를 더 쉽게 찾을 수 있습니다. 이는 전반적인 사용자 경험 향상에 도움이 됩니다.
이러한 장점들을 고려하면 role
속성을 적절하게 활용하여 웹 페이지를 구성하는 것이 중요하며, 웹 접근성과 사용자 경험을 개선하기 위한 필수적인 도구라고 할 수 있습니다.
role
속성 종류 및 값
해당 role
속성 값을 클릭하면 MDN(Mozilla Developer Network)에서 제공하는 관련 상세 정보(영문)를 볼 수 있습니다.
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
속성 사용 시 고려해야 할 사항
role
속성을 사용할 때 고려해야 할 몇 가지 사항이 있습니다.
적절한 역할 선택
각 요소에 가장 적합한 역할을 선택해야 합니다. WAI-ARIA 명세에서 제공하는 역할 중에서 가장 의미에 맞는 역할을 선택하여 요소에 적용해야 합니다.
오용과 남용 방지
role
속성은 접근성을 개선하기 위해 사용되는 도구이지만, 오용하거나 남용해서는 안 됩니다. 요소 자체가 이미 해당 역할을 가지고 있거나, HTML 요소로 충분히 의미를 전달할 수 있는 경우에는 role
속성을 사용하지 않아야 합니다. 예제로 살펴보겠습니다.
role="region"
은 <section>
요소와 같은 의미로 사용되기 때문에 중복으로 사용한 불필요한 마크업입니다.
<section role="region">
<h2>구획 요소 section</h2>
<p>
HTML section 요소는 HTML 문서의 독립적인 구획을 나타낼 때 사용합니다.
</p>
</section>
표준과 호환성 유지
role
속성을 사용할 때에도 HTML 표준과의 호환성을 유지해야 합니다. role
속성은 HTML 요소의 의미와 역할을 보완하기 위한 보조 수단으로 사용되어야 하며, HTML 요소의 기본 동작을 무시하거나 변경해서는 안 됩니다.
<button type="button" onclick="alert('버튼이 클릭되었습니다.')">클릭하세요</button>
위의 코드에서는<button>
요소를 사용하여 버튼을 생성하고, type
속성을 사용하여 버튼의 동작 유형을 명시하고 있습니다. onclick
속성을 사용하여 버튼이 클릭되었을 때 실행될 JavaScript 코드를 지정하고 있습니다. 이렇게 기본적인 HTML 요소를 사용하면 버튼의 의미와 역할이 명확하게 전달됩니다.
반면에, 다음 예제 코드에서는 <div>
요소에 role="button"
속성을 추가하여 버튼 역할을 부여하고 있습니다.
<div role="button" tabindex="0" onclick="alert('버튼이 클릭되었습니다.')">클릭하세요</div>
위의 예제 코드를 통해 HTML 요소의 의미와 역할을 보존하고, HTML 표준과의 호환성을 유지하는 것이 중요하다는 것을 알 수 있습니다. role
속성은 기존의 HTML 요소에 추가적인 의미와 역할을 부여하기 위한 보조 수단으로 사용되어야 하며, HTML 요소의 기본 동작을 변경하거나 무시해서는 안 됩니다.
요약
role
속성은 HTML 요소의 의미와 역할을 보완하기 위해 사용되는 속성입니다.role
속성을 사용하면 웹 콘텐츠의 접근성을 향상시킬 수 있습니다.role
속성은 장애를 가진 사용자들에게 콘텐츠를 이해하고 상호작용할 수 있는 방법을 제공합니다.role
속성을 사용하여 시맨틱한 HTML 구조를 보존하면서도 추가적인 의미와 역할을 부여할 수 있습니다.role
속성은 WAI-ARIA 명세의 일부이며, 웹 표준과의 호환성을 유지해야 합니다.- 올바른 역할 선택, 오용과 남용 방지, 표준과의 호환성 유지 등을 고려하여
role
속성을 사용해야 합니다.
이러한 방식으로 role
속성을 사용하면 웹 콘텐츠의 접근성을 향상시키고 장애를 가진 사용자들에게 더 나은 사용자 경험을 제공할 수 있습니다.
명세서
명세서 사양 | |
---|---|
role
|
Accessible Rich Internet Applications (WAI-ARIA) #WAI-ARIA Roles |
같이 보기
- HTML <!DOCTYPE html> 선언의 올바른 의미
- HTML <header> 태그 – 올바른 이해와 사용 방법
- HTML <main> 태그 – 올바른 이해와 사용 방법
- HTML <footer> 태그 – 올바른 이해와 사용 방법
- HTML <aside> 태그 – 올바른 이해와 사용 방법
- HTML <nav> 태그 – 올바른 이해와 사용 방법
- HTML <article> 태그 – 올바른 이해와 사용 방법
- HTML <section> 태그 - 올바른 이해와 사용 방법
- HTML <div> 태그 - 올바른 이해와 사용 방법
- HTML 제목(<h1>~<h6>) 태그 - 올바른 이해와 사용 방법
- HTML data-* 속성 - 사용하는 목적과 이유
- HTML hidden 속성 - 올바른 이해와 사용 방법