Advice generator app | HTML, Bootstrap, JS

Community feedback

• 

  Krzysztof•240

  @KrzysztofLeczycki

  Posted over 3 years ago

  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

  11

  Marked as helpful