Input elements of type button are rendered as simple push buttons, which can then be programmed to control functions on a webpage. The element is implemented using the DOM HTMLButtonElement interface. A button can be used for many things, such as sending or receiving data. They make the web page much more functional for the user.
Buttons that only show an icon to represent do not have an accessible name. Accessible names provide information for assistive technology, such as screen readers, to access when they parse the document and generate an accessibility tree. Assistive technology then uses the accessibility tree to navigate and manipulate page content.
To give an icon button an accessible name, put text in the <button> element that concisely describes the button's functionality.
<button name="favorite"> <svg aria-hidden="true" viewBox="0 0 10 10"> <path d="M7 9L5 8 3 9V6L1 4h3l1-3 1 3h3L7 6z" /> </svg> Add to favorites </button>
If you want to visually hide the button's text, an accessible way to do so is to use a combination of CSS properties to remove it visually from the screen, but keep it parsable by assistive technology.
However, it is worth noting that leaving the button text visually apparent can aid people who may not be familiar with the icon's meaning or understand the button's purpose. This is especially relevant for people who are not technologically sophisticated, or who may have different cultural interpretations for the icon the button uses.
Interactive elements such as buttons should provide an area large enough that it is easy to activate them. This helps a variety of people, including people with motor control issues and people using non-precise forms of input such as a stylus or fingers. A minimum interactive size of 44×44 CSS pixels is recommended.
Large amounts of interactive content - including buttons - placed in close visual proximity to each other should have space separating them. This spacing is beneficial for people who are experiencing motor control issues, who may accidentally activate the wrong interactive content.
Spacing may be created using CSS properties such as margin.
To describe the state of a button the correct ARIA attribute to use is aria-pressed and not aria-checked or aria-selected. To find out more read the information about the ARIA button role.
Firefox
will add a small dotted border on a focused button. This border is
declared through CSS in the browser stylesheet, but you can override it
to add your own focused style using button::-moz-focus-inner { }.
If overridden, it is important to ensure that the state change when focus is moved to the button is high enough that people experiencing low vision conditions will be able to perceive it.
Color contrast ratio is determined by comparing the luminosity of the
button text and background color values compared to the background the
button is placed on. In order to meet current Web Content Accessibility Guidelines (WCAG), a ratio of 4.5:1 is required for text content and 3:1 for large text. (Large text is defined as 18.66px and bold or larger, or 24px or larger.)
Whether clicking on a <button> or <input>
button types causes it to (by default) become focused varies by browser
and OS. Most browsers do give focus to a button being clicked, but Safari does not, by design.