# Plugins

# Nova Página

- Disponibilização do ícone de acessibilidade

**Ally - Web Accessibility & Usability adiciona:**  
 botão flutuante  
contraste  
aumento de fonte  
leitura  
teclado  
acessibilidade visual

- Recursos obrigatórios de acessibilidade visual

toolbar acessível  
navegação  
melhorias WCAG

- Tradução e acessibilidade para pessoas surdas (Libras)

**VLibras** serve para tornar o site acessível para pessoas surdas que utilizam Libras (Língua Brasileira de Sinais).  
Ele funciona assim:  
o usuário acessa o site  
clica no botão do VLibras  
um avatar/intérprete virtual aparece  
o texto da página é traduzido para Libras em animação.  
Isso ajuda principalmente:  
pessoas surdas  
pessoas com deficiência auditiva  
usuários que têm Libras como principal forma de comunicação.

- Leitura automática e apoio para pessoas com deficiência visual

**Leitor de texto (voz) por Emerson Andrade:**  
Permite leitura automática  
Ideal para deficiência visual

//--- CÓDIGO ---//

<div id="bkmrk-%3C%21---%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D">&lt;!-- ======================================================</div><div id="bkmrk-%C2%A0-%C2%A0-%C2%A0tts-acess%C3%8Dvel-p"> TTS ACESSÍVEL PARA WORDPRESS / ELEMENTOR</div><div id="bkmrk-%C2%A0-%C2%A0-%C2%A0--leitura-em-pt"> - Leitura em PT-BR</div><div id="bkmrk-%C2%A0-%C2%A0-%C2%A0--play-%2F-pause-"> - Play / Pause / Stop</div><div id="bkmrk-%C2%A0-%C2%A0-%C2%A0--sele%C3%A7%C3%A3o-de-vo"> - Seleção de voz</div><div id="bkmrk-%C2%A0-%C2%A0-%C2%A0--velocidade"> - Velocidade</div><div id="bkmrk-%C2%A0-%C2%A0-%C2%A0--destaque-da-p"> - Destaque da palavra lida</div><div id="bkmrk-%C2%A0-%C2%A0-%C2%A0--bot%C3%A3o-flutuan"> - Botão flutuante moderno</div><div id="bkmrk-%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D">====================================================== --&gt;</div><div id="bkmrk-">  
</div><div id="bkmrk-%3Cdiv-id%3D%22tts-contain">&lt;div id="tts-container"&gt;</div><div id="bkmrk--1">  
</div><div id="bkmrk-%C2%A0-%C2%A0-%3C%21---bot%C3%83o---%3E"> &lt;!-- BOTÃO --&gt;</div><div id="bkmrk-%C2%A0-%C2%A0-%3Cbutton"> &lt;button</div><div id="bkmrk-%C2%A0-%C2%A0-%C2%A0-%C2%A0-id%3D%22tts-togg"> id="tts-toggle"</div><div id="bkmrk-%C2%A0-%C2%A0-%C2%A0-%C2%A0-aria-label%3D%22"> aria-label="Abrir leitor de conteúdo"&gt;</div><div id="bkmrk--2">  
</div><div id="bkmrk-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%3Csvg"> &lt;svg</div><div id="bkmrk-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-xmlns%3D%22h"> xmlns="http://www.w3.org/2000/svg"</div><div id="bkmrk-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-width%3D%222"> width="28"</div><div id="bkmrk-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-height%3D%22"> height="28"</div><div id="bkmrk-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-viewbox%3D"> viewBox="0 0 24 24"</div><div id="bkmrk-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-fill%3D%22no"> fill="none"</div><div id="bkmrk-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-stroke%3D%22"> stroke="currentColor"</div><div id="bkmrk-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-stroke-w"> stroke-width="2"</div><div id="bkmrk-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-stroke-l"> stroke-linecap="round"</div><div id="bkmrk-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-stroke-l-1"> stroke-linejoin="round"&gt;</div><div id="bkmrk--3">  
</div><div id="bkmrk-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%3Cpath-d%3D"> &lt;path d="M11 5 6 9H2v6h4l5 4z"/&gt;</div><div id="bkmrk-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%3Cpath-d%3D-1"> &lt;path d="M15.54 8.46a5 5 0 0 1 0 7.07"/&gt;</div><div id="bkmrk-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%3Cpath-d%3D-2"> &lt;path d="M19.07 4.93a10 10 0 0 1 0 14.14"/&gt;</div><div id="bkmrk--4">  
</div><div id="bkmrk-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%3C%2Fsvg%3E"> &lt;/svg&gt;</div><div id="bkmrk--5">  
</div><div id="bkmrk-%C2%A0-%C2%A0-%3C%2Fbutton%3E"> &lt;/button&gt;</div><div id="bkmrk--6">  
</div><div id="bkmrk-%C2%A0-%C2%A0-%3C%21---player---%3E"> &lt;!-- PLAYER --&gt;</div><div id="bkmrk-%C2%A0-%C2%A0-%3Cdiv-id%3D%22tts-pla"> &lt;div id="tts-player"&gt;</div><div id="bkmrk--7">  
</div><div id="bkmrk-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%3Cdiv-class%3D%22"> &lt;div class="tts-header"&gt;</div><div id="bkmrk-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%3Cstrong%3E"> &lt;strong&gt;Leitor de Conteúdo&lt;/strong&gt;</div><div id="bkmrk-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%3C%2Fdiv%3E"> &lt;/div&gt;</div><div id="bkmrk--8">  
</div><div id="bkmrk-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%3C%21---control"> &lt;!-- CONTROLES --&gt;</div><div id="bkmrk-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%3Cdiv-class%3D%22-1"> &lt;div class="tts-controls"&gt;</div><div id="bkmrk--9">  
</div><div id="bkmrk-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%3Cbutton-"> &lt;button onclick="iniciarLeitura()"&gt;</div><div id="bkmrk-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%E2%96%B6%EF%B8%8F"> ▶️</div><div id="bkmrk-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%3C%2Fbutton"> &lt;/button&gt;</div><div id="bkmrk--10">  
</div><div id="bkmrk-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%3Cbutton--1"> &lt;button onclick="pausarLeitura()"&gt;</div><div id="bkmrk-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%E2%8F%B8%EF%B8%8F"> ⏸️</div><div id="bkmrk-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%3C%2Fbutton-1"> &lt;/button&gt;</div><div id="bkmrk--11">  
</div><div id="bkmrk-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%3Cbutton--2"> &lt;button onclick="pararLeitura()"&gt;</div><div id="bkmrk-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%E2%8F%B9%EF%B8%8F"> ⏹️</div><div id="bkmrk-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%3C%2Fbutton-2"> &lt;/button&gt;</div><div id="bkmrk--12">  
</div><div id="bkmrk-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%3C%2Fdiv%3E-1"> &lt;/div&gt;</div><div id="bkmrk--13">  
</div><div id="bkmrk-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%3C%21---velocid"> &lt;!-- VELOCIDADE --&gt;</div><div id="bkmrk-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%3Cdiv-class%3D%22-2"> &lt;div class="tts-options"&gt;</div><div id="bkmrk--14">  
</div><div id="bkmrk-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%3Clabel%3E"> &lt;label&gt;</div><div id="bkmrk-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-velo"> Velocidade</div><div id="bkmrk-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%3C%2Flabel%3E"> &lt;/label&gt;</div><div id="bkmrk--15">  
</div><div id="bkmrk-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%3Cinput"> &lt;input</div><div id="bkmrk-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-type"> type="range"</div><div id="bkmrk-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-id%3D%22"> id="tts-rate"</div><div id="bkmrk-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-min%3D"> min="0.5"</div><div id="bkmrk-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-max%3D"> max="2"</div><div id="bkmrk-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-step"> step="0.1"</div><div id="bkmrk-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-valu"> value="1"</div><div id="bkmrk-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%3E"> &gt;</div><div id="bkmrk--16">  
</div><div id="bkmrk-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%3C%21---voz"> &lt;!-- VOZ --&gt;</div><div id="bkmrk--17">  
</div><div id="bkmrk-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%3Clabel%3E-1"> &lt;label&gt;</div><div id="bkmrk-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-voz"> Voz</div><div id="bkmrk-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%3C%2Flabel%3E-1"> &lt;/label&gt;</div><div id="bkmrk--18">  
</div><div id="bkmrk-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%3Cselect-"> &lt;select id="tts-voice"&gt;&lt;/select&gt;</div><div id="bkmrk--19">  
</div><div id="bkmrk-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%3C%2Fdiv%3E-2"> &lt;/div&gt;</div><div id="bkmrk--20">  
</div><div id="bkmrk-%C2%A0-%C2%A0-%3C%2Fdiv%3E"> &lt;/div&gt;</div><div id="bkmrk--21">  
</div><div id="bkmrk-%3C%2Fdiv%3E">&lt;/div&gt;</div><div id="bkmrk--22">  
</div><div id="bkmrk-%3C%21---%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D-1">&lt;!-- ======================================================</div><div id="bkmrk-%C2%A0-%C2%A0-%C2%A0css"> CSS</div><div id="bkmrk-%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D-1">====================================================== --&gt;</div><div id="bkmrk--23">  
</div><div id="bkmrk-%3Cstyle%3E">&lt;style&gt;</div><div id="bkmrk--24">  
</div><div id="bkmrk-%2F%2A-container-%2A%2F">/* CONTAINER */</div><div id="bkmrk--25">  
</div><div id="bkmrk-%23tts-container%7B">\#tts-container{</div><div id="bkmrk-%C2%A0-%C2%A0-position%3Afixed%3B"> position:fixed;</div><div id="bkmrk-%C2%A0-%C2%A0-bottom%3A120px%3B"> bottom:120px;</div><div id="bkmrk-%C2%A0-%C2%A0-right%3A20px%3B"> right:20px;</div><div id="bkmrk-%C2%A0-%C2%A0-z-index%3A999999%3B"> z-index:999999;</div><div id="bkmrk-%C2%A0-%C2%A0-font-family%3Aaria"> font-family:Arial,sans-serif;</div><div id="bkmrk-%7D">}</div><div id="bkmrk--26">  
</div><div id="bkmrk-%2F%2A-bot%C3%83o-flutuante-%2A">/* BOTÃO FLUTUANTE */</div><div id="bkmrk--27">  
</div><div id="bkmrk-%23tts-toggle%7B">\#tts-toggle{</div><div id="bkmrk-%C2%A0-%C2%A0-width%3A64px%3B"> width:64px;</div><div id="bkmrk-%C2%A0-%C2%A0-height%3A64px%3B"> height:64px;</div><div id="bkmrk--28">  
</div><div id="bkmrk-%C2%A0-%C2%A0-border%3Anone%3B"> border:none;</div><div id="bkmrk-%C2%A0-%C2%A0-border-radius%3A50"> border-radius:50%;</div><div id="bkmrk--29">  
</div><div id="bkmrk-%C2%A0-%C2%A0-background%3A%23ffff"> background:#ffffff;</div><div id="bkmrk--30">  
</div><div id="bkmrk-%C2%A0-%C2%A0-display%3Aflex%3B"> display:flex;</div><div id="bkmrk-%C2%A0-%C2%A0-align-items%3Acent"> align-items:center;</div><div id="bkmrk-%C2%A0-%C2%A0-justify-content%3A"> justify-content:center;</div><div id="bkmrk--31">  
</div><div id="bkmrk-%C2%A0-%C2%A0-cursor%3Apointer%3B"> cursor:pointer;</div><div id="bkmrk--32">  
</div><div id="bkmrk-%C2%A0-%C2%A0-box-shadow%3A"> box-shadow:</div><div id="bkmrk-%C2%A0-%C2%A0-%C2%A0-%C2%A0-0-8px-24px-r"> 0 8px 24px rgba(0,0,0,.18);</div><div id="bkmrk--33">  
</div><div id="bkmrk-%C2%A0-%C2%A0-transition%3A.2s%3B"> transition:.2s;</div><div id="bkmrk-%7D-1">}</div><div id="bkmrk--34">  
</div><div id="bkmrk-%23tts-toggle%3Ahover%7B">\#tts-toggle:hover{</div><div id="bkmrk-%C2%A0-%C2%A0-transform%3Ascale%28"> transform:scale(1.05);</div><div id="bkmrk-%7D-2">}</div><div id="bkmrk--35">  
</div><div id="bkmrk-%2F%2A-%C3%8Dcone-%2A%2F">/* ÍCONE */</div><div id="bkmrk--36">  
</div><div id="bkmrk-%23tts-toggle-svg%7B">\#tts-toggle svg{</div><div id="bkmrk-%C2%A0-%C2%A0-stroke%3A%231351b4-%21"> stroke:#1351b4 !important;</div><div id="bkmrk-%7D-3">}</div><div id="bkmrk--37">  
</div><div id="bkmrk-%2F%2A-player-%2A%2F">/* PLAYER */</div><div id="bkmrk--38">  
</div><div id="bkmrk-%23tts-player%7B">\#tts-player{</div><div id="bkmrk-%C2%A0-%C2%A0-width%3A280px%3B"> width:280px;</div><div id="bkmrk--39">  
</div><div id="bkmrk-%C2%A0-%C2%A0-background%3A%23ffff-1"> background:#ffffff;</div><div id="bkmrk--40">  
</div><div id="bkmrk-%C2%A0-%C2%A0-border-radius%3A16"> border-radius:16px;</div><div id="bkmrk--41">  
</div><div id="bkmrk-%C2%A0-%C2%A0-padding%3A16px%3B"> padding:16px;</div><div id="bkmrk--42">  
</div><div id="bkmrk-%C2%A0-%C2%A0-margin-top%3A10px%3B"> margin-top:10px;</div><div id="bkmrk--43">  
</div><div id="bkmrk-%C2%A0-%C2%A0-box-shadow%3A-1"> box-shadow:</div><div id="bkmrk-%C2%A0-%C2%A0-%C2%A0-%C2%A0-0-8px-24px-r-1"> 0 8px 24px rgba(0,0,0,.15);</div><div id="bkmrk--44">  
</div><div id="bkmrk-%C2%A0-%C2%A0-display%3Anone%3B"> display:none;</div><div id="bkmrk-%7D-4">}</div><div id="bkmrk--45">  
</div><div id="bkmrk-%2F%2A-header-%2A%2F">/* HEADER */</div><div id="bkmrk--46">  
</div><div id="bkmrk-.tts-header%7B">.tts-header{</div><div id="bkmrk-%C2%A0-%C2%A0-margin-bottom%3A15"> margin-bottom:15px;</div><div id="bkmrk-%C2%A0-%C2%A0-font-size%3A16px%3B"> font-size:16px;</div><div id="bkmrk-%7D-5">}</div><div id="bkmrk--47">  
</div><div id="bkmrk-%2F%2A-controles-%2A%2F">/* CONTROLES */</div><div id="bkmrk--48">  
</div><div id="bkmrk-.tts-controls%7B">.tts-controls{</div><div id="bkmrk-%C2%A0-%C2%A0-display%3Aflex%3B-1"> display:flex;</div><div id="bkmrk-%C2%A0-%C2%A0-gap%3A10px%3B"> gap:10px;</div><div id="bkmrk-%C2%A0-%C2%A0-margin-bottom%3A15-1"> margin-bottom:15px;</div><div id="bkmrk-%7D-6">}</div><div id="bkmrk--49">  
</div><div id="bkmrk-.tts-controls-button">.tts-controls button{</div><div id="bkmrk--50">  
</div><div id="bkmrk-%C2%A0-%C2%A0-flex%3A1%3B"> flex:1;</div><div id="bkmrk--51">  
</div><div id="bkmrk-%C2%A0-%C2%A0-border%3Anone%3B-1"> border:none;</div><div id="bkmrk--52">  
</div><div id="bkmrk-%C2%A0-%C2%A0-padding%3A12px%3B"> padding:12px;</div><div id="bkmrk--53">  
</div><div id="bkmrk-%C2%A0-%C2%A0-border-radius%3A10"> border-radius:10px;</div><div id="bkmrk--54">  
</div><div id="bkmrk-%C2%A0-%C2%A0-cursor%3Apointer%3B-1"> cursor:pointer;</div><div id="bkmrk--55">  
</div><div id="bkmrk-%C2%A0-%C2%A0-background%3A%23f3f4"> background:#f3f4f6;</div><div id="bkmrk--56">  
</div><div id="bkmrk-%C2%A0-%C2%A0-font-size%3A18px%3B"> font-size:18px;</div><div id="bkmrk--57">  
</div><div id="bkmrk-%C2%A0-%C2%A0-transition%3A.2s%3B-1"> transition:.2s;</div><div id="bkmrk-%7D-7">}</div><div id="bkmrk--58">  
</div><div id="bkmrk-.tts-controls-button-1">.tts-controls button:hover{</div><div id="bkmrk-%C2%A0-%C2%A0-background%3A%23e5e7"> background:#e5e7eb;</div><div id="bkmrk-%7D-8">}</div><div id="bkmrk--59">  
</div><div id="bkmrk-%2F%2A-labels-%2A%2F">/* LABELS */</div><div id="bkmrk--60">  
</div><div id="bkmrk-.tts-options-label%7B">.tts-options label{</div><div id="bkmrk-%C2%A0-%C2%A0-display%3Ablock%3B"> display:block;</div><div id="bkmrk-%C2%A0-%C2%A0-margin-top%3A10px%3B-1"> margin-top:10px;</div><div id="bkmrk-%C2%A0-%C2%A0-margin-bottom%3A5p"> margin-bottom:5px;</div><div id="bkmrk-%C2%A0-%C2%A0-font-size%3A14px%3B"> font-size:14px;</div><div id="bkmrk-%7D-9">}</div><div id="bkmrk--61">  
</div><div id="bkmrk-%2F%2A-inputs-%2A%2F">/* INPUTS */</div><div id="bkmrk--62">  
</div><div id="bkmrk-%23tts-rate%2C">\#tts-rate,</div><div id="bkmrk-%23tts-voice%7B">\#tts-voice{</div><div id="bkmrk-%C2%A0-%C2%A0-width%3A100%25%3B"> width:100%;</div><div id="bkmrk-%7D-10">}</div><div id="bkmrk--63">  
</div><div id="bkmrk-%2F%2A-destacar-palavra-">/* DESTACAR PALAVRA */</div><div id="bkmrk--64">  
</div><div id="bkmrk-.tts-word%7B">.tts-word{</div><div id="bkmrk-%C2%A0-%C2%A0-display%3Ainline-b"> display:inline-block;</div><div id="bkmrk-%7D-11">}</div><div id="bkmrk--65">  
</div><div id="bkmrk-%2F%2A.tts-highlight%7B">/*.tts-highlight{</div><div id="bkmrk-%C2%A0-%C2%A0-display%3Ainline-b-1"> display:inline-block !important;</div><div id="bkmrk-%C2%A0-%C2%A0-background%3A%23ffeb"> background:#ffeb3b !important;</div><div id="bkmrk-%C2%A0-%C2%A0-color%3A%23000-%21impo"> color:#000 !important;</div><div id="bkmrk-%C2%A0-%C2%A0-padding%3A2px-6px-"> padding:2px 6px !important;</div><div id="bkmrk-%C2%A0-%C2%A0-border-radius%3A6p"> border-radius:6px !important;</div><div id="bkmrk-%C2%A0-%C2%A0-line-height%3A1.4-"> line-height:1.4 !important;</div><div id="bkmrk-%C2%A0-%C2%A0-box-decoration-b"> box-decoration-break:clone;</div><div id="bkmrk-%C2%A0-%C2%A0--webkit-box-deco"> -webkit-box-decoration-break:clone;</div><div id="bkmrk--66">  
</div><div id="bkmrk-%7D-%2A%2F">} */</div><div id="bkmrk--67">  
</div><div id="bkmrk-.tts-highlight%7B">.tts-highlight{</div><div id="bkmrk-%C2%A0-%C2%A0-display%3Ainline-b-2"> display:inline-block !important;</div><div id="bkmrk-%C2%A0-%C2%A0-background%3A%23fde6"> background:#fde68a !important;</div><div id="bkmrk-%C2%A0-%C2%A0-color%3A%23111827-%21i"> color:#111827 !important;</div><div id="bkmrk-%C2%A0-%C2%A0-padding%3A2px-6px--1"> padding:2px 6px !important;</div><div id="bkmrk-%C2%A0-%C2%A0-border-radius%3A6p-1"> border-radius:6px !important;</div><div id="bkmrk-%7D-12">}</div><div id="bkmrk--68">  
</div><div id="bkmrk-%2F%2A-responsivo-%2A%2F">/* RESPONSIVO */</div><div id="bkmrk--69">  
</div><div id="bkmrk-%40media%28max-width%3A768">@media(max-width:768px){</div><div id="bkmrk--70">  
</div><div id="bkmrk-%C2%A0-%C2%A0-%23tts-container%7B"> #tts-container{</div><div id="bkmrk-%C2%A0-%C2%A0-%C2%A0-%C2%A0-right%3A15px%3B"> right:15px;</div><div id="bkmrk-%C2%A0-%C2%A0-%C2%A0-%C2%A0-bottom%3A100px"> bottom:100px;</div><div id="bkmrk-%C2%A0-%C2%A0-%7D"> }</div><div id="bkmrk--71">  
</div><div id="bkmrk-%C2%A0-%C2%A0-%23tts-toggle%7B"> #tts-toggle{</div><div id="bkmrk-%C2%A0-%C2%A0-%C2%A0-%C2%A0-width%3A58px%3B"> width:58px;</div><div id="bkmrk-%C2%A0-%C2%A0-%C2%A0-%C2%A0-height%3A58px%3B"> height:58px;</div><div id="bkmrk-%C2%A0-%C2%A0-%7D-1"> }</div><div id="bkmrk--72">  
</div><div id="bkmrk-%7D-13">}</div><div id="bkmrk--73">  
</div><div id="bkmrk-%3C%2Fstyle%3E">&lt;/style&gt;</div><div id="bkmrk--74">  
</div><div id="bkmrk-%3C%21---%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D-2">&lt;!-- ======================================================</div><div id="bkmrk-%C2%A0-%C2%A0-%C2%A0script"> SCRIPT</div><div id="bkmrk-%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D-2">====================================================== --&gt;</div><div id="bkmrk--75">  
</div><div id="bkmrk-%3Cscript%3E">&lt;script&gt;</div><div id="bkmrk--76">  
</div><div id="bkmrk-let-utterance%3B">let utterance;</div><div id="bkmrk-let-voices-%3D-%5B%5D%3B">let voices = [];</div><div id="bkmrk--77">  
</div><div id="bkmrk-let-palavras-%3D-%5B%5D%3B">let palavras = [];</div><div id="bkmrk-let-palavraatual-%3D--">let palavraAtual = -1;</div><div id="bkmrk--78">  
</div><div id="bkmrk-const-toggle-%3D">const toggle =</div><div id="bkmrk-%C2%A0-%C2%A0-document.getelem"> document.getElementById('tts-toggle');</div><div id="bkmrk--79">  
</div><div id="bkmrk-const-player-%3D">const player =</div><div id="bkmrk-%C2%A0-%C2%A0-document.getelem-1"> document.getElementById('tts-player');</div><div id="bkmrk--80">  
</div><div id="bkmrk-const-voiceselect-%3D">const voiceSelect =</div><div id="bkmrk-%C2%A0-%C2%A0-document.getelem-2"> document.getElementById('tts-voice');</div><div id="bkmrk--81">  
</div><div id="bkmrk-const-rateinput-%3D">const rateInput =</div><div id="bkmrk-%C2%A0-%C2%A0-document.getelem-3"> document.getElementById('tts-rate');</div><div id="bkmrk--82">  
</div><div id="bkmrk-%2F%2A-%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D">/* ======================================================</div><div id="bkmrk-%C2%A0-%C2%A0abrir-%2F-fechar-pl"> ABRIR / FECHAR PLAYER</div><div id="bkmrk-%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D-3">====================================================== */</div><div id="bkmrk--83">  
</div><div id="bkmrk-toggle.addeventliste">toggle.addEventListener('click', () =&gt; {</div><div id="bkmrk--84">  
</div><div id="bkmrk-%C2%A0-%C2%A0-player.style.dis"> player.style.display =</div><div id="bkmrk-%C2%A0-%C2%A0-%C2%A0-%C2%A0-player.style"> player.style.display === 'block'</div><div id="bkmrk-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%3F-%27none%27"> ? 'none'</div><div id="bkmrk-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%3A-%27block"> : 'block';</div><div id="bkmrk--85">  
</div><div id="bkmrk-%7D%29%3B">});</div><div id="bkmrk--86">  
</div><div id="bkmrk-%2F%2A-%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D-1">/* ======================================================</div><div id="bkmrk-%C2%A0-%C2%A0carregar-vozes"> CARREGAR VOZES</div><div id="bkmrk-%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D-4">====================================================== */</div><div id="bkmrk--87">  
</div><div id="bkmrk-function-carregarvoz">function carregarVozes(){</div><div id="bkmrk--88">  
</div><div id="bkmrk-%C2%A0-%C2%A0-voices-%3D"> voices =</div><div id="bkmrk-%C2%A0-%C2%A0-%C2%A0-%C2%A0-speechsynthe"> speechSynthesis.getVoices();</div><div id="bkmrk--89">  
</div><div id="bkmrk-%C2%A0-%C2%A0-voiceselect.inne"> voiceSelect.innerHTML = '';</div><div id="bkmrk--90">  
</div><div id="bkmrk-%C2%A0-%C2%A0-voices"> voices</div><div id="bkmrk-%C2%A0-%C2%A0-%C2%A0-%C2%A0-.filter%28v-%3D%3E"> .filter(v =&gt; v.lang.includes('pt'))</div><div id="bkmrk-%C2%A0-%C2%A0-%C2%A0-%C2%A0-.foreach%28%28vo"> .forEach((voice, index) =&gt; {</div><div id="bkmrk--91">  
</div><div id="bkmrk-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-const-op"> const option =</div><div id="bkmrk-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-docu"> document.createElement('option');</div><div id="bkmrk--92">  
</div><div id="bkmrk-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-option.v"> option.value = index;</div><div id="bkmrk--93">  
</div><div id="bkmrk-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-option.t"> option.textContent =</div><div id="bkmrk-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%60%24%7Bv"> `${voice.name} (${voice.lang})`;</div><div id="bkmrk--94">  
</div><div id="bkmrk-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-voicesel"> voiceSelect.appendChild(option);</div><div id="bkmrk--95">  
</div><div id="bkmrk-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%7D%29%3B"> });</div><div id="bkmrk--96">  
</div><div id="bkmrk-%7D-14">}</div><div id="bkmrk--97">  
</div><div id="bkmrk-speechsynthesis.onvo">speechSynthesis.onvoiceschanged =</div><div id="bkmrk-%C2%A0-%C2%A0-carregarvozes%3B"> carregarVozes;</div><div id="bkmrk--98">  
</div><div id="bkmrk-carregarvozes%28%29%3B">carregarVozes();</div><div id="bkmrk--99">  
</div><div id="bkmrk-%2F%2A-%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D-2">/* ======================================================</div><div id="bkmrk-%C2%A0-%C2%A0obter-conte%C3%9Ado"> OBTER CONTEÚDO</div><div id="bkmrk-%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D-5">====================================================== */</div><div id="bkmrk--100">  
</div><div id="bkmrk-function-obterelemen">function obterElementoConteudo(){</div><div id="bkmrk--101">  
</div><div id="bkmrk-%C2%A0-%C2%A0-return-%28"> return (</div><div id="bkmrk-%C2%A0-%C2%A0-%C2%A0-%C2%A0-document.que"> document.querySelector('article') ||</div><div id="bkmrk-%C2%A0-%C2%A0-%C2%A0-%C2%A0-document.que-1"> document.querySelector('.entry-content') ||</div><div id="bkmrk-%C2%A0-%C2%A0-%C2%A0-%C2%A0-document.que-2"> document.querySelector('main')</div><div id="bkmrk-%C2%A0-%C2%A0-%29%3B"> );</div><div id="bkmrk--102">  
</div><div id="bkmrk-%7D-15">}</div><div id="bkmrk--103">  
</div><div id="bkmrk-%2F%2A-%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D-3">/* ======================================================</div><div id="bkmrk-%C2%A0-%C2%A0preparar-par%C3%81graf"> PREPARAR PARÁGRAFOS</div><div id="bkmrk-%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D-6">====================================================== */</div><div id="bkmrk--104">  
</div><div id="bkmrk-function-prepararcon">function prepararConteudo(){</div><div id="bkmrk--105">  
</div><div id="bkmrk-%C2%A0-%C2%A0-const-container-"> const container =</div><div id="bkmrk-%C2%A0-%C2%A0-%C2%A0-%C2%A0-obterelement"> obterElementoConteudo();</div><div id="bkmrk--106">  
</div><div id="bkmrk-%C2%A0-%C2%A0-if%28%21container%29-r"> if(!container) return '';</div><div id="bkmrk--107">  
</div><div id="bkmrk-%C2%A0-%C2%A0-const-paragrafos"> const paragrafos =</div><div id="bkmrk-%C2%A0-%C2%A0-%C2%A0-%C2%A0-container.qu"> container.querySelectorAll('p');</div><div id="bkmrk--108">  
</div><div id="bkmrk-%C2%A0-%C2%A0-palavras-%3D-%5B%5D%3B"> palavras = [];</div><div id="bkmrk--109">  
</div><div id="bkmrk-%C2%A0-%C2%A0-paragrafos.forea"> paragrafos.forEach((p) =&gt; {</div><div id="bkmrk--110">  
</div><div id="bkmrk-%C2%A0-%C2%A0-%C2%A0-%C2%A0-const-texto-"> const texto =</div><div id="bkmrk-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-p.innert"> p.innerText;</div><div id="bkmrk--111">  
</div><div id="bkmrk-%C2%A0-%C2%A0-%C2%A0-%C2%A0-const-lista-"> const lista =</div><div id="bkmrk-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-texto.sp"> texto.split(/\s+/);</div><div id="bkmrk--112">  
</div><div id="bkmrk-%C2%A0-%C2%A0-%C2%A0-%C2%A0-p.innerhtml-"> p.innerHTML =</div><div id="bkmrk-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-lista.ma"> lista.map((palavra) =&gt; {</div><div id="bkmrk--113">  
</div><div id="bkmrk-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-pala"> palavras.push(palavra);</div><div id="bkmrk--114">  
</div><div id="bkmrk-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-cons"> const index =</div><div id="bkmrk-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-"> palavras.length - 1;</div><div id="bkmrk--115">  
</div><div id="bkmrk-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-retu"> return `</div><div id="bkmrk-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0--1"> &lt;span</div><div id="bkmrk-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0--2"> class="tts-word"</div><div id="bkmrk-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0--3"> data-index="${index}"&gt;</div><div id="bkmrk-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0--4"> ${palavra}</div><div id="bkmrk-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0--5"> &lt;/span&gt;</div><div id="bkmrk-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%60%3B"> `;</div><div id="bkmrk--116">  
</div><div id="bkmrk-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%7D%29.join%28"> }).join(' ');</div><div id="bkmrk--117">  
</div><div id="bkmrk-%C2%A0-%C2%A0-%7D%29%3B"> });</div><div id="bkmrk--118">  
</div><div id="bkmrk-%C2%A0-%C2%A0-return-palavras."> return palavras.join(' ');</div><div id="bkmrk--119">  
</div><div id="bkmrk-%7D-16">}</div><div id="bkmrk--120">  
</div><div id="bkmrk-%2F%2A-%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D-4">/* ======================================================</div><div id="bkmrk-%C2%A0-%C2%A0limpar-destaque"> LIMPAR DESTAQUE</div><div id="bkmrk-%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D-7">====================================================== */</div><div id="bkmrk--121">  
</div><div id="bkmrk-function-limpardesta">function limparDestaque(){</div><div id="bkmrk--122">  
</div><div id="bkmrk-%C2%A0-%C2%A0-document"> document</div><div id="bkmrk-%C2%A0-%C2%A0-%C2%A0-%C2%A0-.queryselect"> .querySelectorAll('.tts-highlight')</div><div id="bkmrk-%C2%A0-%C2%A0-%C2%A0-%C2%A0-.foreach%28%28el"> .forEach((el) =&gt; {</div><div id="bkmrk--123">  
</div><div id="bkmrk-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-el.class"> el.classList.remove(</div><div id="bkmrk-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%27tts"> 'tts-highlight'</div><div id="bkmrk-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%29%3B"> );</div><div id="bkmrk--124">  
</div><div id="bkmrk-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%7D%29%3B-1"> });</div><div id="bkmrk--125">  
</div><div id="bkmrk-%7D-17">}</div><div id="bkmrk--126">  
</div><div id="bkmrk-%2F%2A-%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D-5">/* ======================================================</div><div id="bkmrk-%C2%A0-%C2%A0destacar-palavra"> DESTACAR PALAVRA</div><div id="bkmrk-%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D-8">====================================================== */</div><div id="bkmrk--127">  
</div><div id="bkmrk-function-destacarpal">function destacarPalavra(index){</div><div id="bkmrk--128">  
</div><div id="bkmrk-%C2%A0-%C2%A0-limpardestaque%28%29"> limparDestaque();</div><div id="bkmrk--129">  
</div><div id="bkmrk-%C2%A0-%C2%A0-const-elemento-%3D"> const elemento =</div><div id="bkmrk-%C2%A0-%C2%A0-%C2%A0-%C2%A0-document.que-3"> document.querySelector(</div><div id="bkmrk-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%60.tts-wo"> `.tts-word[data-index="${index}"]`</div><div id="bkmrk-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%29%3B"> );</div><div id="bkmrk--130">  
</div><div id="bkmrk-%C2%A0-%C2%A0-if%28elemento%29%7B"> if(elemento){</div><div id="bkmrk--131">  
</div><div id="bkmrk-%C2%A0-%C2%A0-%C2%A0-%C2%A0-elemento.cla"> elemento.classList.add(</div><div id="bkmrk-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%27tts-hig"> 'tts-highlight'</div><div id="bkmrk-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%29%3B-1"> );</div><div id="bkmrk--132">  
</div><div id="bkmrk-%C2%A0-%C2%A0-%C2%A0-%C2%A0-elemento.scr"> elemento.scrollIntoView({</div><div id="bkmrk-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-behavior"> behavior:'smooth',</div><div id="bkmrk-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-block%3A%27c"> block:'center'</div><div id="bkmrk-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%7D%29%3B-2"> });</div><div id="bkmrk--133">  
</div><div id="bkmrk-%C2%A0-%C2%A0-%7D-2"> }</div><div id="bkmrk--134">  
</div><div id="bkmrk-%7D-18">}</div><div id="bkmrk--135">  
</div><div id="bkmrk-%2F%2A-%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D-6">/* ======================================================</div><div id="bkmrk-%C2%A0-%C2%A0iniciar-leitura"> INICIAR LEITURA</div><div id="bkmrk-%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D-9">====================================================== */</div><div id="bkmrk--136">  
</div><div id="bkmrk-function-iniciarleit">function iniciarLeitura(){</div><div id="bkmrk--137">  
</div><div id="bkmrk-%C2%A0-%C2%A0-pararleitura%28%29%3B"> pararLeitura();</div><div id="bkmrk--138">  
</div><div id="bkmrk-%C2%A0-%C2%A0-const-texto-%3D"> const texto =</div><div id="bkmrk-%C2%A0-%C2%A0-%C2%A0-%C2%A0-prepararcont"> prepararConteudo();</div><div id="bkmrk--139">  
</div><div id="bkmrk-%C2%A0-%C2%A0-utterance-%3D"> utterance =</div><div id="bkmrk-%C2%A0-%C2%A0-%C2%A0-%C2%A0-new-speechsy"> new SpeechSynthesisUtterance(texto);</div><div id="bkmrk--140">  
</div><div id="bkmrk-%C2%A0-%C2%A0-utterance.lang-%3D"> utterance.lang = 'pt-BR';</div><div id="bkmrk--141">  
</div><div id="bkmrk-%C2%A0-%C2%A0-utterance.rate-%3D"> utterance.rate =</div><div id="bkmrk-%C2%A0-%C2%A0-%C2%A0-%C2%A0-parsefloat%28r"> parseFloat(rateInput.value);</div><div id="bkmrk--142">  
</div><div id="bkmrk-%C2%A0-%C2%A0-const-voz-%3D"> const voz =</div><div id="bkmrk-%C2%A0-%C2%A0-%C2%A0-%C2%A0-voices%5Bvoice"> voices[voiceSelect.value];</div><div id="bkmrk--143">  
</div><div id="bkmrk-%C2%A0-%C2%A0-if%28voz%29%7B"> if(voz){</div><div id="bkmrk-%C2%A0-%C2%A0-%C2%A0-%C2%A0-utterance.vo"> utterance.voice = voz;</div><div id="bkmrk-%C2%A0-%C2%A0-%7D-3"> }</div><div id="bkmrk--144">  
</div><div id="bkmrk-%C2%A0-%C2%A0-utterance.onboun"> utterance.onboundary =</div><div id="bkmrk-%C2%A0-%C2%A0-%C2%A0-%C2%A0-function%28eve"> function(event){</div><div id="bkmrk--145">  
</div><div id="bkmrk-%C2%A0-%C2%A0-%C2%A0-%C2%A0-if%28event.cha"> if(event.charIndex !== undefined){</div><div id="bkmrk--146">  
</div><div id="bkmrk-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-const-te"> const textoAtual =</div><div id="bkmrk-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-text"> texto.substring(</div><div id="bkmrk-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0--6"> 0,</div><div id="bkmrk-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0--7"> event.charIndex</div><div id="bkmrk-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%29%3B"> );</div><div id="bkmrk--147">  
</div><div id="bkmrk-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-const-in"> const indice =</div><div id="bkmrk-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-text-1"> textoAtual</div><div id="bkmrk-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-.spl"> .split(/\s+/)</div><div id="bkmrk-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-.len"> .length - 1;</div><div id="bkmrk--148">  
</div><div id="bkmrk-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-if%28indic"> if(indice !== palavraAtual){</div><div id="bkmrk--149">  
</div><div id="bkmrk-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-pala-1"> palavraAtual = indice;</div><div id="bkmrk--150">  
</div><div id="bkmrk-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-dest"> destacarPalavra(</div><div id="bkmrk-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0--8"> palavraAtual</div><div id="bkmrk-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%29%3B-1"> );</div><div id="bkmrk--151">  
</div><div id="bkmrk-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%7D"> }</div><div id="bkmrk--152">  
</div><div id="bkmrk-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%7D"> }</div><div id="bkmrk--153">  
</div><div id="bkmrk-%C2%A0-%C2%A0-%7D%3B"> };</div><div id="bkmrk--154">  
</div><div id="bkmrk-%C2%A0-%C2%A0-utterance.onend-"> utterance.onend =</div><div id="bkmrk-%C2%A0-%C2%A0-%C2%A0-%C2%A0-function%28%29%7B"> function(){</div><div id="bkmrk--155">  
</div><div id="bkmrk-%C2%A0-%C2%A0-%C2%A0-%C2%A0-limpardestaq"> limparDestaque();</div><div id="bkmrk--156">  
</div><div id="bkmrk-%C2%A0-%C2%A0-%7D%3B-1"> };</div><div id="bkmrk--157">  
</div><div id="bkmrk-%C2%A0-%C2%A0-speechsynthesis."> speechSynthesis.speak(</div><div id="bkmrk-%C2%A0-%C2%A0-%C2%A0-%C2%A0-utterance"> utterance</div><div id="bkmrk-%C2%A0-%C2%A0-%29%3B-1"> );</div><div id="bkmrk--158">  
</div><div id="bkmrk-%7D-19">}</div><div id="bkmrk--159">  
</div><div id="bkmrk-%2F%2A-%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D-7">/* ======================================================</div><div id="bkmrk-%C2%A0-%C2%A0pausar"> PAUSAR</div><div id="bkmrk-%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D-10">====================================================== */</div><div id="bkmrk--160">  
</div><div id="bkmrk-function-pausarleitu">function pausarLeitura(){</div><div id="bkmrk--161">  
</div><div id="bkmrk-%C2%A0-%C2%A0-if%28speechsynthes"> if(speechSynthesis.speaking){</div><div id="bkmrk--162">  
</div><div id="bkmrk-%C2%A0-%C2%A0-%C2%A0-%C2%A0-if%28speechsyn"> if(speechSynthesis.paused){</div><div id="bkmrk--163">  
</div><div id="bkmrk-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-speechsy"> speechSynthesis.resume();</div><div id="bkmrk--164">  
</div><div id="bkmrk-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%7Delse%7B"> }else{</div><div id="bkmrk--165">  
</div><div id="bkmrk-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%C2%A0-speechsy-1"> speechSynthesis.pause();</div><div id="bkmrk--166">  
</div><div id="bkmrk-%C2%A0-%C2%A0-%C2%A0-%C2%A0-%7D-1"> }</div><div id="bkmrk--167">  
</div><div id="bkmrk-%C2%A0-%C2%A0-%7D-4"> }</div><div id="bkmrk--168">  
</div><div id="bkmrk-%7D-20">}</div><div id="bkmrk--169">  
</div><div id="bkmrk-%2F%2A-%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D-8">/* ======================================================</div><div id="bkmrk-%C2%A0-%C2%A0parar"> PARAR</div><div id="bkmrk-%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D-11">====================================================== */</div><div id="bkmrk--170">  
</div><div id="bkmrk-function-pararleitur">function pararLeitura(){</div><div id="bkmrk--171">  
</div><div id="bkmrk-%C2%A0-%C2%A0-speechsynthesis.-1"> speechSynthesis.cancel();</div><div id="bkmrk--172">  
</div><div id="bkmrk-%C2%A0-%C2%A0-limpardestaque%28%29-1"> limparDestaque();</div><div id="bkmrk--173">  
</div><div id="bkmrk-%7D-21">}</div><div id="bkmrk--174">  
</div><div id="bkmrk-%3C%2Fscript%3E">&lt;/script&gt;</div>

# Papéis (Roles)

<span>Essa tela mostra os </span>**papéis (Roles)**<span> do WordPress. Eles servem para controlar o que cada usuário pode fazer dentro do site.</span>

# Papéis (Roles)

🔴 Administrator

**Acesso total ao site**

Pode:

- Instalar plugins
- Remover plugins
- Alterar temas
- Criar usuários
- Excluir usuários
- Editar qualquer conteúdo
- Alterar configurações

**Quem deve usar**

- Equipe de TI
- Administrador do portal
- Desenvolvedor

**Não fornecer para**

- Jornalistas
- Assessoria
- Usuários comuns

🟠 Adm (DCOMS)

Papel personalizado criado por alguém da equipe.

Provavelmente serve para:

- Gerenciar notícias
- Aprovar conteúdo
- Controlar páginas da DCOMS

**Quem deve usar**

- Chefia da DCOMS
- Coordenador de comunicação

🟠 Adm Pag sem User (DCOMS)

Papel personalizado.

Pelo nome parece permitir:

- Editar páginas
- Sem gerenciar usuários

**Quem deve usar**

- Responsável por atualizar páginas institucionais

🟢 Autor (P5)

Role padrão do WordPress.

Pode:

- Criar postagens
- Editar suas próprias postagens
- Publicar suas próprias postagens
- Excluir suas próprias postagens

Não pode:

- Alterar configurações
- Instalar plugins
- Editar posts de outras pessoas

**Quem deve usar**

- Policiais responsáveis por notícias
- Assessores de comunicação
- Equipe que publica editais

🔵 Contributor

Pode:

- Criar textos

Não pode:

- Publicar

Precisa que alguém aprove.

**Quem deve usar**

- Estagiários
- Colaboradores
- Pessoas em treinamento

🟣 Editor (CORDEN)

Papel personalizado.

Provavelmente pode:

- Aprovar conteúdo
- Editar conteúdo de outros usuários

**Quem deve usar**

- Coordenador de setor

🟣 Editor (DCOMS)

Editor padrão.

Pode:

- Criar postagens
- Editar qualquer postagem
- Aprovar publicações
- Gerenciar categorias

Não pode:

- Instalar plugins
- Alterar temas

**Quem deve usar**

- Chefia da comunicação
- Revisores

⚪ Subscriber

Usuário comum.

Pode:

- Fazer login
- Alterar perfil

Não pode:

- Publicar conteúdo

**Quem deve usar**

- Visitantes cadastrados
- Militares que apenas acessam áreas restritas

🟡 Web Designer

Papel personalizado.

Provavelmente criado para:

- Elementor
- Custom CSS
- Layout

**Quem deve usar**

- Equipe de design
- Desenvolvedor front-end

Minha recomendação para o Portal PMRO

TI

✅ Administrator

DCOMS (chefia)

✅ Editor (DCOMS)

Jornalistas / Redatores

✅ Autor (P5)

Estagiários

✅ Contributor

Militares que apenas precisam acessar conteúdo interno

✅ Subscriber

Desenvolvedor do site

✅ Web Designer ou Administrator