Leitor de tela

Classe CSS screen-reader-text para leitores de tela

Use a classe screen_reader para esconder conteúdo, exceto nos leitores de tela.

Este CSS oculta os elementos visualmente, mas os mantem disponíveis para leitores de tela:

.screen_reader {
    position: absolute !important;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    font-size: 14px;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden !important
    word-wrap: normal !important;
}

Explicando algumas propriedades

• width: 1px; height: 1px; para não correr o risco de alguns leitores de tela não anunciam um elemento com tamanho de 0 pixels.
• margin: -1px; para escondê-lo completamente da vista
• word-wrap: normal; para evitar que os leitores de tela leiam o texto letra por letra, pois o texto é colocado em um espaço de 1 pixel de largura. Muitas combinações de leitores de tela e navegadores anunciam palavras quebradas conforme apareceriam visualmente.
• clip: ; está obsoleto, mas é adicionado para oferecer suporte a navegadores mais antigos que ainda não oferecem suporte clip-path, por isso a declaração de ambos.

Estilo :focus para pular links e garantir a visibilidade da navegação do teclado quando o link ficar em foco.

Este CSS trará elementos <a> de link focáveis com à visualização quando eles receberem o foco do teclado, direcionado especificamente para pular conteúdo:

a.screen_reader:focus {
    position: relative !important;
    display: block;
    color: #303030;
    background-color: #FBF37E;
    clip: auto;
    clip-path: none;
    width: auto !important;
    height: auto !important;
    margin: 1px !important;
    padding: 3px 6px !important;
    line-height: normal;
    text-decoration: none;
    z-index: 876543; /* acima de qualquer elemento do packit ui */
}