Javascriptで文字サイズを大・中・小に変更する方法

WEB制作、マーケティングに関する情報をお届けします。

Javascriptで文字サイズを大・中・小に変更する方法

2024.11.19

カテゴリ：WEB制作

タグ：

※当サイトはアフィリエイト広告を利用しています。

2024年4月の障害者差別解消法の改正から企業が迫られるWebアクセシビリティへの対応も多くなってきました。
今回は視覚障がい者の方へ向けた文字サイズの変更について紹介します。

視覚障がい者の方へ向けたアクセシビリティの定義付けであるWCAG2.2では以下のように定められています。

テキストは技術支援なしで200%までサイズ変更できる(キャプションや文字画像を除く)。

今回は標準を16px、中サイズを20px、大サイズを24pxとして変更する方法を紹介します。

デモを見る

コードの紹介

まずはコードを紹介します。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>文字サイズ変更ボタン</title>
  <style>
    /* デフォルトの文字サイズ */
    .text_resize {
      font-size: 16px;
    }

    /* 文字サイズ変更ボタンのデザイン */
    ul {
      list-style: none;
      padding: 0;
    }
    ul li {
      display: inline;
      margin-right: 10px;
      cursor: pointer;
      color: blue;
      text-decoration: underline;
    }
  </style>
</head>
<body>

  <!-- 文字サイズ変更ボタン -->
  <ul>
    <li class="text_size_default">小(標準)</li>
    <li class="text_size_middle">中</li>
    <li class="text_size_big">大</li>
  </ul>

  <!-- 文字サイズが変更される要素 -->
  <p class="text_resize">テキストサイズが変わる</p>
  <p>テキストサイズが変わらない</p>

  <script>
    /**
     * 文字サイズ変更関数
     * - 各サイズボタンのクリックイベントを設定し、選択したサイズに合わせて 'text_resize' クラスの文字サイズを変更する
     */
    document.addEventListener("DOMContentLoaded", function() {
      // 文字サイズを変更する対象の要素を取得
      const textResizeElements = document.querySelectorAll('.text_resize');

      // 「小(標準)」ボタンのクリックイベント
      document.querySelector('.text_size_default').addEventListener('click', function() {
        textResizeElements.forEach(element => {
          element.style.fontSize = '16px'; // 標準の文字サイズに変更
        });
      });

      // 「中」ボタンのクリックイベント
      document.querySelector('.text_size_middle').addEventListener('click', function() {
        textResizeElements.forEach(element => {
          element.style.fontSize = '20px'; // 中サイズに変更
        });
      });

      // 「大」ボタンのクリックイベント
      document.querySelector('.text_size_big').addEventListener('click', function() {
        textResizeElements.forEach(element => {
          element.style.fontSize = '24px'; // 大サイズに変更
        });
      });
    });
  </script>
</body>
</html>

コードを解説

CSSは割愛します。

HTMLを解説

細かい部分は割愛します。
以下は切り替えボタンで、大中小のそれぞれにクラス名を付与して文字サイズのハンドリングに使用します。

<ul>
  <li class="text_size_default">小(標準)</li>
  <li class="text_size_middle">中</li>
  <li class="text_size_big">大</li>
</ul>

テキストを動的に変更させる要素にはクラス名『text_resize』を付与します。

<p class="text_resize">テキストサイズが変わる</p>
<p>テキストサイズが変わらない</p>

Javascriptを解説

ページ読み込み時に実行させます。

document.addEventListener("DOMContentLoaded", function() {
});

文字変更をさせる要素のクラス名を取得します。

const textResizeElements = document.querySelectorAll('.text_resize');

「小(標準)」ボタンのクリックした際の処理を書きます。『document.querySelector(‘.text_size_default’).addEventListener(‘click’, function() {});』でボタン小をクリックした際に実行させます。『textResizeElements.forEach(element => {});』で『text_resize』が振ってあるクラス名全てを対象に実行します。『element.style.fontSize = ’16px’;』でcssのフォントサイズを設定します。

document.querySelector('.text_size_default').addEventListener('click', function() {
  textResizeElements.forEach(element => {
    element.style.fontSize = '16px'; // 標準の文字サイズに変更
  });
});

あとは、中・大サイズも同様に処理を書いていきます。
・中サイズ

document.querySelector('.text_size_middle').addEventListener('click', function() {
  textResizeElements.forEach(element => {
    element.style.fontSize = '20px';
  });
});

・大サイズ

document.querySelector('.text_size_big').addEventListener('click', function() {
  textResizeElements.forEach(element => {
    element.style.fontSize = '24px';
  });
});

まとめ

以上、Javascriptで文字サイズを大・中・小に変更する方法でした。
今後もアクセシビリティ対応の重要性は増すと予想されますので、今回紹介したコードが役に立つ場面もあるかと思います。ぜひ、ご参考ください。

テラ合同会社(東京都)

テラは2014年に東京都でスタートアップしたホームページ制作会社です。ホームページ制作以外にも広告運用、マーケティング、ブランディング、印刷物など幅広い領域をサポートしています。
コーポレートサイトはこちらをご覧ください。

WEB制作、マーケティングに関する情報をお届けします。