Project Feedback for A.R.Rahman Tribute Page

Code Feedback
1

Hello Everyone,
I just completed building a tribute page for one of my favourite musicians.
Any constructive feedback would be much appreciated

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/97.0.4692.99 Safari/537.36

Challenge: Build a Tribute Page

Link to the challenge:

2

Overall this is very nice. Just a few suggestions, mainly about accessibility.

  • The hamburger icon cannot be reached with the keyboard. The most common way to implement this is to use a <button>. Doing that will automatically make it keyboard accessible. Set display: none on the button when you don’t need it and the display: block when you do.
  • Related, when the hamburger menu is showing but has not been clicked to display the menu then you need to hide the menu completely by setting it to display: none so that keyboard users can’t access the menu when they can’t see it.
  • You have three <h1>s on the page. This is not technically an accessibility failure but best practices dictate that you should only have one <h1> on the page (which would be his name). The other <h1>s would become <h2>s and the current <h2>s would become <h3>s.
  • The iframe must have a title attribute. This is one of the few instances where a title attribute is required. On a side note, the keyboard accessibility of that embedded spotify playlist is not good (I’ll be blunt, it is bad). I know you can’t do anything about that, it’s just a shame it’s so bad.
  • The three social media links at the bottom need to have actual text in them that describes where the link goes to. This is for people who use screen readers and are listening to your page. The text doesn’t have to be shown on your page though, you can visually hide it so that it is invisible on the page but screen readers can still see it.
3

Hello bbsmooth,
Thanks so much for all your inputs. I think I have managed to correct most of the the things.
I used the pseudo element focus for the hamburger menu to be navigable also with the keyboard. Hopefully that should do the trick.
How do I deal with the last point about social media? Is there a way I can do this? I remember seeing something on those lines with the Date of Birth on one of the projects. Is that the way to go about it?

4

First, put the text inside of the link. For example, the twitter link:

<a href="https://twitter.com/arrahman">
A. R. Rahman's Twitter Feed
<i class="fab fa-twitter"></i>
</a>

Then, visually hide the text using the .visually-hidden class from the link I gave you:

<a href="https://twitter.com/arrahman">
<span class="visually-hidden">A. R. Rahman's Twitter Feed</span>
<i class="fab fa-twitter"></i>
</a>

Now screen reader users will hear the text for the link but the text won’t show up on the page.

5

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