1. Швидкий Нагівація для цієї статті Потенціал HTML5 для SEO та доступності Підтримка браузера Чому...
2. SEO
3. Чому оптимізатори SEO стежать за HTML5?
4. SEO Міф 1: Рейтинг
5. Цікаві факти
6. Ставки на теги
7. Багатий вміст
8. Міф 2: HTML5 і відео SEO (VSEO)
9. Багаті фрагменти: HTML5 Мікроданні
10. Міф 3: велика дискусія h1
11. Висновок:
12. Доступність
13. Використання семантичного HTML покращує доступність
14. Інваліди - це кілька статистичних даних
15. Норми та стандарти
16. 3 Тести швидкої доступності a11yproject.com за 10 хвилин
17. Поради щодо тестування:
18. HTML5 - Аудіо, відео та доступність
19. Конкретні приклади
20. Фігура елемент для зображень

Швидкий Нагівація для цієї статті

Потенціал HTML5 для SEO та доступності
Підтримка браузера
Чому SEO стежить за HTML5
Міфи SEO щодо HTML5
Доступність
Стандарти
3 швидкі перевірки доступності
Форми
Конкретні приклади

Потенціал HTML5, який можна побачити в очах спеціалістів з SEO та доступності

• Покращено UX
• Нові теги для класифікації вмісту
• Чудова альтернатива Flash & Silverlight
• Значно використовується в програмах і іграх
• Покращено сканування та індексацію
• Покращені форми
• Використовується в програмах і іграх

Оновлення підтримки браузера завдяки HTML5accessibility.com

68/100 + 94.5 / 100 91/100 37/100 ?? / 100

SEO

Коли сумнівається в Google. Так що якщо ви Google SEO, ви отримаєте наступне визначення:

Пошукова оптимізація ( SEO ) - це процес впливу на видимість веб-сайту або веб-сторінки в «природних» або неплачених («органічних») пошукових системах.

Є 3 стовпи для SEO: технічні, зміст, посилання.

Чому оптимізатори SEO стежать за HTML5?

• Це зручно для веб-сайтів із різноманітними медіа
• Код роздуття можна тримати під контролем
• Це допомагає зрозуміти зміст
• Це допомагає зробити Ajax SEO-дружній

Немає жодних доказів того, що HTML5 впливає на SEO, але має великий потенціал для зміни способу індексування та розуміння змісту пошукових систем.

SEO Міф 1: Рейтинг

Пошукові системи не виходять на вплив HTML5 на рейтинги пошукових систем. Однак пошукові системи йдуть на семантичний маршрут, тому семантичні елементи полегшують сканерам зрозуміти наміри кожного елемента.

Цікаві факти

SEO експерти ненавидять нічого більше, ніж веб-сайт у Flash. Добре, можливо, вони ненавидять веб-сайт з паралаксами, який не використовує API історії.

• Rich Media: чудова підтримка ALT для аудіо та відео елементів
• Розшарування коду: ми можемо використовувати більш простий HTML-Доктіп з HTML5
• Зміст: семантична розмітка допомагає сканерам отримувати блоки, які виконуються на сторінці
• Ajax: зміна URL-адреси в адресному рядку без додаткового оновлення з API історії

Ставки на теги

Ось деякі теги, які можуть виявитися критичними для успіху SEO веб-сайту

<article> для незалежного блоку контенту.

< section> для підрозділу блоку вмісту.

< header>, щоб вказати заголовок сторінки або розділ заголовка автономного блоку контенту.

< footer> для всього документа HTML або колонтитула <article>.

< nav > для основної навігації по сайту, посилання на попередню / наступну статтю, нумерацію сторінок.

< aside> для вмісту, пов'язаного, але не з основним документом.

< відео>, щоб забезпечити спосіб перегляду відео, сумісний із різними браузерами.

Семантичний HTML говорить голосніше, ніж тисяча дивів. Семантична розмітка говорить про програмне забезпечення і, в свою чергу, дозволяє веб-майстрам говорити з пошуковими системами

Багатий вміст

Аудіо: <audio> означає, що в кінцевому підсумку нам більше не доведеться покладатися на плагіни третьої сторони, щоб відтворювати аудіо.

Зображення: <figure> і <figurecaption> дозволяють оптимізаторам оптимізувати зображення краще пошуковій системі та користувачам.

Відео: <video> визначає стандартний спосіб вбудовування відео на веб-сторінку. SEO можуть розповідати пошуковим системам про вміст, пов'язаний з відео, наприклад, <captions> та <subtitles>.

Міф 2: HTML5 і відео SEO (VSEO)

HTML5 дозволяє використовувати мітки, підписи та субтитри на відеовмісті.

Багаті фрагменти: HTML5 Мікроданні

Google підтримує Rich Snippets для інших типів даних, включаючи продукти, рецепти, відгуки, події та інформацію про програмне забезпечення.

Раніше ви отримували цей тип розмітки за допомогою звичайного HTML-коду:

<div> Мене звуть Боб Сміт, але люди називають мене Smithy. Ось моя домашня сторінка: <a href = "http://www.example.com"> www.example.com </a> Я живу в місті Альбукерке, штат Нью-Йорк і працюю інженером в корпорації ACME. </div>

Це виглядає так з HTML5:

<div itemscope itemtype = "http://schema.org/Person"> Мене звуть <span itemprop = "name"> Bob Smith </span>, але люди називають мене <span itemprop = "nickname"> Smithy </ span >. Ось моя домашня сторінка: <a href = "http://www.example.com" itemprop = "url"> www.example.com </a> Я живу в місті Альбукерке, штат Нью-Йорк, і працюю як <span itemprop = "title"> інженер </span> в <span itemprop = "affiliation"> ACME Corp </span>. </div>

HTML5 підтримує мікроданні геолокації, коли вміст, заснований на розташуванні, семантично розміщено, що чудово підходить для мобільних і локальних SEO.

Міф 3: велика дискусія h1

1.Ви можете використовувати кілька тегів H1, не вбиваючи SEO

2. РУХ ЗУМ: Один Н1 на секцію

3.RULE OF DUMB: експерти SEO часто рекомендують один H1, тому що клієнти ніколи не виконують ієрархію контенту належним чином.

Ось тут SEO і доступність можуть відрізнятися в думках: навігаційні меню і колонтитули не повинні бути частиною ієрархії вмісту, як H-теги, оскільки вони часто не додають нічого, щоб зрозуміти загальну тему сторінки.

Висновок:

Часто, якщо ви піклуєтеся про технічний контрольний перелік SEO, вам вдалося покрити 70% технічного переліку доступності.

Доступність

Комплексне визначення доступності

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

Чотири ключові області доступності інвалідності прагнуть розглянути:

• Слухання
• Мобільність
• Когнітивні
• Візуальний

Використання семантичного HTML покращує доступність

Семантичний HTML означає, що HTML-теги на сторінці повинні описувати зміст таким чином, що має відношення до його змісту, а не до його презентації.

Ajax - HTML5 дозволяє оновлювати сторінку, не перезавантажуючи вміст, який по черзі дозволяє користувачеві продовжувати перегляд без повторного запуску.

HTML5 допомагає підтримувати модель W3C POUR:

P = Можливо

O = Працездатний

U = зрозумілий

R = Надійна

Інваліди - це кілька статистичних даних

Від 110 до 190 мільйонів дорослих мають значні труднощі у функціонуванні. Це приблизно 15% населення світу.

Оскільки ця розмова представлена ​​в Канаді, це призводить до ігнорування 13,7% дорослого населення країни.

Норми та стандарти

Всесвітній стандарт - WCAG 2.0 (Правила щодо вмісту веб-доступності)

У Квебеку є 3 стандарти:

• SGQRI-008-01
• SGQRI-008-02
• SGQRI-008-03

Онтаріо має закон про доступність, що ґрунтується на характеристиках компаній. Якщо у вас є 50 або більше співробітників, будь-який новий веб-сайт компанії або оновлення / редизайн сайту має бути доступним.

• Рівень А - набув чинності в січні 2014 року
• Рівень АА - кінцевий термін для січня 2021 року
• Рівень ААА

3 Тести швидкої доступності a11yproject.com за 10 хвилин

Швидкий тест: перевірка розуміння Рівень - Використовуючи ці інструменти Ви можете перевірити рівень читання вашого письмового вмісту.

Швидкий тест: Перевірте контраст із мобільним пристроєм - За допомогою звичайного мобільного пристрою ви можете перевірити читабельність вашого сайту.

Швидкий тест: Перейдіть за допомогою клавіатури - Швидкий 5-секундний тест доступності, який ви можете запустити на своїх сайтах прямо зараз.

Поради щодо тестування:

• Перевірте сторінку на вашому сайті, де є всі типи вмісту, щоб побачити, як працюють компоненти (навігаційне меню, основна графіка, основний вміст, блоки інформації, контактна форма).
• Там дуже добре Репозитарій Github для всіх речей HTML5 і доступності Paciello Group.

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

З необхідним атрибутом браузер перевірить поле і надасть повідомлення про помилку, якщо він не заповнений. Читачі екрана інтерпретують його і дають користувачеві знати, що це поле потрібно, коли він спочатку зустрічається.

Типи вхідних даних надають браузеру підказки про тип розкладки клавіатури для відображення екранних клавіатур.

HTML5 - Аудіо, відео та доступність

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

Конкретні приклади

Спрощений тип:

<! DOCTYPE html>

Фігура елемент для зображень

Немає жодного простого або семантичного способу пов'язати заголовок, загорнутий у тег абзацу, з самим елементом зображення. HTML5 виправляє це за допомогою елемента <figure>. У поєднанні з елементом <figcaption> ми тепер можемо семантично асоціювати підписи зі своїми аналогами зображень.

[codepen_embed height = ”268 _ theme_id =” 0 ″ slug_hash = ”LNWGeG” default_tab = ”html” user = ”mjesier”] Див. LNWGeG автор: Myriam Jessier ( @mjessier ) на CodePen . [/ codepen_embed]

Форми допускають новий обов'язковий атрибут, який, природно, визначає, чи потрібний конкретний вхід. Залежно від налаштувань кодування, цей атрибут можна оголосити одним із двох способів:

<input name = "someInput" required = "" type = "text" />

Або з більш структурованим підходом.

<input name = "someInput" required = "required =" "тип =" текст "/>

За допомогою цього коду, а також у браузерах, що підтримують цей атрибут, форма не може бути надіслана, якщо вхід "someInput" порожній.

Приклад праворуч можна знайти на Github .