Enterprise Grade
Accessibility for
Everybody

Don’t #@!%
the customer

The European Accessibility Act 2025
Section 508
Disability Discrimination Act 1992

https://www.atlassian.com/accessibility

Accessibility
is hard

Giving a damn about accessibility
Your first attempt at making anything accessible will be awful. —Sheri Byrne-Haber

Automated tooling
Knowledge sharing
Expert input

Automated tooling

testing-library.com


            getByRole()
            queryByRole()
            findByRole()

getByRole({'textbox',
{ name: 'Episode name' })

Lost in Translation Play episode
Those Old Scientists Play episode
Under the Cloak of War Play episode
Subspace Rhapsody Play episode

            it('renders a link to play each episode', () => {
    render(<EpisodeList />)

    const link = screen.getByRole(
                    'link', 
                    { name: 'Play episode' }
                 ) 

    expect(link).toBeInTheDocument()
  })


            TestingLibraryElementError: Found multiple elements with the role
            "link" and name "Play episode"

Linting

Deque's axe Accessibility Linter

Lost in Translation ▶️
Those Old Scientists ▶️
Under the Cloak of War ▶️
Subspace Rhapsody ▶️

Linting

Accessibility checks
in unit tests

jest-axe

axe-core

function EpisodeList({episodes}) { 
	return (
		<ul>
			{episodes.map(({ title, url }) => (
			<Episode key="{url}" title="{title}" url="{url}" />
			))}
		</ul>
	) 
} 

function Episode({ title, url }) { 
	return (
		<div>
			{title} <PlayButton title="{title}" url="{url}" />
		</div>
	) 
}

import { axe, toHaveNoViolations } from "jest-axe"

expect.extend(toHaveNoViolations)

it("is accessible", async () => { 
	const { container } = render(
		<EpisodeList episodes="{mockEpisodes}" />
	) 
	
	expect(await axe(container)).toHaveNoViolations() 
})

Expected the HTML found at $('ul') to have no violations:

<ul>
	<div>
	Those old scientists 
		<a href="./s2e7.html">
			<img src="./play-button.svg" alt="Play episode: Those Old Scientists">
		</a>
	</div>
</ul>

Received:

"<ul> and <ol> must only directly contain <li>,
              <script> or <template> elements (list)"

You can find more information on this issue here:
https://dequeuniversity.com/rules/axe/4.10/list?application=axeAPI

setupAutoA11yTests()

Accessibility checks
in end-to-end tests

Cypress & Playwright end-to-end tests
Storybook stories
Visual regression tests

@axe-core/playwright

import { test, expect } from '@playwright/test';
import AxeBuilder from '@axe-core/playwright';

test.describe('homepage', () => {
	test('should not have any automatically detectable accessibility issues', async ({ page }) => {
		await page.goto('https://your-site.com/');

		const results = 
			await new AxeBuilder({ page }).analyze();

		expect(results.violations).toEqual([]);
	});
});

[Source]

Other automated checks

Accessibility Insights

a screenshot of the checkbox select
component on atlassian.design, with the page's tab order annotated on
it

Other automated checks

www.deque.com/blog
Deque Study Shows Its Automated Testing Identifies 57 Percent of Digital Accessibility Issues, Surpassing Accepted Industry Benchmarks

Accessibility
depends on context

Data the android stroking his pet cat Spot

Source: Data's Love Of Cats In Star Trek Has An Ironic Real-Life Twist

GPT-5 mini
Close-up of Star Trek: Picard characters Data (left) and Jean‑Luc Picard (right) seated side-by-side in profile facing right; Data’s pale, synthetic skin and dark hair contrast with Picard’s older, gray beard and thoughtful expression, both wearing dark jackets against a warm, softly lit background.

Source: Data's Love Of Cats In Star Trek Has An Ironic Real-Life Twist

GPT-5 mini
Close-up of Data (left) and his pet cat Spot (right) seated side-by-side in profile facing right; Data’s pale, synthetic skin and dark hair contrast with Spot’s orange-and-white fur, both lit by warm, soft lighting.

How Data Loving Cats Helped Make Him More Human

Source: Data's Love Of Cats In Star Trek Has An Ironic Real-Life Twist

GPT-5 mini
Close-up of Data (Brent Spiner) holding his orange-and-white tabby Spot; Data’s pale, android features and dark hair contrast with Spot’s fur as they sit side-by-side in warm, soft lighting, conveying a tender, nostalgic moment.