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: исправляйте коробку вместо того, чтобы думать за ее пределами

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

 

Тесты

Процедура

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

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

  1. Проверки №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

Поделись записью