テキストのアクセシビリティ

10.1 アクセシビリティ

アクセシビリティ (accessibility) は、現代のWebデザインにおける重要な部分だよ。これは、障害を持つ人々を含むすべてのユーザーが手軽に ウェブページとやり取りできるようにすることを目的としているんだ。

この目的を達成するための重要なツールの一つがARIA属性 (Accessible Rich Internet Applications) で、 これによってコンテンツがもっと理解しやすく、スクリーンリーダーなどの補助技術にアクセスしやすくなるんだよ。

ARIAって何？

ARIA (Accessible Rich Internet Applications) は、HTML要素のアクセシビリティを向上させるために追加できる特別な属性のセットだよ。 これらの属性は、要素の構造や動作についての追加情報を提供して、補助技術がWebコンテンツをよりよく解釈し、やり取りできるようにしてくれるんだ。

テキストの読みやすさを向上させる主要なARIA属性：

属性 aria-label

aria-label 属性は、スクリーンリーダーが読み取るテキストラベルを要素に提供するために使われるんだ。 この属性は、要素に見えるラベルがないか、もっと詳細な説明が必要な場合に役立つよ。

使用例:

    
      <button aria-label="ダイアログを閉じる">X</button>
    
  

属性 aria-labelledby

aria-labelledby 属性は、id でラベルを使用して、ページ上の他のラベルと要素を関連付けるんだ。 これは既存のラベルと要素を関連付けて、コンテキストや説明を提供するのに便利だよ。

使用例:

    
      <h2 id="section-title">セクションのタイトル</h2>
      <p aria-labelledby="section-title">これはセクションのタイトルに関連するテキストの段落です。</p>
    
  

属性 aria-describedby

aria-describedby 属性は、一つまたは複数の説明が含まれる要素と要素をidで関連付けるんだ。 この属性は、要素に追加情報やコンテキストを提供するのに便利だよ。

使用例:

    
      <input type="text" aria-describedby="input-description">
      <p id="input-description">あなたの名前を入力してください。</p>
    
  

10.2 ロール

属性 role

role 属性は要素の役割を定義し、補助技術に対してこの要素をどう解釈すべきかを指示するんだ。 button、navigation、main、article など多くの役割があるよ。

使用例:

    
      <nav role="navigation">
        <ul>
          <li><a href="#home">ホーム</a></li>
          <li><a href="#about">私たちについて</a></li>
          <li><a href="#contact">連絡先</a></li>
        </ul>
      </nav>
    
  

属性 aria-live

aria-live 属性は動的に更新されるコンテンツに使われるんだよ。これは、要素内のコンテンツが変わったことをスクリーンリーダーに知らせ、その内容を読み上げさせるんだ。値には off、polite、assertive が含まれるよ。

使用例:

    
      <div aria-live="polite">
        <p>ここに重要な情報が表示されます。</p>
      </div>
    
  

属性 aria-hidden

aria-hidden 属性は、補助技術が要素をユーザーにアクセス可能とするかどうかを指示するんだ。 値が true の場合、要素は補助技術から隠され、false の場合、アクセス可能となるよ。

使用例:

    
      <div aria-hidden="true">
        <p>このテキストはスクリーンリーダーから隠されます。</p>
      </div>
    
  

属性 aria-expanded

aria-expanded 属性は、要素が展開されているのか、折りたたまれているのかを示すんだ。これは「アコーディオン」やドロップダウンメニューなどのコントロール要素によく使われるよ。

使用例:

    
      <button aria-expanded="false" aria-controls="menu">メニュー</button>
      <ul id="menu" hidden>
        <li><a href="#item1">アイテム 1</a></li>
        <li><a href="#item2">アイテム 2</a></li>
        <li><a href="#item3">アイテム 3</a></li>
      </ul>
    
  

属性 aria-controls

aria-controls 属性は、現在の要素がどの要素を操作するかを示すんだ。これは、aria-expanded のような属性と組み合わせてインタラクティブなコントロール要素を作るために使われるよ。

使用例:

    
      <button aria-controls="content" aria-expanded="false">表示/非表示</button>
      <div id="content" hidden>
        <p>隠されたコンテンツ。</p>
      </div>
    
  

1

Опрос

テキストの装飾,  15 уровень,  5 лекция

недоступен

テキストの装飾

テキストの装飾

Открыть