I'm afraid there is a very serious accessibility failure in here. You must not change the role of html elements and cannot add custom values on that very very important attribute. The role attribute is used by the accessibility API and would overrule what the default element semantics afe. Remove every place you have added role attributes in the html. At the moment all of the semantics have been broken.
Other recommendations :
- you do not need to use the picture element if there is only one image source. Just use the img element on its own.
- get into the habit of including a full modern css reset at the start of the styles in every project. Andy Bell or Josh Comeau both have good ones you can look up and use.
- it's very unusual to capitalise class names. It is a well established practice that class names should all be lowercase.
- place classes directly on what you want to style. Try to avoid using element selectors. This change would keep the css specificity nice and low, making it much easier to manage and making the styles more portable and improving the robustness (if the html ever changed, styles would not break).
Marked as helpful
0
