トップ > 日記 > アクセシビリティと文字サイズ大中小

アクセシビリティと文字サイズ大中小

日記

追記：この投稿の続きは、2014-07-31 - ミショニポーにあります

アクセシビリティサイトの、文字サイズの大中小は、javascriptが定番のようですが、IE6などの古いブラウザをサポートしようとしなければ、ほかにもいろいろ方法はありそうです。


ちょっとトリッキーですが以下のようにすればhtmlだけで文字サイズ大中小は実現できます。（ie9以上)



DEMO




<html lang="ja">
    <head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
        <style>
            #large:target{
                font-size:200%;
            }
            #big:target{
                font-size:150%;
            }
            #normal:target{
                font-size:auto;
            }
            li{display:inline-block;}
        </style>
    </head>
    <body>
        <div id="large">
            <div id="big">
                <div id="normal">
                    <ul>
                        <li><a href="#large">特大</a></li>
                        <li><a href="#big">大</a></li>
                        <li><a href="#normal">標準</a></li>
                    </ul>
                    <p>test</p>

                </div>
            </div>
        </div>
    </body>
</html>

文字列の大きさを変更するサンプルですよ

上の特大　大　標準ボタンを押してみてね










PHPが許されるなら、もっと柔軟なやり方がある

以下のような方法をとると、単に文字サイズだけでなく色や背景といったコントロールも出来ます。





DEMO





ファイル名:test.php

<?php
function body_class() {

    if ( isset( $_GET['font'] ) && !empty( $_GET['font'] ) ) {

        switch ( $_GET['font'] ) {
            case 'large' :
                $class = 'large';
                break;
            case 'big' :
                $class = 'big';
                break;
            default:
                $class = 'normal';
                break;
        }
        return $class;
    }
}
?><html lang = "ja">
    <head>
        <meta http-equiv = "content-type" content = "text/html; charset=UTF-8" />
        <style>
            .large{
                font-size:200%;
            }
            .big{
                font-size:150%;
            }
            .normal{
                font-size:auto;
            }
            p{ 
                font-size:1em;
            }
            li{
                display:inline-block;
            }
        </style>
    </head>
    <body class="<?php echo body_class(); ?>">
        <ul>
            <li><a href = "test.php?font=large">特大</a></li>
            <li><a href = "test.php?font=big">大</a></li>
            <li><a href = "test.php?font=normal">標準</a></li>
        </ul>
        <p>test</p>
    </body>
</html>

私の　素朴な疑問


目の悪い人は、この大中小ボタンを、どうやって見つけるんだろう？



こうすれば見つけられるっていう方法や、見つける事を補助する実装ってあるんですか？


※私の作っている　WordPressのテーマ　Raindropsでどうしても文字サイズ大中小の機能を実装したいときにはこちらを参照してみてください

memo:

TOP