UX for Everyone: An Accessibility Deep Dive into My Own Portfolio

I used VoiceOver (the native screen reader on macOS) to navigate the site without looking at the screen. By listening to how content was announced, I discovered gaps in the experience, then iterated on typography, media descriptions, heading structure, and translated content.

My first pass was simple: I activated the screen reader (VO+A), and listened.

When I first designed the site, typographic consistency was essential. Since my craft focuses on front-end work, I put thought into the spelling of “front end”. I chose to spell it as one word, “frontend”, because it felt cleaner and more modern. However, when I heard the screen reader's pronunciation, I realized my aesthetic choice had degraded the screen reader experience. VoiceOver rushed the syllables, making it sound clumsy. I changed it to the standard spelling.

Images convey complex information concisely and provide emotional richness that text alone cannot. I use several images throughout my website; some are decorative, but others are functional such as diagrams of complex setups or UI patterns. Initially, my alt text described what the image showed, but not why it mattered.

Consider the difference in these two experiences:

I rewrote the alt text to provide the same level of detail and context as the visual experience. Now alt text throughout my website enhances the narrative rather than giving a basic description of what the image contains.

Visual users rarely read a webpage word-for-word. Instead, they skim for relevant headings and keywords. Screen reader users have an analogous tool: the Rotor (VO+U). The Rotor is a navigation menu that groups content into lists of headings, landmarks, links, and other elements, allowing users to jump directly to what they need. If this menu is cluttered or poorly structured, the site becomes difficult to navigate.

Headings

Opening the Rotor on my initial build revealed several structural problems:

• Incorrect Leveling: My tagline was set as <h2>, but it didn't mark a logical section.
• Stylistic Capitalization: I had styled some labels (like “DEV”) in all caps. VoiceOver read this as “D-E-V” instead of the word “dev.”
• Fragmentation: My work history was broken into separate headings for the role and company, cluttering the list.
• Redundancy: My contact card included an additional heading for my name rather than allowing the primary heading to define the section.

I fixed these issues by restructuring the headings to follow a logical hierarchy that worked independently of the visual design.

Links

My site is intentionally minimal, so links are scarce. However, generic labels like “Read more” and raw email addresses create ambiguity in a list context. I updated my links to ensure that each one made sense on its own, even outside the context of the page.

“Read full case study →” (spoken as “Read full case study right arrow”) became “Read case study: Building the Interface for an Industrial Cleaning Machine,” and “chase@humansyntax.dev” became “Email Chase.”

While testing different assistive features, I used the iPhone's Translate Website tool and discovered an unexpected issue. I noticed my business name was being translated word-for-word, so I wrapped it in a <span> with the translate=“no” attribute. Unfortunately, this introduced a regression. The screen reader fragmented the text, and it began announcing the heading level repeatedly in the middle of the phrase.

I refactored the component to ensure text nodes remained contiguous in the DOM, preventing the accessibility tree from breaking up the sentence into disconnected fragments.

This audit reinforced that accessibility isn't a compliance checklist applied at the end of development; it's a stress test for engineering quality. As part of that audit, I also ran Lighthouse (an automated testing tool built into Chrome DevTools) to validate the changes and check for obvious violations. Both the before and after versions scored 96/100 for accessibility. The score stayed the same, but the experience improved dramatically. Automated tools are invaluable for catching baseline issues, but they can't evaluate whether alt text is meaningful, whether headings create a logical narrative, or whether the Rotor menu feels cluttered. Those subtleties only surfaced through manual testing with VoiceOver.

The site is now easily navigable via the Rotor, with headings that provide a clean, logical outline of the content. By fixing invisible bugs like the span fragmentation, I made the site more resilient to translation engines and other assistive tools. Most importantly, the aural experience now matches the quality of the visual experience. Whether someone sees the site or hears it, it feels equally deliberate, professional, and clear.