Mishael• 50
@mishaelcodes
Submitted
fr4nbtt
@fr4nbtt
All comments
- fr4nbtt• 50
@fr4nbtt
Posted
Hello, just my two cents here:
1.Replace <div> with <article>: It might be beneficial to use an <article> element for the profile card. This indicates that the content is self-contained and related to a single topic, which can improve accessibility and SEO.
<article class="profile-card"> Profile content here </article>2. Place the Links Within the Card: You could consider positioning the social links inside the profile card. This would create a more cohesive unit, making it visually appealing and easier to navigate.
<article class="profile-card"> -- Profile content here -- <ul class="social-links-list"> -- social links -- </ul> </article>3. Add aria-labels to Links: Consider adding aria-labels to your links to enhance accessibility. This can help users with screen readers understand the purpose of each link.
Keep up the great work, and good luck on your journey.
0 @KP1976
Submitted
What specific areas of your project would you like help with?
I was wondering about an image in .svg format. Should I place it in an img tag as I did, or paste it directly into the index.html file...
fr4nbtt• 50@fr4nbtt
Posted
This solution is excellent and surely better than mine; it was challenging to find any relevant suggestions for this peer review, but I guess that's part of the learning process.
Anyway, my two cents:
1. Semantic elements: It is advisable to replace the <div class="card"> with an <article> tag, as this element effectively represents a self-contained piece of content.
2. Ensure descriptive alt text: It is recommended to provide descriptive alt text for images to enhance accessibility.
3. Add ARIA labels to relevant elements: Consider incorporating aria-label attributes to elements where additional context may be beneficial for screen reader users.
4. Structure content with semantic tags: It may be beneficial to organize the card content using <header> for the title and category, and <footer> for the author information, to improve content clarity and accessibility.
Marked as helpful
1- Johnny V• 10
@kernelpaniik
Submitted
fr4nbtt• 50@fr4nbtt
Posted
Semantic HTML: It might be beneficial to use more semantic elements (e.g., <header>, <footer>, <section>) for enhanced accessibility.
Missing <h1>: It might be helpful to include an <h1> element for better document structure and SEO.
Accessibility: Adding ARIA labels for interactive elements may enhance support for screen readers.
0
