[웹접근성] HTML의 ARIA role=""

2021. 12. 7. 16:44· 📁 Screen/🖥️ 웹접근성

[웹접근성] ARIA 사용하기 : 규칙, 상태, 속성 (0)	2021.12.14
[웹접근성] 인식의 용이성(perceivable) (0)	2021.11.23
[웹접근성] 용어의 정의 (0)	2021.11.23

상단으로

HTML 태그	암묵적인 기본 역할	role 역할, 사용할 수 있는 상태 및 속성
<a href="">	role="link"	역할 : button, checkbox, menuitem, menuitemcheckbox, menuitemradio, option, radio, switch, tab, treeitem aria-disabled="true" 속성은 href 속성과 함께 쓰이는 <a>태그에 권장되지 않습니다.❌ * 만약 aria-disabled 속성을 사용하고 싶다면 href 속성을 제거하면 됩니다.
<a> (href 속성 X)	X	어떤 role이든 적용 가능
<abbr>	X	어떤 role이든 적용 가능
<address>	X	어떤 role이든 적용 가능
<area href="">	role="link"	X
<article>	role="article" => 해당요소 자체만으로 개별 페이지로 독립할 수 있는 것	역할 : application, document, feed, main, none, presentation, region
<aside>	role="complementary" => 해당요소 자체만으로는 독립이 불가능한 것	역할 : feed, none, note, presentation, region, search
<audio>	X	역할 : application

HTML 태그	암묵적인 기본 역할	role 역할, 사용할 수 있는 상태 및 속성
<b>	X	어떤 role이든 적용 가능
<base>	X	X
<bdi>	X	어떤 role이든 적용 가능
<bdo>	X	어떤 role이든 적용 가능
<blockquote>	X	어떤 role이든 적용 가능
<body>	X	X
<br>	X	역할 : presentation, none
<button>	role="button"	역할 : checkbox, link, menuitem, menuitemcheckbox, menuitemradio, option, radio, switch, tab

HTML 태그	암묵적인 기본 역할	role 역할, 사용할 수 있는 상태 및 속성
<canvas>	X	어떤 role이든 적용 가능
<caption>	X	X
<cite>	X	어떤 role이든 적용 가능
<code>	X	어떤 role이든 적용 가능
<col>	X	X
<colgroup>	X	X

HTML 태그	암묵적인 기본 역할	role 역할, 사용할 수 있는 상태 및 속성
<data>	X	어떤 role이든 적용 가능
<datalist>	role="listbox"	X
<dd>	role="definition"	X
<del>	X	어떤 role이든 적용 가능
<dfn>	role="term"	어떤 role이든 적용 가능
<details>	role="group"	X
<dialog>	role="dialog"	역할 : alertdialog
<div>	X	어떤 role이든 적용 가능
<dl>	X	역할 : group, list, presentation, none
<dt>	role="term"	역할 : listitem

HTML 태그	암묵적인 기본 역할	role 역할, 사용할 수 있는 상태 및 속성
<em>	X	어떤 role이든 적용 가능
<embed>	X	역할 : application, document, img, presentation, none
<fieldset>	role="group"	역할 : none, presentation, radiogroup
<figcaption>	X	역할 : group, presentation, none
<figure>	role="figure"	만약 <figcaption>의 하위항목으로 <figure>가 들어갔다면 => 어떤 role이든 적용 가능 만약 <figcaption>의 하위항목이 아니라면 => X
<footer>	만약, (1) article, aside, main, nav, section의 하위요소로서 존재하거나 (2) role="article", complrementary, main, navigation, region과 함께 사용되는 것이라면 => role="contentinfo" 그게 아니라면 X	역할 : group, none, presentation
<form>	accessible name 을 가지고 있다면 => role="form" 그게 아니라면 X *accessible name => 요소 안의 텍스트, name, value 등 보조기기가 요소의 정보를 읽을 수 있도록 하는 내용들	역할 : search, none, presentation

[웹접근성] HTML의 ARIA role=""

[ role="" 부여 시 주의사항 ]

1.1 기본 역할을 재정의하지 않기

1.2 중복 역할을 추가하지 않기

1.3 불필요한 역할 제공하지 않기

2. HTML에서 ARIA 속성을 사용하기 위해 요구되는 적합한 작성방법

<A>

<B>

<C>

<D>

<E, F>

<H>

<I>

<K, L>

<M, N>

<O>

<P>

<Q, R>

<S>

<T>

<U, V, W>

'📁 Screen > 🖥️ 웹접근성' 카테고리의 다른 글

티스토리툴바

HTML 태그	암묵적인 기본 역할	role 역할, 사용할 수 있는 상태 및 속성
<i>	X	어떤 role이든 적용 가능
<iframe>	X	역할 : application, document, img, none, presentation
<img alt="텍스트">	role="img"	역할 : button, checkbox, link, menuitem, menuitemcheckbox, menuitemradio, option, progressbar, scrollbar, separator, slider, switch, tab, treeitem
<img alt="">	role="presentation"	X
<img>	role="img"	X <img>에 accessible name이 없을 경우엔 해당 요소에 접근할 수가 없음 *accessible name => 요소 안의 텍스트, name, value 등 보조기기가 요소의 정보를 읽을 수 있도록 하는 내용들
<input type="button">	role="button"	역할 : link, menuitem, menuitemcheckbox, menuitemradio, option, radio, switch, tab
<input type="checkbox">	role="checkbox"	역할 : menuitemcheckbox, option, switch aria-pressed와 함께 사용할 경우 role="button" * aira-checked 속성을 쓰지 않아야한다
<input type="color">	X	X
<input type="date">	X	X
<input type="datetime-local">	X	X
<input type="email"> (list 속성이 없는 경우)	role="textbox"	X
<input type="file">	X	X
<input type="hidden">	X	X, aria-* 속성 사용 불가
<input type="image">	role="button"	역할 : link, menuitem, menuitemcheckbox, menuitemradio, radio, switch
<input type="month">	X	X
<input type="number">	role="spinbutton"	X
<input type="password">	X	X
<input type="radio">	role="radio"	역할 : menuitemradio * aira-checked 속성을 쓰지 않아야한다
<input type="range">	role="slider"	X * aira-valuemax, aira-valuemin 속성을 쓰지 않아야한다
<input type="reset">	role="button"	X
<input type="search"> (list 속성이 없는 경우)	role="searchbox"	X
<input type="submit">	role="button"	X
<input type="tel"> (list 속성이 없는 경우)	role="textbox"	X
<input> type="text"> (list 속성이 누락되거나 유효하지 않은 것이 들어갔을 때)	role="textbox"	역할 : combobox, searchbox, spinbutton
<input type="text">, <input type="search">, <input type="tel">, <input type="url">, <input type="email"> list 속성이 포함되어 있을 때	role="combobox"	X
<input type="time">	X	X
<input type="url"> list 속성이 없는 경우	role="textbox"	X
<input type="week">	X	X
<ins>	X	어떤 role이든 적용 가능

HTML 태그	암묵적인 기본 역할	role 역할, 사용할 수 있는 상태 및 속성
<main>	role="main"	X
<map>	X	X, aria-* 속성 사용 불가능
<math>	role="math"	X
<mark>	X	어떤 role이든 적용 가능
<menu>	role="list"	역할 : directory, group, listbox, menu, menubar, none, presentation, radiogroup, tablist, toolbar, tree
<meta>	X	X, aria-* 속성 사용 불가능
<meter>	X	X * aira-valuemax, aira-valuemin 속성을 쓰지 않아야한다
<nav>	role="navigation"	역할 : menu, menubar, tablist
<noscript>	X	X, aria-* 속성 사용 불가능

HTML 태그	암묵적인 기본 역할	role 역할, 사용할 수 있는 상태 및 속성
<object>	X	역할 : application, document, img
<ol>	role="list"	역할 : directory, group, listbox, menu, menubar, none, presentation, radiogroup, tablist, toolbar, tree
<optgroup>	role="group"	X
<option> list of option 안에 있거나 datalist에서 제안사항을 나타낼 경우	role="option"	X * aria-selected 속성을 쓰지 않아야 한다
<output>	role="status"	어떤 role이든 적용 가능

HTML 태그	암묵적인 기본 역할	role 역할, 사용할 수 있는 상태 및 속성
<table>	role="table"	어떤 role이든 적용 가능
<tbody>	role="rowgroup"	어떤 role이든 적용 가능
<template>	X	X, aria-* 속성 사용 불가능
<textarea>	role="textbox"	X
<tfoot>	role="rowgroup"	어떤 role이든 적용 가능
<thead>	role="rowgroup"	어떤 role이든 적용 가능
<time>	X	어떤 role이든 적용 가능
<title>	X	X, aria-* 속성 사용 불가능
<td>	(1) <table> 요소가 role="table"일 때 => role="cell" (2) <table> 요소가 role="grid"일 때 => role="gridcell"	<table> 요소가 (1) role="table", role="grid", role="treegrid" 일 때 => X
<th>	(1) <table> 요소가 role="table"일 때 => role="columnheader" role="rowheader" role="cell" (2) <table> 요소가 role="grid" or "treegrid"일 때 => role="columnheader" role="rowheader" role="gridcell" (3) <table> 요소가 role="table", "grid" or "treegrid"이 아닐 때 => X	<table> 요소가 (1) role="table", role="grid", role="treegrid" 일 때 => X 그 외의 경우, 어떤 role이든 적용 가능
<tr>	role="row"	<table> 요소가 (1) role="table", role="grid", role="treegrid" 일 때 => X 그 외의 경우, 어떤 role이든 적용 가능
<track>	X	X, aria-* 속성 사용 불가능