{"id":1841,"date":"2020-07-21T11:44:08","date_gmt":"2020-07-21T14:44:08","guid":{"rendered":"https:\/\/www.ufrgs.br\/acessibilidadedigital\/?p=1841"},"modified":"2020-11-20T14:11:15","modified_gmt":"2020-11-20T17:11:15","slug":"modais-com-acessibilidade","status":"publish","type":"post","link":"https:\/\/www.ufrgs.br\/acessibilidadedigital\/modais-com-acessibilidade\/","title":{"rendered":"Modais com acessibilidade"},"content":{"rendered":"\n<p>Modal, dialog, caixa ou janela de di\u00e1logo e at\u00e9 mesmo pop-up, s\u00e3o os termos mais utilizados para descrever aquelas janelas que aparecem sobrepostas a um conte\u00fado principal.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img fetchpriority=\"high\" decoding=\"async\" width=\"1009\" height=\"632\" src=\"https:\/\/www.ufrgs.br\/acessibilidadedigital\/wp-content\/uploads\/2020\/11\/bootstrap-modals-1.png\" alt=\"exemplo de janela modal com t\u00edtulo, corpo de texto e um bot\u00e3o vermelho.\" class=\"wp-image-1996\" srcset=\"https:\/\/www.ufrgs.br\/acessibilidadedigital\/wp-content\/uploads\/2020\/11\/bootstrap-modals-1.png 1009w, https:\/\/www.ufrgs.br\/acessibilidadedigital\/wp-content\/uploads\/2020\/11\/bootstrap-modals-1-300x188.png 300w, https:\/\/www.ufrgs.br\/acessibilidadedigital\/wp-content\/uploads\/2020\/11\/bootstrap-modals-1-768x481.png 768w\" sizes=\"(max-width: 1009px) 100vw, 1009px\" \/><\/figure>\n\n\n\n<p>Enquanto essas janelas permitem intera\u00e7\u00f5es mais din\u00e2micas, para usu\u00e1rios de leitores de tela e que fazem navega\u00e7\u00e3o por teclado, elas se tornam pontos inacess\u00edveis se n\u00e3o forem implementadas com acessibilidade.<\/p>\n\n\n\n<p>O principal problema reside no fato de que, ao abrir a janela, o foco do teclado continua na primeira camada de intera\u00e7\u00e3o, n\u00e3o permitindo que o usu\u00e1rio navegue pelo conte\u00fado do modal com o teclado. Assim, \u00e9 preciso que a implementa\u00e7\u00e3o do mesmo fa\u00e7a tamb\u00e9m as altera\u00e7\u00f5es necess\u00e1rias de foco independentemente do uso do mouse.<\/p>\n\n\n\n<div class=\"wp-block-group has-very-light-gray-background-color has-background\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n<p>De maneira geral, voc\u00ea deve cuidar para que:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Com a modal aberta, o foco nunca deve ir para os elementos do fundo;<\/li><li>O bot\u00e3o de fechar n\u00e3o pode falar apenas \u201cX\u201d, deve conter uma descri\u00e7\u00e3o como \u201cFechar\u201d ou \u201cCancelar\u201d;<\/li><li> Ao fechar, o foco deve voltar para o bot\u00e3o ou link que abriu a modal;<\/li><\/ul>\n<\/div><\/div>\n\n\n\n<p>A seguir mostraremos alguns passos com peda\u00e7os de c\u00f3digo exemplo. Esses c\u00f3digos n\u00e3o constituem uma solu\u00e7\u00e3o completa de modal acess\u00edvel. Para isso, verifique nossa listagem de refer\u00eancias ao final da p\u00e1gina.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Marque a caixa de di\u00e1logo e a sobreposi\u00e7\u00e3o de caixa de di\u00e1logo adequadamente<\/h2>\n\n\n\n<p>Ao criar uma caixa de di\u00e1logo, precisamos garantir que ela tenha a fun\u00e7\u00e3o apropriada, para isso, determinamos o atributo <em>role<\/em> com o valor <em>dialog<\/em>. Tamb\u00e9m precisamos garantir que haja um r\u00f3tulo para a caixa de di\u00e1logo, fornecido usando os atributos aria-labelledby e opcionalmente a aria-describedby.<\/p>\n\n\n\n<p>Nenhum dos r\u00f3tulos precisa ser exibido visualmente na tela, desde que estejam na \u00e1rvore de documentos.<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;div class=\"dialog\" role=\"dialog\" aria-labelledby=\"dialog-title\" aria-describedby=\"dialog-description\">\n\t&lt;h1 id=\"dialog-title\">Site Navigation&lt;\/h1>\n\t&lt;p id=\"dialog-description\" class=\"sr-only\">Description goes here&lt;\/p>\n\t&lt;nav>\n\t\t&lt;ul>\n\t\t\t&lt;li>&lt;a href=\"one.html\">Link One&lt;\/a>&lt;\/li>\n\t\t\t&lt;li>&lt;a href=\"two.html\">Link Two&lt;\/a>&lt;\/li>\n\t\t\t&lt;li>&lt;a href=\"three.html\">Link Three&lt;\/a>&lt;\/li>\n\t\t&lt;\/ul>\n\t&lt;\/nav>\n\t&lt;button type=\"button\" aria-label=\"Close Navigation\" class=\"close-dialog\"> &lt;i class=\"fa fa-times\">&lt;\/i> &lt;\/button>\n&lt;\/div><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Ao abrir a modal, configure o foco<\/h2>\n\n\n\n<p>A maneira mais correta e completa em termos de acessibilidade de determinar o foco na abertura do modal consiste em gerar um array de elementos foc\u00e1veis. Os elementos foc\u00e1veis s\u00e3o \u00e2ncoras, campos de formul\u00e1rios, bot\u00f5es e quaisquer elemento que contenha valor de <code>tabindex<\/code> maior que zero(0). Podemos construir o array com esses elementos com o c\u00f3digo abaixo.<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">function Dialog(dialogEl, overlayEl) {\n    \n    this.dialogEl = dialogEl;\n    \n    var focusableEls = this.dialogEl.querySelectorAll('a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), [tabindex=\"0\"]');\n    this.focusableEls = Array.prototype.slice.call(focusableEls);\n}\n<\/pre>\n\n\n\n<p>Ent\u00e3o, podemos determinar qual \u00e9 o primeiro elemento foc\u00e1vel e configurar o m\u00e9todo <code>focus()<\/code>&nbsp;para o mesmo.<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">this.firstFocusableEl = focusableEls[0];\nthis.firstFocusableEl.focus();\n<\/pre>\n\n\n\n<p>Deve sempre existir ao menos um elemento clic\u00e1vel no modal, mesmo que esse seja o bot\u00e3o de fechar. No entanto, se por algum motivo, voc\u00ea n\u00e3o conseguir gerar o array de elementos clic\u00e1veis, pode configurar o foco na janela modal com um c\u00f3digo como o a seguir.<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">showModal() { \n ...\n  var modal=document.getElementById('modal2'); \n  modal.focus();\n ... \n}<\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Ao fechar a modal, volte o foco ao \u00faltimo elemento focado<\/h2>\n\n\n\n<p>Redirecionar o foco para o \u00faltimo elemento focado antes da abertura do modal, depois que este \u00e9 fechado, \u00e9 importante para que o usu\u00e1rio n\u00e3o precise percorrer todo o caminho que havia percorrido anteriormente com o teclado, n\u00e3o se perca e tenha uma navegabilidade mais consistente em seu site.<\/p>\n\n\n\n<p>Quando abrimos a modal, conseguimos determinar qual elemento disparou sua abertura checando qual elemento est\u00e1 ativo no documento (antes de redirecionar o foco para o modal). Para isso, temos como exemplo o c\u00f3digo abaixo, que cria a vari\u00e1vel lastFocusedElement para armazenar a refer\u00eancia a tal elemento.<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">var lastFocusedElement;\nfunction showModal () { \n ...\n  \/\/ Armazena o \u00faltimo elemento focado \n  lastFocusedElement=document.activeElement;\n  var modal=document.getElementById (modalID); \n  modal.focus ();\n ... \n}<\/pre>\n\n\n\n<p>Assim, quando fechamos a modal, conseguimos redirecionar o foco para o elemento focado antes de sua abertura.<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">function removeModal () { \n ...\n  \/\/ Retorna o foco para o \u00faltimo elemento focalizado \n  lastFocusedElement.focus ();\n ... \n}<\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Previna clicks fora da \u00e1rea da modal enquanto ela estiver aberta<\/h2>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p>Usu\u00e1rios que navegam pelo teclado n\u00e3o devem poder dar <code>TAB<\/code>&nbsp;fora do conte\u00fado da modal<\/p><\/blockquote>\n\n\n\n<p>Como uma janela modal restringem visualmente a janela do usu\u00e1rio, usu\u00e1rios de teclado tamb\u00e9m devem ter a mesma experi\u00eancia.<\/p>\n\n\n\n<p>Para conseguir isso, precisamos interceptar duas situa\u00e7\u00f5es <\/p>\n\n\n\n<ol class=\"wp-block-list\"><li>Se o usu\u00e1rio estiver navegando <strong>adiante<\/strong> (pressionando apenas a tecla&nbsp;<code>TAB<\/code>) a partir do&nbsp;<strong>\u00faltimo<\/strong>&nbsp;elemento focaliz\u00e1vel, ent\u00e3o precisamos mov\u00ea-lo para o&nbsp;<strong>primeiro<\/strong>&nbsp;elemento focaliz\u00e1vel.<\/li><li>Se o usu\u00e1rio estiver andando para <strong>tr\u00e1s<\/strong>&nbsp;(pressionando as teclas <code>SHIFT<\/code> e&nbsp;<code>TAB<\/code>) a partir do&nbsp;<strong>primeiro<\/strong>&nbsp;elemento focaliz\u00e1vel, ent\u00e3o precisamos mov\u00ea-lo para o&nbsp;<strong>\u00faltimo<\/strong>&nbsp;elemento focaliz\u00e1vel<\/li><\/ol>\n\n\n\n<p>Se houver apenas um elemento focaliz\u00e1vel, evite que ocorra qualquer comportamento quando o usu\u00e1rio pressionar a tecla&nbsp;<code>TAB<\/code>.<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">Dialog.prototype.handleKeyDown = function(e) {\n\n\tvar Dialog = this;\n\tvar KEY_TAB = 9;\n\n\tfunction handleBackwardTab() {\n\t\tif ( document.activeElement === Dialog.firstFocusableEl ) {\n\t\t\te.preventDefault();\n\t\t\tDialog.lastFocusableEl.focus();\n\t\t}\n\t}\n\tfunction handleForwardTab() {\n\t\tif ( document.activeElement === Dialog.lastFocusableEl ) {\n\t\t\te.preventDefault();\n\t\t\tDialog.firstFocusableEl.focus();\n\t\t}\n\t}\n\n\tswitch(e.keyCode) {\n\t\tcase KEY_TAB:\n\t\t\tif ( Dialog.focusableEls.length === 1 ) {\n\t\t\t\te.preventDefault();\n\t\t\t\tbreak;\n\t\t\t} \n\n\t\t\tif ( e.shiftKey ) {\n\t\t\t\thandleBackwardTab();\n\t\t\t} else {\n\t\t\t\thandleForwardTab();\n\t\t\t}\n\t\t\n\t\t\tbreak;\n\t\tdefault:\n\t\t\tbreak;\n\t} \/\/ end switch\n\n\n};\n<\/pre>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"6allowtheesckeytoclosethedialog\">Permita que a tecla&nbsp;<code>ESC<\/code>&nbsp;feche a modal<\/h2>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">Dialog.prototype.handleKeyDown = function(e) {\n\n\tvar Dialog = this;\n\tvar KEY_TAB = 9;\n    var KEY_ESC = 27;\n\n\tswitch(e.keyCode) {\n\t\tcase KEY_TAB:\n\t\t\t\/* Handle if TAB key is pressed (see above) *\/\n\t\tcase KEY_ESC:\n\t\t\tDialog.close();\n\t\t\tbreak;\n\t\tdefault:\n\t\t\tbreak;\n\t} \/\/ end switch\n\n};<\/pre>\n\n\n\n<p>Refer\u00eancias:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><a href=\"https:\/\/www.w3.org\/TR\/wai-aria-practices\/examples\/dialog-modal\/dialog.html\">https:\/\/www.w3.org\/TR\/wai-aria-practices\/examples\/dialog-modal\/dialog.html<\/a><\/li><li><a href=\"https:\/\/bitsofco.de\/accessible-modal-dialog\/\">https:\/\/bitsofco.de\/accessible-modal-dialog\/<\/a><\/li><li><a href=\"https:\/\/developers.google.com\/web\/fundamentals\/accessibility\/focus\/using-tabindex?hl=pt-br\">https:\/\/developers.google.com\/web\/fundamentals\/accessibility\/focus\/using-tabindex?hl=pt-br<\/a><\/li><li><a href=\"https:\/\/tableless.com.br\/comecando-wai-aria-janela-modal\/\">https:\/\/tableless.com.br\/comecando-wai-aria-janela-modal\/<\/a><\/li><li><a href=\"https:\/\/www.maujor.com\/tutorial\/escrevendo-javascript-com-acessibilidade-em-mente.php\">https:\/\/www.maujor.com\/tutorial\/escrevendo-javascript-com-acessibilidade-em-mente.php<\/a><\/li><\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Modal, dialog, caixa ou janela de di\u00e1logo e at\u00e9 mesmo pop-up, s\u00e3o os termos mais utilizados para descrever aquelas janelas que aparecem sobrepostas a um conte\u00fado principal. Enquanto essas janelas permitem intera\u00e7\u00f5es mais din\u00e2micas, para usu\u00e1rios de leitores de tela e que fazem navega\u00e7\u00e3o por teclado, elas se tornam pontos inacess\u00edveis se n\u00e3o forem implementadas [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[11],"tags":[],"class_list":["post-1841","post","type-post","status-publish","format-standard","hentry","category-codigo"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.1 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Modais com acessibilidade - acessibilidade DIGITAL<\/title>\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.ufrgs.br\/acessibilidadedigital\/modais-com-acessibilidade\/\" \/>\n<meta property=\"og:locale\" content=\"pt_BR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Modais com acessibilidade - acessibilidade DIGITAL\" \/>\n<meta property=\"og:description\" content=\"Modal, dialog, caixa ou janela de di\u00e1logo e at\u00e9 mesmo pop-up, s\u00e3o os termos mais utilizados para descrever aquelas janelas que aparecem sobrepostas a um conte\u00fado principal. Enquanto essas janelas permitem intera\u00e7\u00f5es mais din\u00e2micas, para usu\u00e1rios de leitores de tela e que fazem navega\u00e7\u00e3o por teclado, elas se tornam pontos inacess\u00edveis se n\u00e3o forem implementadas [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.ufrgs.br\/acessibilidadedigital\/modais-com-acessibilidade\/\" \/>\n<meta property=\"og:site_name\" content=\"acessibilidade DIGITAL\" \/>\n<meta property=\"article:published_time\" content=\"2020-07-21T14:44:08+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-11-20T17:11:15+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.ufrgs.br\/acessibilidadedigital\/wp-content\/uploads\/2020\/11\/bootstrap-modals-1.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1009\" \/>\n\t<meta property=\"og:image:height\" content=\"632\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"gerente\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"gerente\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. tempo de leitura\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.ufrgs.br\/acessibilidadedigital\/modais-com-acessibilidade\/\",\"url\":\"https:\/\/www.ufrgs.br\/acessibilidadedigital\/modais-com-acessibilidade\/\",\"name\":\"Modais com acessibilidade - acessibilidade DIGITAL\",\"isPartOf\":{\"@id\":\"https:\/\/www.ufrgs.br\/acessibilidadedigital\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.ufrgs.br\/acessibilidadedigital\/modais-com-acessibilidade\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.ufrgs.br\/acessibilidadedigital\/modais-com-acessibilidade\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.ufrgs.br\/acessibilidadedigital\/wp-content\/uploads\/2020\/11\/bootstrap-modals-1.png\",\"datePublished\":\"2020-07-21T14:44:08+00:00\",\"dateModified\":\"2020-11-20T17:11:15+00:00\",\"author\":{\"@id\":\"https:\/\/www.ufrgs.br\/acessibilidadedigital\/#\/schema\/person\/5b0a51b23e4a6ad82e0edf90f955d999\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.ufrgs.br\/acessibilidadedigital\/modais-com-acessibilidade\/#breadcrumb\"},\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.ufrgs.br\/acessibilidadedigital\/modais-com-acessibilidade\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\/\/www.ufrgs.br\/acessibilidadedigital\/modais-com-acessibilidade\/#primaryimage\",\"url\":\"https:\/\/www.ufrgs.br\/acessibilidadedigital\/wp-content\/uploads\/2020\/11\/bootstrap-modals-1.png\",\"contentUrl\":\"https:\/\/www.ufrgs.br\/acessibilidadedigital\/wp-content\/uploads\/2020\/11\/bootstrap-modals-1.png\",\"width\":1009,\"height\":632,\"caption\":\"exemplo de janela modal com t\u00edtulo, corpo de texto e um bot\u00e3o vermelho.\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.ufrgs.br\/acessibilidadedigital\/modais-com-acessibilidade\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"In\u00edcio\",\"item\":\"https:\/\/www.ufrgs.br\/acessibilidadedigital\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Modais com acessibilidade\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.ufrgs.br\/acessibilidadedigital\/#website\",\"url\":\"https:\/\/www.ufrgs.br\/acessibilidadedigital\/\",\"name\":\"acessibilidade DIGITAL\",\"description\":\"orienta\u00e7\u00f5es e dicas sobre acessibilidade digital\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.ufrgs.br\/acessibilidadedigital\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pt-BR\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.ufrgs.br\/acessibilidadedigital\/#\/schema\/person\/5b0a51b23e4a6ad82e0edf90f955d999\",\"name\":\"gerente\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\/\/www.ufrgs.br\/acessibilidadedigital\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/45869418a1e02e49c8eea0174c911223a60723abfe83d4c6ee43181c402d83f6?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/45869418a1e02e49c8eea0174c911223a60723abfe83d4c6ee43181c402d83f6?s=96&d=mm&r=g\",\"caption\":\"gerente\"},\"url\":\"https:\/\/www.ufrgs.br\/acessibilidadedigital\/author\/gerente\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Modais com acessibilidade - acessibilidade DIGITAL","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.ufrgs.br\/acessibilidadedigital\/modais-com-acessibilidade\/","og_locale":"pt_BR","og_type":"article","og_title":"Modais com acessibilidade - acessibilidade DIGITAL","og_description":"Modal, dialog, caixa ou janela de di\u00e1logo e at\u00e9 mesmo pop-up, s\u00e3o os termos mais utilizados para descrever aquelas janelas que aparecem sobrepostas a um conte\u00fado principal. Enquanto essas janelas permitem intera\u00e7\u00f5es mais din\u00e2micas, para usu\u00e1rios de leitores de tela e que fazem navega\u00e7\u00e3o por teclado, elas se tornam pontos inacess\u00edveis se n\u00e3o forem implementadas [&hellip;]","og_url":"https:\/\/www.ufrgs.br\/acessibilidadedigital\/modais-com-acessibilidade\/","og_site_name":"acessibilidade DIGITAL","article_published_time":"2020-07-21T14:44:08+00:00","article_modified_time":"2020-11-20T17:11:15+00:00","og_image":[{"width":1009,"height":632,"url":"https:\/\/www.ufrgs.br\/acessibilidadedigital\/wp-content\/uploads\/2020\/11\/bootstrap-modals-1.png","type":"image\/png"}],"author":"gerente","twitter_card":"summary_large_image","twitter_misc":{"Escrito por":"gerente","Est. tempo de leitura":"5 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.ufrgs.br\/acessibilidadedigital\/modais-com-acessibilidade\/","url":"https:\/\/www.ufrgs.br\/acessibilidadedigital\/modais-com-acessibilidade\/","name":"Modais com acessibilidade - acessibilidade DIGITAL","isPartOf":{"@id":"https:\/\/www.ufrgs.br\/acessibilidadedigital\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.ufrgs.br\/acessibilidadedigital\/modais-com-acessibilidade\/#primaryimage"},"image":{"@id":"https:\/\/www.ufrgs.br\/acessibilidadedigital\/modais-com-acessibilidade\/#primaryimage"},"thumbnailUrl":"https:\/\/www.ufrgs.br\/acessibilidadedigital\/wp-content\/uploads\/2020\/11\/bootstrap-modals-1.png","datePublished":"2020-07-21T14:44:08+00:00","dateModified":"2020-11-20T17:11:15+00:00","author":{"@id":"https:\/\/www.ufrgs.br\/acessibilidadedigital\/#\/schema\/person\/5b0a51b23e4a6ad82e0edf90f955d999"},"breadcrumb":{"@id":"https:\/\/www.ufrgs.br\/acessibilidadedigital\/modais-com-acessibilidade\/#breadcrumb"},"inLanguage":"pt-BR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.ufrgs.br\/acessibilidadedigital\/modais-com-acessibilidade\/"]}]},{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/www.ufrgs.br\/acessibilidadedigital\/modais-com-acessibilidade\/#primaryimage","url":"https:\/\/www.ufrgs.br\/acessibilidadedigital\/wp-content\/uploads\/2020\/11\/bootstrap-modals-1.png","contentUrl":"https:\/\/www.ufrgs.br\/acessibilidadedigital\/wp-content\/uploads\/2020\/11\/bootstrap-modals-1.png","width":1009,"height":632,"caption":"exemplo de janela modal com t\u00edtulo, corpo de texto e um bot\u00e3o vermelho."},{"@type":"BreadcrumbList","@id":"https:\/\/www.ufrgs.br\/acessibilidadedigital\/modais-com-acessibilidade\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"In\u00edcio","item":"https:\/\/www.ufrgs.br\/acessibilidadedigital\/"},{"@type":"ListItem","position":2,"name":"Modais com acessibilidade"}]},{"@type":"WebSite","@id":"https:\/\/www.ufrgs.br\/acessibilidadedigital\/#website","url":"https:\/\/www.ufrgs.br\/acessibilidadedigital\/","name":"acessibilidade DIGITAL","description":"orienta\u00e7\u00f5es e dicas sobre acessibilidade digital","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.ufrgs.br\/acessibilidadedigital\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pt-BR"},{"@type":"Person","@id":"https:\/\/www.ufrgs.br\/acessibilidadedigital\/#\/schema\/person\/5b0a51b23e4a6ad82e0edf90f955d999","name":"gerente","image":{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/www.ufrgs.br\/acessibilidadedigital\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/45869418a1e02e49c8eea0174c911223a60723abfe83d4c6ee43181c402d83f6?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/45869418a1e02e49c8eea0174c911223a60723abfe83d4c6ee43181c402d83f6?s=96&d=mm&r=g","caption":"gerente"},"url":"https:\/\/www.ufrgs.br\/acessibilidadedigital\/author\/gerente\/"}]}},"_links":{"self":[{"href":"https:\/\/www.ufrgs.br\/acessibilidadedigital\/wp-json\/wp\/v2\/posts\/1841","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.ufrgs.br\/acessibilidadedigital\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.ufrgs.br\/acessibilidadedigital\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.ufrgs.br\/acessibilidadedigital\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.ufrgs.br\/acessibilidadedigital\/wp-json\/wp\/v2\/comments?post=1841"}],"version-history":[{"count":24,"href":"https:\/\/www.ufrgs.br\/acessibilidadedigital\/wp-json\/wp\/v2\/posts\/1841\/revisions"}],"predecessor-version":[{"id":1997,"href":"https:\/\/www.ufrgs.br\/acessibilidadedigital\/wp-json\/wp\/v2\/posts\/1841\/revisions\/1997"}],"wp:attachment":[{"href":"https:\/\/www.ufrgs.br\/acessibilidadedigital\/wp-json\/wp\/v2\/media?parent=1841"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.ufrgs.br\/acessibilidadedigital\/wp-json\/wp\/v2\/categories?post=1841"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.ufrgs.br\/acessibilidadedigital\/wp-json\/wp\/v2\/tags?post=1841"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}