Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Tip Calculator App

P

@Risclover

Desktop design screenshot for the Tip calculator app coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


After posting, I'm seeing that I'm getting an accessibility issue. It's complaining that I don't have even a single <h1></h1> element on my page. What should I do in this case? Because I feel like this app definitely doesn't call for an h1 element. None of the text says "h1 header" to me, and I really don't want to change one label just to satisfy the accessibility requirement.

Also, I tried to set it as an empty element, but it didn't like that and generated an additional issue, so I changed it back.

So yeah. What would you guys suggest? Thanks!

Community feedback

@fazzaamiarso

Posted

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

P

@Risclover

Posted

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

0

@Pomz010

Posted

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

@AndyAshley

Posted

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

P

@Risclover

Posted

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

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord