Accessibility… My Contact List
Saturday, June 21st, 2008This is the second part in my series of posts about simple things that can be done to make this website both more accessible while still remaining search engine friendly.
My contact information was poorly done from an accessibility point of view; the most relevant information was depicted only by graphics; without alt tags; inside a list and as css background images.
We this is mostly going to be kept the same; it works; it looks exactly how i want it on a graphical display. I could keep this the same and just add hidden span tags before the content stating the type of contact information (MSN, Yahoo, Email etc) but this would only be half doing it properly.
<div id="contactme">
<ul>
<li class="email"><a href="mailto:jared@jaredquinn.info">jared@jaredquinn.info>/a></li>
<li class="msn">jared@jaredquinn.info</li>
<li class="gt">jaredquinn@gmail.com</li>
<li class="icq">2152783</li>
<li class="yahoo">jared.quinn</li>
<li class="tux">Reg Linux User <a href="http://counter.li.org/cgi-bin/runscript/display-person.cgi?user=424527">#424527</a></li>
</ul>
</div>
With the following CSS:
#contactme { margin-left: -10px; }
#contactme ul { padding: 0; list-style: none; color: black; }
li.rss,
#contactme li { text-indent: 25px; height: 20px; list-style: none; background-repeat: no-repeat; padding-bottom: 5px; }
#contactme li.email { background-image: url(images/email.gif); }
#contactme li.msn { background-image: url(images/im_msn.gif); }
#contactme li.gt { background-image: url(images/im_gtalk.gif); }
#contactme li.icq { background-image: url(images/im_icq.gif); }
#contactme li.yahoo { background-image: url(images/im_yahoo.gif); }
#contactme li.tux { background-image: url(images/tux_icon.png); }
Updated sidebar.php portion:
<div id="contactme">
<ul>
<li class="email">
<img src="<?php bloginfo('stylesheet_directory'); ?>/images/email.gif" alt="Email:"/>
<a href="mailto:jared@jaredquinn.info">jared@jaredquinn.info</a></li>
<li class="msn">
<img src="<?php bloginfo('stylesheet_directory'); ?>/images/im_msn.gif" alt="MSN:"/>jared@jaredquinn.info</li>
<li class="gt" >
<img src="
<?php bloginfo('stylesheet_directory');
?>/images/im_gtalk.gif" alt="gTalk:"/>jaredquinn@gmail.com</li>
<li class="icq">
<img src="
<?php bloginfo('stylesheet_directory');
?>/images/im_icq.gif" alt="ICQ:"/>2152783</li>
<li class="yahoo"><img src="
<?php bloginfo('stylesheet_directory'); ?>/images/im_yahoo.gif" alt="Yahoo!:"/>jared.quinn</li>
<li class="tux"><img src="
<?php bloginfo('stylesheet_directory'); ?>/images/tux_icon.png" alt="[Tux]“/>
Reg Linux User <a
href=”http://counter.li.org/cgi-bin/runscript/display-person.cgi?user=424527″>#424527</a></li>
</ul>
</div>
And the re-worked CSS code:
#contactme { margin-left: -10px; }
#contactme ul { padding: 0; list-style: none; color: black; }
#contactme li { height: 20px; list-style: none; display: block; padding-left: 50px; }
#contactme li img { float: left; display: block; margin-right: 15px; }
#contactme li.tux img { margin-right: 10px; }
(note that my tux image needed a slightly smaller margin)
Stay tuned for the next change…
jared@jaredquinn.info
jaredquinn@gmail.com
2152783
jared.quinn
Reg Linux User