수색…
통사론
- 아리아 - 라이브
- 아리아 관련
- 아리아 - 자동 완성
- 아리아 체크
- 아리아 장애인
- 아리아 확장
- 아리아 - 하스 팝업
- 아리아 숨겨진
- 아리아 무효
- 아리아 레이블
- 아리아 수준
- 아리아 - 멀티 라인
- 아리아 - 다중 선택할 수있는
- 아리아 방향
- 아리아 압박
- 아리아 읽기 전용
- 아리아가 요구하는
- 아리아가 선택한
- 아리아 - 정렬
- 아리아 가치 맥
- 아리아 가치 미
- 아리아 가치
- 아리아 값 텍스트
- 아리아 - 원자
- 아리아 바쁜
- 아리아 역량
- 아리아 드래그
- 아리아 액티브 디자인
- 아리아 - 컨트롤
- 아리아 - 서술
- 아리아 - 플로우
- 아리아 - labelledby
- 아리아 소유
- 아리아 - 포스 젠 세트
- 아리아 - 세트 사이즈
비고
ARIA는 풍부한 웹 응용 프로그램을 의미 론적으로 설명하기위한 사양입니다. ARIA 표준을 따르면 보조 프로그램 (예 : 스크린 리더)을 사용하여 콘텐츠에 액세스하는 사람들의 접근성을 높일 수 있습니다.
role = "경고"
중요한, 일반적으로 시간에 민감한 정보가 포함 된 메시지입니다.
<div role="alert" aria-live="assertive">Your session will expire in 60 seconds.</div>
role="alert"과aria-live="assertive"를 동시에 포함했습니다. 이들은 동의어 속성이지만 일부 화면 판독기는 둘 중 하나만 지원합니다. 두 가지를 동시에 사용함으로써 실시간 영역이 예상대로 작동 할 수있는 기회를 극대화합니다.출처 - Heydon Pickering '실용적인 ARIA 사례'
role = "alertdialog"
경고 메시지가 들어있는 대화 상자 유형으로, 초기 포커스는 대화 상자의 요소로 이동합니다.
<div role="alertdialog">
<h1>Warning</h1>
<div role="alert">Your session will expire in 60 seconds.</div>
</div>
역할 = "응용 프로그램"
웹 문서가 아니라 웹 응용 프로그램으로 선언 된 영역입니다. 이 예에서 응용 프로그램은 두 개의 숫자를 더할 수있는 간단한 계산기입니다.
<div role="application">
<h1>Calculator</h1>
<input id="num1" type="text"> + <input id="num2" type="text"> =
<span id="result"></span>
</div>
role = "article"
문서, 페이지 또는 사이트의 독립적 인 부분을 구성하는 컴포지션으로 구성된 페이지 섹션입니다.
<article>
<h1>My first article</h1>
<p>Lorem ipsum...</p>
</article>
비 의미 론적 요소에 role=article 을 사용합니다 (권장되지 않음, 유효하지 않음).
<div role="article">
<h1>My first article</h1>
<p>Lorem ipsum...</p>
</div>
role=article 대한 W3C 항목 role=article
역할 = "배너"
페이지 별 콘텐츠가 아닌 사이트 중심 콘텐츠가 대부분 포함 된 지역입니다.
<div role="banner">
<h1>My Site</h1>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/about">About</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
</div>
역할 = "버튼"
클릭하거나 누를 때 사용자가 실행 한 동작을 허용하는 입력입니다.
<button role="button">Add</button>
역할 = "셀"
표 셀 컨테이너의 셀입니다.
<table>
<thead>
<!-- etc -->
</thead>
<tbody>
<td role="cell">95</td>
<td role="cell">14</td>
<td role="cell">25</td>
</tbody>
</table>
role = "체크 박스"
true, false 또는 mixed의 세 가지 값을 갖는 점검 가능한 입력입니다.
<p>
<input type="checkbox" role="checkbox" aria-checked="false">
I agree to the terms
</p>
role = "columnheader"
열에 대한 헤더 정보가 들어있는 셀입니다.
<table role="grid">
<thead>
<tr>
<th role="columnheader">Day 1</th>
<th role="columnheader">Day 2</th>
<th role="columnheader">Day 3</th>
</tr>
</thead>
<tbody>
<!-- etc -->
</tbody>
<table>
role = "combobox"
선택의 제시; 보통 사용자가 옵션을 선택하기 위해 입력 할 수있는 텍스트 상자와 유사하거나 목록에 새 항목으로 임의의 텍스트를 입력하려면 입력하십시오.
<input type="text" role="combobox" aria-expanded="false">
일반적으로 JavaScript를 사용하여 나머지 선행 작업 또는 목록 선택 기능을 작성합니다.
역할 = "보완"
DOM 계층에서 비슷한 수준의 주 콘텐츠를 보완하도록 설계된 문서의 지원 섹션이지만 주 콘텐츠와 분리 된 경우에도 의미가 있습니다.
<div role="complementary">
<h2>More Articles</h2>
<ul>
<!-- etc -->
</ul>
</div>
role = "contentinfo"
상위 문서에 대한 정보가 포함 된 인식 가능한 영역입니다.
<p role="contentinfo">
Author: Albert Einstein<br>
Published: August 15, 1940
</p>
역할 = "정의"
용어 또는 개념의 정의.
<span role="term" aria-labelledby="def1">Love</span>
<span id="def1" role="definition">an intense feeling of deep affection.</span>
role = "dialog"
대화 상자는 사용자에게 정보를 입력하거나 응답 할 것을 요구하기 위해 응용 프로그램의 현재 처리를 인터럽트하도록 설계된 응용 프로그램 창입니다.
<div role="dialog">
<p>Are you sure?</p>
<button role="button">Yes</button>
<button role="button">No</button>
</div>
role = "directory"
정적 목차와 같이 그룹 구성원에 대한 참조 목록입니다.
<ul role="directory">
<li><a href="/chapter-1">Chapter 1</a></li>
<li><a href="/chapter-2">Chapter 2</a></li>
<li><a href="/chapter-3">Chapter 3</a></li>
</ul>
역할 = "문서"
웹 응용 프로그램과 달리 문서 내용으로 선언 된 관련 정보가 포함 된 영역입니다.
<div role="document">
<h1>The Life of Albert Einstein</h1>
<p>Lorem ipsum...</p>
</div>
역할 = "양식"
전체적으로 항목을 결합하여 양식을 만드는 객체 및 컬렉션이 포함 된 획기적인 지역입니다.
의미 론적으로 올바른 HTML 요소 인 <form> 한다는 것은 기본 ARIA 의미를 의미합니다. 즉, 역할을 추가하면 요소의 원시 의미를 무시하므로 이미 의미 론적 인 요소에 대비되는 역할을 적용해서는 안되므로 role=form 이 필요하지 않습니다.
<form action="">
<fieldset>
<legend>Login form</legend>
<div>
<label for="username">Your username</label>
<input type="text" id="username" aria-describedby="username-tip" required />
<div role="tooltip" id="username-tip">Your username is your email address</div>
</div>
<div>
<label for="password">Your password</label>
<input type="text" id="password" aria-describedby="password-tip" required />
<div role="tooltip" id="password-tip">Was emailed to you when you signed up</div>
</div>
</fieldset>
</form>
비 의미 론적 요소에 role=form 을 사용합니다 (권장하지 않음, 유효하지 않음).
<div role=form>
<input type="email" placeholder="Your email address">
<button>Sign up</button>
</div>
역할 = "그리드"
표는 표와 같이 행과 열로 배열 된 표 형식의 데이터 셀을 포함하는 대화 형 컨트롤입니다.
<table role="grid">
<thead>
<!-- etc -->
</thead>
<tbody>
<!-- etc -->
</tbody>
</table>
역할 = "그리드 셀"
그리드 또는 트리 그리드의 셀.
<table role="grid">
<thead>
<!-- etc -->
</thead>
<tbody>
<tr>
<td role="gridcell">17</td>
<td role="gridcell">64</td>
<td role="gridcell">18</td>
</tr>
</tbody>
<table>
역할 = "그룹"
보조 기술에 의해 페이지 요약이나 목차에 포함되지 않는 사용자 인터페이스 개체 집합입니다.
<div role="group">
<button role"button">Previous</button>
<button role"button">Next</button>
</div>
역할 = "제목"
페이지의 섹션 제목입니다.
<h1 role="heading">Introduction</h1>
<p>Lorem ipsum...</p>
역할 = "img"
이미지를 형성하는 요소 컬렉션을위한 컨테이너.
<figure role="img">
<img alt="A cute cat." src="albert.jpg">
<figcaption>This is my cat, Albert.</figcaption>
<figure>
역할 = "링크"
활성화되었을 때 사용자 에이전트가 해당 자원을 탐색하도록하는 내부 또는 외부 자원에 대한 대화 형 참조.
대부분의 경우 ARIA 역할을 설정하거나 기본 암시 적 ARIA 의미 와 일치하는 aria- * 속성은 필요하지 않으며 브라우저에서 이러한 속성을 이미 설정 했으므로 권장되지 않습니다.
역할 = "목록"
비대화 형 목록 항목 그룹입니다.
<ul role="list">
<li role="listitem">One</li>
<li role="listitem">Two</li>
<li role="listitem">Three</li>
</ul>
역할 = "목록 상자"
사용자가 선택 목록에서 하나 이상의 항목을 선택할 수있게 해주는 위젯.
<ul role="listbox">
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
일반적으로 JavaScript를 사용하여 다중 선택 기능을 구현합니다.
role = "listitem"
목록 또는 디렉토리의 단일 항목.
<ul role="list">
<li role="listitem">One</li>
<li role="listitem">Two</li>
<li role="listitem">Three</li>
</ul>
역할 = "로그"
새 정보가 의미있는 순서로 추가되고 오래된 정보가 사라질 수있는 라이브 영역 유형입니다.
<ul role="log">
<li>User 1 logged in.</li>
<li>User 2 logged in.</li>
<li>User 1 logged out.</li>
</ul>
역할 = "메인"
문서의 주요 내용.
<!-- header & nav here -->
<div role="main">
<p>Lorem ipsum...</p>
</div>
<!-- footer here -->
role = "marquee"
중요하지 않은 정보가 자주 변경되는 라이브 영역 유형입니다.
<ul role="marquee">
<li>Dow +0.26%</li>
<li>Nasdaq +0.54%</li>
<li>S&P +0.44%</li>
</ul>
역할 = "수학"
수학 표현식을 나타내는 내용입니다.
<img role="math" alt="y=mx+b" src="slope.png">
역할 = "메뉴"
사용자에게 선택 목록을 제공하는 위젯 유형.
<ul role="menu">
<li role="menuitem">New</li>
<li role="menuitem">Open</li>
<li role="menuitem">Save</li>
<li role="menuitem">Close</li>
</ul>
role = "menubar"
일반적으로 보이는 상태로 유지되고 일반적으로 가로로 표시되는 메뉴의 프리젠 테이션.
<ul role="menubar">
<li role="menuitem">File</li>
<li role="menuitem">Edit</li>
<li role="menuitem">View</li>
<li role="menuitem">Help</li>
</ul>
role = "menuitem"
메뉴 또는 메뉴 모음에 포함 된 선택 사항 그룹의 옵션입니다.
<ul role="menubar">
<li role="menuitem">File</li>
<li role="menuitem">Edit</li>
<li role="menuitem">View</li>
<li role="menuitem">Help</li>
</ul>
role = "menuitemcheckbox"
3 가지 가능한 값인 true, false 또는 mixed가있는 점검 가능한 menuitem입니다.
<ul role="menu">
<li role="menuitem">Console</li>
<li role="menuitem">Layout</li>
<li role="menuitemcheckbox" aria-checked="true">Word wrap</li>
</ul>
role = "menuitemradio"
menuitemradio 역할의 그룹에있는 확인 가능한 메뉴 항목. 한 번에 하나만 확인할 수 있습니다.
<ul role="menu">
<li role="menuitemradio" aria-checked="true">Left</li>
<li role="menuitemradio" aria-checked="false">Center</li>
<li role="menuitemradio" aria-checked="false">Right</li>
</ul>
role = "navigation"
문서 또는 관련 문서를 탐색하기위한 탐색 요소 모음 (일반적으로 링크)입니다.
<ul role="navigation">
<li><a href="/">Home</a></li>
<li><a href="/about">About</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
역할 = "메모"
내용이 소문자이거나 자원의 주요 내용을 보조하는 부분.
<p>Lorem ipsum...</p>
<p>Lorem ipsum...</p>
<p role="note">Lorem ipsum...</p>
role = "옵션"
선택 목록의 선택 가능한 항목입니다.
<ul role="listbox">
<li role="option">Option 1</li>
<li role="option">Option 2</li>
<li role="option">Option 3</li>
</ul>
role = "presentation"
내재적 원시 역할 의미가 내게 필요한 옵션 API에 매핑되지 않는 요소입니다.
<div style="float:left;">Some content on the left.</div>
<div style="float:right;">Some content on the right</div>
<div role="presentation" style="clear:both;"></div> <!-- Only used to clear floats -->
role = "progressbar"
오랜 시간이 걸리는 작업의 진행 상태를 표시하는 요소입니다.
<progress role="progressbar" value="25" max="100">25%</progress>
역할 = "라디오"
무선 역할 그룹에서 확인 가능한 입력이며 한 번에 하나씩 만 확인할 수 있습니다.
<div role="radiogroup">
<input role="radio" type="radio" aria-checked="true"> One<br>
<input role="radio" type="radio" aria-checked="false"> Two<br>
<input role="radio" type="radio" aria-checked="false"> Three
</div>
역할 = "지역"
저자가 느끼는 웹 페이지 또는 문서의 큰 감지 가능한 섹션은 페이지 요약이나 목차 (예 : 실제 스포츠 이벤트 통계가 포함 된 페이지 영역)에 포함될만큼 중요합니다.
<div role="region">
Home team: 4<br>
Away team: 2
</div>
역할 = "방사선 그룹"
라디오 버튼 그룹.
<div role="radiogroup">
<input role="radio" type="radio" aria-checked="true"> One<br>
<input role="radio" type="radio" aria-checked="false"> Two<br>
<input role="radio" type="radio" aria-checked="false"> Three
</div>
역할 = "행"
표 컨테이너의 셀 행입니다.
<table>
<thead>
<!-- etc -->
</thead>
<tbody>
<tr role="row">
<!-- etc -->
</tr>
</tbody>
</table>
role = "rowgroup"
그리드에서 하나 이상의 행 요소를 포함하는 그룹.
<table>
<thead role="rowgroup">
<!-- etc -->
</thead>
<tbody role="rowgroup">
<!-- etc -->
</tbody>
</table>
role = "rowheader"
격자의 행에 대한 헤더 정보가 들어있는 셀입니다.
<table role="grid">
<thead>
<!-- etc -->
</thead>
<tbody>
<tr>
<th role="rowheader">Day 1</th>
<td>65</td>
</tr>
<tr>
<th role="rowheader">Day 2</th>
<td>74</td>
</tr>
</tbody>
</table>
role = "스크롤바"
보기 영역 내에서 내용이 완전히 표시되는지 여부에 관계없이보기 영역 내의 내용 스크롤을 제어하는 그래픽 객체입니다.
<div id="content1">Lorem ipsum...</div>
<div
role="scrollbar"
aria-controls="content1"
aria-orientation="vertical"
aria-valuemax="100"
aria-valuemin="0"
aria-valuenow="25">
<div class="scrollhandle"></div>
</div>
역할 = "검색"
검색 기능을 생성하기 위해 전체적으로 결합 된 항목 및 객체의 모음을 포함하는 획기적인 지역입니다.
<div role="search">
<input role="searchbox" type="text">
<button role="button">Search</button>
</div>
role = "searchbox"
검색 기준을 지정하기위한 텍스트 상자 유형입니다.
<div role="search">
<input role="searchbox" type="text">
<button role="button">Search</button>
</div>
role = "separator"
내용의 일부 또는 메뉴 항목 그룹을 구분하고 구분하는 구분선.
<p>Lorem ipsum...</p>
<hr role="separator">
<p>Lorem ipsum...</p>
역할 = "슬라이더"
사용자가 주어진 범위 내에서 값을 선택하는 사용자 입력입니다.
<div
role="slider"
aria-valuemax="100"
aria-valuemin="0"
aria-valuenow="25">
<div class="sliderhandle"></div>
</div>
role = "spinbutton"
이산 선택 중에서 사용자가 선택할 것을 기대하는 범위 형식.
<input
role="spinbutton"
aria-valuemax="100"
aria-valuemin="0"
aria-valuenow="25"
type="number"
value="25">
역할 = "상태"
컨텐트가 사용자를위한 조언 정보이지만 경고를 정당화 할만큼 중요하지는 않지만 종종 상태 표시 줄로 제시되지는 않는 컨테이너.
<div role="status">Online</div>
role = "switch"
체크 / 체크되지 않은 값과 반대로 on / off 값을 나타내는 체크 박스 유형.
<select role="switch" aria-checked="false">
<option>On</option>
<option selected>Off</option>
</select>
역할 = "탭"
사용자에게 표시 할 탭 내용을 선택하는 메커니즘을 제공하는 그룹화 레이블입니다.
<ul role="tablist">
<li role="tab">Introduction</li>
<li role="tab">Chapter 1</li>
<li role="tab">Chapter 2</li>
</ul>
역할 = "테이블"
행과 열로 정렬 된 데이터가 포함 된 섹션입니다. 테이블 역할은 대화식이 아닌 테이블 형식의 컨테이너를 대상으로합니다.
<table role="table">
<thead>
<!-- etc -->
</thead>
<tbody>
<!-- etc -->
</tbody>
</table>
역할 = "탭 목록"
tabpanel 요소에 대한 참조 인 탭 요소 목록입니다.
<ul role="tablist">
<li role="tab">Introduction</li>
<li role="tab">Chapter 1</li>
<li role="tab">Chapter 2</li>
</ul>
role = "tabpanel"
각 탭이 탭 목록에 포함 된 탭과 관련된 자원의 컨테이너입니다.
<ul role="tablist">
<li role="tab">Introduction</li>
<li role="tab">Chapter 1</li>
<li role="tab">Chapter 2</li>
</ul>
<div role="tabpanel">
<!-- etc -->
</div>
role = "텍스트 상자"
자유 형식 텍스트를 값으로 사용할 수있는 입력입니다.
<textarea role="textbox"></textarea>
역할 = "타이머"
시작 지점에서부터의 경과 시간 또는 끝 지점까지 남은 시간을 나타내는 숫자 카운터가 포함 된 라이브 영역 유형입니다.
<p>
<span role="timer">60</span> seconds remaining.
</p>
역할 = "도구 모음"
컴팩트 한 시각적 형태로 표현 된 일반적으로 사용되는 기능 버튼 모음.
<ul role="toolbar">
<li><img alt="New" src="new.png"></li>
<li><img alt="Open" src="open.png"></li>
<li><img alt="Save" src="save.png"></li>
<li><img alt="Close" src="close.png"></li>
</ul>
role = "툴팁"
요소에 대한 설명을 표시하는 문맥 팝업.
<span aria-describedby="slopedesc">Slope</span>
<div role="tooltip" id="slopedesc">y=mx+b</div>
일반적으로 툴팁은 숨겨집니다. 자바 스크립트를 사용하면 사용자가 설명하는 요소를 사용자가 가리키면 지연된 후에 툴팁이 표시됩니다.
역할 = "트리"
축소 및 확장 할 수있는 하위 수준 중첩 그룹을 포함 할 수있는 유형의 목록입니다.
<ul role="tree">
<li role="treeitem">
Part 1
<ul>
<li role="treeitem">Chapter 1</li>
<li role="treeitem">Chapter 2</li>
<li role="treeitem">Chapter 3</li>
</ul>
</li>
<li role="treeitem">
Part 2
<ul>
<li role="treeitem">Chapter 4</li>
<li role="treeitem">Chapter 5</li>
<li role="treeitem">Chapter 6</li>
</ul>
</li>
<li role="treeitem">
Part 3
<ul>
<li role="treeitem">Chapter 7</li>
<li role="treeitem">Chapter 8</li>
<li role="treeitem">Chapter 9</li>
</ul>
</li>
</ul>
role = "treegrid"
트리와 같은 방법으로 행을 확장 및 축소 할 수있는 그리드입니다.
role = "treeitem"
트리의 옵션 항목. 이것은 트리 내의 서브 레벨 그룹을 포함하는 경우 확장되거나 축소 될 수있는 트리 내의 요소입니다.
<ul role="tree">
<li role="treeitem">
Part 1
<ul>
<li role="treeitem">Chapter 1</li>
<li role="treeitem">Chapter 2</li>
<li role="treeitem">Chapter 3</li>
</ul>
</li>
<li role="treeitem">
Part 2
<ul>
<li role="treeitem">Chapter 4</li>
<li role="treeitem">Chapter 5</li>
<li role="treeitem">Chapter 6</li>
</ul>
</li>
<li role="treeitem">
Part 3
<ul>
<li role="treeitem">Chapter 7</li>
<li role="treeitem">Chapter 8</li>
<li role="treeitem">Chapter 9</li>
</ul>
</li>
</ul>