「包括的コンポーネント」に対応：アクセス可能で防弾のフロントエンドパターン

フロントエンドのアクセシビリティは、最近でもやや不思議です。 アクセシブルなボタンとドロップダウンを作成するにはどうすればよいですか？ キーボード対応のツールチップ、タブ、通知についてはどうですか？ または、包括的なアコーディオン、スライダー、データテーブル、モーダル？ 一緒に考えてみましょう。 完全にアクセス可能なデジタル製品を構築するための新しいハンドブックであるInclusiveComponentsをご覧ください。 無料のサンプルPDF（1.1 MB）をダウンロードします。

本について

本質的に、インクルーシブコンポーネントは、完全にアクセス可能なインターフェイスを構築するための詳細で実用的なハンドブックです。 この本は、アコーディオン、テーブル、モーダル、通知、タブ、トグル、およびその間のすべての12の一般的なインターフェイスパターンを、包含のレンズを通して調べます。 その結果、アクセス可能で堅牢なコンポーネントが作成され、プラグインされ、毎日使用されます。

何年もの間、アクセシビリティに焦点を当てた経験豊富なフロントエンド開発者であるHeydon Pickeringは、アクセシブルなソリューションについて書いてきました。 私たちはHeydonと協力して、彼が長年にわたって洗練してきた共通の課題と解決策を備えた本を作成しました。

各コンポーネントについて、詳細な調査が詳細に示され、すべてのソリューションが防弾コードスニペットとして利用可能であり、すぐに作業に適用できます。 ボーナス：包括的なデザインを念頭に置いて、独自のアクセシブルなコンポーネントを構築する方法をすべて1冊の本で学びます。 目次にジャンプ↓

332ページ。 ステッチされたバインディングとリボンページマーカーを備えた高品質のハードカバー。 eBookは、PDF、ePUB、AmazonKindleで利用できます。 Heydonによって書かれ、設計されました。 サンプルPDF（1.1 MB）をダウンロードします。

目次

各章では、単一のコンポーネントに取り組み、さまざまで脆弱な人々がどのようにそれを読んで対話するか、そしてどのようにそれらをより適切に適応させることができるかについて説明します。 サンプルPDF（1.1 MB）をダウンロードします。

著者について

Heydon Pickering（@heydonworks）は、Paciello Group、BBC、Smashing Magazine、およびBulb Energyと、デザイナー、エンジニア、ライター、エディター、イラストレーターとして協力してきました。 彼はネットアワードのデザイナーオブザイヤーに選ばれました。

Heydonは以前、10,000部以上を販売したインクルーシブデザインパターンを作成しました。 このタイトルの収益は、ACLUとアメリカ民主社会主義者に寄付され、これらの組織がファシズムと戦い、より包摂的な社会を構築するのを支援しました。

Heydonがこの本を書くことにした理由を尋ねられたときに共有したことは次のとおりです。

「数年前、私はウェブデザインに飽きていました。 その後、レスポンシブデザインが登場し、新たな課題が提示されました。 それは私の人生と私の仕事を再び面白くしました。 それから私はウェブアクセシビリティの世界を発見し、私の熱意は再び更新されました。 一部の人々は、私が道徳的に義務付けられていると感じているため、または私がそうしなかった場合は罪悪感を感じるため、私がWebアクセシビリティを行っていると考えているようです。

あらゆる種類の人々がウェブにアクセスできるはずだと強く信じていますが、私を刺激し、仕事に新たな深みを与えてくれた、この本で取り上げたウェブアクセシビリティの課題にも感謝しています。

この本を書いたのは、インターフェースをよりアクセスしやすくすることがどれほど楽しいか、そしてそうすることでどれほど達成感を感じることができるかを知ってほしいからです。 これを読んでくれてありがとう、そしてうまくいけば本も。」

お客様の声

「包括的コンポーネントは、実際の例を使用して、アクセシブルなコンポーネントの開発について非常に深く徹底的に説明しています。 ヘイドンピカリングは、いくつかの代替アプローチを示し、それぞれの長所と短所を説明しています。 読むのも楽しみです！」

— Artem Sapegin、フロントエンド開発者、Wayfair

「インクルーシブコンポーネントには、アクセシブルなUIの構築に関する実用的で包括的なアドバイスがぎっしり詰まっています。 これは、WCAGとARIAの公式ドキュメントの後の私の頼りになるリソースです。 設計システムを構築する際に非常に役立つことがわかりました。」

—サラ・フェダーマン、シニアフロントエンド開発者

「Heydonがインクルーシブコンポーネントに関する彼の仕事で達成したのは、アクセス可能なコンポーネントだけでなく、より優れたWebサイトやWebアプリを構築するのに役立つ回復力のある進歩的な出発点を生成するのに役立つ実用的でフレンドリーで親しみやすいガイドのセットです。全般的。 この正確な理由から、私はこの作品を重要な学習教材として説明することがよくあります。」

—アンディ・ベル、独立したデザイナー兼開発者

この本があなたにぴったりな理由

悪魔は詳細に宿っていて、善意で行うことは、無意識のうちにアクセシビリティの障壁を課す可能性があります。 インクルーシブコンポーネントは、作業中の潜在的なアクセシビリティの問題を検出して対処する方法を学びたいすべてのフロントエンド開発者向けです。 本はあなたに教えます：

1. <button>要素の使用方法、トグルボタンにスタイルを適用する方法、およびそれらにラベルを付ける方法。
2. ユーザーが包括的な方法でコンテンツを作成および削除できるようにする管理リストを作成する方法。
3. ナビゲーションメニューとサブメニュー（別名「ドロップダウン」）を使用してアクセシビリティの問題に対処し、解決する方法。
4. アクセス可能でキーボードフレンドリーなツールチップとトグルチップを作成する方法。
5. アクセス可能で長期的に維持可能な「ダークモード」テーマを作成する方法。
6. 動きに敏感な人への危害を防ぐために、アクセシブルなコンテンツスライダーを構築する方法。
7. ライブリージョンで包括的な通知を作成して、視覚チャネルと聴覚チャネルを同時に介してユーザーと通信する方法。
8. 意味的に正しく、応答性が高く、並べ替え可能なデータテーブルを作成する方法。
9. パフォーマンスと包括的な設計を念頭に置いて、アクセシブルなダイアログとモーダルダイアログを構築する方法。
10. 包括的カードを作成してグループ化する方法（ティーザーなど）。

技術的な詳細

• ISBN： 978-3-945749-82-1 （印刷）
• 高品質のハードカバー、ステッチされた製本、リボンページマーカー。
• eBookは、HeydonのサイトからPDF、ePUB、およびAmazonKindleとして入手できます。
• ドイツからの無料の世界的な航空便の輸送。 （配達時間を確認してください。）
• eBookおよびprint + eBookとして利用できます。

コミュニティの問題️

インクルーシブコンポーネントを使用して、アクセス可能でインクルーシブなインターフェイスを作成するための、適用可能で長寿命のソリューションと戦略を備えた非常に焦点を絞ったハンドブックを作成しようとしました。

Heydonの本を使用すると、インターフェイスを構築するときに、より適切な設計とコーディングの決定を下せるようになることを願っています。 おそらくそれは、それらの一般的なUIコンポーネントの1つを構築する必要があるたびにアクセスする参考書の1つになるでしょう。

本の制作にはかなりの時間がかかり、素晴らしいコミュニティの支援なしには本を完成させることはできませんでした。 私たちの冒険への継続的なサポートに対して、SmashingMembersに大声で叫びました。 その結果、eBookはSmashingメンバーにとって常に無料です。 さらに、メンバーは印刷物を購入すると友好的な割引を受けられます。

皆さん、頑張ってください、そしてあなたの継続的なサポートに感謝します！

より多くのスマッシングブック

ベストプラクティスを推進し、日々のコーディングと設計の課題をマスターするための実用的なヒントを提供することは、Smashingで行うすべてのことの中心であり続けています。 過去数年間、私たちはWebコミュニティの才能あふれる思いやりのある人々と協力して、時の試練に耐える本として彼らの豊富な経験を出版することができて非常に幸運でした。 アラ、アダム、アンディはこれらの人々の一部です。 彼らの本をもうチェックしましたか？