DEV Community 👩‍💻👨‍💻

Discussion on: Notification Budge Using HTML & CSS

alvaromontoro profile image
Alvaro Montoro • Edited on

You can simplify the code a little:

  • Remove the div with class budgecard;
  • In the CSS, change from .budgecard { to .notification {; and
  • Add text-decoration: none; to that rule (so the bell isn't underlined)

Then not only the code would be simpler, but it would also be more accessible: the target size would be the whole button (and not only the text inside), which would be more intuitive and have a larger hit area (before it was smaller than the minimum of 44px by 44px specified by WCAG and it was confusing that you could click/tap on the link without triggering it).

Apart from that, it is not accessible for screen reader users who will only hear "four" without knowing what that number means; or if the styles did not load, in which case there will be a link with the text "4" and nothing else. It would be an improvement to include some visually hidden text, with a description of what the notification is.

nikhil27b profile image
Nikhil Bobade Author

Thank you for valuable information