{"id":730,"date":"2023-02-09T08:29:40","date_gmt":"2023-02-09T11:29:40","guid":{"rendered":"https:\/\/blackrat.pro\/blog\/?p=730"},"modified":"2023-02-09T08:29:40","modified_gmt":"2023-02-09T11:29:40","slug":"google-explica-texto-alternativo-para-logotipos-e-botoes","status":"publish","type":"post","link":"https:\/\/blackrat.pro\/blog\/google-explica-texto-alternativo-para-logotipos-e-botoes\/","title":{"rendered":"Google explica texto alternativo para logotipos e bot\u00f5es"},"content":{"rendered":"<p>Em um podcast do Google Search Off the Record, Lizzi Sassman e John Mueller, do Google, discutem a melhor maneira de lidar com texto alternativo para logotipos e bot\u00f5es baseados em imagens.<\/p>\n<p>Existem pr\u00e1ticas recomendadas para adicionar atributos alt a logotipos e bot\u00f5es. As regras podem parecer um pouco complicadas no come\u00e7o, mas na verdade s\u00e3o simples de entender. Obter os atributos alt corretos \u00e9 bom para os usu\u00e1rios e, a longo prazo, \u00e9 \u00f3timo para ganhos.<\/p>\n<h2><strong>Adicionando Alt Text a Imagens Funcionais<\/strong><\/h2>\n<p>Lizzi Sassman inicia a discuss\u00e3o fazendo refer\u00eancia a imagens funcionais, imagens que t\u00eam um prop\u00f3sito funcional na p\u00e1gina. Ela pergunta se o texto alternativo deve descrever o que o bot\u00e3o faz ou qual \u00e9 a imagem do bot\u00e3o na situa\u00e7\u00e3o em que um bot\u00e3o \u00e9 um \u00edcone. Por fim, ela pergunta se h\u00e1 um prop\u00f3sito de SEO em adicionar texto alternativo a imagens funcionais, como bot\u00f5es.<\/p>\n<div class=\"ipsQuote_contents ipsClearfix ipsTruncate\" data-ipstruncate=\"true\" data-ipstruncate-type=\"hide\" data-ipstruncate-size=\"7 lines\" data-ipstruncate-expandtext=\"Expandir\" data-truncated=\"true\">\n<blockquote><p>\u201cLizzi Sassman: O n\u00edvel de cuidado que dedicamos ao ativo visual, tamb\u00e9m devemos colocar o mesmo n\u00edvel de energia nas palavras que descrevem esse ativo tamb\u00e9m. O que eu acho \u00f3timo. Outra categoria de imagens \u00e9 como a funcional, que \u00e0s vezes pode ser um bot\u00e3o. Como se fosse um gr\u00e1fico que tamb\u00e9m funciona como algo. Ent\u00e3o, o texto alternativo deve me dizer o que est\u00e1 prestes a acontecer? Se voc\u00ea clicar aqui, ele o levar\u00e1 at\u00e9 aqui? Pode ser como uma imagem de algo, que tamb\u00e9m funciona como um bot\u00e3o. E voc\u00ea descreve a fun\u00e7\u00e3o, ou como tamb\u00e9m era, n\u00e3o sei\u2026 como uma imagem de seta? E tamb\u00e9m, isso importa para SEO? Poderia ser como um logotipo.<\/p>\n<p>John Mueller: Para acessibilidade, provavelmente faz sentido, apenas fazer algo em torno disso. Mas para SEO, as pessoas n\u00e3o v\u00e3o procurar o bot\u00e3o de checkout ou algo assim.\u201d<\/p><\/blockquote>\n<\/div>\n<h2><strong>O texto alternativo nos bot\u00f5es \u00e9 para acessibilidade, n\u00e3o para SEO<\/strong><\/h2>\n<p>John Mueller deixa claro que n\u00e3o h\u00e1 prop\u00f3sito de SEO para adicionar texto alternativo aos bot\u00f5es. Mas ele tamb\u00e9m observou que o texto alternativo para esse tipo de imagem \u00e9 principalmente por motivos de acessibilidade.<br \/>\nLizzi continuou a discuss\u00e3o:<\/p>\n<div class=\"ipsQuote_contents ipsClearfix ipsTruncate\" data-ipstruncate=\"true\" data-ipstruncate-type=\"hide\" data-ipstruncate-size=\"7 lines\" data-ipstruncate-expandtext=\"Expandir\" data-truncated=\"true\">\n<blockquote><p>\u201cLizzi Sassman: Mas talvez eles fossem para o logotipo, ou algo parecido com o logotipo. Quando voc\u00ea clica nele, ele o leva para a p\u00e1gina inicial ou algo assim. Mas tamb\u00e9m \u00e9 \u201cAh, \u00e9 um logotipo\u201d. Ent\u00e3o voc\u00ea diz: &#8220;Este \u00e9 o logotipo da Central de Pesquisa do Google&#8221;. Ou como o que seria um texto descritivo. \u00c9 o Googlebot no logotipo, mas o que \u00e9 mais importante saber sobre a imagem \u00e9 o fato de ser um logotipo? Ou como \u00e9 o logotipo? Acho que, por esse \u00e2ngulo, as pessoas provavelmente est\u00e3o procurando o logotipo. Como qual \u00e9 o logotipo da empresa X, talvez?<\/p>\n<p>John Mueller: Sim. Quero dizer, isso remonta a essa estrat\u00e9gia que estamos tentando evitar. Para que voc\u00ea quer ser encontrado?<\/p>\n<p>Lizzi Sassman: Sim, mas essa \u00e9 a pergunta mais importante, eu acho, porque ent\u00e3o meio que orienta\u2026 Eu posso me empolgar com todas essas tocas de coelho, ent\u00e3o meio que, eu n\u00e3o sei, prioriza quais s\u00e3o as coisas que devemos pensar, porque voc\u00ea n\u00e3o precisa necessariamente escrever todas as coisas para essas coisas, Eu acho.&#8221;<\/p><\/blockquote>\n<\/div>\n<h2><strong>O uso adequado de texto alternativo em logotipos e bot\u00f5es<\/strong><\/h2>\n<p>A maneira correta de usar texto alternativo em imagens como logotipos depende se a imagem \u00e9 um link ou n\u00e3o. Se a imagem do logotipo funcionar como um link para a p\u00e1gina inicial, \u00e9 correto rotular essa imagem com a fun\u00e7\u00e3o que ela possui, para que um visitante do site usando um leitor de tela possa perceber que esse logotipo \u00e9 um link para a p\u00e1gina inicial.<\/p>\n<p>O \u00f3rg\u00e3o oficial de cria\u00e7\u00e3o de padr\u00f5es HTML, The World Wide Web Consortium (W3C),\u00a0<a href=\"https:\/\/www.w3.org\/WAI\/tutorials\/images\/functional\/\" target=\"_blank\" rel=\"external nofollow noopener\">publica um explicativo<\/a>\u00a0sobre como lidar com logotipos.<\/p>\n<h2><strong>Link da p\u00e1gina inicial do logotipo<\/strong><\/h2>\n<p>Um logotipo que funciona como um link de p\u00e1gina inicial deve conter um texto alternativo que informe ao usu\u00e1rio do leitor de tela que o logotipo \u00e9 um link de p\u00e1gina inicial.<br \/>\nO W3C usa este exemplo de c\u00f3digo:<br \/>\n&lt;a href=&#8221;https:\/\/www.w3.org\/&#8221;&gt;<br \/>\n&lt;img src=&#8221;w3c.png&#8221; alt=&#8221;W3C home&#8221;&gt;<br \/>\n&lt;\/a&gt;<\/p>\n<p>O c\u00f3digo acima \u00e9 para um logotipo que pode ser encontrado na parte superior da p\u00e1gina que tamb\u00e9m serve como um link para a p\u00e1gina inicial.<\/p>\n<p>O texto alternativo de exemplo fornecido pelo W3C simplesmente diz \u201cW3C home\u201d, mas pode ser mais descritivo, se voc\u00ea quiser.<\/p>\n<h2><strong>Link da p\u00e1gina inicial do logotipo e do texto<\/strong><\/h2>\n<p>Existem outros tipos de links de logotipo em que h\u00e1 um logotipo de imagem e um texto ao lado ou abaixo dele e a imagem e o texto s\u00e3o codificados no mesmo c\u00f3digo de link.<\/p>\n<p>Em outras palavras, n\u00e3o h\u00e1 dois links, como um link para o logotipo e um link para o texto, \u00e9 apenas um link para o logotipo e o texto juntos.<\/p>\n<p>Nesse caso, como o texto descreve a fun\u00e7\u00e3o do link, seria repetitivo repetir a fun\u00e7\u00e3o do link do logotipo. Portanto, para esse caso, a melhor pr\u00e1tica \u00e9 usar um texto alternativo nulo.<\/p>\n<p>Este \u00e9 o exemplo que o W3C fornece:<br \/>\n&lt;a href=&#8221;https:\/\/www.w3.org\/&#8221;&gt;<br \/>\n&lt;img src=&#8221;w3c.png&#8221; alt=&#8221;&#8221;&gt; P\u00e1gina inicial do W3C<br \/>\n&lt;\/a&gt;<\/p>\n<p>Observe como o atributo alt \u00e9 codificado para a imagem: img src=&#8221;w3c.png&#8221; alt=&#8221;&#8221;<\/p>\n<p>As aspas vazias para o texto alternativo s\u00e3o chamadas de atributo alt nulo (ou texto alternativo nulo). Um leitor de tela simplesmente o ignorar\u00e1.<\/p>\n<p>A raz\u00e3o pela qual um texto alternativo nulo \u00e9 bom \u00e9 porque h\u00e1 um texto que descreve qual \u00e9 a fun\u00e7\u00e3o do link: P\u00e1gina inicial do W3C<\/p>\n<p><strong>Texto alternativo para um link de \u00edcone<\/strong><\/p>\n<p>\u00c0s vezes, um link est\u00e1 na forma de um \u00edcone, sem texto para explicar o que ele faz, por exemplo, um \u00edcone na forma de um envelope (representando e-mail ou mensagem) ou uma impressora (que indica que o link ativa uma impressora).<\/p>\n<p>Para esta situa\u00e7\u00e3o, \u00e9 uma m\u00e1 pr\u00e1tica descrever o que \u00e9 a imagem (como um envelope ou uma impressora). A melhor pr\u00e1tica \u00e9 descrever o que a imagem faz (iniciar um e-mail ou imprimir uma p\u00e1gina da web).<\/p>\n<p>O W3C usa o exemplo de um \u00edcone de impressora com o seguinte c\u00f3digo e texto alternativo:<br \/>\n&lt;a href=&#8221;javascript:print()&#8221;&gt;<br \/>\n&lt;img src=&#8221;print.png&#8221; alt=&#8221;Imprimir esta p\u00e1gina&#8221;&gt;<br \/>\n&lt;\/a&gt;<\/p>\n<p>Como voc\u00ea pode ver, o \u00edcone em forma de impressora tem as palavras \u201cImprimir esta p\u00e1gina\u201d como texto alternativo. Ele diz o que o \u00edcone faz. Isso \u00e9 \u00fatil.<\/p>\n<h2><strong>Texto alternativo para um bot\u00e3o<\/strong><\/h2>\n<p>Semelhante ao exemplo do \u00edcone, o texto alternativo de uma imagem de bot\u00e3o deve descrever o que a imagem faz. O W3C usa o exemplo de uma caixa de pesquisa que tem uma lupa para um bot\u00e3o de envio.<\/p>\n<p>A m\u00e1 maneira de fazer isso \u00e9 usar o texto alternativo para descrever que a imagem \u00e9 uma lupa. A melhor pr\u00e1tica \u00e9 usar o texto alternativo para descrever o que a imagem faz.<\/p>\n<p>Este \u00e9 o c\u00f3digo de exemplo que o W3C mostra como exemplo: &lt;input type=&#8221;image&#8221; src=&#8221;searchbutton.png&#8221; alt=&#8221;Pesquisar&#8221;&gt;<\/p>\n<p>Como voc\u00ea pode ver, o texto alternativo do bot\u00e3o de pesquisa \u00e9 a palavra \u201cPesquisar\u201d, que descreve qual \u00e9 a fun\u00e7\u00e3o do bot\u00e3o.<\/p>\n<h2><strong>Texto alternativo para bot\u00f5es e logotipos<\/strong><\/h2>\n<p>Lizzi e John n\u00e3o entraram nos detalhes de como lidar com os diferentes cen\u00e1rios para logotipos e bot\u00f5es. No entanto, John apontou que n\u00e3o h\u00e1 valor de SEO para texto alternativo para bot\u00f5es e logotipos, \u00e9 para acessibilidade.<\/p>\n<p>\u00c9 uma pr\u00e1tica recomendada servir adequadamente p\u00e1ginas da Web que sejam funcionais para usu\u00e1rios que acessam p\u00e1ginas da Web com leitores de tela. Como mencionado anteriormente, as pessoas que usam leitores de tela podem ser clientes ou defensores de sua empresa ou site. Portanto, \u00e9 bom que o resultado final use as pr\u00e1ticas recomendadas de acessibilidade.<\/p>\n<p>Mat\u00e9ria completa:\u00a0<a href=\"https:\/\/l.blackrat.pro\/EGiIa\" target=\"_blank\" rel=\"external nofollow noopener\">https:\/\/l.blackrat.pro\/EGiIa<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Em um podcast do Google Search Off the Record, Lizzi Sassman e John Mueller, do Google, discutem a melhor maneira de lidar com texto alternativo para logotipos e bot\u00f5es baseados em imagens. Existem pr\u00e1ticas recomendadas para adicionar atributos alt a logotipos e bot\u00f5es. As regras podem parecer um pouco complicadas no come\u00e7o, mas na verdade [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":732,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[86],"class_list":["post-730","post","type-post","status-publish","format-standard","has-post-thumbnail","category-artigos","tag-google"],"_links":{"self":[{"href":"https:\/\/blackrat.pro\/blog\/wp-json\/wp\/v2\/posts\/730","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blackrat.pro\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blackrat.pro\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blackrat.pro\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/blackrat.pro\/blog\/wp-json\/wp\/v2\/comments?post=730"}],"version-history":[{"count":1,"href":"https:\/\/blackrat.pro\/blog\/wp-json\/wp\/v2\/posts\/730\/revisions"}],"predecessor-version":[{"id":733,"href":"https:\/\/blackrat.pro\/blog\/wp-json\/wp\/v2\/posts\/730\/revisions\/733"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blackrat.pro\/blog\/wp-json\/wp\/v2\/media\/732"}],"wp:attachment":[{"href":"https:\/\/blackrat.pro\/blog\/wp-json\/wp\/v2\/media?parent=730"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blackrat.pro\/blog\/wp-json\/wp\/v2\/categories?post=730"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blackrat.pro\/blog\/wp-json\/wp\/v2\/tags?post=730"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}