The button software#
To help support merchants who use speech activation software as well as sighted screen reader users, make sure that the aria-label text includes any button text that’s visible. The button has no text and relies on an icon alone to convey its purpose.The button’s visible text doesn’t adequately convey the purpose of the button to non-visual merchants.Typically, this label text replaces the visible text on the button for merchants who use assistive technology. The accessibilityLabel prop adds an aria-label attribute to the button, which can be accessed by assistive technologies like screen readers. The control will output an anchor styled as a button, instead of a button in HTML, to help convey this difference.įor more information on making accessible links, see the link component. If navigation is required for the button component, use the url prop. Merchants generally expect buttons to submit data or take action, and for links to navigate. Use the pressed prop to add an aria-pressed attribute to the button.This prevents merchants from being able to interact with the button, and conveys its inactive state to assistive technologies. Use the disabled prop to set the disabled state of the button.Set the value to convey the current expanded ( true) or collapsed ( false) state of the content. If a button expands or collapses adjacent content, then use the ariaExpanded prop to add the aria-expanded attribute to the button.Use the attribute to point to the unique id of the content that the button manages. Use the ariaControls prop to add an aria-controls attribute to the button.For navigational actions that appear within or directly following a sentence, use the link componentīuttons can have different states that are visually and programmatically conveyed to merchants.To combine or lay out multiple buttons, use the button group component.products that are easier to maintain at scaleīuttons should follow the content guidelines for buttons.a more cohesive visual experience for sighted users.
Using these components intentionally and consistently results in: The HTML that renders for the Button and Link components carries meaning. Links are used primarily for navigation, and usually appear within or directly following a sentence. Plain buttons, which look similar to links, are used for less important or less commonly used actions, such as “view shipping settings”. Be positioned in consistent locations in the interface.īuttons are used primarily for actions, such as “Add”, “Close”, “Cancel”, or “Save”.Too many calls to action can cause confusion and make merchants unsure of what to do next. Prioritize the most important actions.For example, only use a red button for an action that’s difficult or impossible to undo. Use established button colors appropriately.
0 kommentar(er)
