SCR34 | Вычисление размера и положения в зависимости от размера текста

Важная информация о методах

См. Раздел «Понимание методов для критериев успеха WCAG» для получения важной информации об использовании этих информационных методов и о том, как они соотносятся с нормативными критериями успеха WCAG 2.0. В разделе «Применимость» объясняется объем метода, а наличие методов для конкретной технологии не означает, что технология может использоваться во всех ситуациях для создания контента, соответствующего WCAG 2.0.

Применимость

Клиентские сценарии (на стороне клиента — браузере).

Этот метод относится к:

Критерий успеха 1.4.4 (изменение размера текста)

Примечание

Этот метод должен сочетаться с другими методами, чтобы соответствовать SC 1.4.4. См. Подробности в разделе Общие сведения о SC 1.4.4.

Критерий успеха 1.4.8 (Визуальная презентация)

Примечание

Этот метод должен сочетаться с другими методами, чтобы соответствовать SC 1.4.8. См. Подробности в разделе Общие сведения о SC 1.4.8.

Примечания по поддержке пользовательского агента и вспомогательных технологий

См. Примечания по поддержке агента пользователя для SCR34.

Описание

Цель этого метода — вычислить размер и положение элементов таким образом, чтобы они соответствовали масштабированию при масштабировании размера текста.

Вот четыре свойства в JavaScript, которые помогают определить размер и положение элементов:

offsetHeight (высота элемента в пикселях)
offsetWidth (ширина элемента в пикселях)
offsetLeft (расстояние элемента слева от его родителя (offsetParent) в пикселях)
offsetTop (расстояние элемента от верха его родителя (offsetParent) в пикселях)

Вычислить высоту и ширину с помощью offsetHeight и offsetWidth просто, но при вычислении левой и верхней позиции объекта как абсолютных значений нам необходимо учитывать родительский элемент.

Приведенная ниже функция calculatePosition() выполняет итерацию по всем родительским узлам элемента, чтобы получить окончательное значение. Функция принимает два параметра:

objElement (имя рассматриваемого элемента)
свойство смещения (offsetLeft или offsetTop)

Пример № 1 — Функция Javascript

function calculatePosition(objElement, strOffset){
   var iOffset = 0;
   if (objElement.offsetParent){
      do{
         iOffset += objElement[strOffset];
         objElement = objElement.offsetParent;
      } while (objElement);
   }
   return iOffset;
}

В следующем примере показано использование указанной выше функции путем выравнивания объекта под опорным объектом на таком же расстоянии слева:

// Получить ссылочный объект
var objReference = document.getElementById('refobject');
// Получить объект для выравнивания
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';

Ресурсы

Ресурсы предназначены только для информационных целей, без какой-либо поддержки.

MSDN: исправляйте коробку вместо того, чтобы думать за ее пределами

Связанные методы

Тесты

Процедура

Откройте страницу, предназначенную для настройки размеров контейнера при изменении размера текста.
Увеличьте размер текста до 200%, используя настройку размера текста в браузере (не функцию масштабирования).
Изучите текст, чтобы убедиться, что размер текстового контейнера отрегулирован в соответствии с размером текста.
Убедитесь, что текст не «обрезан» или не исчез в результате увеличения размера текста.

Ожидаемые результаты

Проверки №3 и №4 верны.

Если это достаточный метод для критерия успеха, неудача этой процедуры тестирования не обязательно означает, что критерий успеха не был удовлетворен каким-либо другим способом, только то, что этот метод не был успешно реализован и не может быть использован для утверждения соответствия.

Информационные ссылки

JavaScript | Как получить ширину элемента?

Стандарт «SCR34: Calculating size and position in a way that scales with text size» — https://www.w3.org/TR/WCAG20-TECHS/SCR34.html