Tip Calculator App

Community feedback

• 

  Fazza Razaq Amiarso•2,340

  @fazzaamiarsoPosted over 2 years ago

  Hi Sara! h1 element is important for screen readers. You can read about it here https://fae.disability.illinois.edu/rulesets/HEADING_1/

  For sites that have no clear h1 in the design, you can still put an h1 that is hidden visually, but accessible by screen readers.

  You can add this class (I borrow it from Tailwind CSS)

  .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
  }
  

  Hope it helps! Keep on coding!

  Marked as helpful

  0

  ---

  

  Sara Dunlop•430

  @RiscloverPosted over 2 years ago

  @fazzaamiarso Cool, I'll try that. Thank you very much!

  0
• 

  Rolly Castillo•190

  @Pomz010Posted over 2 years ago

  Hi @Risclover, here's what I did to mine. I used an actual h1 tag instead of using the image asset provided for the logo then styled the header to replicate the logo design. Here's the css code I used to style the header as h1 tag.

  h1.header { text-align: center; text-transform: uppercase; letter-spacing: .5rem; margin: 2rem auto; width: 109px; height: auto; word-wrap: break-word; line-height: 2.5rem; color: hsl(186, 14%, 43%); font-size: 1.5rem; }

  1
• 

  Andy•520

  @AndyAshleyPosted over 2 years ago

  After reading your issue with the H1 and looking at the code, I just realized I never added the Logo to mine.. I must have overlooked it lol! I did it like this: <h1>SPLI<br />TTER</h1> . Never even realized it until now. Maybe that will work for ya as well? lol. There are other ways to get around it though, like what Fazza mentioned.

  1

  ---

  

  Sara Dunlop•430

  @RiscloverPosted over 2 years ago

  @AndyAshley Lol! That's a funny solution. Whatever works, right?

  0