[nightshift] UX Copy Sharpener

[nightshift-micr]

UX Copy Sharpener Report — Quarzite

Date: 2026-04-14
Repository: ~/nightshift-workspace/clones/quarzite
Scope: index.html, assets/mobile.html, assets/mobile_cioy.html, js/*.js, data/gallery.json
Severity Scale: P0 (critical/broken) → P3 (polish/nit)

---

Executive Summary

The Quarzite project is a Windows 98–themed character gallery/showcase site. The UX copy is generally informal and personality-driven (intentional for the aesthetic), but there are meaningful improvements to be made in SEO metadata, error message quality, alt text consistency, accessibility gaps, and terminology inconsistencies between the desktop and mobile views. The biggest opportunities are:

1. Missing og:image on both desktop and mobile pages (P1 — directly affects social sharing).
2. Vague/weak meta description repeated identically across both pages (P1).
3. Inconsistent alt text between desktop and mobile gallery images (P2).
4. Gallery viewer image alt text always empty until dynamically set (P2 — accessibility).
5. Warning dialog copy uses a semicolon incorrectly and could be more concise (P2).
6. "PC or Desktop" is redundant in the mobile error page (P2).
7. Inconsistent "by" capitalization between desktop ("by ") and mobile ("By ") viewers (P3).
8. Missing aria-label on gallery strip items in desktop view (P2).
9. No <title> differentiation between desktop and mobile pages (P3).
10. Slang and informal language in gallery descriptions (intentional, flagged for awareness only).

---

Findings Table

#	Severity	File	Line(s)	Current Text / Issue	Suggested Improvement
1	P1	index.html	46–49	<meta name="description" content="A dedicated page for my character and commissioned artwork.">	Explore Quarzite — an original character gallery featuring commissioned artwork from various artists. Browse the collection, learn about the character, and enjoy a Windows 98–styled interactive experience.
2	P1	index.html	50–57	Missing <meta property="og:image">	Add <meta property="og:image" content="https://quarzite.micr.dev/assets/og-image.png" /> (create an OG image asset)
3	P1	assets/mobile.html	10–13	Same weak meta description as desktop	Same improved description as #1, or a mobile-specific variant: Quarzite — browse commissioned artwork and learn about the character on mobile.
4	P1	assets/mobile.html	14–21	Missing og:image	Same as #2
5	P2	index.html	372	<img id="viewer-img" alt="" /> — empty alt on gallery viewer image	Use alt="Gallery artwork" as default, updated dynamically when image loads
6	P2	assets/mobile.html	243	<img id="viewer-img" alt="" /> — same empty alt issue	Same as #5
7	P2	index.html	407–408	"You can move windows; but minimizing, maximizing or closing isn't allowed. Some windows can be resized."	"You can drag and resize windows. Minimizing, maximizing, and closing are disabled." — Remove erroneous semicolon, tighten copy, use consistent Oxford comma.
8	P2	js/warning.js	22–24	Same warning message text duplicated from HTML	Keep in sync with #7 fix — centralize into a constant or read from data-* attribute
9	P2	assets/mobile_cioy.html	74–88	"A mobile compatibility error has occurred." / "Please switch to a PC or Desktop computer."	"This page is not available on mobile devices." / "Please visit on a desktop or laptop computer." — Remove redundant "PC or Desktop"; make error description more specific.
10	P2	index.html	141	data-title="Info" but <span class="title-label">Information</span> — mismatch	Change data-title to "Information" to match visible title text
11	P2	index.html	354	data-title="Viewer" but <span class="title-label">Image Viewer</span> — mismatch	Change data-title to "Image Viewer" for consistency
12	P2	index.html	93	aria-label="Quarzite Logo" on the container div	The logo <img> already has alt="Quarzite Logo"; the container's aria-label creates duplicate screen reader output. Remove aria-label from the container div since the <img> inside provides the accessible name.
13	P2	assets/mobile.html	36–38	<div id="logo-img" class="logo-img" role="img"></div> — no aria-label or alt	Add aria-label="Quarzite Logo" to this div (since it's role="img" with a background image, it needs an accessible label)
14	P2	index.html	136	<div id="gallery-strip" class="gallery-strip"></div> — no aria-label	Add aria-label="Artwork gallery" or role="list" with appropriate labeling
15	P2	js/gallery.js	21	alt: (item, i) => item.title || \Image ${i + 1}`` — gallery images use generic fallback	Use same pattern as mobile: `Artwork by ${item.artist?.name || 'Unknown'}` for more descriptive alt text
16	P2	js/gallery.js	18–23	createGalleryItem call missing ariaLabel config	Add ariaLabel option matching the alt text for screen reader support on desktop gallery items
17	P3	js/gallery.js	196	artistPrefix: "by " (lowercase)	—
18	P3	js/mobile-viewer.js	40	artistPrefix: "By " (capitalized)	Standardize to "By " in both files for consistency, since it appears mid-sentence in viewer metadata
19	P3	js/gallery.js	197	separator: " - " (desktop viewer)	—
20	P3	js/mobile-viewer.js	42	separator: " • " (mobile viewer)	Pick one separator and use it consistently. " • " is more visually polished.
21	P3	index.html line 45 / assets/mobile.html line 9	Both pages	<title>Quarzite</title> — identical for both pages	Desktop: Quarzite — Character Gallery, Mobile: Quarzite — Mobile Gallery (improves browser tab identification and SEO)
22	P3	index.html	348	title="MS Paint" on iframe	title="Paint — draw your own artwork" — more descriptive for screen readers
23	P3	index.html	459	"Don't remind me again" checkbox label	"Don't show this again" — shorter, more standard pattern
24	P3	index.html	316–319	Notepad menu: <u>F</u>ile, <u>E</u>dit, <u>S</u>earch, <u>H</u>elp	These are visual-only (no actual menus). Consider adding aria-label attributes or title tooltips indicating these are decorative/non-functional.
25	P3	data/gallery.json	26	"desc": "Sadly, I couldn't find or remember the original artist..."	Minor: "Sadly" → "Unfortunately" for a slightly more polished tone (subjective — owner may prefer the informal tone)
26	P3	data/gallery.json	134	"desc": "in dodo we trust"	All lowercase, no period. Intentionally casual, but inconsistent with other descriptions that use proper capitalization.
27	P3	data/gallery.json	175	"desc": "crossover episode :P"	Informal with emoticon — inconsistent with other descriptions.
28	P3	data/gallery.json	117	"desc": "...It has some geometry errors, and I'm not perfectly happy with the result, but it does the job."	Honest but potentially off-putting to visitors. Consider: "...A 3D model created for my interactive portfolio."
29	P3	js/notepad.js	111	"[Error loading ASCII file]" shown in textarea	"Could not load content. Please refresh the page." — more actionable for users
30	P3	js/debug.js	153	alert("Layout copied to clipboard.\nPaste into css/main.css :root")	This is debug-only, acceptable. Consider adding [Debug] prefix for clarity.
31	P3	index.html	401	alt="Error" on warning icon, but line 441 uses alt="Warning"	Both icons are msg_error-0.png. Standardize: both should be alt="Warning" or both alt="" (decorative, since the dialog text conveys the meaning).
32	P3	assets/mobile.html	5	maximum-scale=1 in viewport meta	This prevents pinch-to-zoom, which is an accessibility issue. Remove maximum-scale=1 to allow users to zoom.
33	P3	index.html	175	"but honestly I cba" — British slang ("can't be arsed")	Acceptable for the informal character site, but consider spelling out or using a more universally understood phrase if broader accessibility is desired.
34	P3	index.html	184	"but oh well it is what it is" — ends without period	Add period for consistency with surrounding paragraphs.
35	P3	index.html	252	"but I fw them a lot" — slang ("fuck with")	Same as #33 — acceptable for the target audience, but flagged for awareness.

---

Detailed Findings

P1 — SEO & Social Sharing Gaps

Finding #1 & #3: Weak meta description
Both index.html (line 48) and assets/mobile.html (line 12) use the identical description:

"A dedicated page for my character and commissioned artwork."

This description is first-person, vague, and doesn't mention the site's unique Windows 98 theme or the interactive nature of the experience. Search engines truncate around 155–160 characters; the current description is only 63 characters — wasting valuable SERP real estate.

Finding #2 & #4: Missing og:image
Neither page includes <meta property="og:image">, meaning social media link previews (Twitter, Discord, etc.) will show no thumbnail. This is a significant sharing/visibility gap for a visual gallery site.

P2 — Accessibility & Functional Copy Issues

Finding #5 & #6: Empty alt text on viewer images
The gallery viewer <img> elements in both index.html (line 372) and assets/mobile.html (line 243) have alt="". While the alt is set dynamically via JavaScript (js/mobile-viewer.js line 34 sets it to "Artwork by ${artist}"), the desktop viewer in js/gallery.js does NOT set alt dynamically — it remains empty. This means desktop gallery images in the viewer are invisible to screen readers.

Finding #7 & #8: Warning message quality
The warning at index.html:407 and js/warning.js:22-24 reads:

"You can move windows; but minimizing, maximizing or closing isn't allowed. Some windows can be resized."

Issues: (a) semicolon before "but" is grammatically incorrect (should be comma or no punctuation), (b) passive voice, (c) "isn't allowed" sounds authoritarian rather than helpful.

Finding #9: Redundant language in error page
assets/mobile_cioy.html:79 says "PC or Desktop computer" — "PC" and "Desktop" are synonymous in this context.

Finding #10 & #11: data-title vs. visible title mismatch

• #win-info has data-title="Info" but displays "Information"
• #win-viewer has data-title="Viewer" but displays "Image Viewer"
  The data-title attributes are used by debug tools and potentially by assistive technology — they should match.

Finding #12: Duplicate accessible name
index.html:93 — the logo container div has aria-label="Quarzite Logo" AND the <img> inside has alt="Quarzite Logo". Screen readers will announce "Quarzite Logo, Quarzite Logo". Remove aria-label from the container.

Finding #13: Missing accessible name on mobile logo
assets/mobile.html:37 — the <div role="img"> has no aria-label. Since it uses a CSS background-image instead of an <img> tag, screen readers need the label.

Finding #14: Gallery strip lacks ARIA
index.html:136 — <div id="gallery-strip"> has no role or label. Consider adding role="list" and aria-label="Artwork gallery".

Finding #15 & #16: Desktop gallery alt text less descriptive than mobile

• Desktop (js/gallery.js:21): `Image ${i + 1}` fallback
• Mobile (js/mobile-gallery.js:34): `Artwork by ${entry.artist?.name || "Unknown"}`
  Desktop should match mobile's more descriptive pattern.

P3 — Consistency & Polish

Findings #17–20: Inconsistent viewer metadata formatting
Desktop uses lowercase "by " and " - " separator; mobile uses capitalized "By " and " • " separator. These should be unified.

Finding #21: Identical page titles
Both pages use <title>Quarzite</title>. Differentiating helps with browser tabs, bookmarks, and SEO.

Finding #31: Inconsistent icon alt text
Warning modal icon: alt="Error" (line 401). Resolution warning icon: alt="Warning" (line 441). Same icon file, different alt text. Both are decorative (the dialog text provides context) — use alt="" for both, or standardize to one value.

Finding #32: Accessibility — zoom disabled on mobile
assets/mobile.html:7 includes maximum-scale=1 which prevents pinch-to-zoom. This is a WCAG 2.1 Level AA failure (1.4.4 Resize Text).

Findings #33–35: Informal language
Slang terms "cba" (line 175), "fw" (line 252) and the overall casual tone are intentional for the character site's personality. These are flagged for awareness but not recommended for change unless the owner wants broader accessibility.

---

Prioritized Remediation Plan

Phase 1 — High Impact (P1)

Estimated effort: ~1 hour

Action	Files
Add og:image meta tag with a custom social sharing image	index.html, assets/mobile.html
Rewrite meta description to be more descriptive and SEO-rich	index.html, assets/mobile.html

Phase 2 — Accessibility & Clarity (P2)

Estimated effort: ~2 hours

Action	Files
Add dynamic alt text to desktop viewer <img> (match mobile pattern)	js/gallery.js
Set meaningful default alt on viewer <img> elements	index.html, assets/mobile.html
Fix warning message grammar and conciseness	index.html, js/warning.js
Fix data-title mismatches (Info → Information, Viewer → Image Viewer)	index.html
Remove duplicate aria-label from logo container	index.html
Add aria-label to mobile logo div	assets/mobile.html
Add aria-label to gallery strip	index.html
Update desktop gallery alt text to match mobile pattern	js/gallery.js
Fix redundant "PC or Desktop" in error page	assets/mobile_cioy.html

Phase 3 — Consistency & Polish (P3)

Estimated effort: ~1 hour

Action	Files
Standardize artistPrefix casing ("By ") in both viewers	js/gallery.js, js/mobile-viewer.js
Standardize separator character	js/gallery.js, js/mobile-viewer.js
Differentiate <title> tags between pages	index.html, assets/mobile.html
Standardize warning icon alt text (or make decorative)	index.html
Remove maximum-scale=1 from mobile viewport meta	assets/mobile.html
Improve notepad error message	js/notepad.js
Add period to end of "oh well it is what it is" paragraph	index.html, assets/mobile.html

---

Report generated by Nightshift UX Copy Sharpener