Шаблоны, компоненты и системы проектирования

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

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

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

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

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

Думайте критически

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

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

• Существует ли уже устоявшийся доступный шаблон, компонент или система проектирования?
• Какие браузеры и вспомогательные технологии (AT) я поддерживаю?
• Существуют ли какие-либо ограничения кода/фреймворка или другие интеграции/факторы/потребности пользователей, которые мне необходимо учитывать?

В зависимости от вашей среды разработки и потребностей пользователей у вас могут возникнуть дополнительные или другие вопросы. Считайте эти вопросы отправной точкой при оценке доступности.

Установленные ресурсы

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

Вот некоторые отличные ресурсы по доступным шаблонам, компонентам и системам проектирования:

• Доступные компоненты
• Библиотека ARIA Университета Деке
• Система проектирования Gov.UK
• Инклюзивные компоненты
• ПурпурныйA11y
• Система веб-дизайна США (USWDS) , созданная для федерального правительства США.
• Список доступных шаблонов из журнала Smashing Magazine.

Для фреймворков JavaScript следующие ресурсы достаточно доступны «из коробки» или их легко настроить для обеспечения доступности:

• Когда CSS недостаточно: требования JavaScript для доступных компонентов
• Реагировать
  • Достичь пользовательского интерфейса
  • Реакит
  • Чакра
• Angular: библиотека материалов
• Vue: Vuetensils

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

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

Поддержка браузеров и вспомогательных технологий (AT)

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

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

Поддержка браузеров, как правило, сложна, и все становится еще сложнее, если добавить к этому устройства AT и спецификации ARIA.

Но это не все плохие новости. К счастью, такие замечательные ресурсы, как « Доступность HTML5» , «Поддержка специальных возможностей » и «Контрольный список разработки специальных возможностей для индивидуального управления WCAG», помогают нам лучше понять текущую поддержку браузеров и AT-устройств и даже то, когда следует использовать ARIA в первую очередь.

В этих ресурсах описаны различные доступные подэлементы шаблонов HTML и ARIA, включая тесты сообщества с открытым исходным кодом. Вы также можете просмотреть некоторые примеры шаблонов — как для настольных, так и для мобильных браузеров/AT-устройств. Таким образом, эти ресурсы могут помочь вам принять более доступное решение относительно шаблонов, компонентов и систем проектирования, которые вы, возможно, захотите использовать.

Другие соображения

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

Например, если вы работаете в системе управления (CMS) или используете устаревший код, могут существовать некоторые ограничения на использование шаблонов. При просмотре несколько вариантов шаблонов можно быстро сократить до одного или двух вариантов.

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

При выборе шаблона, компонента или системы проектирования следует учитывать дополнительные факторы, такие как:

• Производительность
• Безопасность
• Поисковая оптимизация
• Поддержка языкового перевода
• Сторонние интеграции

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

Проверьте свое понимание

Проверьте свои знания шаблонов