@zineb-Bou
Posted
Hi there, since this is a temporal solution I am dropping some comments that may help you to improve your solution next time.
-
On mobile screens, the text is overlapping, I think setting an explicit height may cause this kind of problem, so let the container shrink according to the text size.
-
Anything that is clickable or has a hover effect means it’s an interactive element, the toggle arrow actually it’s a button, so you can wrap the
<img>inside a<button aria-label=” toggle arrow”>. -
Illustration images are for decoration purposes, there is no information to convey so it's better to hide them from the screen readers using
aria-hidden=” true”. -
<body>is not taking the total height when scaling down to mobile screens, I would recommend usingmin-height:100vhinstead ofheigh:100vhto avoid this problem.
Good luck
Marked as helpful
@Alexuva
Posted
Thank you @zineb-Boy for the comments, it really helps a lot! Im not that experienced in responsive and overall accessibility, I got to work harder on that! so I really appreciate your feedback.
