# May Greetings for Everyone — The Story of Daon Card

> Not everyone can send a digital card in Korea's Family Month. Meet Daon Card — a free, WCAG 2.2 AA accessible greeting card service for all.

**Published:** 2026-05-08 | **Updated:** 2026-05-08

---


May is a special month in Korea — packed with occasions to reach out to the people we love.

Children's Day (May 5), Parents' Day (May 8), Teachers' Day (May 15), Couples' Day (May 21)... it's no accident the whole month is called Family Month. Flower shops overflow with carnations, and KakaoTalk fills up with heartfelt digital cards. Sending a digital greeting card has become second nature.

But I want to ask a simple question.

**"Are those May greetings actually reaching everyone?"**

{{< img src="images/contents/family-month-carnation.jpg" alt="A bouquet of carnations in warm light — the season of warm greetings in Korea's Family Month" caption="Photo: <a href='https://unsplash.com/@USERNAME' target='_blank' title='Opens in new window'>Author</a> / <a href='https://unsplash.com' target='_blank' title='Opens in new window'>Unsplash</a>" >}}

---

## People Who Can't Send a Card

There are plenty of digital card services out there — beautiful templates, fancy fonts, cute stickers. The screens look great. But for some people, those beautiful screens are either **impossible to see or impossible to use**.

### Screen Reader Users with Visual Impairments

People with visual impairments navigate the web using screen readers (text-to-speech programs). When a button has no accessible name, the screen reader just says "button." When an image has no alt text, it says "image." (In reality, the output is often even harder to parse than that.)

Open most card-making services with a screen reader and you'll hear something like this:

> *"Button. Image. Button. Button. Image. Image. Button."*

There's no way to tell what any of it means. You can't even pick a template, let alone create a card.

### People Who Can't Use a Mouse

Parkinson's disease, muscular disorders, tremors from aging — for many people, clicking and dragging a mouse is genuinely difficult. Everything should be operable by keyboard alone. But most card services are designed around mouse interactions. Tab key navigation might produce no visible focus indicator, or certain controls can only be used by dragging. ([Learn more about why keyboard accessibility matters]({{< relref "keyboard-accessibility-a-to-z" >}}))

### People with Color Vision Deficiency

Red carnation background, white text on top. It looks lovely — but for someone with color vision deficiency, the background and text might be nearly indistinguishable. Insufficient color contrast makes content unreadable. ([Read more about color accessibility]({{< relref "color-accessibility" >}}))

### Older Adults Struggling with Small Text and Complex UI

For people less familiar with digital devices, a cluttered interface is itself a barrier. Tiny text, buttons that don't look like buttons, error messages that don't explain what went wrong — the very people who would most love to receive a card from their children may find it hardest to send one back.

For a card-making service, that's a small act. But for some people, **the door to that act is locked.**

{{< img src="images/contents/locked-door-barrier.jpg" alt="A silhouette standing before a firmly closed door — even the small act of sending a card has a locked door for some people" caption="Photo: <a href='https://unsplash.com/@USERNAME' target='_blank' title='Opens in new window'>Author</a> / <a href='https://unsplash.com' target='_blank' title='Opens in new window'>Unsplash</a>" >}}

---

## So I Built Daon Card

I've spent years researching web accessibility — finding issues, filing improvement requests, and working to fix them directly. Again and again.

While testing a card service ahead of Family Month this year, I had a thought:

*"I could just build one myself."*

*(Immediately followed by: "Oh. There's more to this than I thought." Classic developer moment.)*

That's how **[Daon Card (daoncard.com)](https://www.daoncard.com)** came to be.

"다온 (Daon)" is a native Korean word meaning **"may all good things come."** The name carries the hope that warm greetings can reach every single person — not just some of them.

It's completely free. No sign-up required. (If you'd like, signing in with a Google account lets you manage your cards in one place.)

{{< img src="images/contents/warm-greeting-card.jpg" alt="A handwritten letter and pen resting in warm light — Daon Card aims to deliver warmth the way a handwritten note does" caption="Photo: <a href='https://unsplash.com/@USERNAME' target='_blank' title='Opens in new window'>Author</a> / <a href='https://unsplash.com' target='_blank' title='Opens in new window'>Unsplash</a>" >}}

---

## What Daon Card Offers

### 7 Card Templates

Templates made for each occasion in Family Month.

| Template | Occasion |
|----------|----------|
| Parents' Day 🌹 | May 8 |
| Children's Day 🎈 | May 5 |
| Teachers' Day 📚 | May 15 |
| Couples' Day 💑 | May 21 |
| Family Day 🏡 | All of May |
| Birthday 🎂 | Any time |
| Default 💌 | Open-ended |

### 3 Ways to Add an Image

1. **Upload your own** — Add a family photo or a cherished memory
2. **Choose a default image** — Pick from illustrations provided with each template
3. **Text only** — Sometimes words are all you need

### Multiple Sharing Options

Once your card is ready, you can share it several ways:

- **KakaoTalk** direct share
- **Email** delivery
- **Copy link** (paste into any message or chat)
- **Web Share** (opens your phone's native share sheet)

---

## Tech Stack & System Architecture

For those curious about what's running under the hood.

### Tech Stack

| Role | Technology |
|------|------------|
| Framework | Next.js 14 (App Router) + TypeScript |
| UI | Tailwind CSS + shadcn/ui |
| Database | Supabase (PostgreSQL + image storage) |
| Service management | Upstash Redis |
| Deployment | Vercel |

The entire service runs on free tiers — Supabase, Upstash, and Vercel all cover the load without a paid plan. It's a side project, though I wouldn't mind upgrading if usage grows.

### System Architecture

{{< mermaid >}}
flowchart LR
    User(["👤 User"])

    subgraph Client["Client"]
        Editor["Card Editor\n/create"]
        Viewer["Card Viewer\n/card/id"]
    end

    subgraph Vercel["Next.js API (Vercel)"]
        API_Cards["POST /api/cards\nCreate card"]
        API_Send["POST /api/send\nSend email"]
    end

    subgraph External["External Services"]
        Supabase[("Supabase\nDB + Storage")]
        Upstash[("Upstash\nRedis")]
    end

    User --> Editor
    User --> Viewer
    Editor --> API_Cards
    API_Cards --> Upstash
    API_Cards --> Supabase
    Viewer --> Supabase
    Editor --> API_Send
    API_Send --> Supabase
{{< /mermaid >}}

### How Card Creation Works Internally

Here's the sequence of what actually happens when you create and share a card.

{{< mermaid >}}
sequenceDiagram
    actor U as User
    participant E as Card Editor
    participant A as API Server
    participant R as Rate Limiter
    participant DB as Supabase

    U->>E: Choose template + write message
    U->>E: Upload photo (optional)
    Note over E: Compressed to WebP in browser
    E->>A: POST /api/cards
    A->>R: Internal processing
    R-->>A: Allowed (internal validation passed)
    A->>DB: Save card + upload image
    DB-->>A: Return unique slug
    A-->>E: Card link ready
    E-->>U: Show share panel
{{< /mermaid >}}

If you upload a photo, it's **compressed to WebP in the browser** before reaching the server — smaller file size, faster upload. Card data is saved in Supabase and assigned a unique slug (e.g. `abc123`). Anyone with that link can open the card.

---

## How Accessibility Works in Daon Card

**Accessibility — with a garnish of care.**

{{< img src="images/contents/chef-a11y-daoncard.png" alt="Chef character illustration representing accessibility as a core ingredient in Daon Card" caption="Yes, accessibility." >}}

Daon Card is built to WCAG 2.2 AA standards. Here's what that means in practice.

### Full Keyboard Navigation

Every feature — from template selection to card sharing — works with Tab, arrow keys, Enter, and Space. No mouse required. Focus is always clearly visible with a 2px+ outline so you always know where you are.

### Screen Reader Compatible Throughout

Every button and input field has a clear, descriptive name. The image selection area is built as a radio group, so a screen reader announces "1 of 3 selected" and similar context. After copying the link, the screen reader immediately announces "Link copied."

### Skip Navigation

A "Skip to main content" link sits at the top of each page for keyboard and screen reader users. You can jump directly to the card editor without tabbing through the navigation every time.

### Real-Time Color Contrast Checker

When you choose text and background colors for your card, a live contrast ratio is displayed. You can see at a glance whether it meets the WCAG threshold (4.5:1), so you won't accidentally create a card that's hard to read.

### Required Alt Text for Images

When you upload a photo, you're prompted to add a description of the image. This means the card recipient can understand what the photo shows even if they use a screen reader.

### Dark Mode and High Contrast Mode

A dark mode and high contrast mode toggle in the header lets users switch themes at any time — helpful for people with light sensitivity or low vision. The font color you choose for your card is also mapped to maintain sufficient contrast when the mode changes.

---

## How to Create a Card

Just three steps.

**Step 1 — Choose a Template**

Go to [daoncard.com](https://www.daoncard.com) and click "카드 만들기" (Create Card). Seven templates will appear. Pick the one that fits your occasion.

**Step 2 — Add Your Content**

Enter a title and your message. Upload a photo or choose a default image, and adjust font size and colors as you like. Add your name in the sender field and it'll appear at the bottom of the card as "From. [Your Name]."

**Step 3 — Share**

When your card is ready, a unique link is generated. Share it directly via KakaoTalk, or copy the link and send it by text. No login. No fee.

{{< img src="images/contents/sharing-card-smartphone.jpg" alt="Hands typing on a smartphone — share your Daon Card via KakaoTalk, text, or any messaging app" caption="Photo: <a href='https://unsplash.com/@USERNAME' target='_blank' title='Opens in new window'>Author</a> / <a href='https://unsplash.com' target='_blank' title='Opens in new window'>Unsplash</a>" >}}

---

## A Closing Thought

Daon Card isn't perfect. There's still more to improve and more to refine.

But one thing I can say with confidence: **accessibility was a core value from day one**, not an afterthought tacked on later. It's built into the foundation of the service.
The best way to build accessible products is to start right — from the design stage.

I hope May's greetings reach a few more people this year.

→ **[Create a card at daoncard.com](https://www.daoncard.com)**

Free. With Heart.