# A Button with an SVG Icon

The following buttons are examples on how to make a button fully accessible.

## An inaccessible Button – Bad Example

The first example shows an inaccessible button and should not be used ! The button misses any textual explanation on what it is going to do on activation and the icon alone is not helpful for people without sight and also for those, who will not recognize its meaning.

## An accessible Button – Good Example

Here we provide non-sighted users with a textual explanation in form of a title text inside the SVG. This text will be available to assistive technology and in Firefox, users with sight can hover over the button to see a tooltip with the text inside.

## An accessible Button – Good Example

In this example we moved the text from the SVG to a visually hidden span element inside the button. This will also be available to assistive technology, just like above, and invisible to sighted users.

## An accessible Button – Ideal Example

In this last example the text is not only accessible to assistive technology but also displayed next to the icon. Thereby we ensure that sighted users not being able to recognize the icon to understand the purpose of the button.