【アクセシビリティ対策】文字サイズを変更できるJS

文字サイズを変更できるJSを備忘録として残しておきます。
ワードプレスだったらプラグインもあるし。jQueryプラグインもあるのでいろいろやり方があると思いますが
私は下記のやり方で実装しました。

まずはデモから！
下記「小中大」のボタンを押すと文字サイズが変更になると思います。

HTMLは割とシンプルでこんな感じです。

文字サイズの変更を実装する際のポイントとしてはサイズを変更したい文字についてはem指定でCSSを作成すること。
変更（適用）したくない文字は、pxで指定しておけば大中小クリックしたときもその部分だけはサイズが
変わりません。

1
2
3
4
5
6
7
8
9
10
11
12
<body>
<div id="fontSize" class="flexbox fw">
<p>文字サイズ</p>
<ul class="flexbox notranslate">
  <li class="small current">小</li>
  <li class="middle">中</li>
  <li class="large">大</li>
</ul>
</div>
   
  <p>ここにテキストを表示します。文字サイズが変わります。</p>
</body>

SCSSは見せ方を好きなように書き換えてください。
JS部分はID等々と紐づいているので、CSSを変えてもそんなに影響しません。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
.flexbox {
  display: flex;
}
 
.fw {
  flex-wrap: wrap;
}
 
ul {
  margin: 0;
  padding: 0;
  li {
    list-style: none;
  }
}
 
#fontSize {
    width: 120px;
  ul {
    width: 110px;
    height: 35px;
    margin: 0 auto;
    justify-content: center;
    border: 1px solid #dddddd;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    overflow: hidden;
    li {
      width: 35px;
      min-width: inherit;
      text-align: center;
      line-height: 28px;
      height: 35px;
      align-self: center;
      line-height: 35px;
      position: relative;
      cursor: pointer;
      border-left: 1px solid #dddddd;
      font-weight: bold;
      &:first-of-type {
         border: none;
      }
    }
  }
    p {
       text-align: center;
       font-weight: 600;
       font-size: .87em;
       display: block;
       width: 100%;
       margin: 0 0 5px 0;}
}

JSはこんな感じ。
body内のものは全部フォントサイズ書き換えるよーという感じです。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<script>
$(function(){
    var key = "font";
    var data = localStorage.getItem(key);
    if(data == "large"){
        $("body").css("fontSize","1.4em");
    }else if(data == "middle"){
        $("body").css("fontSize","1.2em");
    }
    $('#fontSize ul li').on('click keypress', function(e) {
        $("#fontSize ul li").removeClass("current");
        var fontCss = $(this).attr("class");
        $(this).addClass("current");
        if(fontCss == "large"){
          $("body").css("fontSize","1.4em");
          data = "large";
          localStorage.setItem(key,data);
        }else if(fontCss == "middle"){
          $("body").css("fontSize","1.2em");
          data = "middle";
          localStorage.setItem(key,data);
        }else{
          $("body").css("fontSize","1em");
          data = "small";
          localStorage.setItem(key,data);
        }
     });
     $('#fontSize ul li.'+data).trigger('click');
});
</script>

以上！みなさんも試してみてくださいね。

Share: