Hi @Li-Bee
I'm afraid the html on this needs changing, it doesn't make sense at the moment and would have a really bad effect on assistive tech and search engines (might be useful for you to read too @darryncodes)
- a header element doesn't go inside main, it's a separate landmark. Technically you can have headers and footers inside articles, but assistive tech users generally dislike that as it clutters up what is announced to them on the page and can be confusing when using landmarks to navigate.
- similarly article doesn't make sense for only part of this content. If using article it needs to be the whole component, heading, text and image. They all belong to the same one component.
- if announcing an image as valuable content like you are doing here never use a div, use an img element, that's what it's for. The image should be in the html if it's deemed meaningful.
- by using css grid for the stats you've broken their meaning. Each number-word pair needs to be read together, which means they need to be in the same meaningful element as each other. The best semantics I can see for this content would be acheived by an unordered list containing 3 list items. Inside each list item the number can be wrapped in a span or strong tag set to display block via a class. That means you wouldn't be able to use grid as planned (annoying I know)
Layout-wise I'm seeing a few strange things viewing on mobile (ill add Screenshots to slack so you can see what I'm seeing)
- the card is touching screen edges. Usually you mitigate against that with some padding on the outer wrapper, or you could add a little margin on the component itself
- the card is showing up about halfway down the screen on page load. That just looks strange
- on mobile landscape the view has switched to desktop layout already so the image becomes all squished. Make sure your media queries kick in at the point where there is room for the layout to change
I hope this helps ☺
Marked as helpful
@darryncodes
Posted
Hi @grace-snow really useful to read, thanks for tagging me!
@Li-Bee
Posted
@grace-snow Thanks Grace really helpful and the screenshots are also helpful. I did message you on slack and to ask about how you did semantic html links with one of your projects and how you hid it.
Do you have any reference i can read in regards to these semantic links before?
@Li-Bee I think you mean accessibily hidden link text, not semantic links... Here's a really in depth article but there are lots of smaller ones out there https://www.sarasoueidan.com/blog/accessible-text-labels/
Deque has a lot of good info (source of the accessibility reports in these challenges)
Marked as helpful
@Li-Bee
Posted
@grace-snow if i announce the picture as an img i seem to be unable to put the purple overlay over the picture (see below) do you know what the alternative is? Thanks
background-image: linear-gradient(
to right bottom,
rgba(170, 92, 219),
rgba(170, 92, 219)
),
url("../img/image-header-desktop.jpg");
@Li-Bee the image url is the background image, you don’t need a linear gradient on this at all. You need a background color and mix blend mode
Marked as helpful
