В подкаста Google Search Off the Record Лизи Сасман и Джон Мюлер от Google обсъждат най-добрия начин за обработка на алтернативен текст за лога и базирани на изображения бутони.
Има най-добри практики за добавяне на алтернативни атрибути към лога и бутони.
Правилата може да изглеждат малко сложни в началото, но всъщност са доста лесни за разбиране.
Наличието на алтернативни текстови теми е добро за потребителите и е страхотно в дългосрочен план за печалба.
Добавете алтернативен текст към функционални изображения
Лизи Сасман започва дискусията, като се позовава на функционални изображения, изображения, които имат функционална цел на уеб страница.
Той пита дали алтернативният текст трябва да описва какво прави бутонът или изображението върху бутона в случай, че бутонът е икона.
Накрая попитах дали има SEO цел за добавяне на алтернативен текст към функционални изображения като бутони.
Лизи Съсман:
… нивото на внимание, което отделяме на видимия произход, трябва да вложим същото ниво на енергия и в думите, които описват този произход. Което според мен е страхотно.Друга категория изображения е като функционално нещо, което понякога може да бъде бутон.
Сякаш беше рисунка, която също служеше за нещо.
Трябва ли алтернативният текст да ми каже какво ще се случи?
Ако щракнете върху това, ще ви отведе тук?
Може да бъде като снимка на нещо и тогава да работи и като бутон.
И описва ли работата, или така да се каже, не знам…като снимка със стрелка?
Освен това SEO има ли значение?
Джон Мюлер:
да Подозирам…Лизи Съсман:
Може да бъде като лого.Джон Мюлер:
Що се отнася до достъпността, вероятно има смисъл, просто да се направи нещо по въпроса.Но за SEO хората няма да търсят бутона за изход или нещо подобно.“
Алтернативният текст върху бутоните е за достъпност, а не за SEO
Джон Мюлер обяснява, че няма SEO цел за добавяне на алтернативен текст към бутони.
Но той също така отбелязва, че алтернативният текст за тези видове изображения се дължи главно на причини за достъпност.
Лизи продължи дискусията:
Лизи Съсман:
… но може би биха предпочели логото или нещо подобно. Когато щракнете върху него, той ви отвежда до началната страница или нещо подобно.Но също така е “О, това е лозунг.”
Бихте ли казали: „Това е логото на Центъра за търсене на Google“.
Джон Мюлер:
със сигурност.Лизи Съсман:
Или като това би бил описателен текст.Това е Googlebot в логото, но дали най-важното нещо, което трябва да знаете за едно изображение, е фактът, че то е лого?
Или как изглежда логото?
Мисля, че от този ъгъл хората вероятно търсят логото.
Джон Мюлер:
даЛизи Съсман:
Например какво е мотото на X Corporation, може би?
Джон Мюлер:
да Искам да кажа, че се връща към някакъв вид тази стратегия, която се опитваме да избегнем.За какво искате да намерите?
Лизи Съсман:
Да, но това е най-важният въпрос според мен, защото тогава това е нещо като директива…Мога да се занимавам с всички тези заешки дупки, така че, не знам, дава приоритет на нещата, за които трябва да мислим, защото не е задължително да записвате всички неща за тези неща, предполагам.”
Правилно използване на алтернативен текст в лога и бутони
Правилният начин за използване на алтернативен текст върху изображения като лога зависи от това дали изображението е връзка.
Ако изображението на логото действа като връзка обратно към началната страница, правилно е това изображение да се наименува с функцията, която съдържа, така че посетител на сайта, използващ екранен четец, не може да бъде този банер връзка към началната страница.
Официалният орган за създаване на HTML стандарти, World Wide Web Consortium (W3C) публикуват уточнения За това как да се справяте с лога.
Връзка към началната страница на логото
Банер, който действа като връзка към началната страница, трябва да съдържа алтернативен текст, който казва на потребителя на екранния четец, че банерът е връзката към началната страница.
W3C използва този примерен код:
W3C Home
Обърнете внимание как е кодиран атрибутът алтернативен текст на изображението:
img src=" alt=""
Празните кавички за алтернативен текст се наричат празен алтернативен атрибут (или празен алтернативен текст). Екранният четец просто ще го пропусне.
Причината, поради която празният алтернативен текст е добър, е, че има текст, описващ функцията на връзката:
Начало на W3C
Алтернативен текст за връзка към икона
Понякога връзката е под формата на икона, без текст, който да обяснява какво прави, например икона под формата на плик (представляващ имейл или съобщение) или принтер (указващ, че връзката активира принтера).
В тази ситуация е лоша практика да се описва изображението (като плик или принтер).
Най-добрата практика е да опишете какво прави изображението (започване на имейл или отпечатване на уеб страница).
W3C използва примерен код на принтер със следния код и алтернативен текст:
Както можете да видите, иконата под формата на принтер има думите „Отпечатайте тази страница“ като алтернативен текст. Той казва какво прави кодът. Това е полезно.
Алтернативен текст за бутон
Подобно на примера с иконата, алтернативният текст за изображението на бутона трябва да описва какво прави изображението.
W3C използва пример за поле за търсене с лупа за бутон Изпращане.
Лошият начин да направите това е да използвате алтернативен текст, за да опишете, че изображението е лупа.
Най-добрата практика е да използвате алтернативен текст, за да опишете какво прави изображението.
Това е примерният код, който W3C показва като пример:
Както можете да видите, алтернативният текст на бутона за търсене е думата „Търсене“, която описва функционалността на бутона.
Алтернативен текст за бутони и лога
Лизи и Джон не са навлезли в подробности как да се справят с различните сценарии за лога и бутони.
Джон обаче посочи, че няма SEO стойност за алтернативен текст за бутони и банери, това е свързано с достъпността.
Най-добрата практика е да се предоставят уеб страници, които функционират по подходящ начин за потребителите, които имат достъп до уеб страници с помощта на екранни четци.
Както споменахме по-рано, хората, които използват екранни четци, могат да бъдат клиенти или защитници на вашия бизнес или уебсайт.
Така че е добра идея да използвате най-добрите практики за достъпност.
кавички
Научете повече за достъпността за бутони и лога в W3C
Комбинирайте съседни изображения и текстови връзки към един и същи ресурс
Използвайте алтернативни текстови теми върху изображения, използвани като бутони за изпращане
Слушайте подкаста Search Off the Record в 15:57 минути:
Представено изображение от Shutterstock / Евгений Атаманенко