Return to Answer

• 1

• 2.7k
• 15
• 24

• 2.7k
• 15
• 24

img: alt

Each ìmg element needs an alt attribute. If the image is only decorative or redundant, use an empty value:

<img src="images/Docs-icon.png" alt="">

time

You could use the time element for the dates:

<time class="f_time" datetime="2016年09月08日">Sep 08, 2016</time>

abbr

If you want, you could use abbr for "MB", and give the expansion in the title attribute:

<div class="f_size">34.50 <abbr title="Megabyte">MB</abbr></div>

span instead of i

You should not use the i element for CSS icons. Use the meaningless span instead:

<span class="fa fa-trash fa-align-center" aria-hidden="true"></span>

Accessibility of delete function

Note that this icon will not be accessible (because the element has no content, and because of aria-hidden anyway). If it’s really a delete function (which the class name suggests), you should provide alternate content so that, for example, also users with screenreaders can delete files.

The most simple solution would be to use a button with an img that has an alt value like "Delete file xy":

<button type="button"><img src="delete.png" alt="Delete file 'File name Short.ext'"></button>

Markup structure

It seems to me that you have a table, not a list. Then you should use the table element.

<table>
 <thead>
 <tr>
 <th>Name</th>
 <th>Date</th>
 <th>Size</th>
 <th>Delete</th>
 </tr>
 </thead>
 <tbody>
 <tr>
 <td>File name Short and loooooooooooong.ext</td>
 <td><time datetime="2016年09月08日">Sep 08, 2016</time></td>
 <td>34.50 <abbr title="Megabyte">MB</abbr></td>
 <td><button type="button"><img src="delete.png" alt="Delete file 'File name Short and loooooooooooong.ext'"></button></td>
 </tr>
 <tr>
 <td>File name Short.ext</td>
 <td><time datetime="2016年09月08日">Sep 08, 2016</time></td>
 <td>34.50 <abbr title="Megabyte">MB</abbr></td>
 <td><button type="button"><img src="delete.png" alt="Delete file 'File name Short.ext'"></button></td>
 </tr>
 </tbody>
</table>