Wie zu beurteilen, was sollte besser zugänglich Markup sein ,
und

Frage

zum Beispiel, was ist die zugängliche Art und Weise, um Code dieses Design.

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

zur Zeit CMS meine Firma produziert HTML für diesen Entwurf 

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

wie <table> für Screenreader-Benutzer nicht gut ist, dann, was mit vielen nicht semantischen div-Tags Bildschirm Benutzer passieren beiden Probleme für Screenreader-Benutzer erstellen wird oder nicht semantische div erzeugt weniger Problem als richtig Markup

Was Verwendung für die Zugänglichkeit sein sollte und wenn CSS dann deaktiviert werden würde, welche Code Technik verständlich Formatierung halten?

War es hilfreich?

Lösung

IMO eine der drei Möglichkeiten, ist in Ordnung. Ich konnte einen von ihnen argumentieren, besser zu sein, dann die andere 2.

Ich selbst würde mit der Liste gehen, nur weil sein weniger Code, wenn ich es bin auf der Suche. 

<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] , um den zusätzlichen Download ppt Hinzufügen gerade noch getan werden kann, durch eine weitere Spanne an jedem li hinzufügen. Ich gehe davon aus, dass die PDF-Download bekommen die Spanne nach rechts schwebend und es eine Breite geben. Auf diese Weise eine weitere Spalte hinzuzufügen, ist nicht mehr CSS-Code. Hölle Sie könnten sogar die Spanne entfernen und diesen Stil der einen Tag hinzuzufügen. vorausgesetzt, keine Links in dieser ersten Spalte sind.

Allerdings, wenn Sie es auf eine Tabelle ändern möchten (die mit mehr Spalten eine bessere Wahl sein kann) kann man nur so etwas tun. Sie können bereits sehen, wie viel mehr Code gibt es allerdings zu schauen durch 

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

Andere Tipps

Dass Screenshot sieht aus wie ein perfekter Kandidat für eine <table>. Es wird leichter zu frisieren, x-Browser kompatibel und mit einigen Header vollständig zugänglich. Es wird auch so ziemlich das gleiche machen, wenn das CSS-Styling entfernt wird.

Das sieht für mich wie eine ungeordnete Liste. Mit div ist wie es ist nicht besser als Tabellen. eine ungeordnete Liste mit Hilfe macht viel mehr Sinn von einem Auszeichnungs Standpunkt aus.

Eine Sache, die besser zugänglich sein würde (oder zumindest mehr im Einklang mit die Richtlinien des W3C ) sind Download-Links des Sinn aus dem Zusammenhang gerissen.

Also, statt nur: 

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

Sie könnte: 

<a target="_blank" href="2009.ppt" title="Download March 2009 presentation (PowerPoint file)">Download PPT </a>
Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top