You've Got Mail: Easy, accessible notifications

Today it's just a quick post to talk about how to do those notifications we've come to know – and since they are relatively simple, this will be short and to the point. An image is provided to show a basic example of what I'm describing.

First, let's start with the markup.

Since you'll likely have a list of possible notifications – for example, alerts or messages – put them in an unordered list. Each list item will contain a count of items and a type of items as well as a link to the item viewer. This will give you markup something like the example below. Note that this markup is fully accessible as is; however, the accessibility may be improved by adding a label to the unordered list identifying it as a list of notifications.

HTML

<ul class="notifications">   <li role="status">     <a href="/alerts.htm">       <span class="count">4</span>       <span class="type">Alerts</span>     </a>   </li>   <li role="status">     <a href="/messages.htm">       <span class="count">100</span>       <span class="type">Messages</span>     </a>   </li> </ul>

If the notifications are a live region – if they're automatically updated while the page is displayed in the browser – be sure to add the role attribute and set it to status so that changes are announced when the content is updated. To show how that would work, the role attribute is included in the example. It is important to note that the markup be readable as is, regardless of where the message parts, i.e., the count and type, are displayed.

Next, you'll add the style rules.

CSS

ul.notifications { nbsp;nbsp;margin:0;   padding:0;   text-align:right;   font-family:Verdana; } ul.notifications > li {   display:inline-block;   overflow:auto;   margin-right:1em; } ul.notifications > li:last-of-type {   margin-right:0; } ul.notifications > li > a > span.count, ul.notifications > li > a > span.type {   display:block;   position:relative; } ul.notifications > li > a > span.count {   background-color:rgb(255, 255, 255);   border:1px solid rgb(0, 0, 0);   border-radius:2em;   float:right;   font-size:0.5em;   text-align:center;   line-height:2em;   padding:0.2em;   width:2em;   z-index:1; } ul.notifications > li > a > span.type {   float:left;   line-height:3em;   z-index:0; }

Here, you'll want to pay special attention to setting the overflow to auto on the list item (this will make the list item contain the floating items), and setting the border-radius to the same value as the line-height on the span with class count – 2em in the example. Setting the height, width, and border-radius all to the same value will give the circle effect. Using a value of 2em for height and width with a font-size of 0.5em will allow you to easily display 3 digits within the circle. Also, be sure to set the z-index on the count to 1 in order to force it to display over the type. It is especially important to set the z-index when the background is set, otherwise the overlap will likely not work as you intend.

You'll notice that in our example, the count span is floating to the right and the type span is floating to the left. This floating pattern makes the count float over the lowercase portion of the type, meaning less content is hidden when there is overlap. You may just as easily float the count span left and leave all remaining code the same in order to have the number displayed on the left side of the type text.

Once you've set the HTML and CSS, you're ready to add any JavaScript you wish, for example, to make the notification viewer display as a modal window or automatically refresh the number of items in the count element.

That's it - you have all the code you'll need to make easy, accessible notifications, so...

Happy coding.