Улучшение доступности вашей уценки

Markdown — это язык преобразования небольшого текста в HTML. Он был создан Джоном Грубером в 2004 году с целью упростить написание форматированного текста в обычном текстовом редакторе. Вы можете найти Markdown во многих местах в Интернете, особенно там, где присутствуют разработчики. Два примечательных примера — комментарии на GitHub и исходный код постов в Smashing Magazine!

Как работает уценка

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

Итак, набрав:

 [I am a link](https://www.smashingmagazine.com/)

Создаст следующую HTML-разметку:

 <a href="https://www.smashingmagazine.com/">I am a link</a>

Вы также можете смешать HTML с Markdown, и все это будет сводиться к HTML при компиляции. Следующий пример:

 I am a sentence that includes <span class="class-name">HTML</span> and __Markdown__ formatting.

Генерирует это как разметку HTML:

 <p>I am a sentence that includes <span class="class-name">HTML</span> and <strong>Markdown</strong> formatting.</p>

Уценка и доступность

Доступность — это целостная проблема, а это означает, что она влияет на все аспекты создания и поддержания цифрового опыта. Поскольку Markdown — это цифровой инструмент, у него также есть соображения доступности, о которых следует помнить.

• Хорошая новость :
  Markdown генерирует простую HTML-разметку, а простая HTML-разметка может быть легко прочитана вспомогательными технологиями.
• Менее приятные новости :
  Уценка не является всеобъемлющей и не предписывающей. Кроме того, доступность — это нечто большее, чем просто вспомогательные технологии.

Когда дело доходит до обеспечения доступности вашего контента Markdown, есть две общие проблемы:

1. Существуют определенные типы контента, которые Markdown не поддерживает.
2. Во время написания вам не будет сопутствовать опыт в стиле Clippy, а это означает, что вы не получите предупреждение, если сделаете что-то, что создаст недоступный контент.

Из-за этих двух соображений мы можем сделать так, чтобы наш контент Markdown был максимально доступным.

Три самые важные вещи, которые вы можете сделать

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

1. Используйте заголовки, чтобы обрисовать в общих чертах ваш контент

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

Из-за этого вы хотите использовать параметры форматирования заголовков Markdown ( # , ## , ### , #### , ##### и ###### ) для создания логической структуры заголовка:

 # The title, a first-level heading Content ## A second-level heading Content ### A third-level heading Content ## Another second-level heading Content

Это создает иерархическую схему, которую легко просмотреть:

 1. The title, a first-level heading a. A second-level heading i. A Third-level heading b. Another second-level heading

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

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

2. Напишите осмысленные альтернативные описания для ваших изображений

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

В Markdown альтернативное описание помещается между открывающей и закрывающей скобками кода форматирования изображения:

 ![A sinister-looking shoebill staring at the camera.](https://live.staticflickr.com/3439/3259412053_92f822bee2_b.jpg)

Альтернативное описание должно четко и кратко описывать содержание изображения и контекст того, почему оно было включено. Также не забудьте поставить знаки препинания!

Некоторые веб-сайты и веб-приложения, использующие ввод Markdown, также попытаются добавить для вас альтернативный текст описания. Например, GitHub будет использовать имя загружаемого вами файла для атрибута alt :

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

Примеры этого, которые вы обычно видите на GitHub, включают:

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

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

Если вам нужна помощь в написании альтернативных описаний, я бы с энтузиазмом порекомендовал W3C’s alt Decision Tree и Axess Lab’s Ultimate Guide to Alt Texts.

3. Используйте простой язык

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

• С познавательными соображениями,
• Кто не использует английский в качестве основного языка,
• Незнакомый с понятиями, которые вы общаетесь,
• Кто испытывает стресс или многозадачность и имеет ограниченную продолжительность концентрации внимания,
• И так далее.

Чем легче кому-то читать то, что вы пишете, тем легче им это понять и усвоить. Это помогает с любой формой письменного контента Markdown, будь то сообщения в блогах, билеты Jira, заметки Notion, комментарии GitHub, карточки Trello и так далее.

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

Если вам нужна помощь в упрощении вашего языка, я предпочитаю использовать три инструмента: Hemingway, Datayze Readability Analyzer и xkcd Simple Writer. Еще один сайт, на который стоит обратить внимание, — это plainlanguage.gov.

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

Хотите пройти лишнюю милю? Здорово! Вот некоторые вещи, которые вы можете сделать:

Картинки

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

Размечайте SVG-изображения правильно

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

Есть два способа отобразить SVG в Markdown. У обоих подходов есть определенные вещи, на которые вам нужно обратить внимание:

1. Ссылка на изображение с расширением файла .svg

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

Если вы ссылаетесь на SVG как на изображение, вам нужно использовать HTML-элемент img , а не код форматирования изображения Markdown ( ![]() ).

Причина этого в том, что у некоторых программ чтения с экрана возникают ошибки при попытке проанализировать элемент img , который ссылается на файл SVG. Вместо того, чтобы объявлять его, как ожидалось, как изображение, он объявляет его как группу или полностью пропускает объявление изображения. Чтобы исправить это, объявите role="img" для элемента изображения:

 <img role="img" alt="A sylized sunflower." src="flower.svg" />

2. Использование встроенного кода SVG

Есть несколько причин для объявления изображения встроенным кодом SVG вместо использования элемента img . Причина, с которой я чаще всего сталкиваюсь, — поддержка темного режима.

Как и в случае использования элемента img, необходимо включить несколько атрибутов, чтобы вспомогательные технологии интерпретировали его как изображение, а не как код. Два объявления атрибутов: role="img" и aria-labelledby :

 <svg aria-labelledby="svg-title" fill="none" height="54" role="img" viewBox="0 0 90 54" width="90" xmlns="https://www.w3.org/2000/svg"> <title>A pelican.</title> <path class="icon-fill" d="M88.563 2.193H56.911a7.84 7.84 0 00-12.674 8.508h-.001l.01.023c.096.251.204.495.324.733l4.532 10.241-1.089 1.09-6.361-6.554a10.18 10.18 0 00-7.305-3.09H0l5.229 4.95h7.738l2.226 2.107H7.454l4.451 4.214h7.741l1.197 1.134c.355.334.713.66 1.081.973h-7.739a30.103 30.103 0 0023.019 7.076L16.891 53.91l22.724-5.263v2.454H37.08v2.81h13.518v-.076a2.734 2.734 0 00-2.734-2.734h-5.441v-3.104l2.642-.612a21.64 21.64 0 0014.91-30.555l-1.954-4.05 1.229-1.22 3.165 3.284a9.891 9.891 0 0013.036 1.066L90 5.061v-1.43c0-.794-.643-1.438-1.437-1.438zM53.859 6.591a1.147 1.147 0 110-2.294 1.147 1.147 0 010 2.294z"/></svg>

Вы также должны убедиться, что используете элемент title (не путать с атрибутом title ) для описания изображения, подобно атрибуту alt элемента img . В отличие от атрибута alt , вам также потребуется связать id элемента title с его родительским элементом svg с помощью aria-labelledby .

Если вы хотите углубиться в доступную разметку SVG, я рекомендую «Доступные SVG» Хизер Мильориси и «Доступные SVG: идеальные шаблоны для пользователей программ чтения с экрана» Кэри Фишер.

Загрузка с приостановленными анимированными изображениями

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

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

Хорошей новостью является то, что вы по-прежнему можете включать анимированный контент! Есть несколько вариантов:

1. Используйте элемент picture , используя такие типы файлов, как .mp4 и .webm , которые могут загружаться в состоянии паузы, или
2. Используйте решение, которое предоставляет функции воспроизведения/паузы для .gif , например, details /обзоры Стива Фолкнера или библиотеку summary .

Эта маленькая деталь может иметь большое значение для помощи людям, не отказываясь от способа самовыражения.

Ссылки

Если вы пишете контент в Интернете, рано или поздно вам придется использовать ссылки. Вот некоторые вещи, о которых следует знать:

Используйте уникальные описательные имена ссылок

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

 Learn more about [how to easily poach an egg](https://lifehacker.com/this-is-the-chillest-easiest-way-to-poach-an-egg-1825889759).

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

Избегайте открытия ссылок в новой вкладке или окне

Некоторые варианты Markdown, такие как Kramdown, позволяют вам писать код, который может открывать ссылки в новой вкладке или окне:

 [link name](url){:target="_blank"}

Это создает угрозу безопасности. Кроме того, этот опыт настолько сбивает с толку и нежелателен, что является критерием успеха Руководства по обеспечению доступности веб-контента (WCAG). Гораздо лучше позволить всем, кто использует ваш веб-сайт или веб-приложение, самим решать, хотят ли они открывать ссылку в новой вкладке.

Используйте ссылки для пропуска с осторожностью

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

Ссылки для пропуска не ограничиваются только этим вариантом использования! Двумя другими примерами могут быть оглавление и элементы управления сортировкой/фильтрацией на сайте электронной коммерции.

Еще одно полезное использование для пропуска ссылок — позволить кому-то обходить встроенный контент, содержащий несколько интерактивных элементов:

Это также отличный способ обойти «клавиатурную ловушку», которая часто встречается во встроенном контенте.

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

Хороший способ проверить ловушки клавиатуры? Используйте клавишу Tab !

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

В дополнение к своему замечательному посту о тестировании с помощью клавиши Tab , Мануэль Матузович рассказывает нам об использовании им ссылок пропуска, а также о других улучшениях в улучшении доступности клавиатуры для Embedded CodePens.

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

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

Проблема в том, что с этим могут быть некоторые проблемы со вспомогательными технологиями, в зависимости от того, как построена эта якорная ссылка. Если якорная ссылка обернута только вокруг глифа, такого как #, или §, мы столкнемся с двумя проблемами:

1. Имя ссылки не имеет смысла, если его удалить из окружающего контекста, и
2. Название ссылки повторяется.

Этот вопрос более подробно обсуждается Эмбер Уилсон в ее статье Доступны ли ваши анкорные ссылки? В ее посте также подробно рассказывается о различных решениях, а также об их потенциальных недостатках.

Указать наличие загрузок

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

1. Открывает приложение, связанное с типом файла запроса, для его отображения или
2. Предлагает сохранить его в файловой системе операционной системы.

Эти два опыта могут раздражать, особенно если вы не видите экран. Хороший способ предотвратить это далеко не идеальное впечатление — намекнуть на наличие загрузки в названии ссылки. Например, вот как вы могли бы сделать это в Markdown при ссылке на PDF:

 Download our [2020 Annual Report (PDF)](https://mycorp.biz/downloads/2020/annual-report.pdf).

Цвет

Цвет не связан с Markdown как таковой, но он влияет на большую часть контента, созданного Markdown. Самые большие проблемы, связанные с цветом, — это то, что вы обычно можете изменить, если используете службу ведения блога, такую ​​​​как WordPress, Eleventy, Ghost, Jekyll, Gatsby и т. Д.

Используйте темную тему

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

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

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

Давайте также помнить, что Markdown экспортирует простой и понятный HTML, и с ним легко работать в CSS. Это имеет большое значение для упрощения разработки вашей темной темы.

Используйте подсветку синтаксиса с хорошей поддержкой цветового контраста

Markdown может создавать блоки кода, заключая содержимое в тройные обратные кавычки ( ``` ). Он также может создавать встроенный контент, завернутый в элемент code , заключая символ, слово или фразу в одиночные обратные кавычки.

Для обоих примеров многие люди добавляют библиотеки подсветки синтаксиса, такие как PrismJS, чтобы помочь людям понять пример кода, который они предоставляют.

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

Способ определить, достаточно ли высок контраст, — использовать такой инструмент, как WebAIM, и вручную проверить значения цвета, предоставляемые темой. Если вы ищете более быстрое предложение и не возражаете против небольшой саморекламы, я поддерживаю тему подсветки синтаксиса с контрастным цветом.

Контент, который не поддерживается Markdown

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

Используйте атрибут title для описания содержимого iframe

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

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

Для Markdown наиболее распространенной формой содержимого iframe будут вставки, такие как видео YouTube:

 <iframe width="560" height="315" src="https://www.youtube.com/embed/SDdsD5AmKYA" title="YouTube: Accessibility is a Hydra | EJ Mason | CascadiaJS 2019." frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Как и в тексте вашей ссылки, вы также должны избегать общего и повторяющегося содержания title . Код для встраивания YouTube по умолчанию использует YouTube video player , что не очень хорошо. Мы можем сделать немного лучше и обновить это до YouTube: Video title . Это особенно полезно, если на странице или в представлении встроено более одного видео YouTube.

Что касается того, почему YouTube делает это таким образом, когда он уже знает информацию о названии видео, это совсем другая проблема.

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

Говоря о YouTube, еще одна вещь, которую вы захотите сделать, это убедиться, что ваши видео и аудио имеют подписи и стенограммы.

Подписи

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

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

Стенограммы

Стенограммы являются родственными заголовками. Они берут все разговорные диалоги, соответствующие звуковые эффекты и музыку, а также другие важные детали и перечисляют их вне встроенного видео или аудио. Это дает много преимуществ, в том числе позволяет кому-то:

• Прочитайте видео- и аудиоконтент в своем собственном темпе;
• Изменить размер и представление контента;
• Распечатайте содержимое или преобразуйте его в более удобный для восприятия формат;
• Более легко находить контент через поисковые системы;
• Легче переводить контент.

Режим чтения

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

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

Вы не можете напрямую активировать режим чтения с помощью Markdown. Однако контент Longform Markdown часто отображается в шаблонах, которые можно настроить так, чтобы сделать их удобными для режима чтения.

Мэнди Майкл учит нас, как это сделать, в своем посте «Создание веб-сайтов для Safari Reader Mode и других приложений для чтения». Сочетание семантического HTML, элементов секционирования и небольшого количества структурированных микроданных — все, что нужно, чтобы разблокировать эту замечательную функцию.

Вам не нужно делать все сразу

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

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

Знайте, что каждая настройка и обновление будут иметь прямое влияние на чье-то качество жизни при использовании Интернета, и это огромно.

Продолжить чтение в журнале Smashing Magazine

• CommonMark: формальная спецификация для Markdown
• Создание Node.js Express API для преобразования Markdown в HTML
• Создание библиотек паттернов с помощью Shadow DOM в Markdown