改変可能/Adaptable

Table of Contents

アダプタブル(Adaptable)とは、情報や構造を失うことなく、必要に応じてさまざまな方法で改変可能であることを言います。

情報と関係性

見出し要素

Webページの「ソース」を見ると、コンテンツのフォーマット、コンテンツの目的を説明しています。たとえば、プリンレシピのWebサイトで次のソースがあります。

<h1>プリンのレシピ</h1>

「プリンのレシピ」を囲むタグ<h1></h1>タグのペアは、ページ内の最も重要な見出しであり、他のテキストよりも大きく太字で表示されます。

続いて、「プリンのレシピ」に関係する「プリン」・「カラメルソース」を<h2></h2>で囲み、<h1>タグのサブトピックという意味になります。

このように、コーディングを構造的に正しく使うことが重要です。

なぜ重要か?

スクリーンリーダーはHTMLの構造を読みます。まず<title>を読み、<h1>、<h2>のHTMLタグから見出しを判断します。

  1. 多くのスクリーンリーダーでは、次の見出し / 前の見出しへとジャンプできます。
  2. 多くのスクリーンリーダーでは、すべての見出しの一覧を取り出せます。それらの見出しを、特定のコンテンツを見つけるための手軽な目次のようにも使えます。

したがい、可能な限りHTMLの基本構造を理解したうえで、用意されたHTMLタグを使うようにします。
<div><span>を見出しに使わない、などです。

<h1>プリンのレシピ</h1><!-- タイトル -->
  <h2>プリン</h2><!-- レシピ本体 -->
    <h3>材料</h3> <!-- 材料 -->
      <ul>
       <li>卵</li>
       <li>牛乳</li>
       <li>グラニュー糖</li>
      </ul>
    <h3>作り方</h3><!-- 作り方 -->
      <ol>
       <li>ボウルに卵を割り入れてほぐし、グラニュー糖を加えて混ぜます</li>
       <li>鍋に牛乳を入れて熱し、温まったら沸騰する前に火を止めます</li>
       <li>...</li>
      </ol>
  <h2> カラメルソース</h2><!-- レシピ本体 -->
    <h3> 材料</h3><!-- 材料 -->
      <ul>
       <li>グラニュー糖</li>
       <li>水</li>
       <li>お湯</li>
      </ul>
    <h3> 作り方</h3><!-- レシピ本体 -->
      <ol>
       <li>鍋にグラニュー糖と水を入れて中火にかけ、茶色くなるまで煮詰めます</li>
       <li>火を止め、お湯を加えて混ぜます</li>
       <li>...</li>
      </ol>

※CSSで装飾しています。

フォーム・テーブル要素

Web作成者は、適切なコードを使用して情報を関連付ける必要があります。「名前」と「メールアドレス」の2つのフィールドがあるフォームでは、forid属性が各入力フィールドの属性との関連付けされるように作成します。

ユーザーが入力フィールドのフォーカスを受け取ると、関連するラベルの内容が読み取られます。

例:名前フィールドに入ると、”firstname”と読み上げられ、メールアドレスフィールドに入ると”emailadress”と読み上げます。

<form>
  <label for="firstname">名前</label>
    <input type="text" id="firstname" /></div>
  <label for="emailaddress">メール</label>
    <input type="text" id="emailaddress" />
</form>  

世界の人口の多さを表示するテーブルで、テーブルヘッダーthを使うことにより、中国の順位は1位であることを関連付けます。

<table>
 <tr>
  <th>順位</th>
  <th>国名</th>
  <th>人口</th>
 </tr>
 <tr>
  <td>1</td>
  <td> 中華人民共和国(中国)</td>
  <td>1,433,784</td>
 </tr>
 <tr>
  <td>2</td>
  <td>インド</td>
  <td>1,366,418</td>
 </tr>
 <tr>
  <td>3</td>
  <td>アメリカ</td>
  <td>329,065</td>
 </tr>
</table>
google 広告