10 отличных способов сделать ваш контент портативным и доступным

Содержание

• Доступность - это не «особенность»
• Определение платформ
• Сохранение портативности и доступности контента
• 1. Начните с HTML5.
• 2. WAI-ARIA
• 3. Использование doctype
• 4. Теги документа HTML5
• 5. Плохие ссылки.
• 6. Изображения - ALT или TITLE
• Дайте людям знать
• Резюме
• Благодарности
• Ресурсы

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

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

«Публикация» означает разные вещи для разных людей. Для некоторых это означает создание печатного физического объема работы. Другие связывают публикацию с возможностью распространять письменные произведения через устройства и приложения. Все чаще люди думают о публикации как о предоставлении доступа к контенту в любом формате, будь то размещение статьи в блоге или обновление публикации в Google Plus.

Реальность такова, что ожидания пользователей различаются, и со временем эти ожидания меняются. Читатели, которые когда-то жадно просматривали последний пост в блоге, теперь ожидают, что смогут прочитать это сообщение в блоге, любую статью или книгу, где и когда им удобно. Сегодня контент сопровождает нас от блога к Ридеру на телефоне, к Instapaper на iPad и к версии, отправленной по электронной почте через Whispernet на Kindle.

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

Доступность - это не «особенность»

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

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

Определение платформ

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

• HTML: С HTML5 Интернет становится еще лучшим местом для писателей и издателей, чтобы продемонстрировать свои работы. Новые теги вроде статья, раздел, заголовок а также нижний колонтитул Теперь они реализованы во многих браузерах и могут использоваться с некоторой долей надежности для добавления семантического контекста к вашему письму. Кроме того, готовящийся к выпуску модуль страницы CSS3 также может быть интересен тем, кто хочет использовать более фиксированное чтение страниц.
• EPUB: EPUB - официальный стандарт Международного форума цифровых публикаций (IDPF). EPUB3 был утвержден в октябре 2011 года и позволяет публикациям иметь более стилизованный и настраиваемый контент, более близкий к тому, что поддерживается с помощью HTML / CSS, а не предыдущие, более статические рекомендации.
• МОБИ: MOBI, сокращение от Mobipocket, - это формат, используемый Kindle и другими цифровыми считывателями. Он снова менее настраиваемый, чем EPUB, но мы рассмотрим его здесь, потому что вы можете использовать его при публикации контента на Amazon, если захотите. По словам Робина Кристоферсона из AbilityNet, некоторые модели Kindle доступны для слепых пользователей; однако приложение Kindle на iOS - нет. KF8, новый формат Kindle, в настоящее время поддерживается Kindle Fire и скоро будет развернут на устройствах с электронными чернилами Kindle последнего поколения и в приложениях для чтения Kindle.
• PDF: PDF стал повсеместным явлением в Интернете. Я включил его сюда, потому что у большинства планшетов действительно есть хорошая встроенная технология для чтения PDF-файлов и включения в них вспомогательных технологий. В случае PDF-файла решающим фактором является способ его создания. По словам Алана Далтона, советника по развитию доступности в Национальном управлении по делам инвалидов Ирландии: «Вы можете сделать PDF-файлы доступными, но многие люди этого не делают. Они не понимают, что их инструменты производят плохие продукты. быть HTML ". Помимо навигации и доступности, PDF-файлы также плохо адаптируются к разным размерам, и любой, кто пытался прочитать PDF-файл на смартфоне, знаком с неудобным сжатием, масштабированием и панорамированием, необходимым для этого.

В эту категорию не попадают приложения, которые превращают ваш контент в большие изображения. Хотя это может обеспечить одинаковый внешний вид и стиль на разных платформах, вы блокируете большую часть своей аудитории, одновременно создавая очень большую загрузку. Эта проблема усугубляется, когда мы начинаем говорить о дисплеях Retina и изображениях с двойным размером. Чтобы понять, каково это, когда вам отказывают в том, что вы хотите прочитать (но все равно за это придется платить), просмотрите комментарии о том, что приложения для Newsstand в большинстве случаев недоступны через VoiceOver в iOS.

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

Сохранение портативности и доступности контента

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

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

1. Начните с HTML5.

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

2. WAI-ARIA

WAI-ARIA - это Инициатива по обеспечению доступности Интернета - пакет доступных полнофункциональных Интернет-приложений. Это набор руководящих принципов, созданных Рабочей группой по протоколам и форматам (PFWG)
W3C. WAI-ARIA определяет способ сделать веб-контент и приложения более доступными для людей с ограниченными возможностями, а также помогает с динамическим контентом и расширенными элементами управления пользовательским интерфейсом, разработанными с помощью Ajax, HTML, JavaScript и связанных технологий. Некоторые из методов в этой статье взяты из руководящих принципов WAI-ARIA, и, хотя эта статья недостаточно длинна, чтобы охватить всю спецификацию, я рекомендую вам проверить ее, чтобы получить более подробную информацию о том, почему они рекомендуются, и передовые практики для их реализация.

3. Использование doctype

Хотя использование определенного типа документа само по себе не влияет на доступность связанного HTML-кода, важная причина для использования типа документа - убедиться, что режим причуд браузера не запускается. Просто используйте ! DOCTYPE html> чтобы этого не произошло.

4. Теги документа HTML5

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

• Заголовок а также Нижний колонтитул оба могут использоваться на странице несколько раз. Они могут обозначать соответствующий главный верхний или нижний колонтитул документа или использоваться для информации верхнего / нижнего колонтитула в статьях или разделах.
• В стороне - хороший тег для разделов, таких как боковые панели в книге, которые дополняют документ, но не являются абсолютно необходимыми для его понимания.
• Разделы представляют собой разумные способы разбить идеи или сгруппировать контент.
• Статьи являются независимыми, автономными частями, которые могут существовать без остального контента. Правильное использование этих тегов помогает убедиться, что структура вашего контента интерпретируется правильно.

5. Плохие ссылки.

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

Пример:

a href = "/ contact"> / a>

Это плохо.

a href = "/ contact"> Свяжитесь с нами / a>

Намного лучше.

6. Изображения - ALT или TITLE

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

Alt с другой стороны, используется вспомогательными технологиями и дает контекст элементу. Вы должны использовать альт на ваших изображениях и убедитесь, что это полезная информация. С использованием img alt = "" src = "1348.webp">

Дайте людям знать

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