Проверка и оценка доступности email в Firefox

Проверка и оценка доступности email в Firefox

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

Евангелист доступности Mozilla, Марко Зехе, недавно опубликовал пост о новом Accessibility Inspector от Firefox, который в настоящее время доступен в Firefox Nightly. Несмотря на то, что Accessibility Inspector не является заменой для более надежного тестирования с использованием таких инструментов, как экранные дикторы или другие, он дает действительно замечательную оценку веб-страницы (или электронного письма). Проверка доступности email даст возможность оценить схему документа (это то, что экранные дикторы используют для навигации и предоставления контента) и увидеть все свойства, связанные с различными элементами документа.

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

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

Просматривать все эти таблицы, строки и ячейки? Это не очень хорошо. Firefox Accessibility Inspector — это лучший инструмент из тех, с которыми я работал, для быстрой оценки структуры документа в контексте доступности, он помогает выработать идеи относительно того, как улучшить макеты HTML электронных писем.

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

Первый — это WAVE Accessibility Extension, который позволяет быстро протестировать документ и выявить проблемы. При нажатии на значок WAVE открывается боковая панель, которая запускает оценку WAVE, и дает вам краткое описание всех ошибок, предупреждений и функций, найденных в вашем документе, с возможностью более глубокого анализа при необходимости. Моя любимая функция WAVE — это опция «Без стилей», которая удаляет из документа CSS. Несмотря на то, что в настоящее время отсутствие CSS является редким явлением для электронных писем, это полезно для просмотра структуры документа и дальнейшей оценки использования семантически доступных элементов. А опция «Контраст» также позволяет отсортировать цветовые решения на основе рекомендаций WCAG.

Похоже, у меня есть, над чем поработать перед следующей рассылкой. Второй инструмент, который я использую — это аддон Total11y: Accessibility Toolkit. Он добавляет удивительный файл tota11y.js Академии Хана, который позволяет легко проверить функции доступности. Самым крутым инструментом аддона является экспериментальная «Волшебная палочка экранного диктора», которая позволяет вам наводить указатель на текст и видеть, что большинство экранных дикторов читают вслух для слабо видящих пользователей.

У Total11y: Accessibility Toolkit гораздо более удобный интерфейс, но ему не хватает глубины надстроек WAVE. Вот почему мне нравится комбинировать оба варианта, добавив в набор новый Firefox Accessibility Inspector для полного анализа среды.

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

Автор: Jason Rodriguez

Источник: https://www.rodriguezcommaj.com/

Редакция: Команда webformyself.

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

Препроцессоры. Быстрый старт

Овладейте азами работы с препроцессорами с полного нуля

Получить

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

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

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

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree