Как использовать прокси для тестирования доступности веб-сайтов

Понимание роли прокси-серверов в тестировании доступности веб-сайтов

Подобно искусству кинцуги, которое выявляет, а не скрывает недостатки, тестирование доступности веб-сайтов направлено на выявление барьеров, чтобы цифровой опыт стал доступным для всех. Прокси-серверы, выступая в качестве посредников, позволяют тестировщикам воспринимать веб-сайт через разные призмы — географические, технологические и перцептивные, — отражая буддийскую концепцию «сёсин» (初心), или ума новичка: открытого, любознательного и свободного от предубеждений.

---

Типы прокси, используемых при тестировании доступности

Тип прокси	Основной вариант использования	Преимущества	Недостатки
HTTP/S-прокси	Проверка и изменение веб-трафика, тестирование альтернативной доставки контента	Гибкий, поддерживает SSL-дешифрование	Конфигурация может быть сложной
SOCKS прокси	Маршрутизировать весь трафик на уровне TCP	Не зависит от протокола, работает со многими приложениями	Ограниченная проверка содержимого
Обратный прокси-сервер	Моделирование изменений на стороне сервера, проверка доступности в источнике	Централизованное управление, кэширование	Не подходит для клиентских скриптов.
Прокси-сервер доступности	Специализируется на имитации вспомогательных технологий (например, программ чтения с экрана)	Ориентирован на сценарии A11Y	Меньше доступных инструментов

---

Зачем использовать прокси для тестирования доступности?

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

• Тестирование альтернативной доставки текста для программ чтения с экрана
• Моделирование медленных или ненадежных соединений (имитация реальных ограничений пользователя)
• Перехват и изменение запросов для оценки реакции на вспомогательные технологии
• Доступ к геоограниченному контенту для проверки локализации и языковой поддержки

---

Настройка HTTP-прокси для тестирования доступности

Пример: использование Скрипач

1. Установить Fiddler: Загрузите и установите Fiddler с официального сайта.
2. Настроить браузер/устройство: Настройте прокси-сервер вашего браузера на 127.0.0.1:8888 (порт Fiddler по умолчанию).
3. Захват трафика: Откройте Fiddler и начните захват. Все HTTP/S-запросы будут проходить через Fiddler.
4. Запросы на изменение: используйте функцию «Автоответчик» Fiddler для замены изображений, CSS или скриптов альтернативными вариантами, имитирующими поведение вспомогательных технологий.
5. Тестовый вывод: Откройте свой сайт в браузере, используя программы чтения с экрана, такие как НВДА или ЧЕЛЮСТИ чтобы проверить, как изменения влияют на доступность.

Пример кода: FiddlerScript для замены изображений с ALT-текстом

import System; import Fiddler; class Handlers { public static function OnBeforeResponse(oSession: Session) { if (oSession.uriContains("example.com/image.jpg")) { oSession.utilReplaceInResponse("

---

Моделирование вспомогательных технологий с помощью прокси-серверов доступности

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

• топор-прокси: Интегрируется Сердцевина топора Модуль доступности встроен в прокси-сервер. Он перехватывает HTTP-запросы, внедряет Axe в ответы и возвращает автоматические отчёты о доступности.
• Настроить axe-proxy:
  1. Установите Node.js.
  2. npm install -g axe-proxy
  3. Бегать: axe-proxy --port 8080
  4. Установить прокси-сервер браузера/системы на локальный хост:8080
  5. Просмотрите свой сайт; ознакомьтесь с нарушениями доступности, о которых сообщил прокси-сервер.

---

Тестирование медленных соединений и откатов

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

• С использованием Чарльз Прокси:
  1. Открой Чарльза.
  2. Перейдите в раздел Прокси > Настройки управления дроссельной заслонкой.
  3. Включите регулирование, выберите скорость (например, 56 кбит/с).
  4. Наблюдайте за загрузкой сайта и резервным содержимым, особенно изображениями и скриптами.

---

Перехват и изменение HTTP-ответов

Чтобы поразмыслить о непостоянстве, проверьте, как ваш сайт обрабатывает отсутствующие, измененные или ошибочные ресурсы:

• С помощью Fiddler или Charles используйте инструменты перезаписи для:
  • Удалить или повредить атрибуты ARIA
  • Блокировка CSS для проверки видимости фокуса
  • Заменить текст на альтернативный язык

Пример: удаление атрибутов ARIA с помощью Mitmproxy

из mitmproxy import http def response(flow: http.HTTPFlow) -> None: если b'aria-label' в flow.response.content: flow.response.content = flow.response.content.replace(b'aria-label', b'')

• Сохранить как remove_aria.py
• Бегать: mitmproxy -s remove_aria.py

---

Сравнение прокси для тестирования доступности

Инструмент	Платформа	Уникальные особенности	Лучший вариант использования	Связь
Скрипач	Windows/Mac	Автоответчик, Инспекторы	Манипулирование HTTP/S-трафиком	https://www.telerik.com/fiddler
Чарльз Прокси	Windows/Mac	Регулирование, локальная карта	Моделирование медленных сетей, офлайн-тесты	https://www.charlesproxy.com/
mitmproxy	Кроссплатформенный	Скриптинг Python, CLI	Манипулирование пользовательскими ответами	https://mitmproxy.org/
топор-прокси	Node.js	Автоматизированный анализ a11y	Автоматизированное тестирование доступности	https://github.com/dequelabs/axe-proxy

---

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

1. Тестирование резервных копий ALT-изображений

   • Используйте Fiddler AutoResponder для удаления изображений.
   • Проверьте с помощью программ чтения с экрана, чтобы убедиться, что произносится описательный ALT.

2. Проверка навигации с помощью клавиатуры

   • С помощью Charles заблокируйте CSS, чтобы отобразить порядок вкладок и стили фокуса.
   • Вручную перемещайтесь по интерфейсу, чтобы обеспечить логическую последовательность.

3. Язык и локализация

   • Используйте mitmproxy для замены текстовых узлов альтернативными языками.
   • Проверяйте языковые атрибуты и объявления с помощью программ чтения с экрана.

4. Тестирование на предмет неправильного использования ARIA

   • Перехват ответов для удаления или изменения ролей и свойств ARIA.
   • Наблюдайте изменения в обратной связи от вспомогательных технологий.

---

Культурное понимание: путь постоянного совершенствования

В японском искусстве «кайдзен» означает постоянное совершенствование. Доступность веб-сайтов, подобно кропотливому формированию бонсай, — это непрерывный процесс. Используя прокси-серверы, вы адаптируете свой сайт к различным способам восприятия мира пользователями, совершенствуя не только техническую структуру, но и саму суть веб-сайта.

Для дальнейшего чтения см.:
– WebAIM: Введение в веб-доступность
– Тестирование доступности W3C
– Университет Деке: Инструменты тестирования доступности

Подобно мудрому садовнику, пусть ваши инструменты тестирования будут разнообразными, ваши методы — продуманными, а ваша приверженность инклюзивности — непоколебимой.