@Anubliss-0
Posted
Fantastic job finishing the project, it looks great! I took a look at your code and its very well organized and clear to read.
There really isn't much for me to say in terms of suggested improvements, but if I may offer some feedback I would look into the use of aria-labels and further semantics for a11y friendly design.
The aria-label you have is a great touch, however good practice for labels is to try and make them as concise as possible seeing as screen readers will read every single label. A good example that could help here is to describe the what the input is and whats its purpose is, rather than what the user does with it. For example...
aria-label="Custom tip percentage"
As for adding further a11y friendly touches to your project you could consider...
- Adding "roles" to your buttons to ensure the semantic meaning is clear
<button class="tip-btn" data-percent="0.10" aria-label="10 percent tip">10%</button>
-
Using
<fieldset>to group related inputs together. -
The invalid input warnings are currently set to
aria-hiddenThese should be visible to screen readers and with the use of aria-live can actually provide important information to users who rely on a11y tools to access the web.
Instead of hiding them, consider using aria-live, the message is empty by default and updated with JS, so when that change happens aria-live will inform the user that the error has occurred.
<span
class="bill-error-msg"
id="bill-error-msg"
aria-live="assertive"
></span>
Please feel free to reach out if you have any questions regarding a11y! Otherwise congratulations on completing the challenge.
Marked as helpful
