3 column preview card using grid, flexbox and custom properties
Solution retrospective
- I'm using Andy Bell's Modern Reset with some minor changes. The reset contains the following bit:
/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role='list'],
ol[role='list'] {
list-style: none;
}
Yet setting role to list is treated as a mistake in the report. Is it a bad idea to use role="list" to remove default styling?
- There was no tablet view. It doesn't seem necessary but should it be added somehow anyway?
Please log in to post a comment
Log in with GitHubCommunity feedback
- P@dwhenson
Hi, just to add that there's a "bug " or rather a decision made by Safari that removes some of the functionality from lists that screen readers need, details here: https://www.scottohara.me/blog/2019/01/12/lists-and-safari.html
I use this reset, and just accept that the HTML linter will flag issues each time. This is a bit of a tricky one, and I don't know how to call it, so in the absence of better guidance, I just follow Andy's suggestion and add the attribute.
Marked as helpful - @Yasmine10
Hi Ania 👋🏻
-
When you're using
<ul>or<ol>a screenreader knows that that is a list because they're semantic elements that are used for lists. So like the report says,role="list"is unnecessary because it already knows it's a list without adding the role. It would be useful to add it when you're using a div as a list for example, because<div>is not a semantic html element and a screenreader won't know you're using it as a list. -
Also if you want to remove the list-style of
<ul>and<ol>, you could add the following instead of the role:ul[class]andol[class] -
And for the tablet view, it depends on how the website looks and where you placed a breakpoint. If you look at my solution you will see it's not really necessary in this case. If you just remove this line
grid-template-columns: 21rem;in.gridfor the mobile version, you don't really need a tablet view.
Hope this helps! Your solution looks great btw😊
Marked as helpful -
Join our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord