애플리케이션 접근성 평가 도구

Vue 애플리케이션의 접근성을 평가하는 플러그인 활용 가이드

vue-axe

dequelabs/react-axe에서 영감을 받아 제작된 애플리케이션 접근성 평가 도구로 Vue.js로 제작된 애플리케이션 개발 과정에서 제작자에게 보여지는 페이지의 접근성을 평가한 후, 오류 발생 시 제작자에게 알려줍니다. (웹 UI 접근성 테스트 자동화 엔진 dequelabs/axe-core 사용)

ax-core 엔진은 Vue.js 애플리케이션이 업데이트 된 후 1초 뒤에 실행됩니다. (최대 5초 동안 응답 대기)

패키지 설치

vue-axe 패키지를 프로젝트에 설치합니다.

CLI
$ npm install vue-axe -D

플러그인 설정

main.js 파일에 개발 환경에서만 접근성 평가를 수행하도록 설정합니다.

main.js
import Vue from 'vue';
if ( process.env.NODE_ENV !== 'production' ) {
const VueAxe = require('vue-axe');
Vue.use(VueAxe, {
config: {
// ...
rules: [
{ id: 'heading-order', enabled: true },
{ id: 'label-title-only', enabled: true },
{ id: 'link-in-text-block', enabled: true },
{ id: 'region', enabled: true },
{ id: 'skip-link', enabled: true },
{ id: 'help-same-as-label', enabled: true }
// ...
]
}
});
}

예제

브라우저 개발 도구를 켜면 Console 패널에 New aXe issues가 표시 되며 검사 결과가 출력됩니다.

환경

vue-axe의 옵션으로 설정할 수 있는 속성은 다음과 같습니다.

속성

설명

기본 값

필수

clearConsoleOnUpdate

vue-axe 이 실행될 때 마다 콘솔 패널 지움

true

No

config

Axe-core 환경 설정 옵션 제공

false

No

규칙

접근성을 평가할 규칙은 다음 표를 참고하여 설정합니다. (<audio> 요소 자막을 제외한 나머지 모든 설정 값 true)

*의 개수가 많을 수록 중요성이 높아집니다.

심각(4) > 중요(3) > 보통(2) > 미약(1)

규칙 ID

설명

중요

태그

기본 값

accesskeys

모든 accesskey 속성 값 고유성 검사

****

best-practice, cat.keyboard

true

area-alt

이미지 맵 요소 <area> 대체 텍스트 검사

***

cat.text-alternatives, wcag2a, wcag111, section508, section508.22.a

true

aria-allowed-attr

요소의 ARIA 속성 유효성 검사

***

cat.aria,

wcag2a,

wcag412

true

aria-allowed-role

요소의 ARIA 역할(Roles) 유효성 검사

*

cat.aria,

best-practice

true

aria-dpub-role-fallback

지원되지 않는 DPUB 역할(role)이 암시적 대체 역할을 갖는 요소만 사용 되는지 검사

**

cat.aria,

wcag2a,

wcag131

true

aria-hidden-body

body 요소aria-hidden="true" 검사

***

cat.aria,

wcag2a,

wcag412

true

aria-required-attr

aria-required 설정 요소 검사

***

cat.aria,

wcag2a,

wcag412

true

aria-required-children

aria-required 설정 요소의 자식들 검사

***

cat.aria,

wcag2a,

wcag131

true

aria-required-parent

aria-required 설정 요소의 부모 검사

***

cat.aria,

wcag2a,

wcag131

true

aria-roles

역할(role) 값이 설정된 요소 유효성 검사

****

cat.aria,

wcag2a,

wcag412

true

aria-valid-attr-value

ARIA 속성 값을 가진 요소 유효성 검사

***

cat.aria,

wcag2a,

wcag412

true

aria-valid-attr

aria-로 시작하는 ARIA 속성 유효성 검사

***

cat.aria,

wcag2a,

wcag412

true

audio-caption

<audio> 요소에 자막 제공 되는지 검사

***

cat.time-and-media,

wcag2a,

wcag121,

section508,

section508.22.a

false

autocomplete-valid

autocomplete 속성 유효/적합성 검사

****

cat.forms,

wcag21aa,

wcag135

true

blink

<blink> 요소 사용 유무 검사

****

cat.time-and-media,

wcag2a,

wcag222,

section508,

section508.22.j

true

button-name

버튼 텍스트 인식 가능 여부 검사

****

cat.name-role-value,

wcag2a,

wcag412,

section508,

section508.22.a

true

bypass

스킵 내비게이션 설정 유무 검사

****

cat.keyboard,

wcag2a,

wcag241,

section508,

section508.22.o

true

checkboxgroup

<input type="checkbox"> 요소 그룹 및 일관성 여부 검사

***

cat.forms,

best-practice

true

color-contrast

전경/배경 색상 대비 검사 (WCAG 2 AA)

****

cat.color,

wcag2aa,

wcag143

true

css-orientation-lock

특정 방향으로 회전이 고정 되었는지 검사

****

cat.structure,

wcag262,

wcag21aa,

experimental

true

definition-list

<dl> 요소의 구조 유효성 검사

****

cat.structure,

wcag2a,

wcag131

true

dlitem

<dt>, <dd> 요소 구조 유효성 검사

****

cat.structure,

wcag2a,

wcag131

true

document-title

<title> 값이 비어있는지 검사

****

cat.text-alternatives,

wcag2a,

wcag242

true

duplicate-id-active

활성화 된 요소의 id 속성 고유성 검사

****

cat.parsing,

wcag2a,

wcag411

true

duplicate-id-aria

ARIA, 레이블에 연결된 id 고유성 검사

***

cat.parsing,

wcag2a,

wcag411

true

duplicate-id

모든 요소의 id 속성 고유성 검사

*

cat.parsing,

wcag2a,

wcag411

true

empty-heading

제목 텍스트 비어있는지 검사

*

cat.name-role-value,

best-practice

true

focus-order-semantics

포커스 순서 및 의미 유효성 검사

*

cat.keyboard,

best-practice,

experimental

true

frame-tested

<iframe>, <frame> 요소 axe-script 포함 여부 검사

***

cat.structure,

review-item

true

frame-title-unique

<iframe>, <frame> 요소 고유 타이틀 포함 여부 검사

****

cat.text-alternatives,

best-practice

true

frame-title

<iframe>, <frame> 요소 타이틀 값이 비었는지 검사

****

cat.text-alternatives,

wcag2a,

wcag241,

wcag412,

section508,

section508.22.i

true

heading-order

제목 요소의 의미, 순서 유효성 검사

***

cat.semantics,

best-practice

true

hidden-content

숨겨진 콘텐츠 알림

*

cat.structure,

experimental,

review-item

true

html-has-lang

<html> 주 언어 명시 여부 검사

****

cat.language,

wcag2a,

wcag311

true

html-lang-valid

<html> 주 언어 설정 값의 유효성 검사

****

cat.language,

wcag2a,

wcag311

true

html-xml-lang-mismatch

<html> 주 언어 설정 값과 xml:lang 속성 값이 일치하는지 검사

***

cat.language,

wcag2a,

wcag311

true

image-alt

<img> 요소 대체 텍스트 검사

**

cat.text-alternatives,

wcag2a,

wcag111,

section508,

section508.22.a

true

image-redundant-alt

버튼 또는 링크 텍스트와 이미지 대체 텍스트 중복 여부 검사

*

cat.text-alternatives,

best-practice

true

input-image-alt

<input type="image"> 요소 대체 텍스트 검사

***

cat.text-alternatives,

wcag2a,

wcag111,

section508,

ection508.22.a

true

label-title-only

title, aria-describedby 속성으로 모든 폼 요소의 레이블이 설정 되었는지 검사

****

cat.forms,

best-practice

true

label

모든 폼 요소의 레이블 검사

****

cat.forms,

wcag2a,

wcag332,

wcag131,

section508,

section508.22.n

true

landmark-banner-is-top-level

banner 랜드마크 최상위 레벨 설정 검사

**

cat.semantics,

best-practice

true

landmark-contentinfo-is-top-level

contentinfo 랜드마크 최상위 레벨 설정 검사

**

cat.semantics,

best-practice

true

landmark-main-is-top-level

main 랜드마크 최상위 레벨 설정 검사

**

cat.semantics,

best-practice

true

landmark-no-duplicate-banner

페이지의 banner 랜드마크 중복 여부 검사

**

cat.semantics,

best-practice

true

landmark-no-duplicate-contentinfo

페이지의 contentinfo 랜드마크 중복 여부 검사

**

cat.semantics,

best-practice

true

landmark-one-main

페이지의 main 랜드마크 중복 여부 검사 (iframe 또한 1개만 존재 검사)

**

cat.semantics,

best-practice

true

layout-table

레이아웃 테이블에 <th>, <caption>, 요약 등이 설정 되었는지 검사

****

cat.semantics,

wcag2a,

wcag131

true

link-in-text-block

링크 텍스트 색상 구분 유효성 검사

****

cat.color,

experimental,

wcag2a,

wcag141

true

link-name

링크 텍스트 식별 유효성 검사

****

cat.name-role-value,

wcag2a,

wcag412,

wcag244,

section508,

section508.22.a

true

list

리스트 구조 유효성 검사

****

cat.structure,

wcag2a,

wcag131

true

listitem

<li> 요소의 의미적 사용이 올바른지 검사

****

cat.structure,

wcag2a,

wcag131

true

marquee

<marquee> 요소 사용 유무 검사

****

cat.parsing,

wcag2a,

wcag222

true

meta-refresh

<meta http-equiv="refresh"> 사용 유무 검사

***

cat.time,

wcag2a,

wcag2aaa,

wcag221,

wcag224,

wcag325

true

meta-viewport-large

<meta name="viewport"> 확장성 보장 검사

*

cat.sensory-and-visual-cues,

best-practice

true

meta-viewport

<meta name="viewport">

텍스트 스케일 조정, 확대 차단 설정 검사

***

cat.sensory-and-visual-cues,

wcag2aa,

wcag144

true

object-alt

<object> 요소의 대체 텍스트 검사

****

cat.text-alternatives,

wcag2a,

wcag111, section508, section508.22.a

true

p-as-heading

<p>요소를 제목으로 사용했는지 검사

****

cat.semantics,

wcag2a,

wcag131,

experimental

true

page-has-heading-one

페이지 또는 프레임에 최소 제목 레벨 1이 포함 되었는지 검사

**

cat.semantics,

best-practice

true

radiogroup

<input type="radio"> 요소 그룹 및 일관성 여부 검사

***

cat.forms,

best-practice

true

region

모든 페이지 내용이 랜드마크에 포함 되었는지 검사

**

cat.keyboard,

best-practice

true

scope-attr-valid

scope 속성이 테이블에 올바르게 사용되었는지 검사

***

cat.tables,

best-practice

true

server-side-image-map

서버 사이드 이미지 맵 검사

*

cat.text-alternatives,

wcag2a,

wcag211,

section508,

section508.22.f

true

skip-link

모든 스킵 내비게이션 링크의 타겟이 포커스 가능한지 검사

**

cat.keyboard,

best-practice

true

tabindex

tabindex 속성 값이 0보다 큰지 검사

****

cat.keyboard,

best-practice

true

table-duplicate-name

테이블의 제목, 요약이 동일한 내용으로 중복 되는지 검사

*

cat.tables,

best-practice

true

table-fake-caption

테이블의 제목으로 <caption> 요소를 사용하는지 검사

****

cat.tables,

experimental,

wcag2a,

wcag131,

section508, section508.22.g

true

td-has-header

비어있지 않은 <td> 요소 내부에 1개 이상의 테이블 제목이 사용되었는지 검사

**

cat.tables,

experimental,

wcag2a,

wcag131,

section508, section508.22.g

true

td-headers-attr

header 속성을 사용하는 <td> 요소가 다른 <td>를 참조 하는지 검사

****

cat.tables,

wcag2a,

wcag131,

section508, section508.22.g

true

th-has-data-cells

<th> 요소가 <td> 요소를 참조 하는지 검사

****

cat.tables,

wcag2a,

wcag131,

section508,

section508.22.g

true

valid-lang

lang 속성 유효성 검사

****

cat.language, wcag2aa, wcag312

true

video-caption

<video> 요소에 자막 제공 되는지 검사

***

cat.text-alternatives, wcag2a,

wcag122,

section508,

section508.22.a

true

video-description

<video> 요소에 오디오 설명이 제공 되는지 검사

***

cat.text-alternatives, wcag2aa,

wcag125,

section508,

section508.22.b

true

참고