Как сверстать

Самое важное — отказ от поддержки старых браузеров в 2021. Убили IE, поэтому разработчикам станет проще использовать классные технологии. Гриды (83%) и флексы (99%) захватили всё.

TypeScript есть в 70% вакансий для мидлов. Мнение — 2022 будет годом TypeScript. 

Что новенького

Container Queries — переосмысление подхода к медиавыражениям. Если медиавыражение зависит от размера экрана, то Container Queriesопирается на размер блока. Ждём.

Cascade layers. С ними мы можем лучше управлять всеми слоями отрисовки на сайте. Это самое большое изменение в CSS со времён флексов и гридов. Ещё чуть-чуть.

Color functions. Удобно при работе в связке с дизайнером или без UI Kit. 

Псевдоэлемент :has. Позволяет менять CSS в зависимости от того, находится ли в элементе что-то. Маленькая, но очень приятная вещь. Уже почти.

Flexbox Gap. Отступы между колонками делаются не через margin, а промежутками с определенным расстоянием. Это уже не тренд, а стандарт.

Что ещё. Пришли object-fit и aspect-ratio. CSS Shapes дошли до реализации. Появились автораскладки в Фигме — следствие доминирования гридов. Из препроцессоров применяют в основном Sass, на всё остальное осторожно посматривают. 

Инструменты регулярно меняются и в этом нет ничего плохого. Тройка браузеров не меняется.

Критерии качества вёрстки от Академии актуальны и в 2022 — сразу понятно, как проверить, хороший ли вы верстальщик. Обсудили всё с сообществом — в сообществе рады.

Что нужно уметь

Мнение Алексея Симоненко — не стоит гнаться за ростом технологий. Лучше учить то, что нужно сейчас на рынке. Академия составила карту компетенций разработчика на 2022 с разбивкой по рейдам. Если коротко, то вот то, что нужно знать джунам и мидлам.

Джуны: синтаксис и основы HTML, CSS и JS, семантика, доступность, флексы и гриды, работа со шрифтами, препроцессоры Sass и PostCSS, БЭМ, Bootstrap, React или Vue, вёрстка под React (JSX, CSS-in-JS).

Мидлы: всё, что у джунов + TypeScript, Next.js, Redux, Mobx, Unit-тесты, RestAPI, Angular (которого вообще нет в вакансиях для джунов), WebSockets, GraphQL, Vuex, Nuxt.js, CSS-in-JS, Webpack, CI/CD, Docker, Gulp, алгоритмы и структуры данных, знакомство с ООП, паттерны MVC.

jQuery и Less — только для легаси.

Что с работой

Разработчиков всем не хватает (даже джунов).Мидлы уезжают из-за пандемии, такое на 3-4 года. Компании из Москвы ищут в регионах удалёнщиков, поэтому там тоже растут зарплаты. 70% компаний требуют английский язык. Почти вся документация на английском — видимо, поэтому. Продуктовые компании пылесосят аутсорсеров на зарплату х2 (источник?). У не IT-компаний появились IT-отделы — тоже тренд. В 1С платят мало. Стоп, что?

Стартовые зарплаты джунов не растут два года, но им стоит смотреть не на стартовую зарплату, а на перспективу (потому что индексируют быстро). У мидлов зарплаты подросли — средняя по JS 115 тыс. Синьоры стали дороже — 180-230 тыс. 

Комментарии чужих прогнозов короткой строкой

• Реакт будет расти. Конкурентов особо нет.

• Нужно учить Реакт, потому что у него самый большой рынок. Если все перейдут на Vue.js, то и мы потом тоже.

• Нейросети и No-code (тильда и вот это всё) никогда не заменят разработчиков целиком, потому что часто нужен разработчик, чтобы сделать хороший ноукод. Ноукод займёт нишу в сайтах, которыми и без того не хотят заниматься — одноразовые лендинги, маленькие интернет-магазины и сайты-визитки.

• ГОСТ для разработчиков вряд ли хорошая идея, потому что всё равно все постоянно переписывают чужой код с нуля на другом фреймворке. Но критерии качества — норм, если их правильно использовать.

• Доступностьвсё ещё важна. «Партизанская доступность» во время разработки обычно делается стандартными средствами — семантика, правильная расстановка атрибутов, alt-текст, не убираем outline, tab index. Продвинутая доступность — по требованию заказчика и за неё нужно доплачивать.

• Будет ли расти спрос на фронтендеров. Будет.

• Фокусировка на безопасностискорее всего случится, но вряд ли 2022 будет годом безопасности.

• Фреймворк Remix вроде всем понравился. Посмотрим, как пойдёт. 

• Дизайн-системы — большой тренд. 

• 43% считают, что CSS тяжело изучить(я согласен — прим. ред)

С чего мы это взяли

• Зарплаты разработчиков в первой половине 2021: квалификации и основные языки

• The State of CSS 2021

• Какие навыки нужны фронтендеру, чтобы стать мидлом? Исследование HTML Academy

• Front end web development trends in 2022 — Futurice

• Front-End Developers in 2022: Skills to Know and Trends to Watch

• 2022 Web Dev predictions? – Wes Bos twitter

• Anyone brave enough to share an old tweet with a prediction for 2021?

• CSS in 2022 – Bram.us

• Stack Overflow Developer Survey 2021

• @angular/core vs react vs vue | npm trends

Это была расшифровка лайва HTML Academy про тренды.

Фавиконка (favicon) — это иконка, которая отображается во вкладке браузера перед названием страницы. Также эта иконка отображается в закладках и на рабочем столе для веб-приложений.

Подключение

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

Почему именно набор, а не одну иконку? Дело в том, что браузеры и экраны развиваются и не стоят на месте. Чем современнее браузер, тем более современный формат он может поддерживать. Например, вы можете подумать, что можно подключить только одну SVG-иконку и браузер уже сам правильно отрисует её, но не все браузеры до сих пор поддерживают SVG-формат для фавиконок. На таблицу совместимости SVG-фавиконок можно посмотреть тут.

Эта статья — фрагмент из учебника по вёрстке с курса «HTML и CSS. Профессиональная разработка сайтов».

Обязательная фавиконка

Все — старые и новые — веб-серверы и браузеры поддерживают .ico-формат.

Для подключения нужно добавить в <head>:

<head>
  <link rel="icon" href="favicon.ico"><!-- 32×32 -->
</head>

Обратите внимание на две детали: размер и расположение.

Размер. В интернете можно найти информацию, что нужно подключать фавиконку в формате .ico в размере 16×16. Это так и не так. Дело в том, что контейнер ico динамический и он может изменять размеры «на лету». Поэтому браузеры, которые понимают размер 16×16, сами сожмут 32×32 до необходимого. В каком случае нужно создавать favicon.ico в размере 16×16? Когда фавиконка размером 32×32 при сжатии начнёт мылиться (будет нечёткой). Это можно проверить вручную, сжав фавиконку с 32×32 до 16×16. Если размыливание картинки произошло, то без дизайнера не обойтись и придётся отрисовывать фавиконку вручную в графическом редакторе.

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

Дополнительные необходимые фавиконки

Расположение. Только favicon.ico должна лежать в корне проекта. Остальные иконки могут лежать в любом месте в проекте, например:

project/
  favicon.ico
  img/
    180.png
    192.png
    512.png
    icon.svg

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

project/
  favicon.ico
  img/
    favicons/
      180.png
      192.png
      512.png
    icon.svg

SVG

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

Подключение точно такое же, как и для favicon.ico, только нужно добавить тип, чтобы браузер понимал, с чем имеет дело:

<head>
  <link rel="icon" href="images/favicons/icon.svg" type="image/svg+xml">
</head>

Для устройств Apple

Apple пошли по другому сценарию развития и предложили собственные размеры фавиконок для своих устройств — iPhone и iPad. Формат для подключения favicon для Apple поддерживают все современные браузеры.

Самым востребованным размером для старых устройств фавиконок стал размер 180×180. Давайте посмотрим пример подключения:

<head>
  <link rel="apple-touch-icon" href="images/favicons/apple.png"><!-- 180×180 -->
</head>

Подключив такую иконку, мы также поддержим старые устройства, которые не умеют работать с таким большим размером фавиконки и уменьшать её до нужных размеров.

Устройства Apple работают и с большими размерами иконок, но так получилось, что устройства, которые понимают большие размеры, можно подключать более современным способом с помощью манифеста. Манифест позволит скрыть подключение всех размеров из <head>, что сделает разметку более читаемой.

Манифест

Манифест — это JSON-файл со всеми подробностями веб-приложения для браузера. Формат был разработан Google по инициативе PWA.

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

Файл. Создадим файл в корне проекта и назовём его manifest.webmanifest. Расширение .webmanifest нужно указать, чтобы браузер понимал, с каким файлом имеет дело. Само название файла может быть любым (в нашем случае — manifest).

Так как манифест — это JSON-файл, то он должен начинаться с открывающей скобки { и заканчиваться закрывающей скобкой}.

manifest.webmanifest
{

}

Внутри скобок нужно создать секцию иконок. Секция с иконками ожидает несколько иконок, поэтому добавим массив []:

manifest.webmanifest
{
  "icons": []
}

Осталось добавить фавиконки по шаблону:

manifest.webmanifest
{
  "icons": [
    { "src": "", "type": "", "sizes": "" }
  ]
}

Если иконок несколько, то их нужно добавить через запятую:

manifest.webmanifest

{
  "icons": [
    { "src": "", "type": "", "sizes": "" },
    { "src": "", "type": "", "sizes": "" },
    { "src": "", "type": "", "sizes": "" }
  ]
}

Размеры. В манифесте мы укажем размер 192×192 и 512×512. 192 — так как это следующий размер после 180, а 512 — так как это очень большой размер для фавиконки, его будет достаточно. А что с промежуточными разрешениями? Всё хорошо: как и раньше, браузер сожмёт картинку к нужному размеру. Например, из 512 до 256.

manifest.webmanifest

{
  "icons": [
    { "src": "images/favicons/192.png", "type": "image/png", "sizes": "192x192" },
    { "src": "images/favicons/512.png", "type": "image/png", "sizes": "512x512" }
  ]
}

Настройки:

• src — путь до иконки;

• type — тип иконки;

• sizes — размер иконки.

Можно добавить дополнительные размеры иконок, если этого требует браузерная поддержка вашего проекта. Например, вам потребовалась иконка 256×256. Давайте добавим её:

manifest.webmanifest

{
  "icons": [
    { "src": "images/favicons/192.png", "type": "image/png", "sizes": "192x192" },
    { "src": "images/favicons/256.png", "type": "image/png", "sizes": "256x256" },
    { "src": "images/favicons/512.png", "type": "image/png", "sizes": "512x512" }
  ]
}

Откуда брать фавиконки и как их приготовить

Фавиконки — это ответственность верстальщика. Дизайнеры в большинстве случаев про фавиконки не знают, поэтому не предоставляют их с макетами.

Если дизайнер не предоставил фавиконки, у верстальщика есть два пути:

1. Не добавлять фавиконки в проект.

2. Попросить дизайнера отрисовать фавиконку (лучше в векторном формате). Рассказать, что требуется отрисовать иконку в квадрате. Сама иконка может быть круглой или даже овальной, но изображение должно быть вписано в квадрат с пропорциями 1:1.

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

При генерации фавиконок с помощью сторонних сервисов всегда смотрите на получившийся результат. Чаще всего иконки получаются замыленными. Даже если брать хороший оригинал 512×512, то при уменьшении до 32×32 всё равно могут появиться артефакты.

Для генерации фавиконок используйте сервис favicon-generator: экспортируйте изображение фавиконки в формате PNG, добавьте это изображение в сервис генерации фавиконок, нажмите кнопку «Create favicon», а потом — ссылку «Download the generated favicon». Вы скачаете архив со всеми возможными вариантами фавиконок. Возьмите favicon.ico и другие необходимые версии, подключите к странице проекта.

Итог

Итоговый способ подключения фавиконки:

<link rel="icon" href="favicon.ico"> <!-- 32×32 -->
<link rel="icon" href="images/favicons/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="images/favicons/apple.png">  <!-- 180×180 -->
<link rel="manifest" href="manifest.webmanifest">

manifest.webmanifest

{
  "icons": [
    { "src": "images/favicons/192.png", "type": "image/png", "sizes": "192x192" },
    { "src": "images/favicons/512.png", "type": "image/png", "sizes": "512x512" }
  ]
}

Таким способом мы будем поддерживать самые старые браузеры и самые новые.

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

Фавиконки — часть программы курса «HTML и CSS. Профессиональная вёрстка сайтов». Кроме этого в комплекте два месяца теории и практики, интересные проекты и личный наставник. А по промокоду SKUCHNO — скидка 1000 ₽.

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

С тех пор в разработке интерфейсов произошло море изменений: сначала в продакшн пришли флексы, потом подтянулись гриды, умер IE, все переехали из Фотошопа в Фигму, и много чего ещё. Каждое это изменение влияло на наши критерии, и мы постоянно их дорабатывали.

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

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

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

ARIA

Проект WebAIM Million ежегодно анализирует уровень доступности для людей с ограниченными возможностями главных страниц топ-миллиона сайтов. Один из опросов этого проекта показал, что на страницах с использованием ARIA обнаруживается на 41% больше ошибок, чем на страницах без использования этой технологии. 

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

Компания TPGi создала букмарклет WAI-ARIA, который сканирует роли различных элементов страницы и проверяет их совместимость с атрибутами ARIA. После активации букмарклета открывается новая вкладка с результатами сканирования страницы. В результатах вы увидите общее количество корректных ролей, обнаруженные ошибки и сниппеты кода, в которых эти ошибки были обнаружены: так вы сможете быстро и просто их устранить. 

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

Разработчик Адриан Розелли создал простой CSS-букмарклет, который проверяет, есть ли дубликаты у ARIA-ролей, и подсвечивает красным цветом ошибочные элементы. 

NerdeRegion — это расширение для браузера Chrome, которое регистрирует вывод всех динамических областей (ARIA Live Regions). Не можете понять, почему средство чтения с экрана неожиданно что-то озвучивает? NerdeRegion позволяет отследить эти объявления с указанием меток времени и их родительского элемента прямо в инструментах разработчика. Поскольку в разных средствах чтения с экрана могут возникать различные ошибки согласованности, связанные с ARIA Live Regions, этот инструмент может стать отличным помощником в вычислении причины проблемы — в коде ли она возникла или в комбинации устройств. 

Инструменты автоматизированного тестирования

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

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

Множество инструментов основаны на библиотеке тестирования доступности axe, поэтому может быть затруднительно комбинировать их с другими. Однако выбор инструмента куда больше зависит от предпочитаемого вами интерфейса и уровня полноты результатов. К примеру, встроенный в Google Chrome инструмент Lighthouse использует частичный набор атрибутов axe. Если вам уже удалось получить чистые результаты через axe DevTools, нет необходимости запускать сканирование через Lighthouse. 

Axe DevTools распространяется в качестве расширения для браузеров Chrome и Firefox. После установки в панели инструментов разработчика появляется отдельная вкладка. Тестировать можно как целую страницу, так и её часть. Обнаруженные ошибки сортируются по уровню критичности и сопровождаются сниппетами кода для простоты устранения ошибок. Благодаря функции Intelligent Guided Tests через axe отлавливается больше ошибок, чем через другие инструменты автоматизированного тестирования. Эта функция определяет области для автоматизированного тестирования, проверяет их на ошибки, а затем задает разработчику несколько контрольных тестировочных вопросов. Кроме того, axe позволяет сохранять и экспортировать результаты — полезные функции, если исправление ошибок является частью длительного командного процесса разработки. 

Accessibility Insights, как и axe DevTools, использует библиотеку axe, но некоторые функции отличают его от предыдущего инструмента. Этот сервис запускается на различных платформах, в том числе Android, Windows, а также в качестве браузерного расширения. Во всех версиях Accessibility Insights содержится нечто вроде проводника, позволяющего найти информацию о конкретном элементе и запустить автоматическую проверку. Веб-расширение содержит функцию оценки (Assessment), которая сочетает автоматизированные, полуавтоматизированные (пошаговые) и ручные методы тестирования. Это позволяет получить наиболее полный отчёт об ошибках.  

Сервис WAVE от организации WebAIM — неотъемлемая часть моего набора инструментов. Он доступен в виде браузерного расширения, сервиса массового тестирования и API. Простота и скорость сделали этот сервис моим фаворитом. Вся информация загружается в боковой панели, где отображается цельная картина обнаруженных ошибок. Если вы увидели в панели ошибку, но не уверены, как найти её в DOM, можно отключить стили и ориентироваться уже в разметке. Моя любимая функция — функция отображения ключевых элементов и заголовков, поскольку она позволяет мне убедиться в корректной семантике документа. 

У платного сервиса SiteImprove есть бесплатное расширение для Chrome. Как и WAVE, после запуска он раскрывает на странице боковую панель, где отображаются ошибки. Ошибки можно фильтровать по уровню соответствия, критичности и зоне ответственности. Фильтр по уровню критичности особенно полезен, поскольку автоматизированное тестирование зачастую выдаёт ложноположительные результаты.

Цвета

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

При подборе цветовой палитры сайта может быть полезным встроенный в браузер инструмент выбора цвета. Один из них — Are My Colors Accessible. В базовом режиме инструмент рассчитывает уровень контрастности между двумя цветами. Размер и жирность шрифта влияют на контрастность и соответствие требованиям доступности; этот инструмент выводит информацию о всех стандартах, которым удовлетворяет то или иное начертание. При помощи ползунков «тон–насыщенность–яркость» можно настроить любой из цветов и отслеживать изменения результатов в реальном времени. Режим палитры позволяет комбинировать все цвета палитры друг с другом и проверить соответствие сочетаний уровню контрастности и стандартам. Это поможет определить, какие именно цвета лучше совместить. После каждого изменения настройки инструмент генерирует постоянную ссылку, которой можно поделиться с командой. 

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

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

Существуют инструменты, помогающие решить проблемы с цветовой доступностью элементов страницы. Например, не так просто выбрать цвета для кнопок, поскольку нужно учитывать не только сочетание цвета текста кнопки с цветом её фона, но и её сочетание с цветом подложки страницы. Проект Стефани Эклс (Stephanie Eckles) ButtonBuddy объясняет существующие требования к цветовой доступности простым языком и помогает выбрать цвета для конкретных элементов.

Некоторые комбинации цветов технически могут удовлетворять требованиям к контрастности и легко восприниматься людьми без проблем со зрением, однако вызывать трудности у людей со слабым зрением и тех, кто испытывает проблемы с различением цветов. Сервис Who Can Use применяет к выбранным цветам специальный фильтр, имитирующий разные виды дефектов цифрового зрения, а затем рассчитывает приблизительную контрастность.

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

Случается, что работа над проектом начинается вовсе без единой и согласованной цветовой палитры. Как только разработка переходит в активную стадию, постоянный импорт цветовых палитр в среду разработки может вызвать раздражение. На этот случай есть инструменты, которые позволяют проверить контрастность прямо в среде разработки. Алекс Клаппертон (Alex Clapperton) создал инструмент CLI, которому вы передаёте информацию о двух цветах, а на выходе в терминале получаете данные о контрастности и соответствии требованиям доступности. Компания BBC выпустила инструмент проверки контрастности цвета на основе JavaScript, который также определяет, насколько выбранные два цвета удовлетворяют указанным вами требованиям. Такой инструмент может лежать в базе кода вместе с тестами или внедриться в вашу систему проектирования, например Storybook, PatternLab и так далее.

A11y Color Tokens делает ещё один шаг, автоматически генерируя комплементарные цвета в CSS или SASS. Вы передаёте сервису цвет и уровень контрастности, в ответ получая цветовой оттенок, который соответствует требованиям. Если вам нужно быстро проверить контрастность, Chrome и Firefox показывают информацию о контрастности в инструментах разработчика. 

Если ни один из перечисленных инструментов не удовлетворяет вашим запросам, рекомендуем перейти к посту Стефани Уолтер.

Совместимость

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

Не все браузеры и средства чтения с экрана хорошо сочетаются друг с другом; не все функции доступности в равной мере поддерживаются всеми браузерами. Есть инструменты, которые позволяют проверить, связана ли ошибка с конкретной комбинацией устройств. HTML5 Accessibility представляет собой список актуальных функций HTML и насколько они доступны для лиц с ограниченными возможностями при настройках браузера по умолчанию. Accessibility Support также предоставляет список атрибутов ARIA с информацией об их поддержке наиболее распространёнными комбинациями браузеров и средств чтения с экрана.

Управление вниманием

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

Букмарклет от компании Level Access помечает каждый фокусируемый элемент на странице. Так вы можете проверить, соответствует ли порядок чтения порядку концентрации внимания. В Accessibility Inspector от Firefox эта функция доступна в версиях начиная с 84. 

При работе со сложными базами кода, где различные компоненты кода третьей стороны могут непредсказуемо смещать фокус внимания, может оказаться полезен небольшой сниппет от Скотта Винкла (Scott Vinkle). Он подсвечивает элемент, находящийся в фокусе прямо сейчас. Если мне не удается выяснить, как смещается фокус внимания в других частях моего приложения, порой я заменяю console.log на console.trace.

Если нужно проверить все стили фокусного выделения на странице, в качестве отправной точки можно использовать скрипт Скотта О'Хары (Scott O’Hara). Переключение между элементами во вкладках может быть весьма утомительным занятием — скрипт поможет обеспечить цельность стилей фокуса и работать внутри контекста страницы.

Популярный трюк при проверке доступности страницы — установка положительного значения в атрибуте tabindex. Элементы с положительным значением принудительно вызываются браузером первыми. Технически такой фокус не является ошибкой, однако на практике такой подход часто приносит больше проблем, чем решает. Разработчик Пол Дж. Адам (Paul J. Adam) представил букмарклет tabindex, который позволяет подсветить все элементы с атрибутом tabindex.

Удобство использования макета

Порядок чтения документа порой может не совпадать с ожиданиями читателя, если макет слишком полагается на свойство order во флексбоксе или на CSS Grid. Адриан Розелли создал букмарклет для отслеживания порядка чтения. Он поможет убедиться в том, что ваш сайт соответствует требованиям осмысленной последовательности. 

Требования WCAG (Web Content Accessibility Guidelines) содержат критерий расстояния между текстовыми элементами, согласно которому контент должен корректно отображаться даже в случае применения определённых настроек межтекстового расстояния. Для тестирования таких случаев разработчик Стив Фолкнер создал букмарклет, который автоматически применяет нужные настройки межтекстового расстояния на странице. Если вы не задаёте фиксированную высоту и пользуетесь атрибутом overflow, это не только повышает доступность вашего сайта, но и гарантирует сохранность макета страницы — редакторы контента будут благодарны вам за это! 

Джаред Смит (Jared Smith) создал букмарклет, который превращает курсор в бокс с габаритами 44x44. С помощью этого бокса вы сможете проверить, все ли элементы управления на странице соответствуют рекомендованным размерам. 

Инструменты контроля качества кода

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

Многим разработчикам в той или иной степени знаком инструмент ESLint. Вместо того, чтобы изучать новые сервисы, можно расширить функциональность уже знакомого при помощи новых плагинов, которые позволят протестировать доступность сайта. Eslint-plugin-jsx-a11y — это плагин ESLint для JSX-элементов, который показывает ошибки по мере написания кода. Рекомендуем ознакомиться с полезным руководством Скотта Винкла по настройке этого плагина. 

Компания Deque выпустила инструмент axe Linter, доступный в виде Github-приложения или расширения для VS Code. Он проверяет файлы React, Vue, HTML и Markdown на соответствие ключевым правилам и собственным стандартам, при этом не требует никаких настроек конфигурации. Полезная функция: инструмент знаком со стандартами WCAG 2 и WCAG 2.1, что позволяет с лёгкостью обеспечить соответствие конкретным требованиям. 

Разметка

Веб стремится к устойчивости. При сломанной разметке браузер стремится загладить любую ошибку. Тем не менее, такое поведение может вызвать побочные эффекты как со стороны стилей, так и с точки зрения доступности. Инструмент W3C HTML validator позволяет отловить такие ошибки, как сломанные теги, неверно приписанные атрибуты и другие ошибки в HTML. Компания Deque на основе того же движка разработала букмарклет W3C HTML Validator, который позволяет проверить разметку на локальной машине или на защищённых паролем страницах, недоступных для обычных валидаторов.

Если вы предпочитаете наглядность, воспользуйтесь проектом Гёля Пупарда (Gaël Poupard) a11y.css.  Эта таблица стилей проверяет разметку на возможные риски и доступна как в формате расширения, так и в формате букмарклета. Вам доступна настройка языка, а также уровень отображаемого устройства. 

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

Читабельность

Доступный сайт начинается с доступного содержимого. Когнитивная доступность стала главным фокусом грядущего стандарта WCAG 3 и упоминается в критерии успеха 3.1.5, который предполагает, что материалы сайта должны без проблем восприниматься пользователями с уровнем грамотности 7–9 класса средней школы.

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

Если ваш сайт уже в публичном доступе, воспользуйтесь инструментом проверки читаемости Juicy Studio. Вам будет необходимо вставить в форму URL страницы и дождаться анализа и оценки при помощи трёх различных алгоритмов определения читабельности. Также вы увидите полезные объяснения по каждому виду оценки. У инструмента есть и ограничения: он анализирует абсолютно все тексты на странице, в том числе и тексты в футере или элементах навигации, что может оказать отрицательное влияние на результаты. 

Пакеты для тестирования и непрерывная интеграция

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

И снова на арене появляется библиотека с открытым кодом axe, которая является основой для многих инструментов. Успешность работы выбранного вами инструмента будет зависеть от того, насколько хорошо он интегрируется с кодом, а не от различий в результатах тестирования. Рекомендуем ознакомиться с постом Марси Саттон (Marcy Sutton), в котором содержится руководство по написанию автоматизированных тестов на доступность, не зависящих от используемых фреймворков. В руководстве освещается разница между юнит-тестами и интеграционными тестами, а также преимущества выбора того или иного варианта в зависимости от тестировочного сценария. 

Если вы уже определились с любимым фреймворком, скорее всего, вы уже используете библиотеку на основе axe. Вы можете ознакомиться с руководством по cypress-axe от Доша МакКлура (Josh McClure) или руководством Ника Колли (Nick Colley) по jest-axe — версией на основе Jest. 

Pa11y — это инструмент, предоставляющий настраиваемый интерфейс. Он доступен и в CI-версии. Многочисленные опции настройки позволяют решать широкий спектр задач тестирования. К примеру, функция Actions позволяет пропустить некоторое количество действий, что полезно для тестирования экранов, которые требуют аутентификации. 

Пользовательские предпочтения

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

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

Подводя итоги

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

Хочется ещё инструментов? The A11y Project и Stark ведут проверяемый экспертами список инструментов для проверки доступности. 

Расскажите в комментариях о своих инструментах — нам интересно, что вы применяете в повседневной работе!

В HTML Academy скоро начинается курс «HTML и CSS. Профессиональная вёрстка сайтов». В комплекте два месяца теории и практики, интересные проекты и личный наставник. А по промокоду SKUCHNO — скидка 1000 ₽.

Рекомендуемый минимум

Ниже приведены основные элементы для любого веб-документа (веб-сайта/приложения):

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!--
   Вышеуказанные 2 мета-тега *должны* стоять как можно раньше в <head>.
   для обеспечения правильного отображения документов.
   Любой другой элемент заголовка должен идти *после* этих тегов.
  -->
  <title>Заголовок страницы</title>
</head>

meta charset - определяет кодировку веб-сайта, стандартом является utf-8.

meta name="viewport" - настройки viewport, связанные с мобильной отзывчивостью

width=device-width - физическая ширина устройства (отлично подходит для мобильных устройств!)

initial-scale=1 - начальный масштаб, 1 означает отсутствие масштабирования.

Элементы

Допустимые элементы <head>включают base, link, meta, noscript, script, style, templateи title.

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

<!--
 Установите кодировку символов для этого документа так, чтобы
 все символы в пространстве UTF-8 (например, эмодзи)
 отображались правильно.
-->
<meta charset="utf-8">

<!-- Установите заголовок документа -->
<title>Заголовок страницы</title>

<!-- Установите базовый URL для всех относительных URL в документе -->
<base href="https://example.com/page.html">

<!-- Ссылка на внешний файл CSS -->
<link rel="stylesheet" href="styles.css">

<!-- Используется для добавления CSS в документ. Используется для важной стилизации -->
<style>
/* ... */
</style>

<!-- Ссылка на внешний JavaScript файл -->
<script src="script.js"></script>

<!-- Используется для добавление JS в документ-->
<script>
 // функция(и) идут здесь
</script>

<!-- Используется на случай если JavaScript отключен в браузере -->
<noscript>

 <!-- Альтернатива, когда JS отключен -->
</noscript>

<!-- Используется для объявления HTML-фрагментов, которые могут быть клонированы и вставлены в документ. Если указан в <head>, то <template> может содержать только метаданные -->
<template>
  
</template>

Мета

<!--
 Вышеуказанные 2 мета-тега должны стоять как можно раньше в <head>.
 для обеспечения правильного отображения документов.
 Любой другой элемент заголовка должен идти после этих тегов.
-->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--
 Позволяет контролировать, откуда загружаются ресурсы.
 Поместите как можно раньше в <head>, так как тег 
 применяется только к ресурсам, которые объявлены после него.
-->
<meta http-equiv="Content-Security-Policy" content="default-src 'self'">

<!-- Название веб-приложения (должно использоваться только в том случае, если веб-сайт используется как приложение) -->
<meta name="application-name" content="Имя приложения">.

<!-- Цвет вкладки для Chrome на Android, Vivaldi, Safari 15 -->
<meta name="theme-color" content="#4285f4">

<!-- Краткое описание документа (ограничение до 150 символов) -->
<!-- Это содержимое может использоваться в результатах поисковых систем. -->
<meta name="description" content="Описание страницы">.

<!-- Управление поведением поисковых машин при осмотре и индексации сайта -->
<meta name="robots" content="index,follow"><!-- Все поисковые системы -->
<meta name="googlebot" content="index,follow"><!-- Специфика Google -->

<!-- Указывает Google не показывать поисковую строку sitelinks -->
<meta name="google" content="nositelinkssearchbox">

<!-- Указывает Google не переводить документ -->
<meta name="google" content="notranslate">

<!-- Проверить право собственности сайта -->
<meta name="google-site-verification" content="verification_token"><!-- Google Search Console -->
<meta name="yandex-verification" content="verification_token"><!-- Яндекс Вебмастерам -->
<meta name="msvalidate.01" content="verification_token"><!-- Bing Webmaster Center -->
<meta name="alexaVerifyID" content="verification_token"><!-- Alexa Console -->
<meta name="p:domain_verify" content="code_from_pinterest"><!-- Pinterest Console-->
<meta name="norton-safeweb-site-verification" content="norton_code"><!-- Norton Safe Web -->

<!-- Укажите программное обеспечение, использованное для создания документа (например, WordPress, Dreamweaver) -->
<meta name="generator" content="название программного обеспечения">

<!-- Краткое описание темы вашего документа -->
<meta name="subject" content="тема вашего документа">

<!-- Дает общую возрастную оценку, основанную на содержании документа -->
<meta name="rating" content="General">

<!-- Позволяет контролировать, как передается информация о реферере -->
<meta name="referrer" content="no-referrer">

<!-- Отключить автоматическое определение и форматирование возможных телефонных номеров -->
<meta name="format-detection" content="phone=no">

<!-- Полностью отказаться от предварительной выборки DNS, установив значение "off" -->
<meta http-equiv="x-dns-prefetch-control" content="off">

<!-- Указывает документ, который будет отображаться в определенном фрейме -->
<meta http-equiv="Window-Target" content="_value">

<!-- Гео-теги -->
<meta name="ICBM" content="широта, долгота">.
<meta name="geo.position" content="широта;долгота">
<meta name="geo.region" content="country[-state]"><!-- Код страны (ISO 3166-1): обязательный, код штата (ISO 3166-2): необязательный; например, content="US" / content="US-NY" -->
<meta name="geo.placename" content="city/town"><!-- например, content="New York City" -->

<!-- Монетизация веб-сайтов https://webmonetization.org/docs/getting-started -->
<meta name="monetization" content="$paymentpointer.example">

• ​ Мета-теги, которые понимает Google

• ​ WHATWG Wiki: MetaExtensions

• ​ ICBM в Википедии

• ​ Геотеги в Википедии

Ссылки

<!-- Путь до внешней таблицы стилей -->
<link rel="stylesheet" href="https://example.com/styles.css">.

<!-- Помогает предотвратить проблемы дублированного контента -->
<link rel="canonical" href="https://example.com/article/?page=2">

<!-- Ссылки на AMP HTML версию текущего документа -->
<link rel="amphtml" href="https://example.com/path/to/amp-version.html">

<!-- Ссылка на JSON-файл, в котором указаны данные для "установки" веб-приложения -->
<link rel="manifest" href="manifest.json">
<link rel="manifest" href="manifest.webmanifest">

<!-- Ссылки на информацию об авторе (авторах) документа -->
<link rel="author" href="humans.txt">

<!-- Ссылается на заявление об авторском праве, применимое к контексту ссылки -->
<link rel="license" href="copyright.html">

<!-- Дает ссылку на место в вашем документе, который может быть на другом языке -->
<link rel="alternate" href="https://es.example.com/" hreflang="es">

<!-- Предоставляет информацию об авторе или другом человеке -->
<link rel="me" href="https://google.com/profiles/thenextweb" type="text/html">
<link rel="me" href="mailto:name@example.com">.
<link rel="me" href="sms:+15035550125">

<!-- Ссылки на документ, описывающий коллекцию записей, документов или других материалов, представляющих исторический интерес -->
<link rel="archives" href="https://example.com/archives/">

<!-- Ссылки на ресурс верхнего уровня в иерархической структуре -->
<link rel="index" href="https://example.com/article/">

<!-- Обеспечивает самостоятельную ссылку - полезно, когда документ имеет несколько возможных ссылок -->
<link rel="self" type="application/atom+xml" href="https://example.com/atom.xml">

<!-- Первый, последний, предыдущий и следующий документы в серии документов, соответственно -->
<link rel="first" href="https://example.com/article/">
<link rel="last" href="https://example.com/article/?page=42">
<link rel="prev" href="https://example.com/article/?page=1">
<link rel="next" href="https://example.com/article/?page=3">

<!-- Используется, когда для ведения блога используется сторонний сервис -->
<link rel="EditURI" href="https://example.com/xmlrpc.php?rsd" type="application/rsd+xml" title="RSD">

<!-- Формирует автоматический комментарий, когда другой блог WordPress ссылается на ваш блог WordPress или пост -->
<link rel="pingback" href="https://example.com/xmlrpc.php">

<!-- Уведомляет URL, когда вы ссылаетесь на него в вашем документе -->
<link rel="webmention" href="https://example.com/webmention">

<!-- Позволяет размещать сообщения на вашем собственном домене с помощью клиента Micropub -->
<link rel="micropub" href="https://example.com/micropub">

<!-- Open Search -->
<link rel="search" href="/open-search.xml" type="application/opensearchdescription+xml" title="Заголовок поиска">.

<!-- Фиды -->
<link rel="alternate" href="https://feeds.feedburner.com/example" type="application/rss+xml" title="RSS">
<link rel="alternate" href="https://example.com/feed.atom" type="application/atom+xml" title="Atom 0.3">

<!-- Prefetching, preloading, prebrowsing -->
<!-- Дополнительная информация: https://css-tricks.com/prefetching-preloading-prebrowsing/ -->
<link rel="dns-prefetch" href="//example.com/">
<link rel="preconnect" href="https://www.example.com/">
<link rel="prefetch" href="https://www.example.com/">
<link rel="prerender" href="https://example.com/">.
<link rel="preload" href="image.png" as="image">

• ​ Link Relations

Иконки

<!-- Для IE 10 и ниже -->
<!-- Поместите favicon.ico в корневой каталог - тег не нужен -->
<!-- Иконка в максимальном разрешении, для которого она нам нужна -->
<link rel="icon" sizes="192x192" href="/path/to/icon.png">

<!-- Иконка Apple Touch (повторное использование 192px icon.png) -->
<link rel="apple-touch-icon" href="/path/to/apple-touch-icon.png">

<!-- Значок прикрепленной вкладки Safari -->
<link rel="mask-icon" href="/path/to/icon.svg" color="blue">

• ​ Все о фавиконах (и сенсорных иконках)

• ​ Создание прикрепленных иконок вкладок

• ​ Favicon Cheat Sheet

• ​ Иконки и цвета браузера

Социальные сети

Facebook Open Graph

Большинство материалов передается на Facebook в виде URL, поэтому важно, чтобы вы разметили свой сайт тегами Open Graph, чтобы взять под контроль то, как ваши материалы появляются на Facebook. Подробнее о разметке Facebook Open Graph

<meta property="fb:app_id" content="123456789">
<meta property="og:url" content="https://example.com/page.html">
<meta property="og:type" content="website">
<meta property="og:title" content="Заголовок содержимого">
<meta property="og:image" content="https://example.com/image.jpg">
<meta property="og:image:alt" content="Описание того, что находится на изображении (не подпись)">
<meta property="og:description" content="Описание">
<meta property="og:site_name" content="Название сайта">
<meta property="og:locale" content="ru_RU">
<meta property="article:author" content="">

• ​ Open Graph protocol

• ​ Протестируйте свою страницу с помощью Facebook Sharing Debugger

Twitter Card

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

<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@site_account">
<meta name="twitter:creator" content="@individual_account">
<meta name="twitter:url" content="https://example.com/page.html">
<meta name="twitter:title" content="Заголовок контента">.
<meta name="twitter:description" content="Описание контента менее 200 символов">.
<meta name="twitter:image" content="https://example.com/image.jpg">.
<meta name="twitter:image:alt" content="Текстовое описание изображения, передающее его суть пользователям с ослабленным зрением. Максимум 420 символов.">

• ​ Начало работы с карточками - Twitter Developers

• ​ Проверьте свою страницу с помощью Twitter Card Validator

Twitter Privacy

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

<!-- запретить Twitter использовать информацию о вашем сайте в целях персонализации -->
<meta name="twitter:dnt" content="on">

Schema.org

<html lang="" itemscope itemtype="https://schema.org/Article">
   <head>
     <link rel="author" href="">
     <link rel="publisher" href="">
     <meta itemprop="name" content="Заголовок контента">.
     <meta itemprop="description" content="Описание содержимого менее 200 символов">.
     <meta itemprop="image" content="https://example.com/image.jpg">

Примечание: Эти мета-теги требуют добавления атрибутов itemscope и itemtype к тегу <html>.

• ​ Начало работы - schema.org

• ​ Протестируйте свою страницу с помощью Rich Results Test

Pinterest

Pinterest позволяет запретить людям сохранять страницы вашего сайта, согласно их центру помощи. Описание description является необязательным.

<meta name="pinterest" content="nopin" description="Извините, вы не можете сохранить с моего сайта!">.

Facebook Instant Articles

<meta charset="utf-8">
<meta property="op:markup_version" content="v1.0">

<!-- URL веб-версии вашей статьи -->
<link rel="canonical" href="https://example.com/article.html">

<!-- Стиль, который будет использоваться для этой статьи -->
<meta property="fb:article_style" content="myarticlestyle">

• ​ Создание статей - мгновенные статьи

• ​ Образцы кода - мгновенные статьи

OEmbed

<link rel="alternate" type="application/json+oembed"
 href="https://example.com/services/oembed?url=http%3A%2F%2Fexample.com%2Ffoo%2F&amp;format=json"
 title="Профиль oEmbed: JSON">
 
<link rel="alternate" type="text/xml+oembed"
 href="https://example.com/services/oembed?url=http%3A%2F%2Fexample.com%2Ffoo%2F&amp;format=xml"
 title="oEmbed Profile: XML">

• ​ oEmbed format

QQ/Wechat

Пользователи обмениваются веб-страницами в qq wechat с помощью форматированного сообщения

<meta itemprop="name" content="название акции">
<meta itemprop="image" content="http://imgcache.qq.com/qqshow/ac/v4/global/logo.png">
<meta name="description" itemprop="description" content="поделиться содержимым">

• ​ Code Format Docs

Браузеры / Платформы

Apple iOS

<!-- Баннер умного приложения -->
<meta name="apple-itunes-app" content="app-id=APP_ID,affiliate-data=AFFILIATE_ID,app-argument=SOME_TEXT">

<!-- Отключить автоматическое определение и форматирование возможных телефонных номеров -->
<meta name="format-detection" content="phone=no">

<!-- Иконка запуска (180x180px или больше) -->
<link rel="apple-touch-icon" href="/path/to/apple-touch-icon.png">

<!-- Изображение экрана запуска -->
<link rel="apple-touch-startup-image" href="/path/to/launch.png">

<!-- Заголовок значка запуска -->
<meta name="apple-mobile-web-app-title" content="Название приложения">.

<!-- Включить автономный (полноэкранный) режим -->
<meta name="apple-mobile-web-app-capable" content="yes">

<!-- Внешний вид строки состояния (не влияет, если не включен автономный режим) -->
<meta name="apple-mobile-web-app-status-bar-style" content="black">

<!-- Глубокое связывание приложений iOS -->
<meta name="apple-itunes-app" content="app-id=APP-ID, app-argument=http/url-sample.com">
<link rel="alternate" href="ios-app://APP-ID/http/url-sample.com">

• ​ Configuring Web Applications

Google Android

<!-- Цветовая тем приложения -->
<meta name="theme-color" content="#E64545">

<!-- Добавить на главный экран -->
<meta name="mobile-web-app-capable" content="yes">
<!-- Дополнительная информация: https://developer.chrome.com/multidevice/android/installtohomescreen -->

<!-- Глубокое связывание приложений Android -->
<meta name="google-play-app" content="app-id=package-name">
<link rel="alternate" href="android-app://package-name/http/url-sample.com">

Google Chrome

<link rel="chrome-webstore-item" href="https://chrome.google.com/webstore/detail/APP_ID">.
<!-- Отключить подсказку перевода -->
<meta name="google" content="notranslate">

Microsoft Internet Explorer

<!-- Заставить IE 8/9/10 использовать свой последний движок рендеринга -->
<meta http-equiv="x-ua-compatible" content="ie=edge">

<!-- Отключить автоматическое определение и форматирование возможных телефонных номеров расширением для браузера Skype Toolbar-->
<meta name="skype_toolbar" content="skype_toolbar_parser_compatible">

<!-- Плитки Windows -->
<meta name="msapplication-config" content="/browserconfig.xml">

Минимально необходимая разметка xml для browserconfig.xml:

<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
    <msapplication>
        <tile>
            <square70x70logo src="small.png"/>
            <square150x150logo src="medium.png"/>
            <wide310x150logo src="wide.png"/>
            <square310x310logo src="large.png"/>
        </tile>
    </msapplication>
</browserconfig>

• ​ Ссылка на схему конфигурации браузера

Браузеры (китайские)

360 Browser

<!-- Выбор порядка движков рендеринга -->
<meta name="renderer" content="webkit|ie-comp|ie-stand">

QQ Mobile Browser

<!-- Фиксирует экран в заданной ориентации -->
<meta name="x5-orientation" content="landscape/portrait">

<!-- Отображение этого документа в полноэкранном режиме -->
<meta name="x5-fullscreen" content="true">

<!-- Документ будет отображаться в "режиме приложения" (полноэкранный режим и т.д.) -->
<meta name="x5-page-mode" content="app">

UC Mobile Browser

<!-- Фиксация экрана в заданной ориентации -->
<meta name="screen-orientation" content="landscape/portrait">

<!-- Отображение этого документа в полноэкранном режиме -->
<meta name="full-screen" content="yes">

<!-- Браузер UC будет отображать изображения, даже если находится в "текстовом режиме" -->
<meta name="imagemode" content="force">

<!-- Документ будет отображаться в "режиме приложения" (полноэкранный режим, запрещающий жест и т.д.) -->
<meta name="browsermode" content="application">

<!-- Отключение "ночного режима" браузера UC для этого документа -->
<meta name="nightmode" content="disable">

<!-- Упростить документ, чтобы уменьшить передачу данных -->
<meta name="layoutmode" content="fitscreen">

<!-- Отключить функцию браузера UC "увеличивать масштаб шрифта, когда в документе много слов" -->
<meta name="wap-font-scale" content="no">

• ​ UC Browser Docs

Ссылки на приложения

<!-- iOS -->
<meta property="al:ios:url" content="applinks://docs">
<meta property="al:ios:app_store_id" content="12345">
<meta property="al:ios:app_name" content="App Links">

<!-- Android -->
<meta property="al:android:url" content="applinks://docs">
<meta property="al:android:app_name" content="App Links">
<meta property="al:android:package" content="org.applinks">

<!-- Web fall back -->
<meta property="al:web:url" content="https://applinks.org/documentation">

• ​ Ссылки на приложения

Другие ресурсы

• ​ HTML5 Boilerplate Docs: The HTML

• ​ HTML5 Boilerplate Docs: Extend and customize

Связанные проекты

• Atom HTML Head Snippets - Atom пакет для HEAD сниппетов

• Sublime Text HTML Head Snippets - пакет Sublime Text для HEAD сниппетов

• head-it - CLI интерфейс для HEAD сниппетов

• vue-head - Манипулирование метаинформацией тега HEAD для Vue.js

Другие форматы

• ​ PDF eng

​ Переводы

• ​ Индонезийский

• ​ Бразильский португальский

• ​ Китайский (упрощенный)

• ​ Немецкий

• ​ Итальянский

• ​ Японский

• ​ Корейский

• ​ Испанский

• ​ Турецкий

​ Contributing

Откройте issue или PR, чтобы предложить изменения или дополнения.

​ Contributors

Посмотрите на всех супер классных авторов ​

​ Автор оригинального репозитория

Josh Buchea

• GitHub: @joshbuchea

• Twitter: @joshbuchea

​ Поддержка

Если этот проект был полезен для вас или вашей организации, пожалуйста, рассмотрите возможность прямой поддержки моей работы автора оригинального репозитория:

• ​ Sponsor me on GitHub

• ​ Star this project on GitHub

• ​ Следуйте за Джошем на GitHub

• ​ Следуйте за Джошем в Twitter

Всем кто помогает, спасибо! ​

— Josh

Примечание автора: это русский перевод репозитория HEAD от Josh Buchea. Мы поддерживаем русскую версию в отдельном репозитории, куда вы можете отправлять issue или PR напрямую, если нашли неточности или вам есть, что добавить. Публикуем перевод, чтобы поделиться с русскоязычным сообществом полезным материалом.

Другие важные статьи

Семантическая вёрстка

Pixel Perfect

Стоит ли делать слайдеры на CSS

Что использовать: ссылки или кнопки

Когда использовать флексы, а когда гриды