Рубрики
Верстальщику Разработка

Паттерны доступности зуммирования изображений

Сегодня функция просмотра увеличенной версии изображения является де-факто стандартом для любого интернет-магазина. Реализация может варьировать, но в принципе все сводится к тому, что пользователь может посмотреть увеличенную версию изображения или в поп-ап окне рядом с превью или же в модальном окне в пределах текущего документа. При этом пользователю доступны такие функции как масштабирование и позиционирование изображения, а также (реже) переход в полноэкранный режим и обратно.

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

В этой статье хотелось бы рассмотреть примеры реализации данного функционала с учетом потребностей всех пользователей. Мы рассмотрим примеры от самого простого (но не самого плохого) и до более сложного с использованием JavaScript и плагинов.

Простой способ: ссылка на большое изображение

Если вы когда-нибудь открывали большой файл изображения с помощью веб-браузера, то, возможно, вы заметили, что вы можете использовать встроенные команды клавиатуры, такие как Ctrl/Cmd + + / — для масштабирования и клавиши со стрелками для позиционирования. То есть, сам браузер уже предлагает нам полностью доступную реализацию.  Это означает, что недоступные пользовательские компоненты масштабирования и позиционирования НЕ должны быть доступны, если пользователь может легко открыть полноразмерную версию файла изображения в своем браузере!

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

  1. Ссылка на полноразмерное изображение должна либо оборачивать изображение, либо размещаться как можно ближе к нему в DOM.
  2. Ссылка должна иметь доступное имя, которое определяет цель ссылки, например «Открыть полноразмерное изображение».
  3. Размеры файла полноразмерного изображения должны быть по крайней мере такими же, как видимые размеры изображения при увеличении, насколько это позволяет настраиваемый компонент масштабирования.
  4. Ссылка на полноразмерное изображение не должна вызывать принудительную загрузку файла изображения на компьютер пользователя.

Основные особенности паттерна компонента зуммирования изображения

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

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

Имейте в виду, что пользователи мобильных устройств, скорее всего, не будут использовать клавиатуру для навигации по странице, а пользователи с ограниченными физическими возможностями могут иметь проблемы с сенсорными жестами (свайпами), а значит с точки зрения удобства использования набор видимых кнопок будет наиболее полезным для большинства пользователей на большинстве устройств. Тем не менее, согласно строгого стандарта соответствия WCAG можно предоставлять только клавиатурные команды без видимых кнопок.

Предоставляя набор специальных кнопок, соблюдайте следующее:

  1. Родительский элемент, содержащий как изображение, так и кнопки управления, должен иметь атрибут role= "region" и aria-label, которая в общем описывает его содержимое, например «изображение с функциями масштабирования и позиционирования».
  2. Для пользователей программ чтения с экрана необходимо предоставить инструкции, чтобы было ясно, что кнопки управляют изображением.
  3. Каждая отдельная кнопка должна быть помечена как <button> с доступным именем, которое определяет ее функцию, например «Сдвинуть вверх» или «Увеличение».
  4. Каждая кнопка должна иметь четкий и видимый индикатор фокуса.

Предоставляя набор команд клавиатуры, соблюдайте следующее:

  1. Оберните изображение и инструкции в общий родительский элемент с атрибутом role="region" и aria-label, который в общем описывает его содержимое, например «изображение с функциями масштабирования и панорамирования».
  2. Должны быть предоставлены наглядные инструкции, объясняющие доступные ключевые команды для всех пользователей. Они могут быть реализованы как смежный текст на странице, доступная всплывающая подсказка или какой-либо другой понятный, видимый механизм.
  3. Обеспечьте хорошо обозначенный фокусируемый элемент, который отслеживает нажатия клавиш и соответствующим образом перемещает изображение.
  4. Индикатор видимого фокуса должен быть предоставлен, когда пользователь сфокусирован на элементе управления, который прослушивает нажатия клавиш, чтобы зрячие пользователи клавиатуры знали, когда можно использовать команды клавиатуры.
  5. Разрешите пользователям использовать интуитивно понятные клавиши, такие как клавиши со стрелками вверх, вниз, влево, вправо, для позиционирования и +/- для масштабирования.

Использование специальных кнопок для контроля масштабирования и перемещения

Дизайн

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

  1. Одна кнопка для каждого действия, доступного для пользователей мыши, например позиционирования в каждом направлении, увеличения или уменьшения масштаба.
    1. Убедитесь, что кнопки постоянно видны.
    2. Для строгого соответствия с WCAG стандартом вы можете скрыть эти кнопки визуально, пока они не получат фокус, хотя пользователям с ограниченными физическими возможностями (особенно на мобильных устройствах) будет сложнее использовать их.
  2. Каждая кнопка должна иметь видимый индикатор фокуса.
  3. Если ваша цель — соответствие WCAG 2.1, то цвета, используемые в каждой кнопке, должны иметь хороший цветовой контраст.

Визуальный дизайн этого подхода может немного отличаться, но общий макет для этих кнопок может выглядеть примерно так:

Пример расположения элементов контроля

Разметка

Родительский элемент

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

Отличный способ указать, что элементы управления и изображение связаны, – обернуть их в родительский контейнер, с атрибутом role="region" и соответствующим атрибутом aria-label, например:

<div role="region" aria-label="изображение с функцией масштабирования и позиционирования">  <!-- другие элементы --></div>

Инструкции

Добавьте к родительскому элементу инструкции только для чтения с экрана в качестве первого дочернего элемента (или как можно ближе к нему), которые объясняют назначение кнопок и их связь с изображением, которым они управляют.

<div role="region" aria-label="изображение с функцией масштабирования и позиционирования">
  <p class="sr-only">Используйте следующие кнопки масштабирования и позиционирования для управления изображением, которое следует за ними.</p>
  <!-- кнопки -->
  <!-- изображение -->
</div>

Кнопки позиционирования и масштабирования

Каждая функция, доступная пользователям мыши, должна сопровождаться элементом <button> с доступным именем, описывающим его назначение. Самый надежный способ сделать это — использовать внутренний текст, предназначенный только для чтения с экрана, но также допустим атрибут aria-label в теге <button>.

<button class="pan-up-button" title="Сместить вверх">
  <span class="fas fa-arrow-up" aria-hidden="true"></span>
  <span class="sr-only">Сместить вверх</span>
</button>

Примечание: атрибут title не является строго обязательным для соответствия WCAG, но он вызывает появление стандартной всплывающей подсказки браузера с текстом, что ценится пользователями с ослабленным зрением!

Использование прямого управления с клавиатуры для масштабирования и позиционирования

Дизайн

Функции масштабирования и позиционирования, которыми можно управлять с помощью прямых команд с клавиатуры, должны иметь следующие элементы дизайна:

  1. Фокусируемый элемент, к которому пользователи клавиатуры могут добраться с помощью клавиши Tab.
  2. Когда фокусируемый элемент сфокусирован, он должен иметь видимый индикатор фокуса.
  3. Должны быть предоставлены инструкции, объясняющие, какие ключевые команды доступны.
    1. Эти инструкции могут быть предоставлены множеством различных способов, например, с помощью наложения, всплывающей подсказки или модального диалогового окна, запускаемого кнопкой с иконкой.
    2. Эти инструкции могут быть скрыты, если фокусируемый элемент не сфокусирован.

Разметка

Родительский элемент

Поскольку для того, чтобы пользователи клавиатуры и программы чтения с экрана знали, какие клавиши нажимать, необходимо предоставить инструкции, нужно четко указать, что эти инструкции относятся к управляемому изображению. Отличный способ указать, что элементы управления и изображение связаны, – обернуть их в родительский контейнер, с атрибутом role="region" и соответствующим атрибутом aria-label, например:

<div role="region" aria-label="изображение с функцией масштабирования и позиционирования">
  <!-- Инструкции -->
  <!-- Картинка -->
</div>

Инструкции

Когда для пользователей предоставляются ключевые команды, они должны быть объяснены с использованием видимого текста, чтобы пользователи клавиатуры и программы чтения с экрана могли понять, как работать с этой функцией. Эти инструкции могут быть постоянно видимыми, видимыми только тогда, когда фокусируемый элемент управления сфокусирован, предоставляться через соседнюю всплывающую подсказку или модальное диалоговое окно или предоставляться через какой-либо другой доступный метод.

<div role="region" aria-label="изображение с функцией масштабирования и позиционирования">
  <p class="sr-only">Следующее изображение имеет функции масштабирования и позиционирования при фокусировке.</p>
  <p class="visible-on-focus">Нажмите клавиши + и - для увеличения, клавиши со стрелками для позиционирования.</p>
  ...
</div>

Фокусируемый элемент управления

Пользователи клавиатуры обычно перемещаются по содержимому страницы с помощью клавиши Tab, переходя к каждому фокусируемому элементу один за другим. Следовательно, чтобы они могли управлять функцией масштабирования/позиционирования изображения, они должны иметь возможность сфокусироваться на каком-либо элементе и понимать, какие ключевые команды доступны. Предоставленные вами инструкции помогут пользователям понять компонент, но вам все равно нужно создать фокусируемый элемент, на который будет попадать фокус клавиатуры. Можно следовать этим рекомендациям:

  • Если изображение НЕ заключено в ссылку или кнопку, сделайте тег <img> доступным для фокусировки, присвоив ему атрибут tabindex="0".
  • Если изображение заключено в ссылку или кнопку, то эту ссылку или кнопку можно использовать в качестве элемента управления. Однако, если вы уже ссылаетесь на полноразмерную версию изображения, вы также можете использовать простой вариант (ссылка на большое изображения)!

Изображение

Помимо атрибута tabindex="0" (если он используется) изображение не требует какой-либо специальной разметки или ARIA. Обычный тег <img> с соответствующим значением атрибута alt будет работать нормально.

  • Если изображение НЕ является ссылкой, тогда атрибут alt должен содержать описание содержимого изображения. Если полное описание невозможно, попробуйте создать как можно более уникальное значение alt, например «{название продукта} — вид сбоку».
  • Если изображение ЯВЛЯЕТСЯ ссылкой, то атрибут alt должен описывать цель этой ссылки. Например, «Открыть полноразмерное изображение». Имейте в виду, что если вы ссылаетесь на полноразмерную версию изображения, вы можете выбрать простой вариант  (ссылка на большое изображения)!

Взаимодействие с компонентом

Мышь

Нет никаких известных требований или ограничений в отношении взаимодействия с мышью. Однако руководство WCAG21 2.1.1 требует, чтобы любая функция, которую может выполнять пользователь мыши (например, масштабирование и позиционирование), также могла выполняться каким-либо образом пользователем клавиатуры.

Touch-устройства

  • Допускаются жесты одним пальцем, например для перетаскивания/позиционирования.
  • У жестов с несколькими пальцами, таких как сжатие двумя пальцами для увеличения, также должна быть альтернатива, для которой требуется только один палец, чтобы соответствовать требованиям WCAG 2.5.1.
  • Например, позволяя пользователям дважды коснуться изображения для увеличения и три раза для уменьшения. Или предоставление видимых кнопок для увеличения и уменьшения.
  • Это НЕ относится к жестам с несколькими пальцами, предоставляемым браузером или операционной системой пользователя, как это может быть на устройствах iOS или Android.

Клавиатура

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

  • Клавиша со стрелкой вверх для позиционирования вверх.
  • Клавиша со стрелкой вниз для позиционирования вниз.
  • Клавиша со стрелкой влево для позиционирования влево.
  • Клавиша со стрелкой вправо для позиционирования вправо.
  • + клавиша для увеличения.
  • - клавиша уменьшения масштаба.

Обратите внимание, что хотя эта схема и отличается от рекомендаций в пункте 2.1.4 руководства WCAG 2.1, она по сути не нарушает ее.

Краткое сравнение доступных плагинов

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

ПлагинОценкаХарактеристики
Basic Zoom от AdobeХорошо
  • Предоставляет как видимые кнопки для масштабирования, так и прямые элементы управления с клавиатуры для позиционирования.
  • Обеспечивает отличное взаимодействие одним пальцем для масштабирования и позиционирования на мобильных устройствах.
  • Инструкции предоставляются пользователям программ чтения с экрана после активации изображения, но они недоступны для зрячих пользователей клавиатуры.
  • У каждого элемента управления есть понятное доступное название и хорошие индикаторы фокусировки.
OpenSeadragonМожно использовать
(с исправлениями)
  • Позволяет использовать выделенные видимые кнопки, прямое управление с клавиатуры или и то, и другое.
  • Специальные кнопки управления по умолчанию недоступны, но API позволяет вам предоставить свои собственные.
  • По умолчанию не предоставляет индикатор фокуса для изображения, поэтому обязательно укажите его самостоятельно.
  • Многие из более продвинутых функций, например наложения, недоступны, и их следует избегать.
  • Не содержит инструкций, объясняющих, какие команды клавиатуры доступны, поэтому многие пользователи не знают об этой функции.
Magic Zoom и Magic Zoom Plus от Magic ToolboxОчень слабая реализация
  • Не предоставляет видимых кнопок или прямого управления с клавиатуры для масштабирования и позиционирования.
  • Практически все интерактивные элементы управления (кнопки со стрелками, иконки, точки слайдов) нельзя использовать с помощью клавиатуры.
  • Ни одна из демонстраций на их веб-сайте не имеет индикаторов фокуса для их интерактивных элементов.
  • Основное изображение во всех их демо связано с полноразмерной версией, но эта ссылка не может быть активирована пользователями клавиатуры, сенсорного экрана или мыши.

2 ответа к “Паттерны доступности зуммирования изображений”

В последней части статьи есть три примера плагинов, и первая либа Basic Zoom от Adobe очень хорошо все делает.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *