Notification Budge Using HTML & CSS

#html #css #beginners #webdev

Hello Guys,

Today I created a Amazing Notification Budge Using HTML & CSS. Currently I am at my native place to some days I am posting sum simple topics.
In this post I only using Font Awesome Icon for image and Simple Span tag to display count number. If you find this useful in a post like and save this post also comments about your thoughts and new ideas for post.

For more content follow me on Instagram @developer_nikhil27.

Thank you!

Top comments (6)

Alvaro Montoro • Jun 14 '21 • Edited

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.