# 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">                &#96;${voice.name} (${voice.lang})&#96;;</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') &#124;&#124;</div><div id="bkmrk-%C2%A0-%C2%A0-%C2%A0-%C2%A0-document.que-1">        document.querySelector('.entry-content') &#124;&#124;</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 &#96;</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">                &#96;;</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">            &#96;.tts-word[data-index="${index}"]&#96;</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