da tabela escondido de conteúdos para leitores de tela

Question

Eu vi em um par de sites que eles vão incluir uma seção de navegação no topo de sua página, com links internos para outras partes da página, para que os usuários com leitores de tela pode saltar rapidamente para o conteúdo, o menu , rodapé, etc. Este elemento "nav" é movido fora da tela com CSS para que os usuários regulares não vê-lo.

Qual é a melhor maneira de implementar isso? Isto é, o que é o mais acessível e menos intrusiva para leitores de tela Aqui está o que eu tenho jogado com:?

<div id="nav">
    <a href="#one">Jump to section one</a>
    <a href="#two">Jump to section two</a>
    <a href="#three">Jump to section three</a>
</div>

<!-- versus -->

<ul id="nav">
    <li><a href="#one">Jump to section one</a></li>
    <li><a href="#two">Jump to section two</a></li>
    <li><a href="#three">Jump to section three</a></li>
</ul>

O primeiro tem a vantagem de ser muito mais limpo em sua marcação, mas não é exatamente semântica. Além disso, ele aparece como "Ir para uma seção Ir para seção dois Ir para seção três". Eu sei que o aspecto visual não é importante, uma vez que está escondido, mas isso afeta como ele é lido? Há pausas adequadas entre cada um?

O segundo é um pouco mais detalhado em sua sintaxe, mas espero que mais descritivo.

Qual fora destes é melhor, e há uma maneira ainda melhor?

Answer 1

Você pode baixar um plugin para o Firefox chamado Fangs (em referência ao leitor de tela reais Mandíbulas). Ela irá produzir texto do qual Jaws leria. É muito útil. Eu iria com um bom layout semântica ao longo de apenas os links, um após o outro. Eu também escondê-lo com ... algo como

#nav {
    position: absolute;
    left: 0;
    top: -9999px

}

Usando display: none pode não ser lido em alguns leitores de tela.

Em meus próprios sites, eu geralmente feito isso:

<div id="section-nav">
    <p>Jump to</p>
    <ul>
       <li><a href="#section1">Section1</a></li>
    </ul>
</div>

Answer 2

Tenha em mente que os leitores de tela normalmente anunciar hyperlinks como tal. O que significa que o primeiro exemplo não serão lidas como "Ir para seção de um salto para seção dois salto da seção três", mas sim como "Link: Ir para uma seção, link: Ir para a seção dois, link: Ir para seção três" ou algo assim.

(Pessoalmente, eu ainda ir com a segunda opção, semântica, mas isso é apenas a minha preferência pessoal.)

Answer 3

Você deve colocar os links em um com um id (ou classe) de #nav. Isto dá aqueles que utilizam leitores de tela um heads-up que o conteúdo é uma lista de links: " Esta é uma lista com três itens: vincular um 'salto para uma seção, um link 'salto para seção dois' ... "

A colocação do "ul" em um "div" com um id "#nav" é funcional, mas o div não está fazendo nada além de envolver o "ul" para identificação. É mais limpo para apenas id "ul" e deixar o "div" para fora. O código a seguir é a melhor (eu acho). Limpo e direto ao ponto.

<ul id="nav">
    <li><a href="#one">Jump to section one</a></li>
    <li><a href="#two">Jump to section two</a></li>
    <li><a href="#three">Jump to section three</a></li>
</ul>

Para remover o texto da página com css, você usa:

ul#nav {
    position: absolute;
    left: -9999px
}

Answer 4

Com um bom layout semântica, você não precisa dele. Você pode tornar os elementos de navegação que você já está usando compatível com o leitor de tela. A segunda opção é normalmente como você fazer isso acontecer. Você pode estilizar os itens da lista para coincidir com o que você está fazendo atualmente.

Answer 5

A melhor maneira de fazer o que você requisitou está a usar o <ul> com as âncoras dentro deles.

No entanto, existem alguns bugs no WebKit que fará com que o foco para não realmente mudar para o elemento alvo, então você também precisará anexar um manipulador de eventos para os links de modo que o foco muda. Isso também vai exigir o alvo a ser foco guia sable (tabindex="-1" vai trabalhar para isso).

No entanto, se você tem uma boa estrutura de título da página, o usuário leitor de tela pode navegar na página sem a necessidade de este menu de navegação que você está criando. Na verdade este menu pode ser mais útil para teclado apenas os usuários que não têm um leitor de tela. Nesse caso, você vai querer fazê-lo aparecer em foco para que o usuário Teclado-ony pode vê-lo.