【20行】2024年のWeb担当必見のウェブアクセシビリティ対応！javascriptとcssでページの文字サイズを大きくするボタンをGoogleタグマネージャーで設置する

2024年4月障害者差別解消法の改正法が施行されて３ヶ月

その中でウェブ担当者が意識しなければいけないのが、ウェブページの文字サイズやコントラストを利用者判断で選択できるようにしなくてはいけないという法律が施行されました。
これによって大規模事業者などのホームページは文字サイズの変更などの対応が求められます。
とはいえ、既存のホームページが1,000ページや10,000ページなどあるウェブサイトの管理者にとって、それらページを１枚１枚訂正していたら死ねるのは確定です。
そこで今回、ウェブサイトに記事本文のpタグの文字サイズを1.5倍にするボタンを設置することにしました。

今回、Googleタグマネージャー協力の下、ウェブページの左上に本文の文字サイズを一網打尽で拡大化するボタンを設置しました。
文字小さいなと思った方はこのボタンをクリックすると本文の文字に限り、自体が大きくなるというボタンです。
動作が気になる方はボタンをクリックしてみましょう。

肝心なのはどうやって動かしているんだ？ということですので、そちらを詳しく解説していきます

1000ページもウェブページがあったら、その1000ページのすべての文字サイズを手作業で変えていったら日が暮れます。
そこでウェブページの本文を表す

var elements = document.querySelectorAll('.entry-content.hatenablog-entry');

という要素に限り文字列サイズを変更できるボタンを設置していきます。
そしてそのボタンにQuerySelectorというCSSの機能を使って、特定の文字列を拡大します。
まずCSSというのはContentStyleSheetの略で、ウェブページの背景の色や文字の大きさ、ページの挙動全般を設定してくれるファイルのことです。
エンジニア向けの解説ですので素人目にもわかりやすく説明します。

ウェブサイトの文字列一つ一つの文字サイズを変えることは、ぶどうの房についている実の種を取るようなものです

小さい子供が種ありのぶどうを食べるときにお母さんが喉に詰まらせないように、ぶどうの実から１つ１つから種を抜いていたら死にます。
ぶどうの実は何個あるんだ？って話です。
だったら最初から種無しぶどうを買ってくればいいじゃないか？って話です。

ウェブページも同様で文字サイズを変更するボタンを１ページや２ページに設置するのは楽です。
ですが10,000ページもあるウェブサイトの文字を一つ一つ変更していたら死ぬほど大変です。
そこでプログラミング（javascript）を使って、全ページの文字サイズを変更できるように手を加えていきます。

そこで今回使うのがGoogleタグマネージャーというツール

その名の通りタグを管理するツールなんですが、一般人だとそこまでこのツールのありがたみはないです。
このツールは
ウェブページを大量に持っている個人や、様々なブランドを保有している企業のウェブ担当者が使うツールです。
１回設定をすれば、その設定が全ページに反映されるという点が非常によいのです。

今回の目的は全ウェブページの文字サイズを可変にするボタンを設置します

前述の法律のせいで、ウェブページにアクセシビリティを担保しなければいけませんからね。
高齢者でも文字が読めるように文字サイズを変更できるボタンを設置していきましょう。
でもウェブページの文字サイズを一括で変えるなんてどうすれば？？

javascriptのQuerySelectorという機能を使って、ウェブサイト内の特定のパーツ部分の文字サイズを変えましょう

QuerySelectorという意味不明な言葉が出てきましたので、簡単に言うとプログラミング言語の部品の指定の方法です。
まだわからない人がいると思うので、カーナビを考えてみましょう。
あなたがカーナビで目的地を入れるとときに住所、電話番号、緯度経度などを入力すると思います。

人間は「京都港区芝公園４丁目２−８」に行って、言われたら移動できます。
でも「北緯35度39分31秒東経139度44分44秒 / 北緯35.65861度東経139.74556度座標: 北緯35度39分31秒東経139度44分44秒 / 北緯35.65861度東経139.74556度」に行ってと言われたら、困るでしょう。
どちらも東京タワーの所在地を表しているのですが、人間は住所という簡潔化した表記でないとわからない一方で、
機械（GPS）はめっちゃ長い緯度経度で説明されても目的地がわかります。

javascriptで特定の文字サイズを変更するコード20行

    <script>
        function increasePFontSize() {
            var elements = document.querySelectorAll('.entry-content.hatenablog-entry');
            elements.forEach(function(element) {
                element.style.fontSize = '1.5em';
            });

            if (elements.length === 0) {
                console.log('entry-content hatenablog-entryクラスが設定された要素が見つかりませんでした。');
            }
        }

        window.onload = function() {
            increasePFontSize();
        };
    </script>

<div class="button-container">
    <button onclick="increasePFontSize()">文字サイズ1.5倍</button>
</div>