WCAG 2.0 実装方法集

メインコンテンツへスキップ

-

SCR34: テキストサイズに応じて拡大するように、サイズ及びポジションを定める

適用(対象)

クライアントサイド・スクリプティング

これは、次の達成基準に関連する実装方法である:

ユーザーエージェント及び支援技術によるサポート

サイズ及びポジションを定めることは複雑であり、異なるブラウザは異なる結果をだすことになる。これはCSSスタイリングでpadding、 margins及びwidthを一つのオブジェクトに対して組み合わせて使用したとき、又はオフセット値及び単純な値、例えばoffsetWidthとwidthを組合せて使用したときに起こりうる。 これらのうちのいくつかはズームに対して異なる動きをする。 Internet Explorer 6及びそれ以降のバージョンと、IEのそれより前のバージョンとの違いについての説明は、MSDN: Fix the Box Instead of Thinking Outside It(英語)を参照すること。

解説

この実装方法の目的は、文字サイズが縮小・拡大されるのに従って、適切に拡大・縮小するように要素のサイズ及びポジションを定めることである。

ここに要素のサイズとポジションを決めるJavaScriptの4つプロパティがある:

offsetHeightoffsetWidthを用いて高さや幅を定めることは簡単である、しかし、オブジェクトの左とトップの位置を絶対配置の値として定める時、親要素を考える必要がある。下記において、calculatePosition関数は、要素におけるすべての親ノードの最終的な値が決定するまで繰り返されている。 その関数はobjElement(当該の要素の名前)とオフセットプロパティ(offsetLeft又は offsetTop)の2つの引数を取っている。

事例

事例 1

Javascriptの関数:

コード例:


function calculatePosition(objElement, strOffset)
{
    var iOffset = 0;

    if (objElement.offsetParent)
    {
        do 
        {
            iOffset += objElement[strOffset];
            objElement = objElement.offsetParent;
        } while (objElement);
    }

    return iOffset;
}

次の事例は、上の関数がオブジェクトを、参照オブジェクトの下、かつ、左から同じ距離に配置するために用いられていることを示している:

コード例:


// Get a reference object
var objReference = document.getElementById('refobject');
// Get the object to be aligned
var objAlign = document.getElementById('lineup');

objAlign.style.position = 'absolute';
objAlign.style.left = calculatePosition(objReference, 'offsetLeft') + 'px';
objAlign.style.top = calculatePosition(objReference, 'offsetTop') + objReference.offsetHeight + 'px'; 

参考リソース

この参考リソースは、あくまでも情報提供のみが目的であり、推薦などを意味するものではない。

検証

チェックポイント

  1. 文字サイズの変更とともにテキストコンテナのサイズを調整するように設計されているページを開く。

  2. ブラウザの文字サイズ調節を使って200%のサイズまで大きくする。(ズーム機能は使用しない)

  3. テキストコンテナのサイズが文字サイズに合わせて調整される。

  4. 文字サイズを大きくした結果、どの文字も「切り取られ」たり、見えなくなっていたりしない。

判定基準

注意: この実装方法が「達成基準を満たすことのできる実装方法」の一つである場合、このチェックポイントや判定基準を満たしていなければ、それはこの実装方法が正しく用いられていないことを意味するが、必ずしも達成基準を満たしていないことにはならない。場合によっては、別の実装方法によってその達成基準が満たされていることもありうる。

日本語訳における注記:

この文書の正式版は、W3Cサイトで公開されている英語の文書であり、この日本語訳には誤訳が含まれていることもありえます。なお、文中にある「日本語訳における注記」は、W3Cの原文にはないものであり、日本語訳監修者が追記したものです。