Como julgar o que deve ser uma marcação mais acessível ,
e
  • Se o design tiver dados semelhantes a tabela?

StackOverflow https://stackoverflow.com/questions/2103749

Pergunta

Por exemplo, qual é a maneira acessível de codificar esse design.

TEXTO DE ALT HTTP://easycapts.com/fs/uploaded/220/0715108922.png

Atualmente, o CMS da minha empresa produzia este HTML para este design

<div id="presentationsContainer">
        <div class="ItemsContainer">
            <div class="presentationsItemContainer">
                <div class="TitleContainer">
                    Presentation October 2009</div>
                <div class="MediaContainer">
                    <a target="_blank" href="Presentation.ppt">Download PPT </a>
                </div>
            </div>
            <div class="presentations">
                <div class="TitleContainer">
                    May 2009</div>
                <div class="MediaContainer">
                    <a target="_blank" href="2009.ppt">Download PPT </a>
                </div>
            </div>
            <div class="presentations">
                <div class="TitleContainer">
                    March 2009</div>
                <div class="MediaContainer">
                    <a target="_blank" href="2009.ppt">Download PPT </a>
                </div>
            </div>
            <div class="presentations">
                <div class="TitleContainer">
                    Results Presentation September 2008</div>
                <div class="MediaContainer">
                    <a target="_blank" href="2008.ppt">Download PPT </a>
                </div>
            </div>
        </div>
    </div>

Curti <table> não é bom para o usuário do leitor de tela, então o que acontecerá para a tela do usuário com muitas tags de div não semântica são ambos criarão problemas para o usuário do leitor de tela ou a div não temântica cria menos problema do que a marcação corretamente

O que deve ser usado para acessibilidade e se o CSS seria desativado, qual técnica de código manterá a formatação compreensível?

Foi útil?

Solução

IMO qualquer uma das três maneiras está bem. Eu poderia argumentar que qualquer um deles é melhor do que os outros 2.

Eu iria com a lista apenas porque é menos código quando estou olhando para ela.

<ul id="presentationsContainer">
    <li>
        Presentation October 2009
        <span><a target="_blank" href="Presentation.ppt">Download PPT </a></span>
        <span><a target="_blank" href="Presentation.ppt">Download PPT </a></span>
    </li>
    <li>
        Presentation October 2009
        <span><a target="_blank" href="Presentation.ppt">Download PPT </a></span>
        <span><a target="_blank" href="Presentation.ppt">Download PPT </a></span>
    </li>
    <li>
        Presentation October 2009
        <span><a target="_blank" href="Presentation.ppt">Download PPT </a></span>
        <span><a target="_blank" href="Presentation.ppt">Download PPT </a></span>
    </li>
</ul>

EDITAR Adicionar o download adicional ppt ainda pode ser feito apenas adicionando outro período a cada LI. Estou assumindo que, para obter o PDF, faça o download da sua extensão à direita e dando -lhe uma largura. Dessa forma, adicionar outra coluna não é mais código CSS. Inferno, você pode até remover o período e adicionar esse estilo à tag A. Supondo que nenhum link esteja nessa primeira coluna.

No entanto, se você deseja alterá -lo para uma tabela (que pode ser uma escolha melhor com mais colunas), você pode fazer algo assim: você já pode ver quanto mais código há para procurar.

<table id="presentationsContainer">
  <tr>
    <td class="main" width="60%">Presentation October 2009</td>
    <td class="dl" width="20%">Download pdf</td>
    <td class="dl" width="20%">Download ppt</td>
  </tr>
  <tr>
    <td class="main" width="60%">Presentation October 2009</td>
    <td class="dl" width="20%">Download pdf</td>
    <td class="dl" width="20%">Download ppt</td>
  </tr>
  <tr>
    <td class="main" width="60%">Presentation October 2009</td>
    <td class="dl" width="20%">Download pdf</td>
    <td class="dl" width="20%">Download ppt</td>
  </tr>
</table>

Outras dicas

Essa foto de tela parece um candidato perfeito para um <table>. Será mais fácil estilizar, X-Browser compatível e com alguns cabeçalhos completamente acessíveis. Ele também renderizará praticamente o mesmo se o estilo CSS for removido.

Isso me parece uma lista não ordenada. Usar o DIV assim não é melhor do que usar tabelas. Usar uma lista não ordenada faz muito mais sentido do ponto de vista da marcação.

Uma coisa que seria mais acessível (ou pelo menos mais alinhada com as diretrizes do W3C) é download de links que fazem sentido fora de contexto.

Então, em vez de apenas:

<a target="_blank" href="2009.ppt">Download PPT </a>

Você pode ter:

<a target="_blank" href="2009.ppt" title="Download March 2009 presentation (PowerPoint file)">Download PPT </a>
Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top