CUTCODEDOWN
Minimalist Semantic Markup

Welcome Guest
Please Login or Register

If you have registered but not recieved your activation e-mail in a reasonable amount of time, or have issues with using the registration form, please use our Contact Form for assistance. Include both your username and the e-mail you tried to register with.

Author Topic: Handling Logos in Website Footers  (Read 230 times)

romsen

  • Junior Member
  • *
  • Posts: 13
  • Karma: +0/-0
Handling Logos in Website Footers
« on: 20 Sep 2022, 03:26:45 am »
Hello,

I wonder how to handle the client's logo in the page footer.

Shoud it be just an <img>, or an <img> inside a <figure> or text inside a <h2> and the logo is a background-image ?


Here is my actual code:

Code: [Select]
<footer>
  <img src=".." alt="client's logo">
  <address>...</address>
  <nav class="social-media">
   <ul>
    <li><a href="#"><img src="..." alt="Facebook"></a></li>
    <li><a href="#"><img src="..." alt="Instagram"></a></li>
   </ul>
  </nav>
  <nav class="legal">
   <ul>
    <li><a href="#">Privacy</a></li>
    <li><a href="#">Imprint</a></li>
   </ul>
  </nav>
</footer>

Jason Knight

  • Administrator
  • Hero Member
  • *****
  • Posts: 1049
  • Karma: +188/-1
    • CutCodeDown -- Minimalist Semantic Markup
Re: Handling Logos in Website Footers
« Reply #1 on: 20 Sep 2022, 06:27:10 am »
If the logo isn't in an anchor, I would treat it as presentation. Thus, it has no business in an IMG tag and would/should be applied via the CSS.

The logo's for the social media links kind of get the same thing. They are a presentational affectation for the site names, so rather than confuse screen readers, braille readers, and the like hoping that magically ALT text does it's job.

Also multiple NAV on a page seems to make things really hard to navigate on my braille reader and non-apple screen readers.

 I'd have that code something more like

Code: [Select]
<footer>
<hr>
<address>...</address>
<ul class="socialMenu">
<li class="facebook"><a href="#"><span>Facebook</span></a></li>
<li class="instagram"><a href="#"><span>Instagram</span></a></li>
</ul>
<ul class="legal">
<li><a href="#">Privacy</a></li>
<li><a href="#">Imprint</a></li>
</ul>
</footer>

Where the HR provides a landing / subject break for legacy UA's, and the span would be absolute positioned off-screen with generated content with webfonts or SVG backgrounds used to apply the icons. None of those images qualify enough as content to be in the markup.

Fun part is you could use the span as styled tooltips on hover / focus. See what I did at the bottom of this rewrite of one of FailwindUI's templates:

https://cutcodedown.com/for_others/medium_articles/failwindUI/resalient/resalientFontIcons/resalient.fontIcons.html
We are all, we are all, we are all FRIENDS! For today we're all brothers, tonight we're all friends. Our moment of peace in a war that never ends.

romsen

  • Junior Member
  • *
  • Posts: 13
  • Karma: +0/-0
Re: Handling Logos in Website Footers
« Reply #2 on: 26 Sep 2022, 03:25:00 am »
Thank you for your answer, it helped me a lot for clarity.

 

SMF spam blocked by CleanTalk

Advertisement