<p role="alert">Você deve ler e aceitar os termos de uso!</p>
    

<div role="alertdialog" aria-labelledby="titulo" aria-describedby="descricao">
    <div role="document" tabindex="0">
        <h2 id="titulo">Sua sessão de login está para expirar!</h2>
        <p id="descricao">
            Clique no botão abaixo para extender sua sessão
        </p>
        <button>OK</button>
    </div>
</div>
    

<div class="progress">
    <div class="progress-bar" id="progress-bar"
        role="progressbar"
        aria-valuenow="20"
        aria-valuemin="0"
        aria-valuemax="100"
    style="width:20%">
        20 %
    </div>
</div>
<button onclick="aumentar10('progress-bar');" >Aumentar 10%</button>

#progress {
    height: 30px;
    overflow: hidden;
    background-color: #f5f5f5;
    border: 1px solid black;
}
#progress-bar {
    float: left;
    font-size: 12px;
    line-height: 20px;
    color: #fff;
    text-align: center;
    background-color: blue;
    transition: width .6s ease;
}

function aumentar10(progressbarID) {
    var barra = document.getElementById(progressbarID);
    valuenow = barra.getAttribute('aria-valuenow');
    if (valuenow != "100") {
        valuenow = Number(valuenow) + 10;
        barra.setAttribute('aria-valuenow', valuenow);
        barra.style.width = String(valuenow) + '%';
        barra.innerHTML = String(valuenow) + ' %';
    }
    return true;
}

<div role="dialog" aria-labelledby="titulo" aria-describedby="descricao">
    <h2 id="titulo">Mensagem enviada com sucesso!</h2>
    <p id="descricao">
        Sua mensagem foi enviada e será respondida brevemente.
    </p>
    <button>Fechar</button>
</div>
    

<div id="alert-area" aria-live="assertive"></div>
<div id="maindrag">
    <a href="#" class="indicator-anchor" style="display:none;">Início do componente de arrastar e soltar</a>
    <div id="draggable" tabindex="0" draggable="true" ondragstart="event.dataTransfer.setData( 'text/plain',null)" aria-grabbed="false">
        Lavar a louça
    </div>

    <div class="dropzone">
        <span id="drop1">Para Fazer</span>
    </div>

    <div class="dropzone">
        <span id="drop2">Fazendo</span>
    </div>

    <div class="dropzone">
        <span id="drop3">Feito</span>
    </div>
    <a href="#" class="indicator-anchor" style="display:none;">Fim do componente de arrastar e soltar</a>
</div>

.dropzone {
    color: white;
    background-color: gray;
    display: block;
    width: 350px;
    height: 200px;
    padding: 1em;
    margin: 0.5em;
}

#draggable {
    cursor: grab;
    color: white;
    font-weight: bold;
    background-color: black;
    width: 300px;
    padding: 0.5em;
}

#draggable:focus, #draggable:hover {
    border: 3px solid red;
}

[aria-dropeffect=move] {
    border: 5px solid black;
}

.drophover {
    border: 5px solid red !important;
}

.dropzone span {
    font-weight: bold;
}

.sronly, #alert-area, .indicator-anchor {
    position: absolute;
    left: -999em;
}

var dragged;

var verify_dropELement = false;

var dnd_alert = document.getElementById('alert-area');

function dragStart(event) {
    // TODO: limitar a navegação por tab apenas entre as dropzones quando o elemento arrastável é pegos
    if (event.type == 'dragstart' || (event.type == 'keypress' & & event.keyCode == '13')) {

        // Ativa âncoras de começo e fim do widget
        var anchors = document.getElementsByClassName('indicator-anchor');
        for (var i = 0; i < anchors.length; i++) {
            anchors[i].removeAttribute('style');
        }

        // Anuncia que o elemento foi capturado
        var msg = document.createTextNode("O elemento foi capturado");
        dnd_alert.appendChild(msg);

        // Remove o tabindex do elemento arrastável
        dragged = event.target;
        dragged.removeAttribute('tabindex');
        var parent = dragged.parentNode;

        // modifica o atributo aria-grabbed como true no elemento
        event.target.setAttribute("aria-grabbed", true);
        var dropzones = document.getElementsByClassName('dropzone');
        for (var i = 0; i < dropzones.length; i++) {
            dropzones[i].setAttribute("aria-dropeffect", "move");
            dropzones[i].setAttribute('tabindex', '0');
        }
    }
}

function dragEnd(event) {
    // modifica o atributo aria-grabbed para false
    if (event.type == 'dragend' || (event.type == 'keypress' & & event.keyCode == '13' & & verify_dropELement)) {
        if (verify_dropELement) {

            var anchors = document.getElementsByClassName('indicator-anchor');
            for (var i = 0; i < anchors.length; i++) {
                anchors[i].setAttribute('style', 'display:none;')
            }

            var msg = document.createTextNode("O elemento foi largado");
            dnd_alert.appendChild(msg);
            event.target.setAttribute("aria-grabbed", false);
            var dropzones = document.getElementsByClassName('dropzone');
            for (var i = 0; i < dropzones.length; i++) {
                dropzones[i].removeAttribute("aria-dropeffect");
                dropzones[i].removeAttribute('tabindex');
                dropzones[i].className = "dropzone"
            }
        }
        verify_dropELement = false;
    }
}

function dragOver(event) {
    // previne o comportamento padrão para permitir que o elemento arrastado seja soltado dentro
    event.preventDefault();
}

function dragEnter(event) {
    var el = event.target;
    if (el.className == "dropzone" || el.className == "dropzone drophover") {
        // adiciona o atributo aria-dropeffect como move, indicando que o efeito realizado ao arrastar e soltar um elemento é movê-lo
        el.className = "dropzone drophover";
    }
}



function dragLeave(event) {
    var el = event.target;
    if (el.className == "dropzone" || el.className == "dropzone drophover") {
        // remove o atributo quando o elemento arrastado não está mais sobre este alvo
        el.className = "dropzone";
    }
}



function dropElement(event) {
    if (event.type == 'drop' || (event.type == 'keypress' & & event.keyCode == '13' & & !verify_dropELement)) {
        // previne a ação padrão (abre como link para alguns elementos)
        event.preventDefault();
        var el = event.target;
        // move o elemento arrastado para o alvo
        dragged.setAttribute('tabindex', 0);
        if (el.className == "dropzone" || el.className == "dropzone drophover") {
            el.appendChild(dragged);
        }
        verify_dropELement = true;
    }
}

var main = document.getElementById('maindrag');

var draggable = document.getElementById('draggable');

var dropzones = document.getElementsByClassName('dropzone');


draggable.addEventListener('keypress', dragStart, false);
main.addEventListener("dragstart", dragStart, false);

main.addEventListener("dragend", dragEnd, false);

main.addEventListener("dragover", dragOver, false);

main.addEventListener("dragenter", dragEnter, false);

main.addEventListener("dragleave", dragLeave, false);

main.addEventListener("drop", dropElement, false);

for (var i = 0; i < dropzones.length; i++) {
    dropzones[i].addEventListener('focus', dragEnter, false);
    dropzones[i].addEventListener('blur', dragLeave, false);
    dropzones[i].addEventListener('keypress', dropElement, true);
    dropzones[i].addEventListener('keypress', dragEnd, true);
}

        <span role="link" id="link" tabindex="0">Site do Centro Tecnólógico de Acessibilidade</span>
    

[role=link] {
        color: #0064b4;
}

[role=link]:focus, [role=link]:hover {
    color: #23527c;
    text-decoration: underline;
    cursor: pointer;
}

var link = document.getElementById('link');

function linkToCTA(e) {
    if (e.type == 'click' || (e.type == 'keydown' && e.keyCode == '13')) {
        window.location.href = 'http://cta.ifrs.edu.br';
    }
}

link.addEventListener('click', linkToCTA);
link.addEventListener('keypress', linkToCTA);

<div id="chat" role="log" aria-live="polite">
    ...
</div>

<div class="algumacoisa" role="marquee" aria-live="polite">
    ...
</div>

<div class="lista" role="list">
    <div role="listitem">Ovos</div>
    <div role="listitem">Farinha</div>
    <div role="listitem">Leite</div>
    <div role="listitem">Pão</div>
</div>

<div role="listbox" tabindex="0" id="listbox1" aria-activedescendant="listbox1-1">
    <div role="option" id="listbox1-1" class="selected">Verde</div>
    <div role="option" id="listbox1-2">Laranja</div>
    <div role="option" id="listbox1-3">Vermelho</div>
    <div role="option" id="listbox1-4">Azul</div>
    <div role="option" id="listbox1-5">Preto</div>
    <div role="option" id="listbox1-6">Violeta</div>
</div>

<input type="text"
    aria-label="Tag"
    role="combobox"
    aria-expanded="true"
    aria-autocomplete="list"
    aria-owns="listbox"
aria-activedescendant="opcao_selecionada">
<ul role="listbox" id="listbox">
    <li role="option">Zebra</li>
    <li role="option" id="opcao_selecionada">Zoom</li>
</ul>

        <ul role="menu" id="vertical-menu" tabindex="0">
<li tabindex="0" role="menuitem">Item 1</li>
<li tabindex="0" role="menuitem">Item 2</li>
<div role="group" id="radiogroup">
<li tabindex="0" class="radio-item" role="menuitemradio" aria-checked="false">Opção 1</li>
<li tabindex="0" class="radio-item" role="menuitemradio" aria-checked="false">Opção 2</li>
<li tabindex="0" class="radio-item" role="menuitemradio" aria-checked="true">Opção 3</li>
</div>
</ul>

<div role="menubar" id="horizontal-menu" tabindex="0">
<span tabindex="0" role="menuitem">Novo Documento</span>
<span tabindex="0" role="menuitem">Abrir Documento</span>
<div role="group">
<span tabindex="0" class="checkbox-item" role="menuitemcheckbox" aria-checked="true">Salvar Automaticamente</span>
<span tabindex="0" class="checkbox-item" role="menuitemcheckbox" aria-checked="false">Salvar na Nuvem</span>
</div>
</div>
    

li[role=menuitem], li[role=menuitemradio], li[role=menuitemcheckbox] {
list-style: none;
display: block
}

ul[role=menu] li, div[role=menubar] span {
background-color: black;
padding: 1em;
color: white;
font-weight: bold;
}

ul[role=menu] li:hover, div[role=menubar] span:hover, ul[role=menu] li:focus, div[role=menubar] span:focus {
background-color: lightgrey;
color: black;
}

span[role=menuitem], span[role=menuitemradio], span[role=menuitemcheckbox] {
list-style: none;
margin-bottom: 0.5em;
margin-right: 0;
margin-left: 0;
display: inline-block
}

[aria-checked="true"] {
background-color: grey !important;
}

function mudarEstado(e){
if (e.type == 'click' || (e.type == 'keydown' && e.keyCode == '13')) {
var obj = e.target;
if (obj) {
var checked = obj.getAttribute('aria-checked')
if (checked == 'true') {
obj.setAttribute('aria-checked', 'false');
}
else {
obj.setAttribute('aria-checked', 'true');
}
}
}
}

var elementos = document.getElementsByClassName("checkbox-item");

for (var i = 0; i < elementos.length; i++) {
elementos[i].addEventListener('click', mudarEstado);
elementos[i].addEventListener('keydown', mudarEstado);
}

var group = document.getElementById('radiogroup');
function mudarEstadoRadio(e) {
if (e.type == 'click' || (e.type == 'keydown' && e.keyCode == '13')) {
var group = document.getElementById('radiogroup');
for (var i = 0; i < group.children.length; i++) {
var checked = group.children[i].getAttribute('aria-checked')
if (checked == 'true') {
group.children[i].setAttribute('aria-checked', 'false');
}
}

var obj = e.target;

if (obj) {
var checked = obj.getAttribute('aria-checked')
if (checked == 'true') {
obj.setAttribute('aria-checked', 'false');
}
else {
obj.setAttribute('aria-checked', 'true');
}
}

}
}

var elements = document.getElementsByClassName("radio-item");
for (var i = 0; i < elements.length; i++) {
elements[i].addEventListener('click', mudarEstadoRadio);
elements[i].addEventListener('keydown', mudarEstadoRadio);
}

        <p role="status">Suas mudanças foram salvas automaticamente.</p>