Недавно мой коллега вдохновил меня на задачу создать живой код для аккордеонного компонента, опираясь на основы: HTML, CSS и Vanilla Javascript. Я решил превратить эту задачу в исследовательский проект, потому что хотел понять, не только как создать гармошку для визуального пользователя, но и для пользователей, которые полагаются на вспомогательные технологии, такие как программы чтения с экрана.

По сути, я хотел учитывать доступность или «A11y» при создании этого компонента.

Я разбил свой исследовательский подход следующим образом:

  1. СОЗДАЙТЕ ОПРЕДЕЛЕНИЕ: Каковы цель и функция компонента "аккордеон" для пользователей и разработчиков? Как аккордеон создал проблемы для пользователей, полагающихся на вспомогательные технологии? Какие проблемы доступности упустили разработчики при написании компонента "аккордеон"?
  2. СОЗДАЙТЕ СЕМАНТИЧЕСКУЮ СТРУКТУРУ HTML. Для хорошей доступности необходимо по возможности полагаться на семантический HTML. Как бы это выглядело?
  3. INCORPORATE WAI-ARIA: Я подумал, что мне нужно будет включить атрибуты WAI-ARIA, чтобы сделать мой аккордеон доступным для программ чтения с экрана, но я не знал, что мне нужно добавить. Зная, что основное правило WAI-ARIA - не использовать его, если вам это не нужно, я хотел создать аккордеон, который основывался бы на нем очень кратко.
  4. ПРИМЕНИТЬ JAVASCRIPT: Все аккордеоны, с которыми я взаимодействовал до сих пор, использовали Javascript для волшебного отображения и скрытия содержимого из DOM. Я предполагал, что буду использовать Javascript, но не был уверен, что это лучший подход для обеспечения доступности? Будет ли лучше использовать аккордеон только для CSS, если некоторые пользователи с ограниченными возможностями отключают Javascript в браузере?
  5. ТЕСТ С ГОЛОСОВАНИЕМ: я хотел быть уверенным, что протестировал все примеры, которые я создал с помощью Voiceover, который я предпочитаю с помощью программы чтения с экрана, поскольку она бесплатна и уже установлена ​​на моем Mac.

Что такое аккордеонный компонент?

Компонент "аккордеон" организует несколько разделов контента по вертикали. У каждого раздела есть заголовок аккордеона, который представляет собой заголовок или вопрос, относящийся к содержанию, встроенному в соответствующую панель аккордеона. Аккордеон дает пользователю свободу решать, какие разделы контента они хотят показать или скрыть.

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

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

Как выстроить смысловую структуру аккордеона?

Семантический HTML - это основа действительно доступной сети.

Сара Суэйдан, разработчик и преподаватель

В фантастическом блоге под названием Чему меня научил год обучения и преподавания доступности разработчик Сара Суейдан подчеркнула фундаментальную важность использования семантического HTML. Почему важен семантический HTML? Элементы HTML описывают контент, который они представляют, и при использовании правильных элементов контент вашего документа будет иметь передаваемую структуру и значение.

При использовании собственных элементов HTML DOM может преобразовать структуру этих элементов в дерево доступности, которое предоставляет информацию для вспомогательных технологий. Программа чтения с экрана объявляет о роли, имени, состоянии и значении элемента, и поскольку в нативных элементах уже есть встроенная и доступная информация о доступности, важно максимально полагаться на их семантику. "ИСТОЧНИК"

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

Проблема с приведенным выше кодом заключается в том, что заголовки не предназначены для интерактивного взаимодействия. Изначально они имели для меня смысл, потому что я знал, что программы чтения с экрана помогают пользователю перемещаться по веб-странице в соответствии с ее заголовками. "ИСТОЧНИК"

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

Разработчикам также следует избегать использования тега ‹div› с атрибутом role = ”button”, потому что этот подход удаляет информацию из дерева доступности, которую предоставляет встроенная кнопка HTML. Тег ‹div› можно сделать доступным, но потребуется дополнительный пользовательский код. Почему бы не использовать то, что уже есть и протестировано? "ИСТОЧНИК"

Этому тегу ‹button› можно легко задать стиль, если он унаследует стили родительского заголовка. Мне нравится эта техника Хейдона Пикеринга, потому что она позволяет избежать раздувания кода, отменяя все встроенные стили кнопок. Одно важное замечание: обязательно добавьте стиль фокуса обратно в кнопку, чтобы он оставался визуально доступным для пользователей. Вот код для этих методов ниже:

Как указать изменения состояния?

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

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

Хотя CSS-аккордеоны могут сообщать о расширении и сворачивании содержимого, они не могут сообщать пользователю программы чтения с экрана изменения состояния. Именно здесь Javascript становится полезным инструментом для обеспечения доступа к компоненту «аккордеон», поскольку он может переключать атрибуты, которые указывают программе чтения с экрана, развернуто или свернуто содержимое.

WAI-ARIA

Чтобы сообщить об изменениях состояния пользователям программ чтения с экрана, можно использовать комбинацию атрибутов WAI-ARIA. ARIA расшифровывается как «Доступные полнофункциональные Интернет-приложения», а ряд атрибутов aria помогает сделать веб-контент и веб-приложения более доступными.

Атрибут aria-extended на кнопке сообщает нам, разворачивается или сворачивается контент. ИСТОЧНИК Важно отметить, что разработчики часто делают ошибку, помещая атрибут aria-extended на самом контенте, однако меняет состояние всегда следует размещать на элементе управления. ИСТОЧНИК

Ресурс W3C ARIA содержит важную информацию об атрибуте aria-extended. По сути, состояние aria-expand «указывает, развернут или свернут элемент или другой элемент группировки, которым он управляет».

Следовательно, если состояние aria-expand имеет значение false, элемент или другой группирующий элемент, которым он управляет, сворачивается. Если состояние aria-expand имеет значение true, элемент или другой группирующий элемент, которым он управляет, расширяется. Если состояние aria-expand имеет значение undefined, элемент или другой группирующий элемент, которым он управляет, не может быть ни расширяемым, ни сворачиваемым; показаны все его дочерние элементы или дочерних элементов нет . "ИСТОЧНИК"

скрытый атрибут

Атрибут aria-hidden часто используется для определения состояния содержимого аккордеона. Однако, когда установлено значение false, этот атрибут, как известно, немного глючит в браузерах, и рекомендуется не полагаться на этот атрибут в производственных приложениях. "ИСТОЧНИК"

К счастью, собственная альтернатива, скрытый глобальный атрибут HTML, теперь может быть успешно реализована во всех браузерах. Этот атрибут является логическим, определяющим, является ли элемент релевантным для веб-страницы. Если элемент имеет атрибут "скрытый", браузер не будет отображать этот элемент, и его содержимое будет скрыто от всех пользователей. "ИСТОЧНИК"

SVG-иконки для визуального пользователя

Открытие и закрытие контента обычно иллюстрируется переключением значков плюса и минуса. Для визуального пользователя значок плюса указывает на то, что есть некоторый дополнительный контент, который можно открыть. Значок «минус» указывает на то, что соответствующий раздел содержимого можно скрыть.

В моем примере я полагаюсь на значок svg, предложенный Хейдоном Пикерингом. Вот его значок:

Он отлично разбирается в доступной реализации этого значка. Например, Пикеринг добавляет атрибут focusable = ”false”, поскольку нам не нужно, чтобы значок был интерактивным. Нам нужно только, чтобы родительская кнопка имела это целенаправленное взаимодействие.

Другие советы, которые мне очень понравились, касались стиля кнопки. В приведенном ниже коде элемент значка svg автоматически наследует все стили своего родительского элемента, которым в данном случае является заголовок.

Мы можем гарантировать, что элементы соответствуют высококонтрастным темам. Применяя заливку currentColor к элементам, они меняют цвет вместе с окружающим текстом, когда на него влияет изменение темы.

Хейдон Пикеринг, Инклюзивные компоненты

Дополнительные варианты стилей и подробные объяснения см. В разделе Пикеринга о сворачиваемом содержимом.

Как выбрать Javascript для моего компонента "аккордеон"?

Я хочу прояснить, что я переработал много ресурсов, чтобы создать доступный компонент. Следующие статьи были очень подробными и помогли мне понять важные концепции, а также продемонстрировали, как кодировать доступный аккордеон. Я прочитал Javascript и доступность: аккордеоны в блоге A11y с Линдси, Мой любимый доступный образец аккордеона Грэма Армфилда и Рекомендации по обеспечению доступности в Интернете: аккордеоны »из Студия инноваций в музеях Карнеги в Питтсбурге.

Однако то, на что я попал, в основном повлияла на главу о складных секциях в недавно выпущенной книге Хейдона Пикеринга Inclusive Components. Тем не менее, все авторы отлично поработали, представив очень похожие аргументы и подходы для доступного развития. Я настоятельно рекомендую прочитать все ресурсы, чтобы составить собственное мнение о вариантах развития.

Вот что я предпочел использовать для своего доступного аккордеона:

Что мне нравится в этом подходе? Мне нравится, как использование ES6 приводит к очень сухой презентации. По сути, мы отслеживаем клики по каждому элементу с помощью класса .accordion__header, а затем переключаем наши расширенные атрибуты aria и панели содержимого. Метод call позволяет нам явно указать значение, которому this равно при просмотре всего содержимого в массиве.

Тестирование на закадровом озвучивании

Пора опробовать мой аккордеон на закадровом озвучивании. Во-первых, в качестве точки сравнения я хотел посмотреть, как выглядит базовый аккордеон без учета доступности. Ниже приведено короткое видео с примером аккордеона W3 Schools:

Самая большая проблема здесь - отсутствие индикации состояния контента. Вы не можете сказать, вызывает ли кнопка развернутое или свернутое состояние для содержимого панели.

А теперь давайте посмотрим на аккордеон, который я собрал в этом посте:

При использовании закадрового голоса становится очевидным, что делает для пользователя программы чтения с экрана внимание к состоянию аккордеона. Хотя этот аккордеон визуально аналогичен аккордеону W3 Schools, он намного более доступен, потому что он объявляет свернутые и развернутые состояния контента.

Одна вещь, которую я собираюсь изменить после прослушивания этого аккордеона, - это мои настройки html. Меня беспокоит, что пользователь не может сказать, сколько панелей в аккордеоне. Что, если их было 30? Это информация, которую я хотел бы получить с самого начала. Так что я собираюсь заключить свой аккордеон в тег ‹ul› вместо тега ‹div›. Я собираюсь поместить заголовок и панель аккордеона в тег ‹li›. Этот подход предлагается Грэмом Армфилдом, а также Сарой Суейдан.

Эврика! Теперь, когда программа чтения с экрана обращается к компоненту, она считывает количество элементов в списке. Слушайте ниже:

Как решить проблему производительности с делегированием событий?

Когда я показал начальный черновик этого поста руководителю FED (интерфейс) моей команды, он посоветовал мне решить проблему производительности, подумав о делегировании мероприятий. Почему делегирование событий помогает производительности? Делегирование событий позволяет нам настроить один обработчик событий вместо нескольких. Поскольку у нас есть только одно событие, а не несколько, нагрузка на память меньше, что приводит к повышению производительности.

По сути, приведенный выше код прикрепляет прослушиватель событий к каждому элементу с классом .accordion__header. Мы можем реорганизовать этот аккордеон, чтобы в родительском элементе был только один прослушиватель событий, сам тег ‹ul›. Почему это возможно и как работает делегирование событий? Чтобы понять это, нам нужно сначала концептуализировать следующие функции Javascript: всплытие событий и целевое событие.

всплытие событий

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

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

Эндрю Тетлоу, Sitepoint

целевой элемент

Другой аспект делегирования событий включает функцию целевого элемента Javascript. Что такое целевой элемент? Целевой элемент - это исходный элемент, который инициирует событие. Для целей нашего аккордеона важно понимать, что целевой элемент также может быть предком события javascript, в нашем случае тега ‹ul›, который обертывает наши аккордеонные заголовки и панели.

делегирование мероприятия

Используя как восходящую цепочку событий, так и целевой элемент, мы теперь можем интегрировать подход javascript для компонента аккордеона, который использует делегирование событий. Обычно, когда событие щелчка на элементе ‹button› переходит к родительскому тегу ‹ul› аккордеона, вы проверяете свойство target объекта события, чтобы получить ссылку на узел, на который был осуществлен щелчок. "ИСТОЧНИК"

Приведенный выше код устанавливает прослушиватель событий для элемента аккордеона ‹ul›. Когда происходит событие щелчка, он запускает нашу функцию аккордеона. Функция аккордеона идентифицирует целевой элемент с помощью ближайшего метода, который захватывает элемент с атрибутом триггера аккордеона. Я разместил этот атрибут на всех элементах ‹button›, как показано ниже.

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

Кроме того, выбор делегирования событий для нашего компонента аккордеона также решает проблемы, касающиеся динамического аспекта подходов, управляемых данными. Почему? Потому что наш прослушиватель событий проверяет наш селектор .accordion__header только при срабатывании события щелчка. Не раньше, чем. Это позволяет нам динамически добавлять аккордеонный контент в DOM, не беспокоясь о том, что наш прослушиватель событий не поймает их, поскольку страница уже загружена. "ИСТОЧНИК"

Вот ссылка на мой Codepen с этой последней итерацией (на сегодня).

Последние мысли

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

Этот аккордеон, который я закончил, еще не усовершенствован. Если Javascript отключен в чьем-то браузере, скрытый контент останется скрытым. Это проблема, которую я продолжу исследовать. И Хейдон Пикеринг, и автор A11y с Линдси используют разные подходы к доступности контента в этом сценарии. Один из моих коллег предложил использовать элементы ‹datails› и ‹summary› и оттуда работать в обратном направлении. Я изучу это и обновлю этот пост позже.

Ресурсы

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

Первоначально опубликовано на https://louiseclark.tech 5 января 2020 г.