10 чудових способів зробити ваш вміст портативним та доступним

Зміст

• Доступність - це не „функція“
• Визначення платформ
• Зберігання вмісту портативним та доступним
• 1. Почніть з HTML5
• 2. WAI-ARIA
• 3. Використання doctype
• 4. Теги документа HTML5
• 5. Погані посилання
• 6. Зображення - ALT проти TITLE
• Повідомте людей
• Резюме
• Подяка
• Ресурси

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

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

«Публікація» означає різні речі для різних людей. Для деяких людей це означає виготовлення друкованого фізичного обсягу твору. Інші люди пов’язують публікацію з можливістю розповсюдження письмових робіт через пристрої та додатки. Все частіше і частіше люди думають, що публікація робить вміст доступним для насолоди в будь-якому форматі, незалежно від того, що означає надсилання статті до блогу чи оновлення публікації в Google Plus.

Реальність полягає в тому, що очікування у користувачів різняться, і ці очікування змінюються з часом. Читачі, які колись ненажерливо споживали останню публікацію в блозі, тепер очікують, що вони зможуть прочитати цю публікацію в блозі чи будь-яку статтю чи книгу, де б і коли це було зручно для них. Сьогодні вміст слідкує за нами від блогу до Reeder по телефону до 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 та зображення подвійного розміру. Щоб відчути, як це - відмовити вам у тому, що ви хочете прочитати (але все одно за це все одно доведеться заплатити), перегляньте коментарі про програми Кіоску, які в основному недоступні через 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">

Повідомте людей

Якщо ваш вміст доступний у різних форматах, переконайтеся, що є спосіб виявити це на вашому сайті. Ви, напевно, бачили "Якщо у вас виникли проблеми з переглядом цього електронного листа, прочитайте Інтернет
повідомлення "у верхній частині багатьох електронних розсилок. Зробіть практикою робити те саме для свого вмісту. Якщо у вас є доступний PDF-файл чи аудіоверсія, а також ePub, переконайтеся, що користувачі можуть знайти цю інформацію. тестування, щоб переконатися, що вміст можна знайти та прочитати.