Thank you alert dialog

For my debut I thought I’d make a nice alert dialog to thank the person that invited me: @Scott O'Hara.

There is more to websites than meets the eye. There’re a lot of people that rely on special tools to help them navigate around the web. We call these tools assistive technologies (or AT for short). AT uses HTML and its attributes to describe elements on a page to its user.

For an alert dialog like the one in this shot we use role="alertdialog" to indicate to AT that this is in fact a dialog. The AT can then in turn tell the user this is a dialog so that the user knows what to expect in terms of behaviour.

Stay tuned for more accessibility related shots.

Code example on CodePen
Read more about Alert Dialogs and accessibility

Alternative text for image: a dialog reads “Thank you Scott! A big thank you to Scott O’Hara for drafting me!” It has a dark pink button that reads “Okay then”. In the top left corner is a piece of HTML code exposed as if you’re looking “behind” the scenes.