Advice generator app | HTML, Bootstrap, JS

Community feedback

• 

  Krzysztof•240

  @KrzysztofLeczyckiPosted over 2 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

  Marked as helpful

  1

  ---

  

  Javier Eufracio•280

  @Javieer57Posted over 2 years ago

  @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.

  0