Skip to content
OverviewSolutions
3
Comments
4

Xianort

@xianortSaudi Arabia90 points

An aspiring web developer.

I’m currently learning...

HTML, CSS

Latest solutions

Latest comments

  • Xianort•90
    @xianortPosted 2 months ago

    Hello @Nikhil-Neware, I like the blue shades on your solution.

    Just some advice to help your HTML be more accessible.

    • Enclose the page's unique content with the <main> element.

    Using landmark elements like <main> in your HTML enables users of assistive technology to quickly identify and navigate to large sections of the document.

    • Use <a> elements instead of <div> for links.

    I noticed you're using divs instead of as for the social links. Think about how this component would be in a real setting. It would have links to that person's socials so why not mark it up as links?

    • Use <ul> element to make a list of links.

    While you're at it make a list of out of those links as well to make it easy for assistive technology users to get a count of how many items are in the list and navigate to a particular item.

    Hope you found this useful.

    Marked as helpful
    0
  • xgb•150
    @xgbdevSubmitted 3 months ago
    What are you most proud of, and what would you do differently next time?

    The simple styles

    What challenges did you encounter, and how did you overcome them?

    Nothing.

    What specific areas of your project would you like help with?

    The exactly positions of the elements.

    Simple blog preview card

    #tailwind-css
    1
    Xianort•90
    @xianortPosted 3 months ago

    Hello, your solution looks good! I only have one point.

    In general, your HTML pages should each have only one <h1> tag. Having no <h1> or more than one can confuse screen reader users as they depend on headings to construct a table of contents for the page.

    For more info please read MDN's article about HTML headings.

    Marked as helpful
    1
  • Xianort•90
    @xianortPosted 4 months ago

    Hello, your solution looks good.

    Just wanted to point out one thing.

    According to MDN and W3C WAI you should avoid skipping heading levels as that could cause confusion for screen reader users.

    Hope this is useful.

    0
  • Xianort•90
    @xianortPosted 4 months ago

    Hello, I think your solution looks great.

    I checked your code and I think there are a couple of points worth mentioning:

    • Using more than one <h1>
    • Skipping heading levels

    I think these two practices can be a source of confusion for screen reader users. So I think it's best to avoid them.

    Prefer using only one <h1> element per page and don't skip heading levels.

    I recommend you read MDNs article about HTML heading elements.

    I hope you find this helpful.

    Marked as helpful
    1