Parabéns João, excelente artigo cara!

Quero deixar a minha contribuição para o teu guia, que é falar sobre o atributo aria-label que é essencial em situações onde adicionamos um ícone SVG dentro de uma tag <button>, por exemplo:

<button aria-label="Fechar" onclick="modal.close()">
    <svg aria-hidden="true" focusable="false" width="17" height="17" xmlns="https://www.w3.org/2000/svg"> <path d="m.967 14.217 5.8-5.906-5.765-5.89L3.094.26l5.783 5.888L14.66.26l2.092 2.162-5.766 5.889 5.801 5.906-2.092 2.162-5.818-5.924-5.818 5.924-2.092-2.162Z" fill="#000" />
</button>

O SVG se trata de um ícone "X", comumente utilizado para indicar que ao clicar nele alguma coisa será fechada. Notem que na tag <button> existe o atributo aria-label com o valor "Fechar", ou seja, está dando um significado para esse botão, até porque "X" não quer dizer nada e usuários que utilizam leitores de tela teriam sérios problemas com isso!

Podemos dizer que o atributo aria-label em situações como essa funciona da mesma forma que o atributo alt para uma imagem que precisa ter um(a) significado/descrição.