역할 (Role)

로고, 사이트 이름, 전체 메뉴처럼 사이트 공통의 머리 영역을 나타내는 랜드마크입니다.

HTML: <header>기초

본문을 보충하지만 떼어 놓아도 의미가 통하는 곁가지 영역(사이드바, 관련 글 등)을 나타내는 랜드마크입니다.

HTML: <aside>기초

저작권, 연락처, 개인정보처리방침 링크처럼 사이트 공통의 꼬리 영역을 나타내는 랜드마크입니다.

HTML: <footer>기초

페이지의 핵심 본문을 나타내는 랜드마크입니다. 문서마다 하나만 둡니다.

HTML: <main>기초

사이트나 페이지 안을 이동하는 링크 묶음(주 메뉴, 목차, 이동 경로 등)을 나타내는 랜드마크입니다.

HTML: <nav>기초

사이트나 문서를 검색하는 기능을 담은 영역을 나타내는 랜드마크입니다. HTML <search> 요소가 대응합니다.

HTML: <search>기초

여러 입력 요소를 묶어 제출하는 양식 영역을 나타내는 랜드마크입니다. 이름이 있어야 랜드마크로 노출됩니다.

HTML: <form>중급

다른 랜드마크로 설명할 수 없지만 바로 이동할 만큼 중요한 구획을 나타냅니다. 반드시 이름이 있어야 합니다.

HTML: <section>중급

구획의 제목입니다. 화면낭독기 사용자가 가장 많이 쓰는 탐색 수단이며, <h1>~<h6>에 대응합니다.

HTML: <h1>~<h6>기초

하나의 이미지로 인식해야 하는 요소입니다. SVG, 아이콘 글꼴, 이모지 묶음 등에 쓰며 이름이 필수입니다.

HTML: <img>기초

여러 항목(listitem)을 담는 목록입니다. 화면낭독기가 항목 개수를 함께 알려 줍니다.

HTML: <ul>, <ol>기초

list 안의 항목 하나입니다. 반드시 목록 안에 있어야 합니다.

HTML: <li>기초

행과 열로 정리된 정적인 데이터 표입니다. 셀 사이를 이동하며 조작하는 위젯은 grid입니다.

HTML: <table>기초

기사, 게시글, 댓글처럼 그것만 따로 떼어도 완결되는 콘텐츠 묶음을 나타냅니다.

HTML: <article>중급

다른 출처에서 가져온 인용 단락을 나타냅니다.

HTML: <blockquote>중급

표(table, grid, treegrid)나 figure의 보이는 제목·설명을 나타냅니다.

HTML: <caption>중급

정적인 표(table)의 한 칸입니다. 반드시 row 안에 있어야 합니다.

HTML: <td>중급

컴퓨터 코드 조각을 나타냅니다. HTML <code>에 대응합니다.

HTML: <code>중급

표·그리드에서 한 열의 제목 칸입니다. 그 열의 각 칸을 읽을 때 함께 안내됩니다.

HTML: <th scope="col">중급

용어나 개념의 정의(뜻풀이)를 나타냅니다. 짝이 되는 용어는 term 역할입니다.

HTML: <dd>중급

삭제되었거나 삭제 제안된 내용을 나타냅니다. HTML <del>에 대응합니다.

HTML: <del>중급

말할 때 힘을 주는 강세(뉘앙스) 강조를 나타냅니다. HTML <em>에 대응합니다.

HTML: <em>중급

이미지, 도표, 코드 예시처럼 본문에서 참조하는 독립된 그림 단위를 나타냅니다.

HTML: <figure>중급

관련된 요소를 하나로 묶는 컨테이너입니다. 랜드마크와 달리 페이지 요약(목차)에는 나오지 않습니다.

HTML: <fieldset>중급

추가되었거나 추가 제안된 내용을 나타냅니다. HTML <ins>에 대응합니다.

HTML: <ins>중급

정해진 범위 안의 측정값(디스크 사용량, 배터리 잔량 등)을 나타냅니다. 진행률에는 쓰지 않습니다.

HTML: <meter>중급

요소가 가진 원래 의미(역할)를 지웁니다. 내용은 그대로 읽힙니다. presentation과 같은 뜻입니다.

HTML: img alt=""중급

본문에 덧붙인 참고·보충 설명 구획을 나타냅니다.

HTML 대응 없음중급

문단을 나타냅니다. HTML <p>에 대응합니다.

HTML: <p>중급

요소의 원래 의미(역할)를 지웁니다. 내용은 그대로 읽힙니다. none과 같은 뜻이며 지원 범위가 더 넓습니다.

HTML: img alt=""중급

표·그리드의 한 행입니다. 셀(cell, gridcell)과 머리글을 담습니다.

HTML: <tr>중급

표·그리드 안에서 여러 행(row)을 묶는 구조입니다. <thead>, <tbody>, <tfoot>에 대응합니다.

HTML: <tbody>중급

표·그리드에서 한 행의 제목 칸입니다. 그 행의 다른 칸을 읽을 때 함께 안내됩니다.

HTML: <th scope="row">중급

내용이나 메뉴 항목 묶음을 나누는 구분선입니다. 포커스를 받으면 크기를 조절하는 분할 막대(위젯)가 됩니다.

HTML: <hr>중급

중요하거나 심각하거나 급한 내용을 나타냅니다. HTML <strong>에 대응합니다.

HTML: <strong>중급

기준선 아래에 작게 쓰는 아래 첨자입니다. HTML <sub>에 대응합니다.

HTML: <sub>중급

기준선 위에 작게 쓰는 위 첨자입니다. HTML <sup>에 대응합니다.

HTML: <sup>중급

정의가 따르는 용어를 나타냅니다. 짝이 되는 정의는 definition 역할입니다.

HTML: <dfn>, <dt>중급

특정 시점(날짜·시각)을 나타냅니다. HTML <time>에 대응합니다.

HTML: <time>중급

자주 쓰는 버튼·컨트롤을 한 줄로 모은 도구 모음입니다. Tab으로 한 번에 들어가고 화살표 키로 항목을 옮깁니다.

HTML 대응 없음중급

요소에 마우스를 올리거나 포커스하면 나타나는 짧은 설명 팝업입니다. 대상 요소에서 aria-describedby로 연결합니다.

HTML 대응 없음중급

표준 위젯 역할로 표현할 수 없는 독자적인 키보드 조작 영역을 만들 때 씁니다. 화면낭독기의 읽기 모드 키 가로채기를 멈추게 합니다.

HTML 대응 없음심화

화면낭독기가 읽기 모드로 탐색하기를 기대하는 콘텐츠 영역입니다. 주로 위젯·application 안의 읽을거리에 씁니다.

HTML 대응 없음심화

스크롤하면 글(article)이 계속 추가되는 무한 스크롤 목록을 화면낭독기로 탐색할 수 있게 합니다.

HTML 대응 없음심화

스스로는 아무 의미가 없는 이름 없는 컨테이너입니다. <div>, <span>의 암묵적 역할이며 작성자가 직접 쓰지 않습니다.

HTML: <div>, <span>심화

수학 식을 나타냅니다. 가능하면 MathML의 <math>를 씁니다.

HTML: <math>심화

누르면 동작을 실행하는 버튼입니다. aria-pressed를 더하면 켜고 끄는 토글 버튼이 됩니다.

HTML: <button>기초

선택됨(true), 선택 안 됨(false), 일부 선택(mixed) 상태를 가지는 체크박스입니다.

HTML: <input type="checkbox">기초

누르면 다른 페이지나 같은 페이지의 다른 위치로 이동하는 참조입니다.

HTML: <a href>기초

오래 걸리는 작업의 진행 정도를 보여 주는 표시줄입니다. 진행률을 모르면 값을 생략해 “진행 중”만 알립니다.

HTML: <progress>기초

묶음(radiogroup) 안에서 하나만 선택되는 라디오 버튼입니다.

HTML: <input type="radio">기초

검색어를 입력하는 한 줄짜리 텍스트 입력란입니다. textbox의 하위 역할입니다.

HTML: <input type="search">기초

켜짐/꺼짐 두 상태를 가지는 스위치입니다. 상태는 aria-checked(true/false)로 알립니다.

HTML: 없음 (가장 가까운 것은 <input type="checkbox">)기초

탭(tab)을 선택했을 때 보이는 내용 영역입니다.

HTML: 없음기초

자유롭게 글자를 입력하는 입력란입니다. 여러 줄이면 aria-multiline="true"를 씁니다.

HTML: <input> / <textarea>기초

메뉴(menu)나 메뉴 막대(menubar) 안에서 명령을 실행하거나 하위 메뉴를 여는 항목입니다.

HTML: 없음 (HTML <menu>는 목록이며 이 역할이 아닙니다)중급

메뉴 안에서 체크박스처럼 켜고 끌 수 있는 항목입니다. 상태는 aria-checked로 알립니다.

HTML: 없음중급

메뉴 안에서 같은 그룹의 항목 중 하나만 선택되는 라디오형 항목입니다.

HTML: 없음중급

목록 상자(listbox) 안의 선택할 수 있는 항목입니다. 선택 상태는 aria-selected로 알립니다.

HTML: <option>중급

정해진 범위 안에서 손잡이를 움직여 값을 고르는 입력 요소입니다.

HTML: <input type="range">중급

위·아래 키나 증감 버튼으로 숫자 값을 한 단계씩 바꾸는 입력 요소입니다.

HTML: <input type="number">중급

탭 목록(tablist) 안의 탭입니다. 선택하면 연결된 탭 패널(tabpanel)을 표시합니다.

HTML: 없음중급

그리드(grid)나 트리그리드(treegrid)의 한 칸입니다. 일반 표의 cell과 달리 포커스를 받고 조작할 수 있습니다.

HTML: <td> (grid 안)심화

어떤 영역의 내용이 얼마나 스크롤되었는지 보여 주고 조절하는 스크롤 막대입니다. 브라우저 기본 스크롤바로 충분하면 쓰지 않습니다.

HTML: 없음 (브라우저·운영체제의 기본 스크롤바가 자동으로 제공됨)심화

트리(tree) 안의 항목입니다. 하위 항목이 있으면 펼치고 접을 수 있습니다.

HTML: 없음심화

라디오 버튼(radio)을 하나로 묶어, 그중 하나만 선택되게 하는 그룹입니다.

HTML: <fieldset> + radio기초

여러 옵션(option) 중 하나 또는 여러 개를 고르는 목록입니다. 콤보박스의 팝업으로도 쓰입니다.

HTML: <select size>중급

명령이나 설정을 고르는 메뉴 항목 목록입니다. 보통 메뉴 버튼이나 메뉴 막대에서 팝업으로 열립니다.

HTML: 없음 (HTML <menu>는 목록 list 역할입니다)중급

탭(tab)들을 담는 목록입니다. 탭 목록은 탭 순서에서 한 번만 멈추고, 안에서는 방향키로 이동합니다.

HTML: 없음중급

값을 입력하거나 고를 수 있는 입력 요소와, 그 값을 고르도록 돕는 팝업(목록 상자 등)을 묶은 위젯입니다.

HTML: <select>심화

행과 열로 이루어지고, 방향키로 셀 사이를 이동하며 선택·편집할 수 있는 상호작용 표입니다.

HTML: 없음 (<table>에 role="grid"를 붙여 만들 수 있음)심화

보통 가로로 항상 보이는 메뉴입니다. 데스크톱 프로그램의 “파일 · 편집 · 보기” 메뉴 막대에 해당합니다.

HTML: 없음심화

하위 항목을 펼치고 접을 수 있는 계층형 목록입니다. 파일 탐색기의 폴더 목록이 대표적입니다.

HTML: 없음심화

행을 펼치고 접을 수 있는 그리드입니다. 트리처럼 계층이 있고, 그리드처럼 열이 있습니다.

HTML: 없음심화

중요하고 대개 시간에 민감한 메시지를 즉시 알리는 라이브 리전입니다. 포커스를 옮기지 않고 화면낭독기가 바로 읽습니다.

HTML 대응 없음기초

작업 결과·진행 상황처럼 급하지 않은 안내 메시지를 담는 라이브 리전입니다. 하던 낭독이 끝난 뒤 공손하게(polite) 읽어 줍니다.

HTML: <output>기초

채팅·이벤트 기록처럼 새 항목이 순서대로 끝에 추가되는 라이브 리전입니다. 추가된 항목을 공손하게(polite) 읽어 줍니다.

HTML 대응 없음중급

경과 시간이나 남은 시간을 나타내는 시간 카운터입니다. 기본적으로 매번 자동 낭독하지 않습니다.

HTML 대응 없음중급

주식 시세, 흐르는 광고처럼 자주 바뀌지만 중요하지 않은 정보를 담는 라이브 리전입니다. 기본적으로 자동 낭독하지 않습니다.

HTML 대응 없음심화

본문 위에 따로 뜨는 대화상자(창)입니다. 레이어 팝업·모달 창이 여기에 해당하며, HTML <dialog>에 대응합니다.

HTML: <dialog>기초

사용자의 응답이 필요한 경고 메시지를 담은 대화상자입니다. 삭제 확인, 저장하지 않고 나가기 경고 등에 씁니다.

HTML 대응 없음중급