Why Web Accessibility Matters More Than You Think_

Introduction

Web Accessibility (commonly abbreviated as A11y) is the engineering practice of building websites that are usable by as many people as possible. This includes individuals with permanent visual impairment, hearing loss, cognitive challenges, motor disabilities, or even temporary limitations like a broken arm or a glare on a mobile screen in bright sunlight.

Far too often, developers treat accessibility as an afterthought or a tedious box to check at the end of a project. In reality, building accessible interfaces is a fundamental technical standard. Ignoring A11y not only isolates a large portion of your user base but also negatively impacts your SEO rankings and exposes your business to legal liability.

1. Semantic Elements vs Generic Divs

The absolute foundation of web accessibility is using native, semantic HTML elements. Native elements carry built-in browser behaviors, focus management, and predefined roles that are communicated directly to assistive technologies (such as screen readers).

A common antipattern is using generic <div> containers styled as buttons with custom Javascript click handlers:

<!-- ❌ UNACCESSIBLE ANTIPATTERN -->
<div class="custom-button" onclick={submitForm}>
	Submit
</div>

This container is completely invisible to screen readers, cannot be selected using keyboard navigation, and lacks focus states.

Instead, always use native controls:

<!-- ✅ ACCESSIBLE BEST PRACTICE -->
<button type="button" class="btn-brutalist" onclick={submitForm}>
	Submit
</button>

2. Keyboard Navigation and Focus Management

Many users rely exclusively on a keyboard (using the Tab and Shift+Tab keys) or specialized switch devices to navigate the web. To support this:

1. Keep Focus States Visible: Never set outline: none in your global CSS. Instead, style distinct, high-contrast focus rings using :focus-visible.
2. Support Logical DOM Order: The tab flow must match the visual hierarchy of the page. Do not use CSS positioning hacks to shuffle components out of order.
3. Use Skip Links: Provide a hidden "Skip to main content" link at the top of your layout to allow keyboard users to easily bypass repetitive navigation menus.

/* Brutalist visible focus style example */
button:focus-visible,
a:focus-visible {
	outline: 3px solid var(--primary);
	outline-offset: 4px;
	box-shadow: 0 0 0 6px var(--background), 0 0 0 9px var(--foreground);
}

3. Building an Accessible Modal Dialog in Svelte 5

Creating interactive elements like modal popups or dropdown drawers is where accessibility often breaks down. An accessible modal must trap the focus within its active viewport, close immediately upon pressing the Escape key, restore the focus back to the opening trigger button on close, and declare the appropriate ARIA roles.

Here is a Svelte 5 accessible modal component implementation:

<script lang="ts">
	import { onMount } from 'svelte';
	let { isOpen = $bindable(false), title, children } = $props<{
		isOpen: boolean;
		title: string;
		children?: import('svelte').Snippet;
	}>();

	let previousFocus: HTMLElement | null = null;
	let dialogRef = $state<HTMLDialogElement | null>(null);

	$effect(() => {
		if (isOpen) {
			previousFocus = document.activeElement as HTMLElement;
			dialogRef?.showModal();
		} else {
			dialogRef?.close();
			previousFocus?.focus();
		}
	});

	function handleClose() {
		isOpen = false;
	}

	function handleKeyDown(e: KeyboardEvent) {
		if (e.key === 'Escape') {
			handleClose();
		}
	}
</script>

<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
<dialog
	bind:this={dialogRef}
	onclose={handleClose}
	onkeydown={handleKeyDown}
	aria-labelledby="modal-title"
	class="modal-brutalist"
>
	<div class="modal-header">
		<h2 id="modal-title">{title}</h2>
		<button onclick={handleClose} aria-label="Close modal">✕</button>
	</div>
	<div class="modal-body">
		{@render children?.()}
	</div>
</dialog>

<style>
	.modal-brutalist {
		border: 4px solid var(--foreground);
		padding: 24px;
		background: var(--background);
		box-shadow: 12px 12px 0 var(--foreground);
		max-width: 500px;
		width: 90%;
	}
	.modal-brutalist::backdrop {
		background: rgba(0, 0, 0, 0.7);
		backdrop-filter: blur(4px);
	}
</style>

4. Accessibility Compliance Checklist

To ensure your web applications comply with WCAG 2.2 Level AA standards:

Conclusion

Web accessibility is a core measure of software quality. By establishing a solid semantic structural base, managing focus rings carefully, and wrapping custom interactive workflows inside accessible ARIA patterns, you create a vastly superior experience that welcomes every user and elevates your site's professional value.