アクセシブルではないタブウィジェットの解説まずはじめに、図1を確認してください。以降では、このサンプルをアクセシブルにしていくことになります。3にて実行をしています。Talker(http://www.pctalker.net/)は、現状WAI-ARIAに未対応ですがW3Cの「勧告」になる時期に合わせて順次対応を予定しているということです。WAI-ARIAに対応していないため、読み上げ結果を聞いてみると、「タブ」ではなく「3個リスト」「ページ内リンク」などと読み上げられています。UIの「UI/Tabsのもっとも基本のサンプル(http://docs.jquery.com/UI/Tabs#source)」に沿って作成しています。以下、注意すべき点をピックアップして解説します。3つのタブにあたるマークアップを用意しています。使った構造である必要があります。このため、「3個のリスト」「ページ内リンク」のように読み上げされています。タブ内コンテンツは次のように用意しています。野菜のコンテンツ肉のコンテンツ果物のコンテンツこのように、UI/Tabsは、タブのhref属性のページ内リンクと、タブ内コンテンツのid値を対応させることで、タブの開閉を実現する仕組みになっています。このタブ内コンテンツは、例えば「野菜」のタブがアクティブになると、下記のみが表示され、それ以外は非表示になります。野菜のコンテンツここまでのソースコード全体をダウンロードしたファイル「tab-1.html」で確認してみましょう。次のページでは、このサンプルをWAI-ARIAに対応させ、「タブ」として正しく読み上げできるようにします。2004年1月より株式会社アークウェブの創業スタッフとして勤務。SEとしてさまざまなWebシステムの構築に従事。Railsなどの記事執筆も行っている。ITでは、より付加価値の高いコンテンツを会員サービスとして提供しています。ITのWebサイトにログインすることでさまざまな限定特典を入手できるようになります。VeloCloudが選ばれる理由SD-WANとはなにか。Linuxエンジニア育成への思いF5とNGINXの組み合わせで、サービス公開をよりセキュアに。ITがお届けするポッドキャストです。