@KrzysztofLeczycki
Posted
Hello,
a good place to start is MDN resources. Kevin Powell's YT channel also covers some accessibility issues.
I found there a solution to one of the accessibility errors in your project report.
Each button should have descriptive text even only a graphic is visible in it.
To deal with that you can implement that code:
<button><span class="sr-only">some descriptive text</span></button>
.sr-only{
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
clip: 0;
background: white;
}
sr-class makes a text in the button hidden on display; however, screen readers have access to it.
I hope it helped. :D Best wishes
Marked as helpful
@Javieer57
Posted
@KrzysztofLeczycki Thank you so much for your advice. I have already added some ARIA attributes and some semantic tags that forgotten to add.
I tried to use a screen-reader but it's complicated because every screen-reader reads web pages in different ways.
