Vue.js でアクセシブルなコンポーネントをつくるために 草案

１

WebサイトからWebアプリケーションへの変遷

https://gyazo.com/21c5c938a4cb3ab125d680cb326e208c

２

No ARIA is better than Bad ARIA

fragment 処理を忘れない

基本的にはテキストで提供するようにする

オーバーラップされることを気をつける

タグによっては使用できない

「完全に消す」ということを理解する

値を誤ると都度通知されてしまう

aria-live="assertive"

ただし

The code in this example is not intended for production environments. Before using it for any purpose, read this to understand why.

を理解する

３

ルールを確認する

code:example-heading-vue.html

<script setup lang="ts">

import { computed, defineProps } from 'vue';

type Props = {

headlineLevel: 1 | 2 | 3 | 4 | 5 | 6;

headlineText: string;

}

const props = defineProps<Props>();

const headingText = computed(() => props.headlineText);

</script>

<template>

<component :is="headlineTag">

{{ headingText }}

</component>

</template>

４

ルールは検討する

alt-text

代替の内容が必要な際にalt、aria-labelなどがあるかのチェック

aria-props

定義されていないaria属性（タイポ含む）をチェック

aria-role

存在しないもの、abstractなroleの使用をチェック

aria-unsupported-elements

aria属性を使用できないタグで使用していないかチェック

no-redundant-roles

タグに重複したroleを付与していないかチェック

role-has-required-aria-props

vue-parser を使用する

５

より深みを知っていく