@damigand
Posted
LANDMARKS
The only thing that could make your semantic better is the use of landmarks. Landmarks are used to allow screen readers to know where the content of your page is, and gives them the ability to jump between sections on your page. You can check more information about landmarks here.
If you want to give a specific element (that isn't considered a landmark) the ability to work as a landmark, you can use the attribute role in the element's tag.
YOUR PROJECT
To make your semantic a little bit better on this project, I think the .card div could be a main element instead. Alternatively, if you really want to keep the div element, I suggest using the attribute role="main" for blind users to benefit from that accessibility.
In the future, if you also want to add the .attribution section (that I see commented on the source code of your project) or any other content related to copyright that is outside your main or role="main" element, I suggest using the attribute role="contentinfo".
If the extra content outside your main is not copyright related, I recommend doing your own research on other kinds of role options you can choose for your elements.
Marked as helpful
