접근성 감사
모든 사용자가 콘텐츠에 액세스하고 사이트를 효과적으로 탐색할 수 있습니까?
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
이름 및 레이블
- Buttons do not have an accessible name
- Document doesn't have a
<title>element - Form fields have multiple labels
<frame>or<iframe>elements do not have a title- Image elements do not have
[alt]attributes <input type="image">elements do not have[alt]text- Form elements do not have associated labels
- Links do not have a discernible name
<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