Buttons (In Progress)

Please don't make a <div>

Buttons & Links

Resource: https://marcysutton.com/links-vs-buttons-in-modern-web-applications

link navigates the user to a new resource, taking them away from the current context.

A button toggles something in the interface, like a video player; or triggers new content in that same context, like a popup menu using aria-haspopup

Uses

The button is great for:

  • Opening a modal window

  • Triggering a popup menu

  • Toggling an interface

  • Playing media content

  • Inserting with JS if they only work with JS

Rationale

  • Receive keyboard focus by default

  • "Click" with the Space key [ease of use]

  • Submit form data to a server

  • Reset a form

  • Be disabled with the disabledattribute

  • Instruct a screen reader with the implicit buttonrole

  • Show :focus, :hover, :active, :disabled

  • Navigate the user to a new page or view

  • Change the URL

  • Cause a browser redraw/refresh

  • Support page jumps with internal hrefattributes

  • Deep-link client-rendered applications

  • Are focusable by default with the hrefattribute

  • Register a click with the Enter key

  • Have the implicit linkrole

  • Can't be disabled like buttons but can be made inert with tabindex="-1"and aria-hidden="true"

  • Allow opening in new windows (and back in the day, framesets)

  • Show :link, :visited, :focus, :hover, :active

Cards with "Flip" behavior & Screen-Reader Context

Background, YouTube Video. Approximately 0:00-4:00

Summary: These cards are a link to "Flip" with more details about each car. To a screen-reader listening to a list of links that say:

  • "Flip"

  • "Flip"

  • "Flip"

  • "Flip"

Is not going to be easy to understand. But something like,

  • "Details about Ibura Sport Coupe" is easier to contextualize.