Vue Fes Japan 2019 発表ネタまとめ

Vue Fes Japan 2019登壇用のネタ

privateのScrapboxからサルベージ

構成

20分（発表）

各セクション5〜6分のイメージ

何が知りたい？何を聞きたい？

何をやったら役に立つのかよりも人の印象に残ることを喋りたいかも

Webアクセシビリティについて

Webアクセシビリティの説明

https://www.w3.org/WAI/videos/standards-and-benefits/ja

世界には10億人、言い換えると、人口の15から20％の割合で障害を持つ人がいます。国連は障害者の権利条約を定めており、人権としてウェブを含んだ情報へのアクセスはほとんどの国で国連条約として批准されています。また数カ国では政策として義務付けられています。法律や規制にも関わらずアクセシビリティ標準を実行するのは、障害を持つ人たちにも、全ての人達にも不可欠なことです。

参考資料　障害者の状況｜平成30年版障害者白書（全体版） - 内閣府

身体障害、知的障害、精神障害の３区分について、各区分における障害者数の概数は、身体障害者（身体障害児を含む。以下同じ。）436万人、知的障害者（知的障害児を含む。以下同じ。）108万２千人、精神障害者392万４千人となっている（図表１参照）。

これを人口千人当たりの人数でみると、身体障害者は34人、知的障害者は９人、精神障害者は31人となる。複数の障害を併せ持つ者もいるため、単純な合計にはならないものの、国民のおよそ7.4％が何らかの障害を有していることになる。

読字障害・色覚障害という見た目だけではわからない人もいる

障害者向けだけの話ではない

そこだけがエッジになっている

そもそも「使いやすい」ものとは誰のものか？

特定の誰かが努力しなくてもいい、参加しやすい世界をつくる

アクセシブルな実装じゃないものは除外されている

理由は単純で「使えない」から

もしくは無理やり使ってる

ストレスフルな業務ツールをずっと使い続けるのはつらい

障害者は皆が孤立しているわけではなく家族や友人がいる

負のフィードバックは共有される

アプローチの仕方

品質保証

デザインシステム

開発者だけの問題か？

デザイナー

コンポーネントデザイン

フォントサイズ

コントラスト比

ディレクター・マーケティング・CS

パイを増やす

ユーザーの想定状況を知る

SEO

企業の社会的責任・CSR

みんながそれぞれの視点で参加することが出来るしクロスすることもできる

開発

基本

何でもかんでもdivでやらない

キーボードで操作できることを意識する

フォーカスへの意識

WCAGを読む

Vue.js

roterにおけるページ遷移

meta情報の更新

aria-live

https://github.com/vue-a11y/vue-announcer

transition

アニメーションを切ることができる

Nuxt.js

htmlAttrsのlang指定

デフォルトが英語

英語のみが読まれる

TalkBackで確認

LPなどの作成時は注意

アクセシブルなプラグイン

vuejs/awesome-vue: 🎉 A curated list of awesome things related to Vue.js

https://github.com/vuejs/awesome-vue#a11y

IBMのVue-calendar

https://github.com/IBM/vue-a11y-calendar

フレームワーク

create-nuxt-appで選べるUIフレームワーク

Accessibility — Vuetify.js

Accessibility | Reference | BootstrapVue

テスト・チェック

axe-core

dequeが開発

Storybook

addon-a11y

アクセシビリティチェック（タブ）

vue-axe

consoleにて確認

axe - Chrome ウェブストア

eslint-plugin-vue-a11y

https://www.npmjs.com/package/eslint-plugin-vue-a11y

pug、jadeだとeslint-parser反応しない

書き換えが必要

1,100 超えコンポーネントの Jade / Pug テンプレートを移行した話 | PLAID engineer blog

https://github.com/plaidev/pug-to-html

ユニットテスト

自動チェックにおける留意

https://docs.google.com/presentation/d/19l20t5W1RUYE_OqAFBkMrG9cVzko3XfYWtyOjr3-p54/edit?usp=sharing

ユーザーテストも必要

ブラウザチェック

スクリーンリーダーテスト

iOS13で追加読みされるのはびっくりした

キーボードテスト

膨大なページ・コンポーネントのチェック

妥当な手段は見つけられてない

自分が考えるVue.jsとアクセシビリティについて

Vue.jsのドキュメントは足りていない

今ある内容（英）

https://vuejs.org/v2/guide/components.html#Listening-to-Child-Components-Events

As we develop our <blog-post> component, some features may require communicating back up to the parent. For example, we may decide to include an accessibility feature to enlarge the text of blog posts, while leaving the rest of the page its default size:

https://vuejs.org/v2/cookbook/editable-svg-icons.html#Base-Example

You can use this base icon as is- the only thing you might need to update is the viewBox depending on the viewBox of your icons. In the base, we’re making the width, height, iconColor, and name of the icon props so that it can be dynamically updated with props. The name will be used for both the <title> content and its id for accessibility.

ほかフレームワークはドキュメントがある

https://ja.reactjs.org/docs/accessibility.html

ReactのはReact開発におけるというよりもすべての開発者に向けている感じ

https://angular.io/guide/accessibility

callumacrae氏がドキュメントを作成してくれてるが、プルリクエストは止まってしまっている

https://github.com/callumacrae/vuejs.org/blob/a11y-docs/src/v2/guide/accessibility.md

カンファレンスでもアクセシビリティを重視していきたい

JSConfはページを用意している

https://2019.jsconf.eu/accessibility/

同時翻訳

Vue Fesでは対応している

逆に日本語トークの英語翻訳は？