Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Oops! You need to be logged in to do that
Not Found
Not Found
Oops! You need to be logged in to do that
Not Found
Not Found
Not Found

Submitted

Article Preview Component - Did I make this accessible enough?

P
Royβ€’ 195

@royschrauwen

Desktop design screenshot for the Article preview component coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
1newbie
View Challenge

Design Comparison

SolutionDesign

Report

0

Accessibility Issues

0

HTML Issues

View Report

Roy’s questions for the community

Hello everyone! πŸ‘‹

Woohoo! This is solution number ten for me πŸŽ‰

I have been self-learing since May 2021 and besides just learning about HTML, CSS and JS, I am also trying to learn about accessibility and responsiveness.

❓️ Specific Questions

  1. I ran my first solution for this challenge through an Color Contrast Accessibility Validator and the colours in the design did not have a high enough contrast, so I converted the colours to HSL and lowered the lightness untill they passed. Is that ok? Is this something you usually discuss with the designer?

  2. I also made the font slightly bigger for better readability. Ok or also a designer choice to make it, in my opinion, too small?

  3. I changed the outline when the button gets focus to a color from the design. Is this a good thing to do of better leave it alone?

  4. Did I give every item that needs accessibility label and alt, etc, in the right way?

I would much like to become a better developer, so any advice you can give me is very welcome, also if it does not regard my specific questions.

Have a nice day! πŸ™‹β€β™‚οΈ

Community Feedback

Shahin NJβ€’ 1,230

@SJ-Nosrat

Posted

Hi Roy, Beautiful solution! A lot to learn here for me! With regards to your questions find below in my humble opinion:

  1. Part of Web Development, besides making websites beautiful and aesthetically pleasing, there's the user experience issues and this is a broad topic: however we must consider the user experience of individuals that have issues with their eyesight eg: colorblindness, contrast, etc. It's too broad a topic; which requires for us to be part of a TEAM and discuss, develop and implement such issues.

  2. This again relates to bullet point (1).

  3. That's fine! Draws the user's attention to having the button in an active state (visually speaking).

  4. I would direct to think about using semantic HTML that's why they've been introduced natively for HTML 5. Also, for accessibility reasons: include the aria-hidden="true" attribute for the following element: <div class="main__image"></div> since I'm sure it's being used to apply a background-image.

  5. I noticed when you mouse click on the share button, I'll have to click the share button again to collapse the options, can you make it so that clicking anywhere on the screen will collapse the options as this is more convenient.

Lastly: could you teach me about the below code in your <head>:

<meta name="twitter:card" content="summary_large_image" />
    <meta
      name="twitter:title"
      content="RS | Frontend Mentor | Article preview component"
    />
    <meta
      name="twitter:description"
      content="Read this article: Shift the overall look and feel by adding these wonderful touches to furniture in your home!"
    />
    <meta
      name="twitter:image"
      content="https://raw.githubusercontent.com/Lumensum/FEM-article-preview-component/master/screenshot.png"
    />

What does the above code do in your HTML structure?

In Summary: your approach is correct and considering accessibility is the job of the Frontend Developer; having said that, this involves working part of a team and bouncing off such issues that you bring up.

Hope the above helps!

Best of luck with your coding journey!

0

Please focus on giving high-quality, helpful feedback and answering any questions royschrauwen might have. Here are some key points to consider:

  • Does the solution include semantic HTML?
  • Is it accessible, and what improvements could be made?
  • Does the layout look good on a range of screen sizes?
  • Is the code well-structured, readable, and reusable?

You can read our community guidelines if you're unsure what to post.

Slack logo

Join our Slack community

Join over 100,000 people taking the challenges, talking about their code, helping each other, and chatting about all things front-end!