@PhoenixDev22
Posted
Hello @caneriskenderoglu ,
I have some suggestions regarding your solution:
- To tackle the accessibility issues, you can add a
<h1>withclass="sr-only"(Hidden visually, but present for assistive tech).
.sr-only {
border: 0 !important;
clip: rect(1px, 1px, 1px, 1px) !important;
-webkit-clip-path: inset(50%) !important;
clip-path: inset(50%) !important;
height: 1px !important;
margin: -1px !important;
overflow: hidden !important;
padding: 0 !important;
position: absolute !important;
width: 1px !important;
white-space: nowrap !important;
}
-
For any decorative images, each img tag should have empty
alt=""andaria-hidden="true"attributes to make all web assistive technologies such as screen reader ignore those images in this challenge , all the images are decorative. -
A hover effect that raises a button UP looks strange. It's not a natural movement to happen.
border: 2px solid transparent ;/* add it to the .btn*/
-
Remove this
html { font-size: 62.5%;}changing base html size. This has huge accessibility implications for those of us with different font size or zoom requirements. There is no need to make it . -
Add some padding to the <body> or some margin to the container.
Overall , your solution is good. Hopefully this feedback helps.
Marked as helpful
@caner404
Posted
@PhoenixDev22 Thanks for the advice! Especially the solution to the problem with the button hover effect.I will keep that in mind!
