Developing an Accessible ‘Add To Cart’ Flow

A small introduction

• Freelance front-end developer
• Worked on Shopify stores
• Definitely a cat person

Talk format

• 4 Patterns:
  • Buttons
  • Inline Notifications
  • Toasts
  • Dialogs
• Different iterations, advantages and pitfalls
• Tips and tricks

A typical product page

HTML forms, all the way down

1. Progressive Enhancement
2. Semantics


<form method="post" action="/cart/add">
<!-- Fieldset with options goes here-->
<button type="submit">
Add to Cart
</button>
</form>

The 'button' pattern

Good for zoom users!

ZoomText centered on a button

We can't rely on just changing the text of our button

	<form method="post" action="/cart/add">
		<button type="submit" id="add-to-cart">
			Adding...
		</button>
	</form>

	addToCart(item).then(() => {
		const button = document.getElementById('add-to-cart');
		button.innerText = 'Adding...'
	})

Live regions with buttons

	<form method="post" action="/cart/add">
		<button type="submit" id="add-to-cart">
			Adding...
		</button>
	</form>
	<div aria-live="polite" id="live-region">
		Adding...
	</div>

	addToCart(item).then(() => {
		const liveRegion = document.getElementById('live-region');
		const button = document.getElementById('add-to-cart');
		liveRegion.innerText = 'Adding...'
		button.innerText = 'Adding...'
	})

disabled or aria-disabled?

	<button type="submit" disabled="">
		Adding...
	</button>
	<!-- or -->
	<button type="submit" aria-disabled="true">
		Adding...
	</button>

Consider your wording

Inline Notifications

Should we use live regions for inline notifications?

	<div id="notification" tabindex="-1">
		A Delightful Product has been added to your cart
	</div>

	addToCart(item).then(() => {
		const notification =
			document.getElementById('notification');
		notification.innerText =
			`${item.title} has been added to your cart`
		notification.focus();
	})

Interactive Child Elements

Placement Options

A word of warning about toasts

Toasts and dialogs are fundamentally different

An introduction to toasts

Should we be using toasts?

Toast solutions

Dialogs!

This is a dialog

This is also a dialog

This too!

Even this a dialog

Focus Management

• Move focus to the dialog
• If modal, trap focus, but also allow focus to move to browser UI elements
• Return focus to the element that opened the dialog

Keyboard

• Don't forget keyboard shortcuts! Hitting the escape key should close the dialog.
• Screen reader users shouldn't be able to escape the modal through other keyboard means. In the future, aria-modal="true" should have more support, but inert works for now
• Don't dismiss dialogs automatically

Which element to use?

• <dialog> is just about here!
• <div> with role="dialog"

Label ALL the things!

• Label your dialog - consider aria-labelledby
• If your dialog has repetitive interactive elements (eg. multiple 'Increase Quantity') buttons, make sure they have unique names

Takeaways

• No clear winner amongst patterns
• Testing individual components is important, but testing whole flows is essential
• toasts and dialogs are NOT the same. Accessibility errors come about from treating different components interchangably.