접근성 감사
모든 사용자가 콘텐츠에 액세스하고 사이트를 효과적으로 탐색할 수 있습니까?
Accessibility Overview
ARIA
-
[aria-*]
attributes do not match their roles -
[aria-hidden="true"]
is present on the document<body>
-
[aria-hidden="true"]
elements contain focusable descendants -
[role]
s do not have all required[aria-*]
attributes - Elements with an ARIA
[role]
that require children to contain a specific[role]
are missing some or all of those required children -
[role]
s are not contained by their required parent element -
[role]
values are not valid -
[aria-*]
attributes do not have valid values -
[aria-*]
attributes are not valid or misspelled - ARIA IDs are not unique
이름 및 레이블
- 버튼에 액세스할 수 있는 이름이 없습니다.
- Document doesn't have a
<title>
element - Form fields have multiple labels
-
<frame>
or<iframe>
elements do not have a title - 이미지 요소에는
[alt]
속성이 없습니다 -
<input type="image">
elements do not have[alt]
text - 양식 요소에 연결된 레이블이 없습니다.
- 링크에 식별 가능한 이름이 없습니다.
-
<object>
elements do not have alt text
테이블 및 목록
-
<dl>
s do not contain only properly ordered<dt>
and<dd>
groups,<script>
, or<template>
elements - Definition list items are not wrapped in
<dl>
elements - Lists do not contain only
<li>
elements and script supporting elements (<script>
and<template>
) - List items (
<li>
) are not contained within<ul>
or<ol>
parent elements - Presentational
<table>
elements do not avoid using<th>
,<caption>
, or the[summary]
attribute - Cells in a
<table>
element that use the[headers]
attribute refer to an element ID not found within the same table -
<th>
elements and elements with[role="columnheader"/"rowheader"]
do not have data cells they describe
수동으로 확인할 추가 항목
- The page has a logical tab order
- Interactive controls are keyboard focusable
- Interactive elements indicate their purpose and state
- The user's focus is directed to new content added to the page
- User focus is not accidentally trapped in a region
- Custom controls have associated labels
- Custom controls have ARIA roles
- Visual order on the page follows DOM order
- Offscreen content is hidden from assistive technology
- HTML5 landmark elements are used to improve navigation