Как судить о том, какая должна быть более доступная разметка <table>, <div>и <ul><li>, если в дизайне есть данные, подобные таблицам?

Question

например, каков доступный способ кодирования этого дизайна.

альтернативный текст http://easycaptures.com/fs/uploaded/220/0715108922.png

в настоящее время CMS моей компании производит этот HTML для этого дизайна

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

как <table> не подходит для пользователя программы чтения с экрана, тогда что произойдет с пользователем экрана с большим количеством несемантических тегов div, и это создаст проблему для пользователя программы чтения с экрана, или несемантический div создаст меньше проблем, чем правильная разметка

Что следует использовать для доступности, и если CSS будет отключен, то какой метод кода будет поддерживать понятное форматирование?

Answer 1

ИМО любой из 3х способов подойдет. Я могу утверждать, что один из них лучше другого 2.

Я бы пошел со списком только потому, что его меньше, когда я смотрю на него.

<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] Добавление дополнительного ppt для загрузки все еще можно сделать, просто добавив еще один диапазон для каждого li. Я предполагаю, что, чтобы получить pdf, загрузите ваш плавающий промежуток вправо и придав ему ширину. Таким образом, добавление еще одного столбца больше не является кодом CSS. Черт возьми, вы даже можете удалить диапазон и добавить этот стиль к тегу. при условии, что в этом первом столбце нет ссылок.

Однако, если вы хотите изменить его на таблицу (что может быть лучшим выбором с большим количеством столбцов), вы можете просто сделать что-то вроде этого: вы уже можете видеть, сколько еще кода нужно просмотреть.

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

Answer 2

Этот снимок экрана выглядит как идеальный кандидат на <table>. Это будет легче в стиле, совместимом с x-браузером, и с некоторыми полностью доступными заголовками. Он также будет отображаться почти так же, если убрать стиль CSS.

Answer 3

Одна вещь, которая будет более доступной (или, по крайней мере, более соответствующей рекомендациям W3C ), - это ссылки для скачивания, которые имеют смысл вне контекста.

Итак, вместо просто:

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

Вы можете иметь:

<a target="_blank" href="2009.ppt" title="Download March 2009 presentation (PowerPoint file)">Download PPT </a>

Answer 4

Это выглядит как неупорядоченный список. Подобное использование div не лучше, чем использование таблиц. Использование неупорядоченного списка имеет гораздо больше смысла с точки зрения разметки.