{"id":2806,"date":"2014-09-30T12:54:44","date_gmt":"2014-09-30T15:54:44","guid":{"rendered":"http:\/\/blog.dialhost.com.br\/?p=2806"},"modified":"2014-09-30T12:54:44","modified_gmt":"2014-09-30T15:54:44","slug":"falando-sobre-aplicacoes-e-conteudo-dinamico-acessivel","status":"publish","type":"post","link":"https:\/\/www.dialhost.com.br\/blog\/falando-sobre-aplicacoes-e-conteudo-dinamico-acessivel\/","title":{"rendered":"Falando sobre aplica\u00e7\u00f5es e conte\u00fado din\u00e2mico acess\u00edvel"},"content":{"rendered":"<figure id=\"attachment_2815\" aria-describedby=\"caption-attachment-2815\" style=\"width: 700px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" class=\"size-full wp-image-2815\" src=\"http:\/\/blog.dialhost.com.br\/wp-content\/uploads\/2014\/09\/conselhos2.jpg\" alt=\"Aplica\u00e7\u00f5es e conte\u00fado din\u00e2mico acess\u00edvel\" width=\"700\" height=\"260\" \/><figcaption id=\"caption-attachment-2815\" class=\"wp-caption-text\">Imagem ilustrativa: Tela de codifica\u00e7\u00e3o<\/figcaption><\/figure>\n<p>Conte\u00fados din\u00e2micos ainda tinham barreiras s\u00e9rias de acessibilidade, inclusive porque as tecnologias assistivas n\u00e3o conseguiam acessar modais ou \u00e1reas que eram atualizadas sem um \u201crefresh\u201d completo da p\u00e1gina. Para tornar esse conte\u00fado din\u00e2mico acess\u00edvel na Web o W3C publicou a recomenda\u00e7\u00e3o WAI-ARIA 1.0, que se tornou uma <a href=\"http:\/\/www.w3.org\/TR\/wai-aria\/\" target=\"_blank\" rel=\"noopener noreferrer\">Recomenda\u00e7\u00e3o do W3C em mar\u00e7o de 2014<\/a>.<\/p>\n<p>WAI-ARIA (Accessible Rich Internet Applications) define a forma de tornar conte\u00fado, principalmente aplica\u00e7\u00f5es Web, acess\u00edveis para pessoas com defici\u00eancias. Essa documenta\u00e7\u00e3o auxilia especialmente conte\u00fado din\u00e2mico e interfaces de usu\u00e1rio com controles avan\u00e7ados. WAI-ARIA funciona com as tecnologias j\u00e1 existentes, como HTML e SVG e proporciona uma forma de aplicar os requisitos das WCAG para aplica\u00e7\u00f5es ricas na Web.<\/p>\n<p>Aplica\u00e7\u00f5es web complexas tornam-se inacess\u00edveis quando as tecnologias assistivas n\u00e3o podem determinar a sem\u00e2ntica de partes de um documento ou quando o usu\u00e1rio n\u00e3o \u00e9 capaz de navegar de forma eficaz em todas as partes do site ou aplica\u00e7\u00e3o. WAI-ARIA divide a sem\u00e2ntica em roles (pap\u00e9is), states e properties (estados e propriedades).<\/p>\n<p>Roles servem para identificar o elemento ou a aplica\u00e7\u00e3o na interface e est\u00e3o divididas em quatro tipos:<\/p>\n<ul>\n<li>\u00a0\u00a0\u00a0 <em>Abstract Roles<\/em>: Usadas para ontologias. N\u00e3o devem ser utilizadas para conte\u00fado<\/li>\n<li>\u00a0\u00a0\u00a0 <em>Widget Roles<\/em>: Utilizadas para definir interfaces de widgets, como alert, dialog, slider, tab, etc.<\/li>\n<li>\u00a0\u00a0\u00a0 <em>Document Structure Roles<\/em>: descrevem as estruturas que organizam o conte\u00fado em uma p\u00e1gina, por exemplo article, group, img, region, etc. Estruturas de documentos geralmente n\u00e3o s\u00e3o interativos.<\/li>\n<li>\u00a0\u00a0\u00a0 <em>Landmark Roles<\/em>: s\u00e3o regi\u00f5es da p\u00e1gina destinadas a marca\u00e7\u00e3o de navega\u00e7\u00e3o, por exemplo banner, main, navigation, etc.<\/li>\n<\/ul>\n<p>A lista completa de roles est\u00e1 neste <a href=\"http:\/\/www.w3.org\/TR\/wai-aria\/roles#roles_categorization\" target=\"_blank\" rel=\"noopener noreferrer\">link<\/a>.<\/p>\n<p>Cada uma das \u201croles\u201d pode ser manipulada e definida por diversos \u201cstates and properties\u201d, por exemplo, um link definido como item de um checkbox pode ser definido como \u201ctrue\u201d ou \u201cfalse\u201d para que o usu\u00e1rio tenha um retorno acess\u00edvel do resultado da a\u00e7\u00e3o.<\/p>\n<p>&lt;li role=\u201dmenuitemcheckbox\u201d aria-checked=\u201dtrue\u201d&gt;Link ativo&lt;\/li&gt;<\/p>\n<p>A lista completa de states and properties para cada role est\u00e1 <a href=\"http:\/\/www.w3.org\/TR\/wai-aria\/states_and_properties\" target=\"_blank\" rel=\"noopener noreferrer\">aqui<\/a>.<\/p>\n<p>Uma das principais diferen\u00e7as entre as WCAG e ARIA \u00e9 que a primeira utiliza os elementos sem\u00e2nticos do HTML para tornar o conte\u00fado acess\u00edvel. J\u00e1 WAI-ARIA possibilita a mudan\u00e7a da sem\u00e2ntica de um elemento para torna-lo acess\u00edvel. Eu explico.<\/p>\n<p>Neste exemplo, o desenvolvedor precisa criar um cabe\u00e7alho que \u00e9 um bot\u00e3o. Para esse caso a recomenda\u00e7\u00e3o \u00e9:<\/p>\n<ul>\n<li>\u00a0\u00a0\u00a0 N\u00e3o fa\u00e7a isso: &lt;h1 role=button&gt;bot\u00e3o&lt;\/h1&gt;<\/li>\n<li>\u00a0\u00a0\u00a0 Fa\u00e7a isso: &lt;h1&gt;&lt;button&gt;bot\u00e3o&lt;\/button&gt;&lt;\/h1&gt;<\/li>\n<li>\u00a0\u00a0\u00a0 Ou ent\u00e3o isso: &lt;h1&gt;&lt;span role=button&gt;bot\u00e3o&lt;\/span&gt;&lt;\/h1&gt;<\/li>\n<\/ul>\n<p>Porque se role=button for colocado dentro do H1, a estrutura de acessibilidade dos objetos tratar\u00e1 esse elemento como &lt;button&gt;bot\u00e3o&lt;\/button&gt; e perder\u00e1 sua caracter\u00edstica de cabe\u00e7alho.<\/p>\n<p>Por esse motivo, WAI-ARIA deve ser utilizado somente onde n\u00e3o for poss\u00edvel utilizar a sem\u00e2ntica do HTML para tornar o conte\u00fado acess\u00edvel. Sempre d\u00ea prioridade para as WCAG.<\/p>\n<p>A Web est\u00e1 em constante evolu\u00e7\u00e3o e conforme ela evolui, navegadores e tecnologias assistivas devem acompanhar esse processo. Por esse motivo o W3C tem uma preocupa\u00e7\u00e3o imensa com a acessibilidade. A Web foi criada com o intuito de ser acess\u00edvel desde sua concep\u00e7\u00e3o e esse princ\u00edpio deve acompanhar sua evolu\u00e7\u00e3o. E n\u00f3s, criadores e mantenedores dos c\u00f3digos que circulam pela Web, temos uma responsabilidade imensa de manter esse legado de uma Web acess\u00edvel para as atuais e futuras gera\u00e7\u00f5es, afinal, dentro de algumas d\u00e9cadas n\u00f3s poderemos ser os usu\u00e1rios de tecnologias assistivas que v\u00e3o acessar esse conte\u00fado na Web. E ele deve ser acess\u00edvel. Para o nosso pr\u00f3prio bem.<\/p>\n<p>&#8212;&#8212;<\/p>\n<p>Artigo de Reinaldo Ferraz, publicado originalmente no portal <a href=\"http:\/\/imasters.com.br\/front-end\/web-standards\/falando-sobre-aplicacoes-e-conteudo-dinamico-acessivel\/\" target=\"_blank\" rel=\"noopener noreferrer\">iMasters<\/a>.\t\t\t\t<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\t\t\t\tPara tornar esse conte\u00fado din\u00e2mico acess\u00edvel na Web o W3C publicou a recomenda\u00e7\u00e3o WAI-ARIA 1.0, que se tornou uma Recomenda\u00e7\u00e3o do W3C em mar\u00e7o de 2014. Saiba mais sobre a recomenda\u00e7\u00e3o. \t\t\t\t<\/p>\n","protected":false},"author":1,"featured_media":2813,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[3,21],"tags":[64,67,99,117,158,215],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v15.0 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Falando sobre aplica\u00e7\u00f5es e conte\u00fado din\u00e2mico acess\u00edvel - Blog DialHost<\/title>\n<meta name=\"description\" content=\"Para tornar esse conte\u00fado din\u00e2mico acess\u00edvel na Web o W3C publicou a recomenda\u00e7\u00e3o WAI-ARIA 1.0, que se tornou uma Recomenda\u00e7\u00e3o do W3C em mar\u00e7o de 2014.\" \/>\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.dialhost.com.br\/blog\/falando-sobre-aplicacoes-e-conteudo-dinamico-acessivel\/\" \/>\n<meta property=\"og:locale\" content=\"pt_BR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Falando sobre aplica\u00e7\u00f5es e conte\u00fado din\u00e2mico acess\u00edvel - Blog DialHost\" \/>\n<meta property=\"og:description\" content=\"Para tornar esse conte\u00fado din\u00e2mico acess\u00edvel na Web o W3C publicou a recomenda\u00e7\u00e3o WAI-ARIA 1.0, que se tornou uma Recomenda\u00e7\u00e3o do W3C em mar\u00e7o de 2014.\" \/>\n<meta property=\"og:url\" content=\"\/blog\/falando-sobre-aplicacoes-e-conteudo-dinamico-acessivel\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog DialHost\" \/>\n<meta property=\"article:publisher\" content=\"http:\/\/www.facebook.com\/DialHost\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/DialHost\" \/>\n<meta property=\"article:published_time\" content=\"2014-09-30T15:54:44+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.dialhost.com.br\/blog\/wp-content\/uploads\/2019\/04\/og-image.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"630\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@dialhost\" \/>\n<meta name=\"twitter:site\" content=\"@dialhost\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.dialhost.com.br\/blog\/#organization\",\"name\":\"DialHost Internet\",\"url\":\"https:\/\/www.dialhost.com.br\/blog\/\",\"sameAs\":[\"http:\/\/www.facebook.com\/DialHost\",\"https:\/\/www.instagram.com\/dialhost_oficial\/\",\"https:\/\/www.linkedin.com\/company\/dialhost-internet\",\"https:\/\/www.youtube.com\/channel\/UCAiqiX8IiqTSfA8wQhpzgXQ\",\"https:\/\/twitter.com\/dialhost\"],\"logo\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/www.dialhost.com.br\/blog\/#logo\",\"inLanguage\":\"pt-BR\",\"url\":\"https:\/\/www.dialhost.com.br\/blog\/wp-content\/uploads\/2019\/03\/marca-dialhost.png\",\"width\":81,\"height\":81,\"caption\":\"DialHost Internet\"},\"image\":{\"@id\":\"https:\/\/www.dialhost.com.br\/blog\/#logo\"}},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.dialhost.com.br\/blog\/#website\",\"url\":\"https:\/\/www.dialhost.com.br\/blog\/\",\"name\":\"Blog DialHost\",\"description\":\"Os melhores conte\\u00fados sobre Desenvolvimento Web, Marketing e Neg\\u00f3cios\",\"publisher\":{\"@id\":\"https:\/\/www.dialhost.com.br\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":\"https:\/\/www.dialhost.com.br\/blog\/?s={search_term_string}\",\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"pt-BR\"},{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/www.dialhost.com.br\/blog\/falando-sobre-aplicacoes-e-conteudo-dinamico-acessivel\/#primaryimage\",\"inLanguage\":\"pt-BR\",\"url\":\"\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.dialhost.com.br\/blog\/falando-sobre-aplicacoes-e-conteudo-dinamico-acessivel\/#webpage\",\"url\":\"https:\/\/www.dialhost.com.br\/blog\/falando-sobre-aplicacoes-e-conteudo-dinamico-acessivel\/\",\"name\":\"Falando sobre aplica\\u00e7\\u00f5es e conte\\u00fado din\\u00e2mico acess\\u00edvel - Blog DialHost\",\"isPartOf\":{\"@id\":\"https:\/\/www.dialhost.com.br\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.dialhost.com.br\/blog\/falando-sobre-aplicacoes-e-conteudo-dinamico-acessivel\/#primaryimage\"},\"datePublished\":\"2014-09-30T15:54:44+00:00\",\"dateModified\":\"2014-09-30T15:54:44+00:00\",\"description\":\"Para tornar esse conte\\u00fado din\\u00e2mico acess\\u00edvel na Web o W3C publicou a recomenda\\u00e7\\u00e3o WAI-ARIA 1.0, que se tornou uma Recomenda\\u00e7\\u00e3o do W3C em mar\\u00e7o de 2014.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.dialhost.com.br\/blog\/falando-sobre-aplicacoes-e-conteudo-dinamico-acessivel\/#breadcrumb\"},\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.dialhost.com.br\/blog\/falando-sobre-aplicacoes-e-conteudo-dinamico-acessivel\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.dialhost.com.br\/blog\/falando-sobre-aplicacoes-e-conteudo-dinamico-acessivel\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"item\":{\"@type\":\"WebPage\",\"@id\":\"\/blog\/\",\"url\":\"\/blog\/\",\"name\":\"In\\u00edcio\"}},{\"@type\":\"ListItem\",\"position\":2,\"item\":{\"@type\":\"WebPage\",\"@id\":\"\/blog\/falando-sobre-aplicacoes-e-conteudo-dinamico-acessivel\/\",\"url\":\"\/blog\/falando-sobre-aplicacoes-e-conteudo-dinamico-acessivel\/\",\"name\":\"Falando sobre aplica\\u00e7\\u00f5es e conte\\u00fado din\\u00e2mico acess\\u00edvel\"}}]},{\"@type\":\"Article\",\"@id\":\"https:\/\/www.dialhost.com.br\/blog\/falando-sobre-aplicacoes-e-conteudo-dinamico-acessivel\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.dialhost.com.br\/blog\/falando-sobre-aplicacoes-e-conteudo-dinamico-acessivel\/#webpage\"},\"author\":{\"@id\":\"https:\/\/www.dialhost.com.br\/blog\/#\/schema\/person\/a0b10cbe35449dea173a06d4664f9fcc\"},\"headline\":\"Falando sobre aplica\\u00e7\\u00f5es e conte\\u00fado din\\u00e2mico acess\\u00edvel\",\"datePublished\":\"2014-09-30T15:54:44+00:00\",\"dateModified\":\"2014-09-30T15:54:44+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.dialhost.com.br\/blog\/falando-sobre-aplicacoes-e-conteudo-dinamico-acessivel\/#webpage\"},\"publisher\":{\"@id\":\"https:\/\/www.dialhost.com.br\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.dialhost.com.br\/blog\/falando-sobre-aplicacoes-e-conteudo-dinamico-acessivel\/#primaryimage\"},\"keywords\":\"conte\\u00fado din\\u00e2mico,css,feed de parceiros,html,noticias,w3c\",\"articleSection\":\"Dicas e Not\\u00edcias,JavaScript, CSS e HTML\",\"inLanguage\":\"pt-BR\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.dialhost.com.br\/blog\/#\/schema\/person\/a0b10cbe35449dea173a06d4664f9fcc\",\"name\":\"DialHost Internet\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/www.dialhost.com.br\/blog\/#personlogo\",\"inLanguage\":\"pt-BR\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/05feec2f99aef1c42b09aeaa637ee66f?s=96&r=g\",\"caption\":\"DialHost Internet\"},\"description\":\"H\\u00e1 mais de 18 anos proporcionando um servi\\u00e7o de hospedagem de sites voltado 100% na Experi\\u00eancia e Sucesso do Cliente, prezando a qualidade, transpar\\u00eancia e seguran\\u00e7a.\",\"sameAs\":[\"https:\/\/www.facebook.com\/DialHost\",\"https:\/\/www.instagram.com\/dialhost_oficial\/\",\"https:\/\/www.linkedin.com\/company\/dialhost-internet\",\"https:\/\/twitter.com\/dialhost\",\"https:\/\/www.youtube.com\/channel\/UCAiqiX8IiqTSfA8wQhpzgXQ\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","_links":{"self":[{"href":"https:\/\/www.dialhost.com.br\/blog\/wp-json\/wp\/v2\/posts\/2806"}],"collection":[{"href":"https:\/\/www.dialhost.com.br\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.dialhost.com.br\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.dialhost.com.br\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.dialhost.com.br\/blog\/wp-json\/wp\/v2\/comments?post=2806"}],"version-history":[{"count":0,"href":"https:\/\/www.dialhost.com.br\/blog\/wp-json\/wp\/v2\/posts\/2806\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.dialhost.com.br\/blog\/wp-json\/wp\/v2\/media\/2813"}],"wp:attachment":[{"href":"https:\/\/www.dialhost.com.br\/blog\/wp-json\/wp\/v2\/media?parent=2806"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.dialhost.com.br\/blog\/wp-json\/wp\/v2\/categories?post=2806"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.dialhost.com.br\/blog\/wp-json\/wp\/v2\/tags?post=2806"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}