• 6 минут чтения

• Инструменты, Доступность

• Поделись Твиттер, Линкедин

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

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

Погнали!

Сначала давайте посмотрим на это в действии, а потом я более подробно расскажу о том, как это работает. Вот работает auto-vo CLI на smashingmagazine.com, чтобы получить весь вывод VoiceOver в виде текста.

$ auto-vo --url https://smashingmagazine.com --limit 200 > output.txt
$ cat output.txt
link Jump to all topics
link Jump to list of all articles
link image Smashing Magazine
list 6 items
link Articles
link Guides 2 of 6
link Books 3 of 6
link Workshops 4 of 6
link Membership 5 of 6
More menu pop up collapsed button 6 of 6
end of list
end of navigation
...(truncated)

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

$ cat output.txt | grep heading
heading level 2 link A Complete Guide To Accessibility Tooling
heading level 2 link Spinning Up Multiple WordPress Sites Locally With DevKinsta
heading level 2 link Smashing Podcast Episode 39 With Addy Osmani: Image Optimization
heading level 2 2 items A SMASHING GUIDE TO Accessible Front-End Components
heading level 2 2 items A SMASHING GUIDE TO CSS Generators & Tools
heading level 2 2 items A SMASHING GUIDE TO Front-End Performance 2021
heading level 4 LATEST POSTS
heading level 1 link When CSS Isn’t Enough: JavaScript Requirements For Accessible Components
heading level 1 link Web Design Done Well: Making Use Of Audio
heading level 1 link Useful Front-End Boilerplates And Starter Kits
heading level 1 link Three Front-End Auditing Tools I Discovered Recently
heading level 1 link Meet :has, A Native CSS Parent Selector (And More)
heading level 1 link From AVIF to WebP: A New Smashing Book By Addy Osmani

Хм! Что-то не так с нашей иерархией заголовков. Мы должны увидеть схему с одним заголовком первого уровня и упорядоченной иерархией после него. Вместо этого мы видим некоторую мешанину уровня 1, уровня 2 и ошибочного уровня 4. Это требует внимания, поскольку влияет на удобство навигации пользователей программ чтения с экрана при навигации по странице.

Вывод программы чтения с экрана в виде текста — это здорово, потому что такой анализ становится намного проще.

Некоторая предыстория

VoiceOver — это средство чтения с экрана в macOS. Средства чтения с экрана позволяют людям читать содержимое приложения вслух, а также взаимодействовать с содержимым. Это означает, что люди со слабым зрением или слепые теоретически могут получить доступ к контенту, включая веб-контент. Однако на практике 98% целевых страниц в Интернете имеют очевидные ошибки, которые можно выявить с помощью автоматизированного тестирования и проверки.

Существует множество инструментов для автоматизированного тестирования и проверки, в том числе AccessLint.com для автоматической проверки кода (раскрытие информации: я создал AccessLint) и Axe, обычное средство автоматизации. Эти инструменты важны и полезны, но они являются лишь частью общей картины. Ручное тестирование не менее, а может быть, и более важно, но требует больше времени и может быть пугающим.

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

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

использование

Предостережение

Прямо сейчас, из-за необходимости включения AppleScript для VoiceOver, для запуска может потребоваться пользовательская конфигурация компьютеров сборки CI.

Сценарий 1: ОК и приемка

Допустим, у меня (разработчика) есть дизайн с синими аннотациями, где дизайнер добавил описания таких вещей, как доступное имя и роль. После создания функции и просмотра разметки в инструментах разработчика Chrome или Firefox я хочу вывести результаты в текстовый файл, чтобы, когда я отмечаю функцию как завершенную, мой менеджер по программному обеспечению мог сравнить вывод программы чтения с экрана со спецификациями дизайна. . Я могу сделать это с помощью CLI auto-vo и вывести результаты в файл или на терминал. Мы видели пример этого ранее в статье:

$ auto-vo --url https://smashingmagazine.com --limit 100

Сценарий 2: Разработка через тестирование

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

$ npm install --save-dev auto-vo
import { run } from 'auto-vo';
import { expect } from 'chai';

describe('loading example.com', async () => {
  it('returns announcements', async () => {
    const options = { url: 'https://www.example.com', limit: 10, until: 'Example' };

    const announcements = await run(options);

    expect(announcements).to.include.members(['Example Domain web content']);
  }).timeout(5000);
});

Под капотом

Auto-VO использует комбинацию сценариев оболочки и AppleScript для управления VoiceOver. Копаясь в приложении VoiceOver, я наткнулся на интерфейс командной строки, который поддерживает запуск VoiceOver из командной строки.

/System/Library/CoreServices/VoiceOver.app/Contents/MacOS/VoiceOverStarter

Затем ряд исполняемых файлов JavaScript управляет инструкциями AppleScript для навигации и захвата объявлений VoiceOver. Например, этот скрипт получает последнюю фразу из объявлений программы чтения с экрана:

function run() {
  const voiceOver = Application('VoiceOver');
  return voiceOver.lastPhrase.content();
}

В заключение

Я хотел бы услышать ваш опыт с auto-vo, и приветствуйте участие в GitHub. Попробуйте и дайте мне знать, как это работает!

(вф, ил)