What is done for keyboards

Every part you can use is a link or a summary, so it is in the normal tab order. The focus is shown with a two-tone ring: a dark three-pixel outline with a white band between it and the button, so it can be seen on a white page and on a black one, whatever colour you chose for the button. Nothing traps focus: the menu is not a pop-up, and tabbing past it carries on to the rest of the page.

What is done for screen readers

The icons are marked as decorative, so they are not read out. A single-channel button with no words beside it is given the channel’s name as its label, and a menu button without words is called Contact us. Inside the menu each line has its name written out as text: WhatsApp, Phone, Email, or the words you chose for your own link.

Motion

The gentle pulse is off from the start. If you turn it on, visitors who have asked their device for less motion never see it move, because the animation is removed for them in CSS.

Colour and size

The text and the icon turn black or white, whichever has the higher contrast against your colour, measured the way the accessibility guidelines measure it. For any colour that gives at least 4.5 to 1, which is the guidelines’ level for ordinary text. The colour of the button itself against your page is not checked, so look at it on your own background. The button is at least 40 pixels across, and you can raise it to 96.

What this does not claim

It is not a certificate. Using native elements means the browser does most of the work, which is the most reliable way to be accessible, but you should still try the button with your own theme, keyboard and screen reader.