Feedback on Tribute Page Project!

Hello, dear Campers!

Here I’m sharing a link to the second project I’ve made which is a Tribute Page. I would appreciate your feedback on the design and code.

Thank you!

Me again :slightly_smiling_face: I’m an accessibility specialist, so that’s what most of my comments tend to be about.

First, I want to say great job. There are very few issues on the page.

For normal text to be accessible it needs to meet a minimum color contrast of 4.5:1 with the background. The figcaption text only has a contrast ratio of 1.62:1. If you change the text color to black then it has a ratio of 11.23:1, well above the minimum. You can check your contrast ratios with WebAIM’s Contrast Checker. It will help you make sure your text colors are accessible.

You have the same contrast issue with the link at the bottom. You might think about keeping that text black and underlining it instead to signify a link.

For your headings, you have an h1 at the top of the page and then jump down to h3 for the other two headings. While this is not technically an accessibility failure, it is highly recommended, and considered an accessibility best practice, to not jump heading levels like that. So I would suggest you change those h3s to h2s.

About that last heading, it’s probably not really a heading. It’s just regular content and should be a p instead of a heading. A heading should almost always have content that follows it. That’s what a heading is for, to introduce a section of content on the page.

It’s great that you provided alt text for the image! I would like to make a suggestion about it though. You have included the name of the other person (and her profession) in the alt text, which isn’t necessarily bad, but since the alt text doesn’t actually show up on the page, only people using screen readers (or people who open up their dev tools to look at the alt text) will get that information. What I would recommend is that you include that information in the caption so it is available to everyone. And then for the alt text, you can just reference them by first name and instead provide a description of what the image is showing, such as what they are wearing, what their surroundings look like. As a basic rule, the alt text should not provide extra information that can’t be found in the page content. It should just describe the image well enough so that a person who can’t see the image has a general idea of what the image is showing.

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