MENU
小さな疑問から大きなアイデアまで一緒に考える、あなたの一番の相談相手になります。

アクセシビリティカンファレンスに参加してみた！

アウトプット 技術系
dan

こんにちは、コーダーのdanです。先日アクセシビリティカンファレンスにオンライン参加して、
アクセシビリティについて改めて勉強してみました。

＜アクセシビリティカンファレンス名古屋＞

◆日時：2024年9月7日(土) 13:00~
　本編 13:30~17:50、懇親会 18:10~20:00

◆会場：エイチーム本社
（名古屋市中村区名駅三丁目28番12号大名古屋ビルヂング32F）

目次

ウェブアクセシビリティとは？

ウェブアクセシビリティは、すべての人が平等に情報にアクセスできる環境を提供し、インクルーシブ（障がいの有無や国籍、年齢などに関係ない）なユーザー体験を実現することを目指しています。

アクセシビリティに配慮したWebデ...
アクセシビリティに配慮したWebデザイン ギャラリー・サイト AAA11Y（Accessible Website Gallery） AAA11Y（Accessible Website Gallery）はウェブアクセシビリティに配慮した素敵なデザインのWebサイトをご紹介するギャラリーサイトです。

ウェブアクセシビリティに配慮されたコーディングとは？

視覚や聴覚、運動能力に制限のあるユーザーが情報にアクセスしやすくするために、工夫されたウェブサイトの作り方です。

1. スキップリンク
<a class="c-skipLink visually-hidden" href="#content">本文へ移動する</a>

スクリーンリーダーやキーボードを使用するユーザーが、ナビゲーションメニューを飛ばして主要なコンテンツに直接移動できるようにするためのリンクです。
また、visually-hidden クラスにより、視覚的には非表示ですが、スクリーンリーダーには認識されます。

2. aria属性
<button class="c-navToggle" id="js-navOpen" aria-label="ナビゲーションを表示する" type="button" aria-controls="js-navTarget" aria-expanded="true">
    <span></span>
    <span></span>
    <span></span>
</button>
<div class="l-header__nav" id="js-navTarget">
    <nav class="p-navGlobal" id="js-navGlobal" aria-label="グローバルメニュー">
        <ul class="p-navGlobal__list">
            <li class="p-navGlobal__list__item"><a href="{{url}}">メニュー</a></li>
        </ul>
    </nav>
    <button class="c-navToggle is-open" id="js-navClose" aria-label="ナビゲーションを閉じる" type="button" aria-controls="js-navTarget" aria-expanded="true">
        <span></span>
        <span></span>
        <span></span>
    </button>
</div>

視覚的な情報や対話的な要素が分かりやすくなり、障害のあるユーザーがコンテンツを理解しやすくなります。
aria-label でボタンやリンクの具体的な説明を提供し、aria-controls で関連するコンテンツを示しています。
aria-expanded：UIコンポーネントが開いているか閉じているかを表します。
aria-hidden=”true”：アイコンをスクリーンリーダーから隠すために使用します。視覚的には重要ですが、スクリーンリーダーには認識されないようにします。

3. alt 属性
<img src="画像パス" alt="画像の内容">

画像に alt 属性が設定されており、視覚障害のあるユーザーや画像が読み込まれない場合に画像の内容を説明します。

4. tabindex 属性
<a href="/" tabindex="0">ホーム</a>

tabindex 属性は、キーボードでのナビゲーションを支援します。これにより、キーボードだけで操作するユーザーが重要な要素にアクセスできるようになります。
tabindex=”0″： HTMLで使用される属性で、要素が通常のタブキーによるナビゲーションの順序に従ってフォーカスされることを示します。
tabindex=”1″：この要素がキーボードのタブキーでアクセス可能な最初の要素であることを示します。
tabindex=”-1″：アクセシビリティを高めたいが、通常のタブナビゲーションには含めたくない要素に対して使用されます。

5. <noscript> タグ
<noscript style="background-color:rgb(255,255,255)"><p>このページではjavascriptを使用しています。</p></noscript>

JavaScriptが無効な場合、<noscript> タグ内のメッセージが表示されます。これにより、JavaScriptが使えないユーザーにも重要な情報が伝わるようになっています。

6. role 属性
<footer class="l-footer" role="contentinfo">

role=”” を指定し、スクリーンリーダーにその役割を伝えています。

あわせて読みたい
WAI-ARIA ロール - ARIA | MDN ARIA ロールは、コンテンツに意味づけ行い、スクリーンリーダーなどのツールが、その種類のオブジェクトに対するユーザーの期待に一致する方法でオブジェクトを表示し、操...

ウェブアクセシビリティに配慮したHTMLテンプレートとは？

  1. 正しいHTML構造：
    • header, nav, main, footer などのセマンティックHTML要素を使用して、構造を明確にする。
    • 見出しは h1 ～ h6 を適切に階層化して使用する。
  2. 代替テキスト (alt テキスト)：
    • 画像に対して説明的な alt 属性を提供し、視覚障害者がスクリーンリーダーを使ってコンテンツを理解できるようにする。
  3. キーボードナビゲーションのサポート：
    • すべてのインタラクティブ要素（リンク、ボタン、フォーム）はキーボードで操作可能にする（tabindex 属性の適切な使用など）。
    • キーボードフォーカスがどこにあるかを視覚的に示す。
  4. ARIA属性：
    • 特定の要素に対してアクセシビリティのサポートを強化するため、aria-label や aria-labelledby, role 属性を適切に使用する。
<!doctype html>
<html lang="ja-jp">
   <head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# website: http://ogp.me/ns/website#">
      <meta charset="UTF-8">
      <meta name="format-detection" content="telephone=no">
      <title>{{pageTitle}}</title>
      <meta name="description" content="{{pageDescription}}">
      <link rel="icon" href="{{favicon.ico}}" sizes="any">
      <link rel="icon" type="image/svg+xml" href="{{favicon.svg}}">
      <link rel="apple-touch-icon" href="{{appleTouchIcon}}">
      <link rel="icon" type="image/png" sizes="192x192" href="{{icon192}}">
      <link rel="icon" type="image/png" sizes="512x512" href="{{icon512}}">
      <meta property="og:image" content="{{ogImage}}">
      <link rel="canonical" href="{{canonicalUrl}}">
      <meta property="og:url" content="{{ogUrl}}">
      <meta property="og:description" content="{{ogDescription}}">
      <meta property="og:title" content="{{ogTitle}}">
      <meta name="twitter:description" content="{{twitterDescription}}">
      <meta name="twitter:title" content="{{twitterTitle}}">
      <meta name="twitter:card" content="summary">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <meta http-equiv="content-language" content="ja-jp">
      <!-- More styles and scripts -->
   </head>
   <body>
      <div class="l-base l-base--top" id="base">
         <div class="l-base__head">
            <a class="c-skipLink visually-hidden" href="#content">本文へ移動する</a>
            <header class="l-header" id="js-header">
               <div class="l-header__logo">
                  <a class="c-logo" href="/" aria-label="{{companyName}}">
                     <!-- Logo SVG -->
                  </a>
               </div>
               <div class="l-header__toggle">
                  <button class="c-navToggle" id="js-navOpen" aria-label="ナビゲーションを表示する" type="button" aria-controls="js-navTarget" aria-expanded="true">
                  <span></span>
                  <span></span>
                  <span></span>
                  </button>
               </div>
               <div class="l-header__nav" id="js-navTarget">
                  <nav class="p-navGlobal" id="js-navGlobal" aria-label="グローバルメニュー">
                     <ul class="p-navGlobal__list">
                        <li class="p-navGlobal__list__item">
                           <a href="{{url}}">メニュー</a>
                        </li>
                     </ul>
                  </nav>
                  <button class="c-navToggle is-open" id="js-navClose" aria-label="ナビゲーションを閉じる" type="button" aria-controls="js-navTarget" aria-expanded="true">
                  <span></span>
                  <span></span>
                  <span></span>
                  </button>
               </div>
            </header>
         </div>
         <div class="l-base__body">
            <main class="l-main l-main--top" id="content">
               <div class="l-main__body">
                  <section class="p-mainVisual" id="js-mainVisual">
                     <h1 class="p-mainVisual__head" aria-label="ここにキャッチフレーズを入力">
                        ここにテキストを入力
                     </h1>
                  </section>
                  <section class="p-homeNews">
                     <div class="p-homeNews__head">
                        <h2 class="p-homeHeading">
                           お知らせ
                        </h2>
                        <!-- /.p-homeHeading -->
                     </div>
                     <div class="p-homeNews__list">
                        <ul class="p-newsList">
                           <!-- ニュース項目のテンプレート -->
                           <li class="p-newsList__item">
                              <article class="p-newsItem">
                                 <time class="p-newsItem__date" datetime="YYYY-MM-DD" aria-label="YYYY年MM月DD日">
                                 YYYY.MM.DD
                                 </time>
                                 <ul class="p-newsItem__tags">
                                    <li class="p-newsItem__tags__item">お知らせ</li>
                                 </ul>
                                 <p class="p-newsItem__ttl">
                                    <a href="リンク先URL">ニュースタイトル</a>
                                 </p>
                              </article>
                              <!-- /.p-newsItem -->
                           </li>
                           <!-- /.p-newsList__item -->
                           <!-- ここに他のニュース項目を追加 -->
                        </ul>
                        <!-- /.p-newsList -->
                     </div>
                     <div class="p-homeNews__more">
                        <a class="c-postMoreLink c-postMoreLink--list" href="{{url}}" aria-label="お知らせ一覧を見る">
                        <span class="i-icon i-icon--list material-symbols-outlined" aria-hidden="true"></span>一覧を見る
                        </a>
                        <!-- /.c-postMoreLink -->
                     </div>
                  </section>
                  <!-- /.p-homeNews -->
                  <!-- 他のセクションも同様に追加 -->
               </div>
            </main>
         </div>
         <div class="l-base__foot">
            <footer class="l-footer">
               <div class="l-footer__return">
                  <a class="c-returnBtn" href="#base">
                  <span class="sr-only">ページトップへ戻る</span>
                  <span class="i-icon i-icon--keyboard_arrow_up material-symbols-outlined" aria-hidden="true"></span>
                  </a>
               </div>
               <div class="l-footer__info">
                  <a class="c-logo" href="/" aria-label="{{companyName}}">
                     <svg class="i-logo" width="120" height="55" viewbox="0 0 122 56">
                        <title>{{companyName}}</title>
                     </svg>
                  </a>
                  <address class="p-footAddress">
                     <dl class="p-footAddress__item">
                        <dt class="p-footAddress__name">オフィス名</dt>
                        <dd class="p-footAddress__address"><span>住所1</span> <span>詳細住所</span></dd>
                        <dt class="p-footAddress__name">オフィス名</dt>
                        <dd class="p-footAddress__address"><span>住所2</span> <span>詳細住所</span></dd>
                     </dl>
                  </address>
                  <a class="p-pMarkBanner" href="https://privacymark.jp/" target="_blank">
                     <figure class="p-pMarkBanner__logo">
                        <img src="{{privacyMarkImageUrl}}" alt="プライバシーマーク" width="100" height="100" loading="lazy">
                     </figure>
                     <p class="p-pMarkBanner__label">プライバシーマーク認定</p>
                     <p class="p-pMarkBanner__text">個人情報について適切な保護措置を講じる体制を整備しています。</p>
                  </a>
               </div>
               <div class="l-footer__nav">
                  <div class="p-footNav">
                     <ul class="p-footNav__row">
                        <li class="p-footNav__item">
                           <a class="p-footNav__link" href="リンク先URL">サービス1</a>
                           <ul class="p-footNav__child">
                              <li class="p-footNav__child__item"><a class="p-footNav__child__link" href="リンク先URL">サービス1-1</a></li>
                              <li class="p-footNav__child__item"><a class="p-footNav__child__link" href="リンク先URL">サービス1-2</a></li>
                              <!-- 他のサービス -->
                           </ul>
                        </li>
                     </ul>
                  </div>
               </div>
               <div class="l-footer__copy">
                  <small class="c-copyright" lang="en">
                  <span>© {{companyName}}</span>
                  </small>
               </div>
            </footer>
         </div>
      </div>
   </body>
</html>

l-: 「layout」の略
ページ全体の構造や配置を表すために使用

c-: 「component」の略
コンポーネント（特定の機能を持つ独立した部品）としてスタイルが統一されていて、再利用可能な部品を表すために使用

p-: 「parts」の略
パーツに関するスタイルを表すために使用

アウトプット 技術系
この記事をシェアする
  • URLをコピーしました！

この記事を書いた人

danのアバター dan

Webコーダーです。
自分は飽き性だから、学び続けることができるWeb制作は刺激も多く好きです。
JavaScriptは何度も嫌になったけど、この道を選択して良かったと思っています。
この記事が、悩みの解決の糸口や新しい出会いになりましたら幸いです。

この著者の記事一覧へ
目次