PR * CKでないでください:フロントエンドエンジニアとアクセシビリティ

基本的なアクセシビリティは難しくありません、そして、それはしばしば選択でさえありません.何が難しいですあなたの湿気の頑固さです.

次のコードはあなたを動揺させます
あなたはフロントエンドの開発者です.新しい会社でスタートし、次のようなコードを見つけます.

const data = await fetchData();
const a = [];

data.map( item => a.push({ t: item.subject, i: item._id })

おそらくあなたの最初の考えは以下の通りです💣.
いいものにしましょう

const listOfTasks = await fetchTasks();
const idAndTitleList = listOfTasks
     .map(( { subject, _id } ) => ({ title: subject, id: _id }));

最初のサンプルで怒りを感じましたか?
あなたはそれを感じた!あなたはそれがとてもきれいで読みやすいように簡単にされているので、それを感じた.それゆえに、「なぜ、それがそこにいるようになったか」は重要でありません.明らかに誰もこのコードがマージされるのを防いでいた(ガイドラインを欠落しているかどうか)、そして、あなたが開発者経験の感覚で苦しむこと.
あなたへの開発者経験は、それに依存する人々へのアクセシビリティ機能に匹敵します.
これはまだアクセシビリティ機能に依存しているかどうかを比較する非常に無害な例です.そして、アプリ/サイトが行われるとき、それはあなたが決してしないように適応する巨大なものだろう.

アクセシビリティは難しくない
多くの場合、

If you do recommend to NOT implement proper accessibility in your application you are actually consulting for something that has legal impact in a lot of countries now. So that's, first and foremost, a very very good reason to inform yourself and your colleagues about accessibility even more.
Source: https://www.w3.org/WAI/policies/

それで、あなたが孤独な島の上で/in/に開発していないならば、そこに良いチャンスがそれのために法律規則があります.
私は、このiffyがとてもしばしば言うのを聞きました.フロントエンドエンジニアから、デザイナーからではなく、特に製品の所有者とマネージャーから、「時間を節約する」ためにエンジニアを陰謀させようとします

「あとでできるよ」
技術的には「後にする」ことに問題はない.しかし、私にそれの比喩をさせてください:フォークは、あなたのテーブルにあります.あなたはたった今棚にそれを置くことができます、そして、あなたの部屋は驚くほどきれいに見えます.それが快適さで快適になるように、エンドルフィンの突進はあなたの体を打ちます.安易な.今、あなたは1年間あなたの部屋に敷設すべてを残して想像してください.今すぐ部屋を掃除を開始-何も見つけ始める.あなたはポイントを得る.


障害を持つ人々はとにかくターゲットグループではない
この声明は決して真実ではない.決して.1人以上使用されている任意のアプリケーションのいずれか1つの場合ではありません.
私は、「盲目の人々がどのようにA 11 Yが助けるかについて、運転することができない」としばしば言っている自動車セクターでこれを聞きました.
EHM井戸盲目の人は、自動車セクターのデジタル販売部分をまだ管理することができます.ちょうど非常に明確な例を持っている.あなたが望むならば、私はさらに数千を加えることができました.
それはしばしば悪いキーボードの使用と来るので、悪いアクセシビリティは常にプロのユーザーに影響を与えます.

「大丈夫だよaria-label とalt 属性
いいえ、ランダムに追加を開始しないでくださいaria-* あなたが影響を知らないならば、属性またはalt/titleタグ.理解の基礎から始める.理解は楽にそれを使用し、コーディング中にそれを実装するの重要なポイントです.私は自分自身をお勧めしますが、問題は私は自分の上に公共の情報源を持っていないので、私はあなたの脳を貸す必要があります.

Googleからの非常に良い自由なudacityコースが、あります(本当に、本当にこれを推薦することができます).https://www.udacity.com/course/web-accessibility--ud891

本文を読むhttps://developers.google.com/web/fundamentals/accessibility/semantics-builtin/the-accessibility-tree

また、で始めることができます.彼女はまた、あなたのTwitterアカウントにリンクを見つける新しいコースを公開しています.

良い読み取りは常にMDNです.https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/heading_role

アクセシビリティを向上させる方法を簡単に証明しましょう

あなたがするならば、CSS影響A 11 Yを理解してくださいdisplay: none 要素に関しては、視覚的にだけでなく、アクセシビリティツリーにも隠されます<div style="display: none" aria-label="additional info only for screen readers">... 役に立たない.

あなたのデザイン(Chrome Inspectorでビルトイン)で良い比率を確実にしてください;デザイナーのためにスケッチプラグインもたくさんあります;https://webaim.org/resources/contrastchecker/

適切なHTML構造を使用することは非常に良いスタートです.定義によるHTML(CSSなどを追加せずに)が正しく使用される場合は完全にアクセスできます.https://developer.mozilla.org/en-US/docs/Learn/Accessibility/HTML

あなたの側には文字通り効果がないがクール(そうではないコンテンツコンテンツ賢明な)をして、単純にemを非表示にしているファンシー要素を持っている場合aria-hidden="true"

The alt 属性をimg タグは、必ずしもコンテンツを必要とするものではありません.コンテンツがコンテンツに接続されている場合、コンテンツが必要です.例:あなたはニュース記事を持っており、“ますます多くの人々が新しいショッピングセンターを訪問する”について報告します.今、あることを想像してくださいimg タグは、ショッピングセンターで多くの人々を示す写真で.それから良いAltタグはalt="A lot of people standing in the new Shopping Center the city" . しかし、画像がランダムなストック画像である場合、それは追加情報を提供していないし、必要がありますalt="" (この場合、内容はそれ自体のために生きます、そして、イメージはちょうど視覚的な付属です).

あなたがmodalsを使うならば、「ロックしてください」ことを確認してください.あなたのマウスでモーダルの下の要素をクリックすることができないならば、あなたはそれの下であなたのキーボードでタブをすることができません.しかし、多くのmodalsはそれをします、そして、彼らがしばしばそれを去ったならば、彼らがしばしばモーダルに戻ることができないので、スクリーン読者とともに働く人々のために、それはひどいです.私はまた、それを支援する一つの反応ライブラリを構築しました.https://github.com/activenode/react-use-focus-trap

今すぐ刺されて停止し、少なくとも自分で少し知らせる.
良い意味のHTML構造を提供するalt 属性(大部分のFE開発者は、彼らがこれを知っていると思います、しかし、実際に、彼らはそうしません)と使用の影響aria-* 属性は、基本的なA 11 Yを持つための非常に良いスタートでありえます.それは大きな努力のように聞こえませんね.