HTML5 выдатна падыходзіць для даступнасці і SEO

  1. Хуткі Nagivation для гэтага артыкула патэнцыял HTML5 для SEO і даступнасці падтрымка браўзэраў...
  2. SEO
  3. Чаму аптымізатары трымаць вачэй на HTML5?
  4. SEO Міф 1: Рэйтынгі
  5. пацешныя факты
  6. Стаўкі на тэгах
  7. багатае ўтрыманне
  8. Міф 2: HTML5 і відэа SEO (всео)
  9. Багатыя Урыўкі: HTML5 мікрададзеных
  10. Міф 3: вялікія дэбаты h1
  11. выснову:
  12. даступнасць
  13. Выкарыстанне семантычнага HTML павышае даступнасць
  14. Інваліднасць - трохі статыстыкі
  15. Нормы і стандарты
  16. 3 Хуткія тэсты для людзей вы можаце зрабіць з a11yproject.com ва ўзросце да 10 хвілін
  17. Тэставанне парады:
  18. HTML5 - Аўдыё, відэа і даступнасць
  19. канкрэтныя прыклады
  20. Малюнак элемент для малюнкаў

Хуткі Nagivation для гэтага артыкула

патэнцыял HTML5 для SEO і даступнасці
падтрымка браўзэраў
Чаму SEO сочыць за HTML5
SEO міфы аб HTML5
даступнасць
стандарты
3 хуткіх праверак даступнасці
формы
канкрэтныя прыклады

патэнцыял HTML5, як відаць вачыма SEO і даступнасці прафесіяналаў

  • паляпшэнне UX
  • Новыя тэгі для класіфікацыі кантэнту
  • Вялікая альтэрнатыва флэша і Silverlight
  • Шырока выкарыстоўваецца ў прыкладаннях і гульнях
  • Палепшанае сканіраванне і індэксаванне
  • палепшаныя формы
  • Выкарыстоўваецца ў прыкладаннях і гульнях

абнаўленне падтрымкі браўзэра дзякуючы HTML5accessibility.com

68/100   +   94,5 / 100   91/100   37/100 68/100 + 94,5 / 100 91/100 37/100 ?? / 100

SEO

Калі сумняваюся Google. Так што калі вы Google SEO, вы атрымаеце наступнае вызначэнне:

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

Ёсць 3 пілонаў для SEO: тэхнічнае, зместу, спасылка.

Чаму аптымізатары трымаць вачэй на HTML5?

  • Ён выдатна падыходзіць для мультымедыйных вэб-сайтаў
  • Код наваротаў можна трымаць у цуглях
  • Гэта дапамагае зразумець змест
  • Гэта дапамагае зрабіць Ajax SEO дружалюбных

Там няма ніякіх доказаў таго, што HTML5 ўплывае на SEO, але яна мае вялікі патэнцыял, каб змяніць шлях індэкс пошукавых сістэм і зразумець змест.

SEO Міф 1: Рэйтынгі

Пошукавыя сістэмы не паступаюць на ўздзеянне HTML5 мае на ранжыраванні пошукавай сістэмы. Тым не менш, пошукавыя сістэмы адбываюцца семантычнае маршрут такім чынам, семантычныя элементы палягчаюць робат зразумець мэта кожнага элемента.

пацешныя факты

Эксперты SEO ненавідзяць нічога больш, чым вэб-сайт у Flash. Добра, можа быць, яны ненавідзяць паралакс сайт, які не выкарыстоўвае History API.

  • Rich Media: вялікая падтрымка ALT для аўдыё і відэа элементаў
  • Код наваротаў: мы атрымліваем выкарыстоўваць просты HTML Doctype з HTML5
  • Змест: семантычная разметка дапамагае сканарам атрымаць тое, што блокі кода робяць на старонцы
  • Ajax: змяненне URL у адраснай радку без абнаўлення яго вялікім з History API

Стаўкі на тэгах

Вось некаторыя тэгі, якія могуць апынуцца вырашальным для SEO поспеху сайта

<Артыкул> для незалежнага блока ўтрымання.

<Раздзел> для часткі блока кантэнту.

<Загаловак> , каб паказаць загаловак старонкі ці частка загалоўку аўтаномнага блока ўтрымання.

<Калантытул> для ўсяго HTML - дакумента або ніжні калантытул <артыкула>.

<Нав> для галоўнай навігацыі сайта, папярэдняй / наступнай артыкул спасылкі, пагинации.

<Акрамя> для ўтрымання роднасных , але не частка асноўнага дакумента.

<Відэа> забяспечыць сумяшчальны спосаб крос-браўзэр для адлюстравання відэа.

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

багатае ўтрыманне

Аўдыё: <аўдыё> азначае, што, у канчатковым рахунку, мы больш не павінны спадзявацца на убудовы іншых для таго, каб зрабіць гук.

Малюнак: <лічба> і <figurecaption> дазваляюць аптымізатары растлумачыць малюнка лепш пошукавай сістэмы і карыстальнікаў.

Відэа: <відэа> вызначае стандартны спосаб ўстаўляць відэа на вэб-старонцы. Аптымізатары могуць паведаміць пошукавым сістэмам пра змест, звязаных з відэа, такія як <тытрамі> і <субтытры>.

Міф 2: HTML5 і відэа SEO (всео)

HTML5 дазваляе выкарыстоўваць этыкеткі, подпісы і субтытры на відэа.

Багатыя Урыўкі: HTML5 мікрададзеных

Google падтрымлівае Rich Snippets для іншых тыпаў дадзеных, у тым ліку прадукты, рэцэпты, агляды, падзеі і інфармацыя аб прымяненні праграмнага забеспячэння.

Раней вы атрымаеце гэты тып разметкі з рэгулярнай HTML:

<DIV> Мяне клічуць Боб Сміт, але людзі называюць мяне Смітэн. Вось мая хатняя старонка: <a HREF = "http://www.example.com"> www.example.com </a> Я жыву ў Альбукерке, Нью-Мексіка, і працую інжынерам у ACME Corp. </ DIV>

Гэта тое, што яна выглядае з HTML5:

<DIV itemscope ItemType = "http://schema.org/Person"> Мяне клічуць <SPAN itemprop = "імя"> Bob Smith </ SPAN>, але людзі называюць мяне <SPAN itemprop = "мянушка"> Сміт </ SPAN >. Вось мая хатняя старонка: <a HREF = "http://www.example.com" itemprop = "url"> www.example.com </a> Я жыву ў Альбукерке, Нью-Мексіка і працаваць як <SPAN itemprop = "назва"> інжынер </ SPAN> <SPAN ў itemprop = "прыналежнасць"> ACME Corp </ SPAN>. </ DIV>

HTML5 падтрымлівае геолокацию мікра дадзеныя, калі ўтрыманне на аснове вызначэння месцазнаходжання з'яўляецца размечаным семантычны, які выдатна падыходзіць для мабільнай і мясцовай SEO.

Міф 3: вялікія дэбаты h1

1.You можа выкарыстоўваць некалькі тэгаў H1, не забіваючы ваш SEO

2.RULE эмпірычнае: Адзін H1 ў раздзеле

3.RULE тупых: эксперты SEO часта рэкамендуюць адзін H1, так як кліенты ніколі не рэалізаваць іерархію кантэнту належным чынам.

Гэта дзе SEO і даступнасць могуць адрознівацца меркавання: меню навігацыі і ніжнія калантытула не павінна быць часткай іерархіі кантэнту як H тэгі, паколькі яны часта ня дадаюць нічога, каб дапамагчы зразумець агульную тэму старонкі.

выснову:

Шмат разоў, калі вы клапоціцеся аб тэхнічным кантрольным спісе SEO, вам ўдаліся пакрыць 70% тэхнічны кантрольны спіс даступнасці, а таксама.

даступнасць

Змястоўнае вызначэнне даступнасці

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

Даступнасць чатыры ключавых абласцей інваліднасці імкнецца вырашыць, з'яўляецца:

  • слых
  • мабільнасць
  • пазнавальны
  • візуальны

Выкарыстанне семантычнага HTML павышае даступнасць

Семантычны HTML азначае, што HTML-тэгі ў старонцы павінны апісаць ўтрыманне такім чынам, што мае дачыненне да яго сэнсу, а не яго прадстаўлення.

Ajax - HTML5 дазваляе асвяжаць старонкі без перазагрузкі ўтрыманне, якое ў сваю чаргу дазваляе карыстальніку працягваць прагляд без пачынаць усё зноў.

HTML5 дапамагае падтрымліваць у адпаведнасці з W3C POUR мадэлі:

Р = успрыманае

O = Действующе

U = Зразумелы

R = Надзейны

Інваліднасць - трохі статыстыкі

Паміж 110 мільёнаў і 190 мільёнаў дарослых маюць значныя цяжкасці ў функцыянаванні. Гэта прыкладна 15% насельніцтва свету.

Паколькі гэтая размова прадстаўлены ў Канадзе, гэта прыводзіць да грэбуючы 13,7% дарослага насельніцтва краіны.

Нормы і стандарты

Ва ўсім свеце стандарт - WCAG 2.0 (Web Accessibility Рэкамендацыі па змесце)

У Квебеку ёсць 3 стандартаў:

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

Ontario мае закон даступнасці на аснове характарыстык кампаній. Калі ў вас ёсць 50 або больш супрацоўнікаў, любы новы вэб-сайт кампаніі або вэб-сайт абнаўлення / рэдызайн павінен быць даступны.

  • Узровень A- ўведзены ў дзеянне ў студзеня 2014 года
  • Узровень АА - тэрмін студзеня 2021 года
  • узровень AAA

3 Хуткія тэсты для людзей вы можаце зрабіць з a11yproject.com ва ўзросце да 10 хвілін

Хуткі тэст: Праверка Разуменне ўзровень - З іх дапамогай інструменты Вы можаце праверыць узровень чытання вашага пісьмовага ўтрымання.

Хуткі тэст: Праверце кантраснасць з дапамогай мабільнага прылады - Выкарыстанне звычайнага мабільнага прылады вы можаце праверыць чытальнасць вашага сайта.

Хуткі тэст: рух , выкарыстоўваючы толькі клавіятуру - Хуткі 5 другой даступнасць тэст , які вы можаце запусціць на сваіх сайтах прама цяпер.

Тэставанне парады:

  • Праверце старонку на вашым сайце, усё тыпы змесціва, каб убачыць, як працуюць кампаненты (меню навігацыі, асноўныя графікі, асноўны змест, блокі інфармацыі, кантактная форма).
  • Там вельмі добра Github рэпазітар для ўсіх рэчаў HTML5 і даступнасць па Paciello Group.

Формы могуць выклікаць праблемы для людзей, якія выкарыстоўваюць праграмы чытання з экрана, калі вы не пераканайцеся, што гэта магчыма для іх, каб атрымаць доступ да ўсіх неабходную ім інфармацыю, каб запоўніць форму.

З абавязковым атрыбутам, браўзэр будзе правяраць поле і пры ўмове, паведамленні пра памылку, калі ён не запоўнены. Счытвальнік экрана інтэрпрэтуюць яго і даць карыстальніку зразумець, што поле з'яўляецца абавязковым, калі ён першапачаткова сутыкаліся.

Тыпы ўваходных дадзеных даюць падказкі браўзэра пра тып раскладкі клавіятуры для адлюстравання на экраннай клавіятуры.

HTML5 - Аўдыё, відэа і даступнасць

HTML5 дазваляе браўзэрам першапачаткова прайграваць аўдыё і відэа файлы. Адна з самых вялікіх рэчаў для даступнасці пры выкарыстанні гэтых элементаў з'яўляецца тое, што, паколькі браўзэр прадастаўляе элементы кіравання, яны маюць значна больш шанцаў быць даступнымі.

канкрэтныя прыклады

Спрошчаная доктайп:

<! DOCTYPE HTML>

Малюнак элемент для малюнкаў

Існуе не лёгкі або семантычны спосаб звязаць загаловак, загорнуты ў пункце тэгу, з самага выявай элементам. HTML5 выправіць гэта, з элементам <лічба>. У спалучэнні з элементам <figcaption>, зараз мы можам семантычна асацыяваць подпісы са сваімі калегамі малюнка.

[Codepen_embed вышыня = "268" theme_id = »0" slug_hash = default_tab »LNWGeG» = »HTML» карыстальнік = »mjessier»] Глядзіце Pen LNWGeG Мірыям Jessier ( @mjessier ) на CodePen . [/ Codepen_embed]

Формы дазваляюць новы абавязковы атрыбут, які вызначае, натуральна, патрабуецца Ці канкрэтны ўваход. У залежнасці ад вашага кадавання перавагі, вы можаце абвясціць гэты атрыбут ў адным з двух спосабаў:

<Увядзіце назва = "someInput" патрабуецца = "" Тып = "тэкст" />

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

<Увядзіце назва = "someInput« патрабуецца = »патрабуецца =" "Тып =" тэкст "/>

З дапамогай гэтага кода, і ў браўзэрах, якія падтрымліваюць гэты атрыбут, форма не можа быць пададзена, калі гэты ўваход «someInput» пусты.

Прыклад справа можна знайсці на Github ,

Чаму аптымізатары трымаць вачэй на HTML5?