D2D�アクセシビリティ勉強会�2018年・夏

Bootstrap 4 から読み解く�アクセシブルかつレスポンシブなコーディング

ハッシュタグ #d2draft

WiFiあります

※記録用に写真撮影し今後の告知等に使用させていただきます。写りたくない方は後ろの席へお願いしますm(_ _)m

※本日子連れOK勉強会です

Bootstrap とは？

あらかじめ用意された美しいスタイル、レスポンシブなレイアウト、インタラクティブなコンポーネントから構成されるフロントエンドフレームワーク。美しいウェブサイトやアプリケーションを素早く作ることができ、さらにアクセシブルなコンテンツを作成することができる。

アクセシブルってどういうこと？

Bootstrap が対応しているガイドラインとは？

Bootstrapを正しく使えば、WCAG 2.0(A/AA/AAA）、Section 508に準拠したコンテンツを作ることができる。

もちろん、Bootstrapを使っていても、実際のマークアップやスタイルのカスタマイズによっては準拠できなくなる。

WCAGって何？

2.0ってことは1.0もあるの？

A/AA/AAA って何が違う？

誰が決めているの？

詳しく見ていきましょう

全ては紹介しきれないので、対応に迷う動きのあるパーツやウェブ制作で頻出のパーツをご紹介していきます。

アラート

<div class="alert alert-primary" role="alert">� This is a primary alert—check it out!�</div>

​

role 属性は何のためにあるの？

支援技術ではどんな変化があるの？

パンくずリスト

<nav aria-label="breadcrumb">� <ol class="breadcrumb">� <li class="breadcrumb-item"><a href="#">Home</a></li>� <li class="breadcrumb-item active" aria-current="page">Library</li>� </ol>�</nav>

​

aria-label aria-current って何？

支援技術ではどんな変化があるの？

カルーセル

アクセシブルなスライドショーになっているの？

アコーディオン

<div class="accordion" id="accordionExample">� <div class="card">� <div class="card-header" id="headingOne">� <h5 class="mb-0">� <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">� Collapsible Group Item #1� </button>� </h5>� </div>� <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">� <div class="card-body">� Anim pariatur cliche reprehenderit.� </div>� </div>� </div>

​

アコーディオンのアクセシビリティ上の問題とは？

各属性の役割は？

ドロップダウンメニュー

<div class="dropdown show">� <a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">� Dropdown link� </a>�� <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">� <a class="dropdown-item" href="#">Action</a>� <a class="dropdown-item" href="#">Another action</a>� <a class="dropdown-item" href="#">Something else here</a>� </div>�</div>

​

ドロップダウンのアクセシビリティ上の問題とは？

各属性の役割は？

ページネーション

<nav aria-label="Page navigation example">� <ul class="pagination">� <li class="page-item">� <a class="page-link" href="#" aria-label="Previous">� <span aria-hidden="true">&laquo;</span>� <span class="sr-only">Previous</span>� </a>� </li>� <li class="page-item"><a class="page-link" href="#">1</a></li>� <li class="page-item"><a class="page-link" href="#">2</a></li>� <li class="page-item"><a class="page-link" href="#">3</a></li>� <li class="page-item">� <a class="page-link" href="#" aria-label="Next">� <span aria-hidden="true">&raquo;</span>� <span class="sr-only">Next</span>� </a>� </li>� </ul>�</nav>

​

ページネーションのアクセシビリティ上の問題とは？

各属性の役割は？

最後に：基本も忘れずに

• alt属性を付けよう
• フォームのアクセシビリティ（Bootstrapも当然対応）
• コーディングだけではなく、デザインからアクセシビリティは始まっている

Bootstrapを使っていても、注意点はあります！このあとスライドでご説明します