How to judge what should be more accessible markup <table> ,<div> and <ul><li> if design has table like data?

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

Question

for example what is the accessible way to code this design.

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

currently my company's CMS producing this HTML for this 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>

like <table> is not good for screen reader user then what will happen to screen user with lots of non semantic div tags are both will create problem for screen reader user or non semantic div creates less problem than properly markup

What should be use for accessibility and if css would be disabled then which code technique will keep understandable formatting?

Was it helpful?

Solution

IMO any of the 3 ways is fine. I could argue any one of them to be better then the other 2.

Myself would go with the list just because its less code when I'm looking at it.

<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] Adding the additional download ppt can still be done by just adding another span to each li. I am assuming that to get the pdf download your floating the span to the right and giving it a width. This way adding another column is not any more css code. Hell you could even remove the span and add that style to the a tag. assuming no links are in that first column.

However if you want to change it to a table (which may be a better choice with more columns) you can just do something like this: you can already see how much more code there is to look through though.

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

OTHER TIPS

That screen shot looks like a perfect candidate for a <table>. It will be easier to style, x-browser compatible, and with some headers completely accessible. It will also render pretty much the same if the css styling is removed.

That looks to me like an unordered list. Using div's like that is no better than using tables. Using an unordered list makes a lot more sense from a markup standpoint.

One thing that would be more accessible (or at least more in line with the W3C’s guidelines) is download links that make sense out of context.

So, instead of just:

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

You could have:

<a target="_blank" href="2009.ppt" title="Download March 2009 presentation (PowerPoint file)">Download PPT </a>
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top