Interactive Tribute Page

[jacobmwhitney1]

Hi All,

I created this tribute page to highlight the life and work of Ruth Bader Ginsburg. The page includes interactive audio quotes. Your feedback on usability of the page and layout suggestions would be of great help. Thank you!

[bbsmooth]

Hey, this looks very nice. You aren’t passing one test though.

A few suggestions:

• The caption text below the image at the top does not have enough contrast with the background to be accessible. Use the WebAIM Contrast Checker to ensure that your color combinations are always accessible. You might also have this issue with the light blue quotes.
• The “Read more” link text is questionable for accessibility. Someone using a screen reader and tabbing through the links is just going to hear “Read more” over and over again without knowing what the “more” refers to. Personally, I would add the name of the case after the “Read more” and then visually hide it. For example:

<a ...>Read more <span class='visually-hidden'>about Califano v. Goldfarb (1976)</span></a>

Google ‘css visually hidden’ to get the CSS for the visually-hidden class.

• All of those black, bold case titles should be headings.

• The quotes can be marked up with <blockquote>. You can go even further and use that in combination with a <figure> and <figcaption> for the speaker: <blockquote>: The Block Quotation element - HTML: HyperText Markup Language | MDN

• I’m not sure I’m crazy about the quote being clickable for stopping/starting the sound clip. I think most people assume that underlined text is a link that will take them to another page. Sure, they will figure it out rather quickly. I’m not saying don’t do this. But always be extra cautious when going against SOP.

• This is definitely a more advanced issue, but the default audio controls for the <audio> element are generally not accessible. MDN gives a good overview of the problems. I don’t think anyone expects you to deal with this for this project. I just wanted to make you aware of it.

Overall, this is a very nice job. Everything is responsive and I think the page layout and content is put together extremely well. Good job!

[Roma]

Welcome back @jacobmwhitney1. Page looks good. Some things to revisit;

• Keep the test script when forking the pen (<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>)
  • The test script should be included, with all tests passing, when you submit your projects.
  • Your page passes 9/10 user stories. Click the red button to see which test(s) are failing and text to help you correct the issue. (Be sure and read more than just the first line of the failing message.)
• Run your HTML code through the W3C validator.
  • There are HTML coding errors you should be aware of and address.
  • Since copy/paste from codepen you can ignore the first warning and first two errors.
• Same as mentioned above re: accessibility

[jacobmwhitney1]

I just want to say thank you for your detailed feedback. After reviewing your notes and resources, I was able to make all the changes you suggested, except the audio controls. And I have included these steps into my regular workflow now. The MDN link about accessible audio controls was helpful as well and when I have the time, I will be going back to attempt those adjustments. Thank you again, cheers!

[jacobmwhitney1]

Thank you for heads up. The page is now passing 10/10 user stories and all errors have been removed. This process helped me a ton!