@wendyhamel
Posted
Hi, Reymart, this looks very nice!
I noticed you tagged #accessibility. Did you see the report? Your buttons are not accessible for screenreader. There is no text to explain what the buttons do. You can add the aria-label attribute. Or you can add text in a span and hide it from the viewport with a set of classes so it does not mess with your layout but is still accessible for screenreaders.
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
border-width: 0;
white-space: nowrap;
clip: rect(0, 0, 0, 0);
You should do something similar for the images: adding alt texts.
Next thing I noticed is the layout shift when you click a button. The two testimonials are not the same width. This couses the shift in layout. This is not great for the UX.
Last thing is also about UX. It is not clear how many testimonials there are and if a button can be pressed. You may want to think about a solution like looping the testimonials (you can keep on clicking the next button and it loops arount to the first testimonial) You can also disable a button when it can't be clicked. (If you are on the first testimonial, the first button is disabled and has a disabled look.)
If you want to dive even deeper into accessibility, you can also replace some div's with more sementic HTML like an article tag for the testimonial.
I noticed a console.log in the code. Best practice is to clean this up after development.
Hope this helps, happy coding!
Marked as helpful
