Tribute Page - Ken Follet

Hi everyone!
Please check my Tribute Page Project and let me know what do you think. I tried to make it responsive.

Thanks a lot!

Ken Follett - Tribute Page

2 Likes

This is great. Not finding any major issues. So I’ll just list some of the positives I’m seeing that most people don’t do:

  • You are using em units on your break points! Almost no one does this but I think everyone should. It not only makes the page responsive to changes in view port width but also text size changes, which is a huge benefit to those of us who need to manually increase the text size because our old eyes aren’t as good as they used to be.
  • You have reasonable max widths on your content which keeps the line length from getting to long.
  • Your heading structure is excellent.
  • You used a <figure> and <figcaption>. This is one of the few instances in which I have something to add. The alt text on the image and the figcaption text is exactly the same, which is redundant, especially for people using a screen reader. The alt text on the image should describe the image. It’s up to you how detailed you want to get. You could describe what he is doing in the pic (sitting in a chair with his hands clasped together), or his appearance (white hair, glasses, light blue jacket). You don’t have to go overboard and describe every little detail, but give enough so people have an idea of what’s happening in the picture. As for the figcaption text, this seems like a source credit, which you would normally wrap in <small>. (Just to clarify, <small> doesn’t replace <figcaption> just wraps the credit inside of it).

And now a few suggestions:

  • Under the Biography heading you have his name, date of birth, and place of birth. You are using svg icons to label each of these but they don’t actually have any real text associated with them. A screen reader user is just going to hear the text under the icons and will have to guess what they are referring to. I think this is a good place for a <dl>. You could still style it to be horizontal and include the icons, but you would also include actual text for each icon and then visually hide that text.
  • The timeline (Los Pilares de la Tierra) should probably be an <ol>. And then I would include the date either in the <h3> itself or right below it. You can still style the date so it is above the title if you like, but the <h3> should be the first element in the HTML for each list item.
  • The alt text for the book covers is not as easy at it seems. Just saying “Cover of …” isn’t really helpful for people who can’t see the image. The general rule is that if the image has text then the alt text should include that text. But in this case you already are including the text in the content because the title of the book is in the heading and we know that the book was written by Ken Follett. So I don’t think the alt text needs to include that information. I suppose you could describe the colors used on the cover (“gold text on brown background”) but I’m not so sure that is important information to have. Personally, I think in this case I would leave the alt text blank (alt='') so that screen reader users ignore it completely. Or, if you wanted some text to load in case the image didn’t load then you could set the alt text to something like “book cover” and add the attribute aria-hidden="true" to the <img> which will tell screen readers to ignore the image.
  • Pull the <footer> out of <main> so it comes directly after. And to be honest, I probably wouldn’t use a <header> here at all, but if the instructions require it then I understand.

Again, great job. Some of these last points are fairly picky, but I had no choice, you didn’t leave me much to complain about :slight_smile:

2 Likes

I can’t tell you how grateful I am for your comments. I have tried to implement the suggestions you have given me. If you can, I would really appreciate it if you could take another look at it.

It has been very instructive to read you.

Thank you, again.

Your page looks good @ricardoantonio. In addition to what was previously mentioned some further things to revisit;

  • Run your HTML code through the W3C validator.
    • There are HTML syntax/coding errors you should be aware of and address.
      Since copy/paste from codepen you can ignore the first warning and first two errors.
  • Accessibility is about being accessible to all users. Review the giving meaningful text to links lesson. For a more thorough explanation read Web Accessibility in Mind.
    • ken follett” is not accessible
1 Like

Hi! Thank you!
I think the link is ok now… But I’m not sure what this error means :frowning:

It is kind of telling you although it is vague.

It says if the element is a child of the dl element…

What is the ld element? (It’s not valid HTML)

1 Like

OMG!!! I get it!
it’s dl not ld… Thank you!

1 Like

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.