この記事は「TECH WOMAN KANSAI Advent Calendar 2023 」 20日目の記事です。

私は、現在所属している会社でWebサイトの修正業務を担当、個人ではWeb制作（コーディング）に携わっています。

2023年はマークアップの奥深さを知る機会が多くあり、より良いマークアップをしていきたいという思いが強くなりました。
Webアクセシビリティに対しての認識も少し変化しました。
どこまでいっても完璧や正解のない世界ですが、「今よりちょっと良くする」ことを意識したいと思っています。

良いマークアップとはなにか？

良いマークアップとは、機械に対しても人間に対しても、意味を持った情報を正しく伝えることと考えます。適切なタグの使用を意識するだけでも、文字をきちんとした「情報」として届けることができます。
その他、SEO対策、サイトの高速化、Webアクセシビリティへの取り組み、CSS設計の考慮などなど・・考えることは多いです。

Webアクセシビリティに対して認識のアップデート

私がコーディングの学習をはじめたのは約2年前。
当時から「Webアクセシビリティ」という言葉をよく目にしていましたが、「障害のある人も使いやすくするための実装」と、なんとなく思っていました。
今年、オンライン参加した「アクセシビリティカンファレンス福岡」で、Webアクセシビリティは0か100ではなく、今より良くするために高めていくものだというお話をお聞きしました。
これまでWebアクセシビリティについては、「ちゃんとわかっていない」という理由で後回しにしていましたが、完璧でなくてもできることから少しずつ取り組んでいけばよいということです！！

Webアクセシビリティに取り組む場合は完璧でなければいけない
アクセシビリティに取り組むときは、完璧でなくてもできることから取り入れれば良い。

マークアップとWebアクセシビリティに取り組むことを切り分けて考えていた
マークアップとWebアクセシビリティは常に隣同士。すべて覚える必要はなく学びながらリンターなどを使ってもよい。

障害者のために取り組むものだと思っていた。
障害者だけではなく、すべての人がアクセスしやすくするために取り組むもの。

自分のコードで具体的な改善

自分のコードを見直し、今よりちょっとよくするために何をどう改善できそうか？頻出の要素をチェックしてみました。

h1要素

h1要素はページにひとつにする。

むやみに多く使うのは当然望ましくないですが、トップページにおいてはロゴ部分にもh1要素を使うことは問題ないという情報もちらほら見かけます。
改めて自分のコードを見直すと、トップページのみロゴとメインコピー部分にh1を使用していました。

h1要素はページにひとつであることが望ましく自然であるとされているため、今後はページにひとつを意識していきたいと思っています。

img要素

Webサイトの中でたくさん使用されるimg要素。

<img src="images/flower.jpg" alt="赤いバラの花束" width="400" height="200" decoding="async" loading="lazy">

alt属性を空にしない。alt属性を設定し、何らかの原因で画像が読み込まれなかったときや、スクリーンリーダーのユーザーに対して何の画像が設定されているかがわかるようにします。
※装飾として使用している場合の画像に対しては空でよいとされています。
レイアウトシフトを防ぐためwidth属性とheight属性の指定をします。
decoding属性・・"async"を指定すると、画像を非同期で読み込みます。※サポートされていないブラウザあり。
loading属性・・"lazy"を指定すると画像の読み込みを遅延します。

私は去年まで、widthとheightはCSSでアスペクト比を設定すればOKだと思っていましたが、HTMLとCSSでは役割が異なり、HTMLのほうではレイアウトシフト防止のための設定、CSSでは実際の表示のための設定となります。
decoding属性とdecoding属性については、パフォーマンス向上につながる場合がありますが、使用する場所を考える必要があります。

参考サイト↓
decoding="async" について詳しく調べてみる
 画像の遅延読み込みで表示高速化！loading=”lazy”とdecoding=”async”

nav要素

メインのナビゲーションの場合

<nav class="nav" aria-label="メイン">
    <ul class="nav__items">
        <li class="nav__item">
          <a href="#" class="nav__link">メニュー1</a>
        </li>
        <li class="nav__item">
          <a href="#" class="nav__link">メニュー2</a>
        </li>
        <li class="nav__item">
          <a href="#" class="nav__link">メニュー3</a>
        </li>
    </ul>
</nav>

aria-label属性・・ボタンに関する説明のためのラベルです。視覚障害者やスクリーンリーダーのユーザーに役に立ちます。
<nav>要素を使うことで、role属性の"navigation"が自動で付与されるため、role属性は改めて書く必要はありません。

これまで、aria-label属性をつけることも、関連のことを学んでから・・などと後回しにしていましたが、きちんとつけていきたいと思います。

button要素

送信ボタンではないbutton要素

<button type="button" class="button" aria-expanded="false" aria-label="メニューを開く">
    <span></span>
    <span></span>
    <span></span>
</button>

type属性・・"button"を指定することで、ボタンがフォーム内で送信ボタンとして動作するのではなく、単なるボタンとして機能します。なにも指定しない場合、"submit"が設定されています。
aria-expanded属性・・ボタンの初期状態が閉じられていることを示す属性です。実際の機能に合わせて true または false に変更されるようJavaScriptで指定します。
aria-label属性・・ボタンに関する説明のためのラベルです。視覚障害者やスクリーンリーダーのユーザーに役に立ちます。

送信ボタンとしてのbutton要素

<button type="submit" class="button">送信する</button>

<button>要素を使用する場合はaria-label属性は必要ありません。
装飾などで疑似要素を使いたい場合はbutton要素を使用します。

私は<button>要素がデフォルトで"submit"が設定されていることを知らずに使用していました。<button>要素を使うときは、どんな役割をもったボタンなのかの設定が必要になります。

input要素

テキスト

<label for="name">お名前（必須）</label>
    <input type="text" name="name" id="name">

チェックボックス

<label for="checkbox">
    <input type="checkbox" id="checkbox" name="checkbox" value="チェックボックス1" checked>チェックボックス1
    <input type="checkbox" id="checkbox" name="checkbox" value="チェックボックス2">チェックボックス2
</label>

label要素のfor属性とinput要素のid属性を合わせることでこれらを紐づけします。スクリーンリーダーのユーザーが、何のための入力なのかを知ることができます。

私は、実際に送信されるときに必要になるname属性やvalue属性を意識していて、for属性とid属性を合わせることにあまり意識が向いていなかったため、意識していきたい部分です。

送信ボタンとしてのinput要素

<input type="submit" value="送信する" aria-label="フォームを送信する">

aria-label属性・・送信ボタンをinput要素で作る場は、ボタンに関する説明のためのラベルが必要になります。

できることからはじめる

頻出の要素だけでも、一つ一つを深掘り、わかりやすく説明するのは難しいですね。
Webアクセシビリティの観点からが多くなってしまいましたが、すべてがその観点からでなかったり、整理しきれていない部分などお許しください・・。（一つ一つが奥深すぎて簡単に書ける内容ではないことを痛感しました。）
改めて考えると、これまでWebアクセシビリティについて、積極的に知ろうとしていなかったかもしれません。反省です。
今後は「今よりちょっと良くする」を意識し、良いマークアップをしていきたいと思います！！

参考文献

所属コミュニティについて

女性エンジニア限定コミュニティ「TECH WOMAN KANSAI」についてのご案内。

定期的に以下のようなイベントを開催しております。

オンラインもくもく会
オフラインイベント
Qiitaでアウトプット記事の発信

詳細はconnpassのコミュニティページをご覧いただき、興味をお持ちの方はイベント等お気軽にご参加ください！！