BjRo/Looking-for-Kaizen — comment on commit 1d6f3345c9d5c77908ae3f83b533a815632c46c0
File: source/_includes/custom/asides/about.html line 14
By ilkerde:

Another quite interesting situation. Your solution is totally doable, yet I wouldn't prefer it or even consider it as a standard. You're building your badges list here (nb: so why you chose `class='badges'`over `id='badges'` then?). Now, I'd rather name them profiles. But that's just naming. The point here is that it's a plain list like

- Xing
- Github
- Twitter
- Whatever

and it needs to be treated as such from semantic perspective. What I'm trying to say is that awareness of semantics and accessibility go hand in hand in the web world.

Your usage of `` here totally breaks this unwritten rule, imho. `` should be used with caution and care. They say: "Hey this is a picture. And it's important that it's a picture.". My recommendation: Use it only in the context of content, not - say: _avoid_ - in the context of layout or eye-candyness.

Here, the images are clearly eye-candy to me. The meaning of the list is "here's my other profiles". Hence, the use of `` in this context is more or less like using `

` for a grid layout. (Sorry for being a little explicit here ;-))

__Mitigation__
Start to write your markup as if there's only text. Then, enhance with CSS. That's imho a safe (and mostly very doable) way to style lists. In this case

~~~~
Xing

~~~~

with background images on ``:

~~~~
#badges a {
display:block;
float:left;
width:50px;
height:50px;

span { display:none; }
}

#badge-xing {
background:url("{{ root_url }}/images/badges/xing2-small.png") no-repeat;
}
~~~~

If you really don't care about separation of layout and content, even inlining the background-image seems fairly ok for me here.

This way, you avoid having images on text-only representations and even get the content weight more correct both from semantic and payload perspective. In everyday business, this approach is btw a huge benefit for designers. They can craft powerful layouts just with CSS then.