UX Audit Report

#1 BLOCKERImages must have alternate text

a11y · AXE-image-alt · 100% · needs dev

Ensures <img> elements have alternate text or a role of none or presentation

Fix: Fix: Images must have alternate text.

2 instance(s). First: the site logo image (y18.svg) has no alt text.

Prompt-ready fix

Fix #1: Images must have alternate text [BLOCKER]

Fix: Images must have alternate text.

#2 BLOCKERElements overlap: span.titleline and span "()"

spacing · SPACE-OVERLAP-001 · 100% · needs design

Overlapping non-modal elements obscure content and create confusion.

Fix: Adjust layout so elements don't overlap. Check z-index, position, and margins.

Overlap area: 82x13px (99% of smaller element) between the title link and the domain-in-parens span.

Prompt-ready fix

Fix #2: Elements overlap: span.titleline and span "()" [BLOCKER]

Adjust layout so elements don't overlap. Check z-index, position, and margins.

#3 BLOCKERForm elements must have labels

a11y · AXE-label · 100% · needs dev

Ensures every form element has a label

Fix: Fix: Form elements must have labels.

The bottom-of-page search input has no programmatically associated label.

Prompt-ready fix

Fix #3: Form elements must have labels [BLOCKER]

Fix: Form elements must have labels.

Major (12)

#1 MAJORBelow-fold image not lazy-loaded: td td · td

performance · PERF-LAZYLOAD-001 · 100% · needs design

Images below the fold that load eagerly block initial render and waste bandwidth for content the user hasn't scrolled to yet.

Fix: Add loading="lazy" to all below-fold <img> elements to defer offscreen image loading.

Image at y=1118px (below 900px fold) lacks loading="lazy".

Prompt-ready fix

Fix #14: Below-fold image not lazy-loaded: td td · td [MAJOR]

Add loading="lazy" to all below-fold <img> elements to defer offscreen image loading.

#2 MAJORText measure too wide: ~84 chars/line (max 80)

typography · TYPO-MEASURE-WIDE-001 · 100% · needs design

Lines wider than 80 characters force excessive eye movement when returning to the next line start, increasing reading fatigue and error rate.

Fix: Constrain text container to max-width of ~500px (75 chars) or use a multi-column layout.

link is 558px wide at 13.3333px font size, yielding ~84 characters per line. Optimal: 45-75 chars.

Prompt-ready fix

Fix #9: Text measure too wide: ~84 chars/line (max 80) [MAJOR]

Constrain text container to max-width of ~500px (75 chars) or use a multi-column layout.

#3 MAJORFont too small (9.33333px): span "by | |"

responsive · RESP-FONTSCALE-001 · 100% · needs design

Text below 11px is illegible on most screens and impossible to read on mobile devices.

Fix: Increase font size to at least 12px (ideally 14px+). Use rem units so text scales with user preferences.

Metadata text ("47 points by ... | hide | 3 comments") renders at 9.33333px: below 11px minimum for readability.

Prompt-ready fix

Fix #10: Font too small (9.33333px): span "by | |" [MAJOR]

Increase font size to at least 12px (ideally 14px+). Use rem units so text scales with user preferences.

#4 MAJORFont too small (10.6667px): span "gowers.wordpress.com"

responsive · RESP-FONTSCALE-001 · 100% · needs design

Text below 11px is illegible on most screens and impossible to read on mobile devices.

Fix: Increase font size to at least 12px (ideally 14px+).

Domain text rendered at 10.6667px: below 11px minimum for readability.

Prompt-ready fix

Fix #11: Font too small (10.6667px): span "gowers.wordpress.com" [MAJOR]

Increase font size to at least 12px (ideally 14px+).

#5 MAJORElement off-center by 28px within parent

spacing · SPACE-CENTERALIGN-001 · 100% · needs design

Nearly-centered elements that are slightly off look like alignment bugs and undermine perceived quality.

Fix: Use margin: 0 auto, flexbox justify-content: center, or grid place-items to center precisely.

Search input center X=748, parent center X=720. Offset: 28px.

Prompt-ready fix

Fix #15: Element off-center by 28px within parent [MAJOR]

Use margin: 0 auto, flexbox justify-content: center, or grid place-items to center precisely.

#6 MAJORInteractive elements only 5px apart: risk of mis-taps

spacing · SPACE-BREATHING-001 · 100% · needs design

Interactive elements too close together cause accidental taps, especially on touch devices.

Fix: Add at least 8px gap between interactive elements to prevent mis-taps.

link "Hacker News" and link "new" are 5px apart. Minimum recommended: 8px.

Prompt-ready fix

Fix #6: Interactive elements only 5px apart: risk of mis-taps [MAJOR]

Add at least 8px gap between interactive elements to prevent mis-taps.

#7 MAJORTouch targets too close (5px gap): "Hacker News" & "new"

responsive · RESP-TOUCH-SPACING-001 · 100% · needs design

Adjacent touch targets with insufficient spacing cause accidental taps on mobile devices.

Fix: Add at least 8px gap between interactive elements.

Interactive elements are only 5px apart. Minimum recommended spacing for touch is 8px.

Prompt-ready fix

Fix #7: Touch targets too close (5px gap): "Hacker News" & "new" [MAJOR]

Add at least 8px gap between interactive elements.

#8 MAJORFocus indicator suppressed on link "Hacker News"

a11y · DET-FOCUS-VISIBLE-001 · 100% · needs dev

Suppressing outline without a visual replacement violates WCAG 2.4.7 Focus Visible.

Fix: Add visible focus style: outline: 2px solid #4F46E5 or equivalent box-shadow.

Link has outline:none with no box-shadow replacement. Keyboard users cannot see focus.

Prompt-ready fix

Fix #8: Focus indicator suppressed on link "Hacker News" [MAJOR]

Add visible focus style: outline: 2px solid #4F46E5 or equivalent box-shadow.

#9 MAJORIcon-only link without accessible label

a11y · DET-ICON-ONLY-001 · 100% · needs dev

Icon-only buttons without text labels are invisible to screen readers.

Fix: Add aria-label describing the action.

Link has no visible text and no aria-label. Screen readers announce nothing useful.

Prompt-ready fix

Fix #12: Icon-only link without accessible label [MAJOR]

Add aria-label describing the action.

#10 MAJOR1 element(s) misaligned in row at Y~1118px

spacing · SPACE-GRID-001 · 100% · needs design

Elements in a visual row should be vertically aligned. Even 4-5px offsets look sloppy.

Fix: Use flexbox align-items: center or align to a shared baseline.

Y positions: [1118, 1128]. Max deviation: 10px.

Prompt-ready fix

Fix #13: 1 element(s) misaligned in row at Y~1118px [MAJOR]

Use flexbox align-items: center or align to a shared baseline.

#11 MAJORTouch target too small: upvote arrow is 14×10px (min 24px)

a11y · DET-TARGET-001 · 100% · needs dev

Very small touch targets cause mis-taps and accessibility issues for users with motor impairments.

Fix: Increase clickable area to at least 24×24px (desktop) or 44×44px (mobile) via padding.

Upvote arrow link measures 14×10px. Interactive elements need adequate click area.

Prompt-ready fix

Fix #4: Touch target too small: upvote arrow is 14×10px (min 24px) [MAJOR]

Increase clickable area to at least 24×24px (desktop) or 44×44px (mobile) via padding.

#12 MAJORTouch targets too close (0px gap): upvote arrow & headline link

responsive · RESP-TOUCH-SPACING-001 · 100% · needs design

Adjacent touch targets with insufficient spacing cause accidental taps on mobile devices.

Fix: Add at least 8px gap between interactive elements.

Interactive elements are only 0px apart. Minimum recommended spacing for touch is 8px.

Prompt-ready fix

Fix #5: Touch targets too close (0px gap): upvote arrow & headline link [MAJOR]

Add at least 8px gap between interactive elements.

Minor (5)

#1 MINORInconsistent heights among 37 sibling elements (11–1076px)

spacing · SPACE-PADDING-001 · 100% · needs design

Same-type elements with different heights indicate inconsistent padding, breaking visual rhythm.

Fix: Standardize padding/height across sibling elements. Use shared CSS classes or design tokens.

Selector group "td" has 37 elements with heights ranging 11–1076px (CV: 400%).

Prompt-ready fix

Fix #16: Inconsistent heights among 37 sibling elements (11–1076px) [MINOR]

Standardize padding/height across sibling elements. Use shared CSS classes or design tokens.

#2 MINORUnoptimized large image (1210px wide): td td · td

performance · PERF-CWV-HINTS-001 · 100% · needs design

Large images without responsive attributes or lazy loading waste bandwidth on smaller screens and delay page load.

Fix: Add loading="lazy", srcset with multiple resolutions, and a sizes attribute.

Large image (1210px wide) lacks loading="lazy", srcset, and sizes attributes.

Prompt-ready fix

Fix #18: Unoptimized large image (1210px wide): td td · td [MINOR]

Add loading="lazy", srcset with multiple resolutions, and a sizes attribute.

#3 MINORPagination without total count or result summary

navigation · PAT-PAGE-001 · 100% · needs design

Without knowing the total number of pages or results, users cannot estimate how much content exists or plan their navigation strategy.

Fix: Add a result summary near pagination (e.g., 'Showing 1-30 of N stories').

"More" pagination link found but no "X of Y" or total count text detected nearby.

Prompt-ready fix

Fix #22: Pagination without total count or result summary [MINOR]

Add a result summary near pagination (e.g., 'Showing 1-30 of N stories').

#4 MINORMixed labels for same action: "submit" vs "Apply to YC"

consistency · CONS-LABEL-001 · 100% · needs design

Using different labels for the same action creates cognitive overhead.

Fix: Pick one label and use it consistently where the action is genuinely the same.

Buttons use different words for a similar action: "submit" and "Apply to YC".

Prompt-ready fix

Fix #20: Mixed labels for same action: "submit" vs "Apply to YC" [MINOR]

Pick one label and use it consistently where the action is genuinely the same.

#5 MINORUneven horizontal gutters in row (17px, 3px, 11px, 11px)

spacing · SPACE-GUTTER-001 · 100% · needs design

Inconsistent horizontal gaps between aligned elements break visual balance and look unpolished.

Fix: Use consistent gap values (e.g., 8px, 16px, 24px) between row elements.

9 elements in row at Y~61px have gutters [17, 3, 11, 11]px (CV: 47%).

Prompt-ready fix

Fix #17: Uneven horizontal gutters in row (17px, 3px, 11px, 11px) [MINOR]

Use consistent gap values (e.g., 8px, 16px, 24px) between row elements.

Nit (1)

#1 NITInput zoom risk on iOS: search input uses 13.3333px font

responsive · MOB-006 · 100% · needs design

iOS auto-zooms the viewport when users tap inputs with font-size below 16px, disorienting the layout.

Fix: Set font-size to at least 16px on all form inputs to prevent iOS auto-zoom on focus.

Font size 13.3333px < 16px on the search input.

Prompt-ready fix

Fix #25: Input zoom risk on iOS: search input uses 13.3333px font [NIT]

Set font-size to at least 16px on all form inputs to prevent iOS auto-zoom on focus.

Content Issues (4)

#1 CONTENTRaw timestamp displayed in title attribute

copy · DET-TIMESTAMP-001

Users can't quickly parse ISO timestamps. Show relative ('2 hours ago') or localized time.

Fix: Format dates for humans in any visible/hover surface.

span.age title attribute shows an unformatted ISO/epoch date.

Prompt-ready fix

Fix #19: Raw timestamp displayed in title attribute [MINOR]

Format dates for humans in any visible/hover surface.

#2 CONTENTUnexplained abbreviation: "LLM"

copy · CONTENT-ABBREVIATION

Fix: This is user-submitted content, not product UI copy: no action needed on HN's side.

Post title uses "LLM" with no expansion.

Prompt-ready fix

Fix #24: Unexplained abbreviation: "LLM" [NIT]

This is user-submitted content, not product UI copy: no action needed on HN's side.

#3 CONTENTNon-descriptive link text: "More"

copy · DET-LINKTEXT-001

Users scanning by links hear ambiguous destinations. Link text must describe destination.

Fix: Replace with descriptive text: "More stories" or "Next page".

Suggested: More stories

Pagination link says "More" (screen readers announce this without context).

Prompt-ready fix

Fix #21: Non-descriptive link text: "More" [MINOR]

Replace link text "More" with descriptive text such as "More stories" or "Next page".

#4 CONTENTDuplicate text: "upvote" appears on every row

copy · CONTENT-DUPLICATE

Same title-attribute text repeated on every row's upvote arrow adds no distinguishing information.

Fix: Low priority: this is a conventional, low-stakes pattern; consider only if doing a broader copy pass.

"upvote" title attribute repeats identically on all 30 rows.

Prompt-ready fix

Fix #23: Duplicate text: "upvote" appears on every row [NIT]

Low priority: this is a conventional, low-stakes pattern; consider only if doing a broader copy pass.

UX Audit Report

Blocker (3)

#1 BLOCKERImages must have alternate text

#2 BLOCKERElements overlap: span.titleline and span "()"

#3 BLOCKERForm elements must have labels

Major (12)

#1 MAJORBelow-fold image not lazy-loaded: td td · td

#2 MAJORText measure too wide: ~84 chars/line (max 80)

#3 MAJORFont too small (9.33333px): span "by | |"

#4 MAJORFont too small (10.6667px): span "gowers.wordpress.com"

#5 MAJORElement off-center by 28px within parent

#6 MAJORInteractive elements only 5px apart: risk of mis-taps

#7 MAJORTouch targets too close (5px gap): "Hacker News" & "new"

#8 MAJORFocus indicator suppressed on link "Hacker News"

#9 MAJORIcon-only link without accessible label

#10 MAJOR1 element(s) misaligned in row at Y~1118px

#11 MAJORTouch target too small: upvote arrow is 14×10px (min 24px)

#12 MAJORTouch targets too close (0px gap): upvote arrow & headline link

Minor (5)

#1 MINORInconsistent heights among 37 sibling elements (11–1076px)

#2 MINORUnoptimized large image (1210px wide): td td · td

#3 MINORPagination without total count or result summary

#4 MINORMixed labels for same action: "submit" vs "Apply to YC"

#5 MINORUneven horizontal gutters in row (17px, 3px, 11px, 11px)

Nit (1)

#1 NITInput zoom risk on iOS: search input uses 13.3333px font

Content Issues (4)

#1 CONTENTRaw timestamp displayed in title attribute

#2 CONTENTUnexplained abbreviation: "LLM"

#3 CONTENTNon-descriptive link text: "More"

#4 CONTENTDuplicate text: "upvote" appears on every row