{"id":3318,"date":"2022-09-21T14:34:03","date_gmt":"2022-09-21T17:34:03","guid":{"rendered":"https:\/\/www.ufsm.br\/pet\/sistemas-de-informacao\/?p=3318"},"modified":"2025-09-02T14:34:44","modified_gmt":"2025-09-02T17:34:44","slug":"acessibilidade-na-web","status":"publish","type":"post","link":"https:\/\/www.ufsm.br\/pet\/sistemas-de-informacao\/2022\/09\/21\/acessibilidade-na-web","title":{"rendered":"Acessibilidade na web"},"content":{"rendered":"\n<p><span style=\"font-weight: 400\">Oi pessoal, nesta edi\u00e7\u00e3o do PET Reda\u00e7\u00e3o vamos compreender a import\u00e2ncia da acessibilidade em p\u00e1ginas web, t\u00e3o quanto dar algumas dicas de como atingir isso usando a tecnologia <\/span><b>HTML<\/b><span style=\"font-weight: 400\">.<\/span><\/p>\n<p><span style=\"font-weight: 400\">Primeiro, precisa-se entender a extens\u00e3o do termo <\/span><b>acessibilidade<\/b><span style=\"font-weight: 400\">, uma vez que ele n\u00e3o demonstra-se totalmente explorado. Dessa maneira, entende-se como acess\u00edvel todo servi\u00e7o, produto, p\u00e1gina que atenda tanto \u00e0s necessidades de pessoas com dificuldade motoras (Paraplegia, Hemiplegia,Tetraplegia), sensoriais(pessoas idosas, cegas, surdas, dalt\u00f4nicas) e cognitivas quanto as que n\u00e3o possuem. Assim, pode-se concluir que para o ramo da web a acessibilidade demonstra-se unir programa\u00e7\u00e3o, design e tecnologia a fim de permitir que todos os usu\u00e1rios obtenham o mesmo n\u00edvel de experi\u00eancia, em rela\u00e7\u00e3o ao entendimento, \u00e0 aprendizagem, \u00e0&nbsp; navega\u00e7\u00e3o e \u00e0 intera\u00e7\u00e3o na p\u00e1gina.<\/span><\/p>\n<p>&nbsp;<\/p>\n<p><span style=\"font-weight: 400\">Ademais, pode-se pontuar que a acessibilidade \u00e9 um direito e um dever regidos por lei. Em 2004 o decreto federal n\u00b0 5.296 prev\u00ea que todos os portais e sites governamentais deveriam atender aos padr\u00f5es de acessibilidade digital, e ap\u00f3s isso, em 2011 a Lei de Acesso \u00e0 Informa\u00e7\u00e3o N\u00ba 12.527 abrange os padr\u00f5es de todos os sites da web.<\/span><\/p>\n<p>&nbsp;<\/p>\n<p><span style=\"font-weight: 400\">Explicado isso, espera-se que p\u00e1ginas acess\u00edveis possuam imagens, v\u00eddeos com audiodescri\u00e7\u00e3o,possibilidade de aumentar a fonte do texto, v\u00eddeos com legendas, boa organiza\u00e7\u00e3o da p\u00e1gina para aplicativos leitores de tela, navegabilidade poss\u00edvel apenas por teclado, entre outros.<\/span><\/p>\n<p>&nbsp;<\/p>\n<p><b>Vamos as dicas no html:<\/b><\/p>\n<p>&nbsp;<\/p>\n<ul>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">criar uma boa e consistente estrutura de t\u00edtulos, par\u00e1grafos, listas, etc.<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400\">Visto que essa pr\u00e1tica ir\u00e1 melhorar a experi\u00eancia de um usu\u00e1rios por meio de um leitor de tela<\/span><\/p>\n<p>&nbsp;<\/p>\n<ul>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">Usar os elementos HTML para o que eles foram designados.<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400\">Nada de criar \u201cdivs\u201d e transform\u00e1-los em bot\u00f5es pelo css.<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">N\u00e3o utilizar tabelas como cabe\u00e7alhos ou rodap\u00e9s, prefira usar a tag &lt;nav&gt;<\/span><\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<ul>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">Usar links com uma descri\u00e7\u00e3o clara<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400\">Exemplo:<\/span><\/p>\n<p><span style=\"font-weight: 400\">Errado:<\/span><\/p>\n<p><span style=\"font-weight: 400\">&lt;p&gt;As baleias s\u00e3o criaturas realmente incr\u00edveis. Para saber mais sobre baleias, &lt;a href=&#8221;whales.html&#8221;&gt;clique aqui&lt;\/a&gt;.&lt;\/p&gt;<\/span><\/p>\n<p><span style=\"font-weight: 400\">Correto:<\/span><\/p>\n<p><span style=\"font-weight: 400\">&lt;p&gt;As baleias s\u00e3o criaturas realmente incr\u00edveis. &lt;a href=&#8221;whales.html&#8221;&gt;Saiba mais sobre baleias&lt;\/a&gt;.&lt;\/p&gt;<\/span><\/p>\n<p>&nbsp;<\/p>\n<ul>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">usar o atributo alt na tag img<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400\">Por meio do alt consegue-se fazer descri\u00e7\u00f5es sobre a imagem e o leitor de tela captar\u00e1 isso. Al\u00e9m disso para adicionar um contexto a imagem pode-se utilizar o atributo title<\/span><\/p>\n<p>&nbsp;<\/p>\n<p><span style=\"font-weight: 400\">Exemplo:<\/span><\/p>\n<p><span style=\"font-weight: 400\">&lt;img src=&#8221;dinosaur.png&#8221;<\/span><\/p>\n<p><span style=\"font-weight: 400\">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;alt=&#8221;Um tiranossauro Rex vermelho: Um dinossauro de duas patas em p\u00e9 como um humano, com bra\u00e7os pequenos e uma cabe\u00e7a grande com muitos dentes afiados.&#8221;<\/span><\/p>\n<p><span style=\"font-weight: 400\">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;title=&#8221;O dinossauro vermelho da Mozilla.&#8221;&gt;<\/span><\/p>\n<p>&nbsp;<\/p>\n<ul>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">Adicionar legenda por meio de texto v\u00eddeos sem legenda.<\/span><\/li>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">Adicionar audiodescri\u00e7\u00e3o em v\u00eddeos.&nbsp;<\/span><\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<p><span style=\"font-weight: 400\">E tamb\u00e9m, as diretrizes a serem seguidas em uma p\u00e1gina acess\u00edvel est\u00e3o descritas pelo Web Accessibility Initiative (sigla: WAI), e atualmente est\u00e1 na vers\u00e3o Web Content Accessibility Guidelines 2 (sigla: WCAG 2).<\/span><\/p>\n<p>&nbsp;<\/p>\n<p><span style=\"font-weight: 400\">Se voc\u00ea quiser ler mais sobre o assunto:<\/span><\/p>\n<p><span style=\"font-weight: 400\">Lei de Acesso \u00e0 Informa\u00e7\u00e3o:<\/span><a href=\"http:\/\/www.planalto.gov.br\/ccivil_03\/_ato2011-2014\/2011\/lei\/l12527.htm\"><span style=\"font-weight: 400\">http:\/\/www.planalto.gov.br\/ccivil_03\/_ato2011-2014\/2011\/lei\/l12527.htm<\/span><\/a><span style=\"font-weight: 400\">&nbsp;<\/span><\/p>\n<p><span style=\"font-weight: 400\">Dicas html: <\/span><a href=\"https:\/\/developer.mozilla.org\/pt-BR\/docs\/Learn\/Accessibility\/HTML\"><span style=\"font-weight: 400\">https:\/\/developer.mozilla.org\/pt-BR\/docs\/Learn\/Accessibility\/HTML<\/span><\/a><span style=\"font-weight: 400\">&nbsp;<\/span><\/p>\n<p><a href=\"https:\/\/developer.mozilla.org\/pt-BR\/docs\/Learn\/HTML\/Multimedia_and_embedding\/Images_in_HTML\"><span style=\"font-weight: 400\">https:\/\/developer.mozilla.org\/pt-BR\/docs\/Learn\/HTML\/Multimedia_and_embedding\/Images_in_HTML<\/span><\/a><\/p>\n<p><span style=\"font-weight: 400\">informa\u00e7\u00f5es adicionais de acessibilidade: <\/span><a href=\"https:\/\/www.iberdrola.com\/inovacao\/o-que-e-acessibilidade-na-web\"><span style=\"font-weight: 400\">https:\/\/www.iberdrola.com\/inovacao\/o-que-e-acessibilidade-na-web<\/span><\/a><\/p>\n<p><span style=\"font-weight: 400\">Diretrizes do WCAG 2: <\/span><a href=\"https:\/\/www.w3.org\/WAI\/standards-guidelines\/wcag\/\"><span style=\"font-weight: 400\">https:\/\/www.w3.org\/WAI\/standards-guidelines\/wcag\/<\/span><\/a><span style=\"font-weight: 400\">&nbsp;<\/span><\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Oi pessoal, nesta edi\u00e7\u00e3o do PET Reda\u00e7\u00e3o vamos compreender a import\u00e2ncia da acessibilidade em p\u00e1ginas web, t\u00e3o quanto dar algumas dicas de como atingir isso usando a tecnologia HTML. Primeiro, precisa-se entender a extens\u00e3o do termo acessibilidade, uma vez que ele n\u00e3o demonstra-se totalmente explorado. Dessa maneira, entende-se como acess\u00edvel todo servi\u00e7o, produto, p\u00e1gina que [&hellip;]<\/p>\n","protected":false},"author":5643,"featured_media":3319,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[124,112],"tags":[149,199],"class_list":["post-3318","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-destaques","category-redacao","tag-redacao","tag-ux-ui"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.ufsm.br\/pet\/sistemas-de-informacao\/wp-json\/wp\/v2\/posts\/3318","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.ufsm.br\/pet\/sistemas-de-informacao\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.ufsm.br\/pet\/sistemas-de-informacao\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.ufsm.br\/pet\/sistemas-de-informacao\/wp-json\/wp\/v2\/users\/5643"}],"replies":[{"embeddable":true,"href":"https:\/\/www.ufsm.br\/pet\/sistemas-de-informacao\/wp-json\/wp\/v2\/comments?post=3318"}],"version-history":[{"count":0,"href":"https:\/\/www.ufsm.br\/pet\/sistemas-de-informacao\/wp-json\/wp\/v2\/posts\/3318\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.ufsm.br\/pet\/sistemas-de-informacao\/wp-json\/wp\/v2\/media\/3319"}],"wp:attachment":[{"href":"https:\/\/www.ufsm.br\/pet\/sistemas-de-informacao\/wp-json\/wp\/v2\/media?parent=3318"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.ufsm.br\/pet\/sistemas-de-informacao\/wp-json\/wp\/v2\/categories?post=3318"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.ufsm.br\/pet\/sistemas-de-informacao\/wp-json\/wp\/v2\/tags?post=3318"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}