{"id":2305,"date":"2012-01-24T13:39:47","date_gmt":"2012-01-24T15:39:47","guid":{"rendered":"https:\/\/www.kadunew.com\/blog\/?p=2305"},"modified":"2012-01-24T14:48:37","modified_gmt":"2012-01-24T16:48:37","slug":"html5-acessibilidade-com-o-atributo-accesskey","status":"publish","type":"post","link":"https:\/\/www.kadunew.com\/blog\/html\/html5-acessibilidade-com-o-atributo-accesskey","title":{"rendered":"HTML5 – Acessibilidade com o Atributo accesskey"},"content":{"rendered":"

\"acessibilidade<\/p>\n

A nova linguagem HTML5<\/a> prev\u00ea reformula\u00e7\u00e3o no atributo accesskey<\/code>. Uma delas \u00e9: “todos os elementos HTML podem receber o atributo accesskey<\/code>“. Apesar dos navegadores atuais n\u00e3o aplicarem tudo que a documenta\u00e7\u00e3o do W3c<\/a> sugere, ainda sim podemos usar para incrementar a acessibilidade<\/a> das nossas p\u00e1ginas web.
\n
\nVoc\u00ea j\u00e1 parou para pensar que seus visitantes podem ter algum tipo de defici\u00eancia ou mobilidade reduzida<\/a> e podem ter dificuldades de controlar o mouse para clicar em links, campos de formul\u00e1rios, etc. E uma navega\u00e7\u00e3o utilizando a tecla tab pode acabar sendo um processo bem lento para dar foco em um link…<\/p>\n

\nO atributo accesskey<\/code> \u00e9 utilizado para criar uma tecla de atalho para dar foco em um elemento HTML, facilitando assim a navega\u00e7\u00e3o do usu\u00e1rio pelo teclado.\n<\/div>\n

A especifica\u00e7\u00e3o da HTML5<\/a> recomenda que a combina\u00e7\u00e3o de teclas para acionar o atributo accesskey<\/code> seja ctrl + alt + tecla<\/strong> e que o valor do atributo accesskey<\/code> seja case sensitive, ou seja, sens\u00edvel ao tamanho da letra. Por\u00e9m os navegadores<\/a> n\u00e3o implementam essa recomenda\u00e7\u00e3o, a maioria dos navegadores usam a tecla alt + tecla<\/strong> e\/ou shift + alt + tecla<\/strong><\/p>\n

A maioria dos navegadores n\u00e3o suporta duplicar o atributo accesskey<\/code>. Por exemplo, uma p\u00e1gina n\u00e3o pode ter dois atalhos com accesskey = \"N\"<\/code>. A maioria dos ir\u00e1 ignorar um dos atalhos. Alguns navegadores v\u00e3o ignorar a primeira accesskey,<\/code> e outros navegadores ignoram a segunda inst\u00e2ncia. O navegador que aceita accesskey<\/code> duplicado \u00e9 o Internet Explorer.<\/p>\n

Exemplo atributo accesskey<\/h2>\n
\r\n<nav>\r\n    <p>\r\n        <a href="http:\/\/www.google.com.br" accesskey="G">Google<\/a> \r\n        <a href="http:\/\/www.yahoo.com" accesskey="Y">Yahoo<\/a> \r\n        <a href="http:\/\/www.facebook.com" accesskey="F">Facebook<\/a>\r\n    <\/p>\r\n<\/nav>\r\n<\/pre>\n
Na HTML5<\/a> o atributo accesskey<\/code> pode conter uma s\u00e9rie de atalhos, separados por espa\u00e7os. Uma  finalidade para isso \u00e9 de assegurar que um atalho de teclado esteja dispon\u00edvel para dispositivos moveis tamb\u00e9m, aqueles que s\u00f3 possuem teclado com n\u00fameros. Assim \u00e9 poss\u00edvel acrescentar um valor num\u00e9rico no atributo accesskey<\/code> al\u00e9m da letra, bastando o usu\u00e1rio digitar esse n\u00famero para dar o foco no elemento. Veja a seguir que definimos a letra “s”, e em seguida, separado por um espa\u00e7o, o n\u00famero “0”.<\/p>\n
\r\n<form action="\/search">\r\n <label>Search: <input type="search" name="q" accesskey="s 0"><\/label>\r\n <input type="submit">\r\n<\/form>\r\n<\/pre>\n
Voc\u00ea deve estar se perguntando, mas como meus usu\u00e1rios v\u00e3o saber que inseri teclas de atalhos para meus elementos HTML. Raramente um usu\u00e1rio saber\u00e1 que voc\u00ea atribuiu teclas de atalhos para os elementos<\/strong>.  Para minimizar essa dificuldade voc\u00ea pode colocar um texto informando seus visitantes ou exibir para o usu\u00e1rio ao lado do elemento a tecla de atalho. Abaixo um CSS<\/a> que insere ao lado do elemento a tecla de atalho escolhida para o elemento.<\/p>\n
\r\na[accesskey]:after, button[accesskey]:after, input[accesskey]:after,\r\nlabel[accesskey]:after, legend[accesskey]:after, textarea[accesskey]:after {\r\n\tmargin-left: 0.3em;\r\n\tcontent: "[" attr(accesskey) "]";\r\n\t}\r\n<\/pre>\n
Um site que implementa o uso desse atributo \u00e9 o Acesso Digital<\/a>. Esse site foi desenvolvido para oferecer total acessibilidade<\/a> aos seus visitantes. Excelente para um bom exemplo de acessibilidade na Web.<\/p>\n
Compatibilidade entre navegadores<\/h2>\n
O atributo accesskey<\/code> \u00e9 suportado em todos os principais navegadores em suas \u00faltimas vers\u00f5es<\/strong>, com exce\u00e7\u00e3o do navegador Opera que ainda n\u00e3o implementa tal funcionalidade.<\/p>\n
Firefox usa a combina\u00e7\u00e3o de teclas shift + alt + tecla, j\u00e1 o Chrome shift + alt + tecla ou apenas alt+tecla.<\/p>\n
\nCriei uma p\u00e1gina com alguns links e campos de formul\u00e1rios que podem ser acessados atrav\u00e9s de atalhos via teclado. Todos os elementos fazem uso do atributo accesskey<\/code>.
\nVeja a p\u00e1gina de exemplos:
\nExemplo atributo accesskey<\/a> .\n<\/div>\n
Me siga no Twitter: @kadunew<\/a> ou assine nosso Feed<\/a> e fique por dentro de todas atualiza\u00e7\u00f5es aqui do blog.<\/p>\n","protected":false},"excerpt":{"rendered":"
A nova linguagem HTML5 prev\u00ea reformula\u00e7\u00e3o no atributo accesskey. Uma delas \u00e9: “todos os elementos HTML podem receber o atributo accesskey“. Apesar dos navegadores atuais n\u00e3o aplicarem tudo que a documenta\u00e7\u00e3o do W3c sugere, ainda sim podemos usar para incrementar a acessibilidade das nossas p\u00e1ginas web.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[59],"tags":[34,55],"class_list":["post-2305","post","type-post","status-publish","format-standard","hentry","category-html","tag-html","tag-web-design"],"yoast_head":"\nHTML5 - Acessibilidade com o Atributo accesskey<\/title>\n<meta name=\"description\" content=\"HTML5 e a nova forma de usar atributo accesskey. Atalhos de teclado s\u00e3o uma boa ideia para incrementar a acessibilidade dos web sites.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.kadunew.com\/blog\/html\/html5-acessibilidade-com-o-atributo-accesskey\" \/>\n<meta property=\"og:locale\" content=\"pt_BR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"HTML5 - Acessibilidade com o Atributo accesskey\" \/>\n<meta property=\"og:description\" content=\"HTML5 e a nova forma de usar atributo accesskey. Atalhos de teclado s\u00e3o uma boa ideia para incrementar a acessibilidade dos web sites.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.kadunew.com\/blog\/html\/html5-acessibilidade-com-o-atributo-accesskey\" \/>\n<meta property=\"og:site_name\" content=\"KADUNEW\" \/>\n<meta property=\"article:published_time\" content=\"2012-01-24T15:39:47+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2012-01-24T16:48:37+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.kadunew.com\/blog\/wp-content\/uploads\/2012\/01\/acessibilidade-accesskey.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"540\" \/>\n\t<meta property=\"og:image:height\" content=\"207\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Kadu Oliveira\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Kadu Oliveira\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. tempo de leitura\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.kadunew.com\/blog\/html\/html5-acessibilidade-com-o-atributo-accesskey\",\"url\":\"https:\/\/www.kadunew.com\/blog\/html\/html5-acessibilidade-com-o-atributo-accesskey\",\"name\":\"HTML5 - Acessibilidade com o Atributo accesskey\",\"isPartOf\":{\"@id\":\"https:\/\/www.kadunew.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.kadunew.com\/blog\/html\/html5-acessibilidade-com-o-atributo-accesskey#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.kadunew.com\/blog\/html\/html5-acessibilidade-com-o-atributo-accesskey#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.kadunew.com\/blog\/wp-content\/uploads\/2012\/01\/acessibilidade-accesskey.jpg\",\"datePublished\":\"2012-01-24T15:39:47+00:00\",\"dateModified\":\"2012-01-24T16:48:37+00:00\",\"author\":{\"@id\":\"https:\/\/www.kadunew.com\/blog\/#\/schema\/person\/07b2297c4825efbd1e9f2a1018926b05\"},\"description\":\"HTML5 e a nova forma de usar atributo accesskey. Atalhos de teclado s\u00e3o uma boa ideia para incrementar a acessibilidade dos web sites.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.kadunew.com\/blog\/html\/html5-acessibilidade-com-o-atributo-accesskey#breadcrumb\"},\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.kadunew.com\/blog\/html\/html5-acessibilidade-com-o-atributo-accesskey\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\/\/www.kadunew.com\/blog\/html\/html5-acessibilidade-com-o-atributo-accesskey#primaryimage\",\"url\":\"https:\/\/www.kadunew.com\/blog\/wp-content\/uploads\/2012\/01\/acessibilidade-accesskey.jpg\",\"contentUrl\":\"https:\/\/www.kadunew.com\/blog\/wp-content\/uploads\/2012\/01\/acessibilidade-accesskey.jpg\",\"width\":\"540\",\"height\":\"207\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.kadunew.com\/blog\/html\/html5-acessibilidade-com-o-atributo-accesskey#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.kadunew.com\/blog\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"HTML\",\"item\":\"https:\/\/www.kadunew.com\/blog\/category\/html\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"HTML5 – Acessibilidade com o Atributo accesskey\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.kadunew.com\/blog\/#website\",\"url\":\"https:\/\/www.kadunew.com\/blog\/\",\"name\":\"KADUNEW\",\"description\":\"Artigos sobre Front-End e Programa\u00e7\u00e3o web\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.kadunew.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pt-BR\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.kadunew.com\/blog\/#\/schema\/person\/07b2297c4825efbd1e9f2a1018926b05\",\"name\":\"Kadu Oliveira\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\/\/www.kadunew.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/780660fded589936b30467c54c99d51a?s=96&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/780660fded589936b30467c54c99d51a?s=96&r=g\",\"caption\":\"Kadu Oliveira\"},\"sameAs\":[\"https:\/\/www.kadunew.com\/blog\"],\"url\":\"https:\/\/www.kadunew.com\/blog\/author\/admin\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"HTML5 - Acessibilidade com o Atributo accesskey","description":"HTML5 e a nova forma de usar atributo accesskey. Atalhos de teclado s\u00e3o uma boa ideia para incrementar a acessibilidade dos web sites.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.kadunew.com\/blog\/html\/html5-acessibilidade-com-o-atributo-accesskey","og_locale":"pt_BR","og_type":"article","og_title":"HTML5 - Acessibilidade com o Atributo accesskey","og_description":"HTML5 e a nova forma de usar atributo accesskey. Atalhos de teclado s\u00e3o uma boa ideia para incrementar a acessibilidade dos web sites.","og_url":"https:\/\/www.kadunew.com\/blog\/html\/html5-acessibilidade-com-o-atributo-accesskey","og_site_name":"KADUNEW","article_published_time":"2012-01-24T15:39:47+00:00","article_modified_time":"2012-01-24T16:48:37+00:00","og_image":[{"width":540,"height":207,"url":"https:\/\/www.kadunew.com\/blog\/wp-content\/uploads\/2012\/01\/acessibilidade-accesskey.jpg","type":"image\/jpeg"}],"author":"Kadu Oliveira","twitter_misc":{"Escrito por":"Kadu Oliveira","Est. tempo de leitura":"3 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.kadunew.com\/blog\/html\/html5-acessibilidade-com-o-atributo-accesskey","url":"https:\/\/www.kadunew.com\/blog\/html\/html5-acessibilidade-com-o-atributo-accesskey","name":"HTML5 - Acessibilidade com o Atributo accesskey","isPartOf":{"@id":"https:\/\/www.kadunew.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.kadunew.com\/blog\/html\/html5-acessibilidade-com-o-atributo-accesskey#primaryimage"},"image":{"@id":"https:\/\/www.kadunew.com\/blog\/html\/html5-acessibilidade-com-o-atributo-accesskey#primaryimage"},"thumbnailUrl":"https:\/\/www.kadunew.com\/blog\/wp-content\/uploads\/2012\/01\/acessibilidade-accesskey.jpg","datePublished":"2012-01-24T15:39:47+00:00","dateModified":"2012-01-24T16:48:37+00:00","author":{"@id":"https:\/\/www.kadunew.com\/blog\/#\/schema\/person\/07b2297c4825efbd1e9f2a1018926b05"},"description":"HTML5 e a nova forma de usar atributo accesskey. Atalhos de teclado s\u00e3o uma boa ideia para incrementar a acessibilidade dos web sites.","breadcrumb":{"@id":"https:\/\/www.kadunew.com\/blog\/html\/html5-acessibilidade-com-o-atributo-accesskey#breadcrumb"},"inLanguage":"pt-BR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.kadunew.com\/blog\/html\/html5-acessibilidade-com-o-atributo-accesskey"]}]},{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/www.kadunew.com\/blog\/html\/html5-acessibilidade-com-o-atributo-accesskey#primaryimage","url":"https:\/\/www.kadunew.com\/blog\/wp-content\/uploads\/2012\/01\/acessibilidade-accesskey.jpg","contentUrl":"https:\/\/www.kadunew.com\/blog\/wp-content\/uploads\/2012\/01\/acessibilidade-accesskey.jpg","width":"540","height":"207"},{"@type":"BreadcrumbList","@id":"https:\/\/www.kadunew.com\/blog\/html\/html5-acessibilidade-com-o-atributo-accesskey#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.kadunew.com\/blog"},{"@type":"ListItem","position":2,"name":"HTML","item":"https:\/\/www.kadunew.com\/blog\/category\/html"},{"@type":"ListItem","position":3,"name":"HTML5 – Acessibilidade com o Atributo accesskey"}]},{"@type":"WebSite","@id":"https:\/\/www.kadunew.com\/blog\/#website","url":"https:\/\/www.kadunew.com\/blog\/","name":"KADUNEW","description":"Artigos sobre Front-End e Programa\u00e7\u00e3o web","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.kadunew.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pt-BR"},{"@type":"Person","@id":"https:\/\/www.kadunew.com\/blog\/#\/schema\/person\/07b2297c4825efbd1e9f2a1018926b05","name":"Kadu Oliveira","image":{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/www.kadunew.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/780660fded589936b30467c54c99d51a?s=96&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/780660fded589936b30467c54c99d51a?s=96&r=g","caption":"Kadu Oliveira"},"sameAs":["https:\/\/www.kadunew.com\/blog"],"url":"https:\/\/www.kadunew.com\/blog\/author\/admin"}]}},"_links":{"self":[{"href":"https:\/\/www.kadunew.com\/blog\/wp-json\/wp\/v2\/posts\/2305"}],"collection":[{"href":"https:\/\/www.kadunew.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.kadunew.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.kadunew.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.kadunew.com\/blog\/wp-json\/wp\/v2\/comments?post=2305"}],"version-history":[{"count":32,"href":"https:\/\/www.kadunew.com\/blog\/wp-json\/wp\/v2\/posts\/2305\/revisions"}],"predecessor-version":[{"id":2382,"href":"https:\/\/www.kadunew.com\/blog\/wp-json\/wp\/v2\/posts\/2305\/revisions\/2382"}],"wp:attachment":[{"href":"https:\/\/www.kadunew.com\/blog\/wp-json\/wp\/v2\/media?parent=2305"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.kadunew.com\/blog\/wp-json\/wp\/v2\/categories?post=2305"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.kadunew.com\/blog\/wp-json\/wp\/v2\/tags?post=2305"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}