diff --git a/site/src/components/Abbr/Abbr.stories.tsx b/site/src/components/Abbr/Abbr.stories.tsx
index b32138ad54fd5..7d079e4ac7416 100644
--- a/site/src/components/Abbr/Abbr.stories.tsx
+++ b/site/src/components/Abbr/Abbr.stories.tsx
@@ -6,10 +6,10 @@ const meta: Meta<typeof Abbr> = {
 	component: Abbr,
 	decorators: [
 		(Story) => (
-			<>
+			<div className="max-w-prose text-base">
 				<p>Try the following text out in a screen reader!</p>
 				<Story />
-			</>
+			</div>
 		),
 	],
 };
@@ -25,9 +25,9 @@ export const InlinedShorthand: Story = {
 	},
 	decorators: [
 		(Story) => (
-			<p className="max-w-2xl">
+			<p>
 				The physical pain of getting bonked on the head with a cartoon mallet
-				lasts precisely 593{" "}
+				lasts precisely 593
 				<span className="underline decoration-dotted">
 					<Story />
 				</span>
diff --git a/site/src/components/Abbr/Abbr.test.tsx b/site/src/components/Abbr/Abbr.test.tsx
index 3ae76f071bdfb..b67406299685a 100644
--- a/site/src/components/Abbr/Abbr.test.tsx
+++ b/site/src/components/Abbr/Abbr.test.tsx
@@ -1,5 +1,5 @@
 import { render, screen } from "@testing-library/react";
-import { Abbr, type Pronunciation } from "./Abbr";
+import { Abbr } from "./Abbr";
 
 type AbbreviationData = {
 	abbreviation: string;
@@ -7,28 +7,8 @@ type AbbreviationData = {
 	expectedLabel: string;
 };
 
-type AssertionInput = AbbreviationData & {
-	pronunciation: Pronunciation;
-};
-
-function assertAccessibleLabel({
-	abbreviation,
-	title,
-	expectedLabel,
-	pronunciation,
-}: AssertionInput) {
-	const { unmount } = render(
-		<Abbr title={title} pronunciation={pronunciation}>
-			{abbreviation}
-		</Abbr>,
-	);
-
-	screen.getByLabelText(expectedLabel, { selector: "abbr" });
-	unmount();
-}
-
 describe(Abbr.name, () => {
-	it("Has an aria-label that equals the title if the abbreviation is shorthand", () => {
+	it("Omits abbreviation from screen-reader output if it is shorthand", () => {
 		const sampleShorthands: AbbreviationData[] = [
 			{
 				abbreviation: "ms",
@@ -43,11 +23,22 @@ describe(Abbr.name, () => {
 		];
 
 		for (const shorthand of sampleShorthands) {
-			assertAccessibleLabel({ ...shorthand, pronunciation: "shorthand" });
+			const { unmount } = render(
+				<Abbr title={shorthand.title} pronunciation="shorthand">
+					{shorthand.abbreviation}
+				</Abbr>,
+			);
+
+			// The <abbr> element doesn't have any ARIA role semantics baked in,
+			// so we have to get a little bit more creative with making sure the
+			// expected content is on screen in an accessible way
+			const element = screen.getByTitle(shorthand.title);
+			expect(element).toHaveTextContent(shorthand.expectedLabel);
+			unmount();
 		}
 	});
 
-	it("Has an aria label with title and 'flattened' pronunciation if abbreviation is acronym", () => {
+	it("Adds title and 'flattened' pronunciation if abbreviation is acronym", () => {
 		const sampleAcronyms: AbbreviationData[] = [
 			{
 				abbreviation: "NASA",
@@ -67,11 +58,19 @@ describe(Abbr.name, () => {
 		];
 
 		for (const acronym of sampleAcronyms) {
-			assertAccessibleLabel({ ...acronym, pronunciation: "acronym" });
+			const { unmount } = render(
+				<Abbr title={acronym.title} pronunciation="acronym">
+					{acronym.abbreviation}
+				</Abbr>,
+			);
+
+			const element = screen.getByTitle(acronym.title);
+			expect(element).toHaveTextContent(acronym.expectedLabel);
+			unmount();
 		}
 	});
 
-	it("Has an aria label with title and initialized pronunciation if abbreviation is initialism", () => {
+	it("Adds title and initialized pronunciation if abbreviation is initialism", () => {
 		const sampleInitialisms: AbbreviationData[] = [
 			{
 				abbreviation: "FBI",
@@ -91,7 +90,15 @@ describe(Abbr.name, () => {
 		];
 
 		for (const initialism of sampleInitialisms) {
-			assertAccessibleLabel({ ...initialism, pronunciation: "initialism" });
+			const { unmount } = render(
+				<Abbr title={initialism.title} pronunciation="initialism">
+					{initialism.abbreviation}
+				</Abbr>,
+			);
+
+			const element = screen.getByTitle(initialism.title);
+			expect(element).toHaveTextContent(initialism.expectedLabel);
+			unmount();
 		}
 	});
 });
diff --git a/site/src/components/Abbr/Abbr.tsx b/site/src/components/Abbr/Abbr.tsx
index b27141818efb3..0c08c33e111ce 100644
--- a/site/src/components/Abbr/Abbr.tsx
+++ b/site/src/components/Abbr/Abbr.tsx
@@ -1,12 +1,13 @@
 import type { FC, HTMLAttributes } from "react";
 import { cn } from "utils/cn";
 
-export type Pronunciation = "shorthand" | "acronym" | "initialism";
+type Pronunciation = "shorthand" | "acronym" | "initialism";
 
 type AbbrProps = HTMLAttributes<HTMLElement> & {
 	children: string;
 	title: string;
 	pronunciation?: Pronunciation;
+	className?: string;
 };
 
 /**
@@ -22,23 +23,26 @@ export const Abbr: FC<AbbrProps> = ({
 	children,
 	title,
 	pronunciation = "shorthand",
+	className,
 	...delegatedProps
 }) => {
 	return (
 		<abbr
-			// Title attributes usually aren't natively available to screen readers;
-			// always have to supplement with aria-label
+			// Adding title to make things a little easier for sighted users,
+			// but titles aren't always exposed via screen readers. Still have
+			// to inject the actual text content inside the abbr itself
 			title={title}
-			aria-label={getAccessibleLabel(children, title, pronunciation)}
 			className={cn(
-				"decoration-inherit",
-				children === children.toUpperCase()
-					? "tracking-wide"
-					: "tracking-normal",
+				"no-underline tracking-normal",
+				children === children.toUpperCase() && "tracking-wide",
+				className,
 			)}
 			{...delegatedProps}
 		>
 			<span aria-hidden>{children}</span>
+			<span className="sr-only">
+				{getAccessibleLabel(children, title, pronunciation)}
+			</span>
 		</abbr>
 	);
 };