Comment juger ce qui devrait être un balisage plus accessible ,
et

Question

par exemple ce qui est la voie d'accès au code cette conception.

texte alt http://easycaptures.com/fs/uploaded/220/0715108922 .png

actuellement CMS de mon entreprise produisant ce code HTML pour cette conception 

<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>

comme <table> est pas bon pour l'utilisateur de lecteur d'écran alors ce qui se passera à l'utilisateur de l'écran avec beaucoup de balises div non sémantiques sont à la fois va créer des problèmes pour div utilisateur lecteur d'écran ou non sémantique crée moins de problèmes que markup correctement

Quel devrait être utiliser pour l'accessibilité et si css serait désactivé, la technique du code gardera la mise en forme compréhensible?

Était-ce utile?

La solution

OMI l'une des 3 façons est très bien. Je pourrais faire valoir l'un d'eux pour être mieux que l'autre 2.

Moi-même irait avec la liste juste parce que son code moins quand je regarde. 

<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>

[EDIT] Ajout du ppt de téléchargement supplémentaire peut encore être fait en ajoutant simplement une autre durée à chaque li. Je suppose que pour obtenir le pdf télécharger votre variable la durée du droit et de lui donner une largeur. De cette façon, l'ajout d'une autre colonne est pas plus de code CSS. L'enfer vous pourriez même enlever la portée et ajouter ce style à la balise. en supposant qu'aucun lien ne soit dans la première colonne.

Toutefois, si vous voulez changer à une table (qui peut être un meilleur choix avec plus de colonnes), vous pouvez simplement faire quelque chose comme ceci: vous pouvez déjà voir combien plus de code il est de regarder à travers si 

<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>

Autres conseils

Ce capture d'écran ressemble à un candidat parfait pour un <table>. Il sera plus facile de style x-navigateur compatible et avec des têtes complètement accessibles. Il sera également rendu à peu près le même si le style css est supprimée.

Cela me semble comme une liste non ordonnée. L'utilisation div est comme ça ne vaut pas mieux que d'utiliser des tables. L'utilisation d'une liste non ordonnée fait beaucoup plus de sens du point de vue de balisage.

Une chose qui serait plus accessible (ou au moins plus en ligne avec les directives du W3C ) est des liens de téléchargement qui ont du sens hors contexte.

Alors, au lieu de simplement: 

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

Vous pourriez avoir: 

<a target="_blank" href="2009.ppt" title="Download March 2009 presentation (PowerPoint file)">Download PPT </a>
Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top