User Stories

It was a Tuesday afternoon in the middle of term, and Dr. Asha Mehta was fifteen minutes from a two-hour lecture on digital portfolios. She had been handed a student's printout with a web address scrawled in the margin: John E. Parman — creative communication practice. A colleague had recommended it as a real-world example of a practitioner building their online presence. Asha pulled it up on the projector.

The homepage loaded. The heading was there — john e. parman — and below it a subtitle in what she could only describe as "that orange." On her ageing projector bulb, the amber text against the white background simply disappeared. She leaned closer. Nothing. She could tell something was written there but could not read it. A student near the front squinted. Another asked, "Is that broken?"

Asha moved past the hero section and tried to navigate to the gallery. She clicked Gallery in the nav. The images loaded, but the captions were all either generic filenames or entirely absent. When her student Priya — who uses a screen reader — tried to explore the page later that evening to prepare an analysis piece, she found the navigation impossible. The screen reader announced "image" twelve times in a row. No context. No description. No way to skip the lengthy navigation repeated at the top of every page.

Things deteriorated when Asha switched to her tablet. The navigation bar, which had looked neat enough on the projector, crammed seven uppercase labels into a single row on her tablet screen without collapsing to a menu. Two labels disappeared off the right edge. She could not find Contact anywhere. She was on the Community page — a gallery of user drawings — and the navigation bar did not include a way to reach the contact section at all. She tapped around for two minutes before giving up.

She closed the browser, made a note in her planner — good cautionary example, do not recommend as model — and walked into her lecture.

John found out the hard way. A brief, professional message arrived in his inbox from a college email address. The sender did not introduce herself at length — she simply listed what had not worked and on what device, with the matter-of-fact efficiency of someone who grades written communication for a living. He read it twice.

He had known, in a vague way, that accessibility was something to think about. He had not known, specifically, that the orange he liked so much rendered at 3.0:1 contrast on white — until he ran his own colours through WebAIM's contrast checker and saw the red fail icon appear next to the text he used everywhere. He stared at it for a moment. Then he started a list.

The first fix was the colour. He kept the orange for purely decorative elements — the section divider line, the card border accent — where it carried no text meaning. For anything a user needed to read, he switched to a darker amber: #b45309, which passes WCAG AA at 5.0:1 on white. The warmth was preserved; the information was now readable.

Next came the alt text. He went through each gallery image deliberately, writing descriptions that conveyed subject, composition, and context — not just labels, but actual sentences. A photograph of a painted performance space became: "Abstract stage set with bold geometric shapes in red and yellow, photographed under theatrical lighting during a live performance." He thought about what someone who could not see the image would actually need to know.

The skip link came next — a single line of HTML at the very top of every page, visually hidden until focused, that jumped directly to the main content. Small. Invisible to most users. Invaluable to those who needed it. He added it to all six pages and tested it with keyboard navigation until it worked cleanly.

The navigation inconsistency required him to look at every page side by side. He realised that the Community and Wireframe pages had been built at different times, and when the page-specific nav items were added, nobody had checked whether Contact was still present. It was not. He added it. He also decided that seven or eight items expanding into a single row on a tablet was fundamentally unreliable, and moved the hamburger collapse point from 768px (tablets) to 992px (desktop only), so that phones and tablets always got the clean, collapsible menu.

Finally, the mobile menu behaviour. A single JavaScript listener, nine lines of code, checked whether the Bootstrap collapse was open when a link was tapped and closed it immediately. The fix took less time to write than the problem had taken Asha to describe.

Three weeks later, Asha was preparing a new lecture — this one on iterative improvement in digital practice. She wanted a real example. She typed the address from her planner.

The page loaded. The heading was there. Below it, the subtitle in a warm, readable amber that she could see clearly — not disappeared into the white, not orange-washed by the projector, but actually there and actually legible. She scrolled. The gallery loaded. She opened her screen reader, the one she always kept installed for teaching demos, and tabbed through the images. Descriptions. Context. Sentences.

She tapped the hamburger on her tablet. The menu opened cleanly. She selected Community. The menu closed. The page loaded. She looked at the navigation bar at the top of the Community page. Contact was there.

She added it to her lecture notes. Not as a cautionary example. As a demonstration of something rarer and more useful: a practitioner who listened, understood what had actually gone wrong, and fixed it systematically — not just aesthetically, but structurally.

She did not message John again. She did not need to. The site spoke for itself.

Margaret heard about the gallery from a friend at the last 'Safternoon — someone at her table had pulled up the site on their phone and described a photograph of the Bumble Hole nature reserve. She knew that place. She had walked there before the stroke, with her late husband. She wanted to see the image for herself.

At home, she opened her iPad and navigated to the site with VoiceOver running. The gallery page loaded. Her AAC app was quiet in her lap — she did not need it for browsing, only for speaking. She touched the first image and VoiceOver read aloud: "Two horses — one black and white, one brown — standing near a fence at Bumble Hole nature reserve." She paused. That was the right place. Those were horses she had seen from the path.

She moved through the gallery slowly, image by image. Each descriptive alt text gave her a sentence — a subject, a location, a quality of light. For someone whose word-finding is effortful, being given the words rather than having to produce them made the experience feel open rather than exhausting. She did not need to sign to herself to understand. The page was doing the describing for her.

She wanted to respond. In BSL, she would hold her hand to her chest and open it forward — a gesture of something received, something felt. On a screen, she needed a different way to say the same thing.

She navigated to the contact section. The form appeared: Full Name, Email, Phone, Message. Four fields. She looked at the Message box for a long moment.

Aphasia does not prevent understanding — Margaret understood everything she read and heard clearly. What it affected was production: finding words, assembling them into sentences, typing them out one by one. The blank message box asked her to do the hardest thing she was asked to do every day, in a context where she had no support, no AAC symbol set, no one to help her shape the words before she sent them.

She did not try to type. She had learned, in the three years since the stroke, to recognise the difference between a door that was locked and a door that was simply heavy. The contact form was locked. She looked for another way in.

Her grandson visited that Sunday. She showed him the gallery on the iPad and signed to him what she wanted to do. He scrolled through the navigation bar and pointed: Draw.

She had not noticed the Draw page. She opened it. A toolbar appeared with four large colour buttons — Black, Orange, Sky Blue, Green — each one wide enough to tap accurately with a single finger. A clear canvas beneath. She selected Sky Blue with her left thumb. It pressed and confirmed: the button showed a pressed state. She put her finger to the canvas.

She drew slowly. Not a picture of anything representational — a broad arc, the kind of gesture she might make in BSL to indicate something sweeping and significant. A shape that, to someone watching her hands, would mean something like this mattered. The stroke tracked her finger across the screen. When she lifted it, the line was there.

She tapped Submit to Gallery. A moment later, her grandson navigated to the Community Gallery page. Her drawing was there — her blue arc on a white background, sitting in the grid alongside others. Small. Unhurried. Hers.

She did not type a name. She did not write a caption. She had communicated in the only way the site currently made possible for her — and it had worked, because the tool did not require words.