Four Card Feature Section project

Hi,

I'm afraid you are making some serious accessibility mistakes in this from.your efforts to make this more accessible.

You need to remove the sr-only headings, header landmark and aria-labels from this solution, and use a heading for the heading content.

• the header landmark has a banner role. It's purpose is to hold repeating primary content across a site or set of Web pages. It shouldn't ever have page-specific content like headings inside it. This design only shows content that belongs in a main landmark, there is no header content in the design. WCAG criterion 1.3.1 Info and Relationships.
• this already has all the headings it should have. Don't add extra content for screen readers unnecessarily. People using a screen reader need to have an equitable experience. Don't force them to have to listen to and process even more information. This design already has a clearly visible h1 content. It must be marked up in the code as a heading, as this is what it is visibly presented as a heading. WCAG criterion 2.4.6 Headings & Labels. This should be one h1 with no extra sr-only headings anywhere. Remember you can set one line to display block in a span or strong so it is aligned on its own line.
• When a link has visible label text you mustn't set an aria label on it that differs. This can make it hard for people using speech control to activate the link as the programmatic link text will differ from the visible text. WCAG criterion 2.5.3 Label in Name. Adding unnecessarily long aria-labels on links also adds to the amount of information people using a screen reader would have to process.
• Looking at the images I think these icons should be considered decorative. They bring no extra meaning or value to the content in my opinion. If you consider them valuable content then they should still only have very short descriptive descriptions like "search icon illustration" not overly verbose ones. I would recommend empty alt on all of these ( alt="") so they are treated as decorative images. WCAG criterion 1.1.1 Non-text Content.
• The font-size clamps are inaccessible on this because you are setting the size using viewport units. NEVER do this. I can't stress enough how bad this one is for users. It removes the ability to resize text. WCAG criterion 1.4.4 Resize Text. When using clamp for font size you must convert that center value to rem.

Well done on the use of clamp for the width though, that's a nice touch! Although I wouldn't expect this to need any more than 1 media query so do wonder if there is a mistake somewhere.

Other recommendations:

• it's better for performance to link fonts in the html head instead of css imports.
• all of the content is touching my screen edges at the moment. Add a little padding (inline) in px to the body or landmarks so this can't happen.
• try to reduce media queries. This really shouldn't need more than 1. If the issue is vertical margins making you think you need them, perhaps you should be using em units for that. See if you can reduce the need for so many media queries if possible anyway.

Nice one 😀

If you are curious how you can do this straight lines on the top of each card here is my tip:

Create another element in each of the cards. Then position this element absolute. Card should be positioned relative. At the end you need to give this element a height of 3px width of 100% and top 0 and left 0. You can also use ::after or ::before pseudo elements to create these.

Hope you found this comment helpful 💗

Good job and keep going 😁😊😉

Good job!