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

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

Вопрос

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

альтернативный текст 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 будет отключен, то какой метод кода сохранит понятное форматирование?

Это было полезно?

Решение

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

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

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

[ПРАВИТЬ] Добавление дополнительного загружаемого ppt все еще можно выполнить, просто добавив еще один интервал к каждому li.Я предполагаю, что для загрузки PDF-файла вы перемещаете интервал вправо и придаете ему ширину.Таким образом, добавление другого столбца больше не является css-кодом.Черт возьми, вы могли бы даже удалить span и добавить этот стиль к тегу a.предполагая, что в этом первом столбце нет ссылок.

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

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

Другие советы

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

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

Одна вещь, которая была бы более доступной (или, по крайней мере, больше соответствовала руководящие принципы 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>
Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top