IBM Tech Recognition Site — D&UX Design Review

📸 10 live screenshots captured from your authenticated W3 session. The full interactive version with embedded screenshots is saved at ibm-tech-review/index.html in your playground (2.8 MB). This artifact contains the complete analysis; open the local file for full-resolution screenshots side-by-side.

Executive Summary — D&UX Scores

Accessibility

3.5/5

Meets most, gaps in skip nav & headings

Visual Design

4.0/5

Strong IBM branding, Carbon-aligned

Experience Quality

3.5/5

Good content structure, a few UX gaps

Overall D&UX

3.7/5

Above average — actionable findings

Critical (2)

Missing skip navigation link
No h1 heading on page (h2 used instead)

High (5)

Icon-only buttons may lack aria-labels
Non-descriptive link text ("2026 →")
FAQ accordion aria-expanded unverified
Search inputs missing visible labels
Content loading delay on mobile/tablet

Medium (4)

Inconsistent icon sizes
Footer links lack grouping/hierarchy
Alt text on icons unverified
Carbon component usage unconfirmed

Strengths

✓ IBM Plex Sans font used throughout (confirmed in computed styles)
✓ IBM blue (#0f62fe) applied consistently as primary interactive/brand color
✓ Clean visual hierarchy — decorative concentric curves give premium look
✓ Logical content flow: Hero → Program info → Criteria → Social assets → FAQs → Footer
✓ Semantic HTML landmarks present (nav, header, footer)
✓ Page title and meta description properly set
✓ Responsive layout works on tablet (768px) and mobile (375px)
✓ FAQ accordion provides progressive disclosure (good UX pattern)
✓ Sentence-case capitalization in headings (IBM brand standard)
✓ Keyboard focus indicator visible (blue border on "2026" link)

Desktop Screenshots — Observations

01 · Hero / Above the Fold

Desktop 1440×900 · Hero section

SCREENSHOT 01 — HERO

Visible content: IBMer Recognition nav · 4 top-level tabs · IBM Tech heading (h2) · Intro copy in 2 columns · "Meet the invitees" · 2026 and 2025 year links · "More about the event" section

Full screenshot embedded in local index.html

Hero section — 1440px desktop · Captured live via Playwright

Visual Design

IBM Plex Sans typography — clean, professional
IBM blue concentric curves: distinctive, on-brand decorative treatment
Two-column layout (h2 left · body copy right) — clear visual separation
Generous white space — premium feel
Heading "IBM Tech" is an h2, not h1 — breaks heading hierarchy
No visible page h1 anywhere — critical semantic issue

Navigation

4 top-level nav items clearly visible; "IBM Tech" active-underlined
w3 masthead with search, settings, profile icons (right aligned)
No skip navigation link — keyboard users tab through all nav before content
Icon-only buttons (search, settings) — verify aria-label present

IBM Experience Standards

Value proposition clear: "premier recognition, education and development program"
Audience identified: "top technical IBMers who have made vital contributions"
No CTA above the fold — year links are the only action
Year links "2026 →" and "2025 →" not descriptive out of context (WCAG 2.4.6)

02 · Full Page Scroll

Desktop 1440×900 · Complete page (page height: 2978px)

SCREENSHOT 02 — FULL PAGE

Page sections visible: Hero → More about the event (3 bullet points) → Criteria and eligibility → 3-column icon layout (Business results · Client success · Skills and culture) → Selection Criteria → Social assets (LinkedIn + W3 frames) → FAQs (7 accordion items) → Footer

Full screenshot embedded in local index.html (673KB)

Complete page layout — all sections visible · 2978px tall

Information Architecture

Logical content flow from overview → criteria → social assets → FAQ
Horizontal rules clearly separate major sections
h3 headings mark each section ("More about the event", "Criteria and eligibility", etc.)
Heading hierarchy issue: h2 (IBM Tech), h3 (More about event) — should be h1 → h2 → h3

Content Quality

Three criteria pillars well-illustrated with icons
Bullet-point format makes criteria scannable
Italic text ("Internal:" / "External:") adds useful distinction
Selection criteria lists edge cases (executives, IBM Fellows, early professionals)

Carbon Design System

Icons appear to follow Carbon icon style (outlined, geometric)
Cannot confirm Carbon Grid is used without DOM inspection
Font stack: IBMPlexSans → Helvetica Neue → Arial (IBM standard)
Page background transparent (rgba 0,0,0,0) — depends on parent container theming

Metadata (from DOM)

Title: "Client Facing Recognition - IBM Tech"
Description: "showcases IBMer recognition events and awards…"
lang="en" on html element
h1: [] (none detected) — critical structural issue

03 · Criteria & Eligibility Section

Desktop 1440×900 · 25% scroll position

SCREENSHOT 03 — CRITERIA SECTION

Visible: "Criteria and eligibility" h3 · Eligibility paragraph · Three-column icon section with Business results (bar chart + $ icon), Client success (lightbulb icon), Skills and culture (two people icon) · Bullet criteria under each column

Criteria and eligibility — three-pillar icon layout

Three-Column Icon Layout

Three pillars well-defined: Business results · Client success · Skills and culture
Icons provide clear visual anchoring for each pillar
Bullet lists are specific and actionable
Icons appear slightly uneven in size — Business results icon appears larger than others
Icons are decorative + informative — need alt text or aria-label for screen readers

Typography

Criteria heading uses correct weight and size
Body text is readable and well-spaced
Italic used correctly for subcategory labels ("Internal:", "External:")

Accessibility (Criteria)

Three-column layout — verify columns are understandable when linearized for screen readers
No landmark wrapping criteria section (consider adding <section aria-label="Eligibility criteria">)
Unordered lists mark up criteria items correctly

04 · Social Assets Section

Desktop 1440×900 · 50% scroll position

SCREENSHOT 04 — SOCIAL ASSETS

Visible: "Social assets" h3 · LinkedIn photo frame (with decorative IBM curves) + "Download the frame" link · W3 profile picture frame (woman's photo with IBM Tech 2026 badge) + "Instructions" dropdown · "FAQs" h3 below

Social assets — LinkedIn frame and W3 profile frame

Social Assets Presentation

Two assets side-by-side: LinkedIn frame + W3 profile frame
Visual previews help users understand what they'll get
"Download the frame" in IBM blue — clear CTA
CTA is text link not a Button component — consider using Carbon Button (tertiary)
"Instructions" dropdown offers guidance without cluttering the main view

Accessibility (Social Assets)

LinkedIn frame image needs alt text: e.g., "LinkedIn profile frame for IBM Tech 2026"
W3 profile photo: person's photo needs alt text or aria-hidden if decorative example
Instructions dropdown: verify aria-expanded state toggles on click
Button text "Instructions" is descriptive

IBM Experience Standards (Use stage)

Social assets empower invitees to share recognition — supports loyalty and advocacy
Both LinkedIn and W3 platforms covered — meets IBMers where they are
No preview of what "Instructions" contains before expanding — consider short helper text

05 · FAQ Accordion Section

Desktop 1440×900 · 75% scroll position

SCREENSHOT 05 — FAQ ACCORDIONS

Visible: 7 FAQ accordion items all in collapsed state · Chevron-down icons on right · Questions: "What is IBM Tech?", "Who is eligible...", "How is the nominations process initiated?", "How do I nominate an invitee?", "What if a notified/invited employee...", "When will the final list...", "If I receive the IBM Tech award..."

FAQ accordions — 7 questions all collapsed

FAQ UX Pattern

7 questions cover the nomination lifecycle comprehensively
Questions use natural language (how, who, when, what if)
Chevron icons clearly signal expandable items
Sentence-case capitalization (IBM brand standard)
All FAQs collapsed by default — consider expanding top FAQ on load for discoverability

Accessibility (FAQs)

Semantic button elements used for accordion triggers (from DOM analysis)
aria-expanded="false" present on buttons (detected in DOM)
Must verify aria-expanded toggles to "true" on expand
Verify accordion panel has id matching button's aria-controls
Question text serves as accessible button label

Carbon Pattern Comparison

This appears to be a custom accordion — not confirmed as Carbon Accordion
Carbon Accordion: <Accordion> → <AccordionItem title=""> with built-in a11y
Visual presentation similar to Carbon Accordion style

06 · Footer

Desktop 1440×900 · Bottom of page

SCREENSHOT 06 — FOOTER

Visible: "Last updated: Jun 18, 2026 at 11:12 pm" (right-aligned) · Footer links: Privacy Policy · Contact · Terms of Use · Accessibility · Business Conduct Guidelines · Licenses · Terms and conditions · Report a page issue · "Powered by w3 Publisher from CIO" (right)

Footer — standard IBM utility links and W3 Publisher attribution

Footer Content

Standard IBM utility links present (Privacy, Contact, Terms, Accessibility)
"Report a page issue" link — good feedback mechanism
Last updated date visible — helps users know content currency
W3 Publisher attribution present
8 footer links in single row — could benefit from grouping on wide screens

Accessibility (Footer)

Footer landmark detected in DOM (footer element)
Footer landmark has no aria-label — screen readers announce "footer" without context
All link text is descriptive
Sufficient contrast between link text and background

Date Format Issue

"Last updated: Invalid Date" appeared initially (rendering issue) — resolved on page load
Verify date rendering is robust across browsers and time zones

Responsive Views

07 · Tablet View (768×1024)

Tablet · iPad · Carbon Medium breakpoint (672–1055px)

SCREENSHOT 07 — TABLET (768px)

Visible: Hamburger menu top-left · "IBMer Recognition" title · W3/settings/profile icons right · Decorative curve top-right · "IBM Tech" heading (h2) · Single-column body text · "Meet the invitees" label · 2026 → and 2025 → year links (stacked) · "More about the event" section begins

Tablet viewport — content loaded and readable

Responsive Behavior

Navigation collapses to hamburger menu
Content reflows to single column — no horizontal scrolling
Typography scales appropriately
Year links stack vertically (adequate touch target spacing)
Decorative curve adapts to narrower viewport

Tablet-Specific Issues

Hamburger menu button needs aria-label for screen readers
Require longer wait time for content to load at this breakpoint (SPA issue)
Touch targets appear adequately sized (≥44×44px estimated)
Nav items hidden behind hamburger — verify they're reachable via keyboard

Carbon Breakpoints Alignment

768px correctly falls in Carbon Medium (md) breakpoint
Recommend testing at 672px (breakpoint boundary) for layout stability

08–09 · Mobile View (375×812)

Mobile · iPhone · Carbon Small breakpoint (320–671px)

SCREENSHOTS 08–09 — MOBILE (375px)

Viewport: Hamburger · IBMer Recognition · W3/settings/profile · Small decorative curve top-right · "IBM Tech" heading · Full-width body text · No horizontal scroll. Full page: all sections stack vertically — criteria icons stack to single column, social assets stacked, FAQ accordions visible, footer wraps

Mobile viewport and full-page scroll

Mobile Behavior

Content fully readable at 375px — no horizontal scroll
Navigation hamburger pattern correct
All sections flow vertically without layout breakage
Text size remains comfortable for mobile reading
Icons stack from 3-column to single column layout

Mobile UX Gaps

Content loading requires longer wait at mobile viewport (SPA rendering issue)
No "Back to top" link — relevant for long mobile scroll (2978px page height)
Social assets images (LinkedIn frame, profile photo) — verify they scale properly without pixelation

IBM Experience Standards (Mobile)

Core content accessible on mobile — invitees can check their status on the go
FAQ accessible for self-service on mobile
Consider: is the social asset download flow mobile-friendly?

10 · Keyboard Focus State

Desktop 1440×900 · After pressing Tab once

SCREENSHOT 10 — KEYBOARD FOCUS

Visible: "2026 →" link has visible blue border focus outline (rectangular) · "2025 →" link unfocused · All other content visible · Decorative curves visible behind the focused element

Keyboard focus on "2026 →" year link — blue border visible

Focus Indicator Analysis

Focus indicator visible: rectangular blue outline on "2026 →" link
Focus color (blue) has sufficient contrast against white background
Focus ring dimensions adequate — visible at normal viewing distance
Style appears to be browser default (outline) — not a custom enhanced focus style
WCAG 2.2 requires minimum 3:1 contrast for focus indicator — estimate passes

Keyboard Navigation Gaps

No skip navigation link — Tab starts at nav, not main content
First Tab press should reach a skip link, not a content link
Need to audit full Tab order (59 focusable elements detected on page)
No keyboard traps detected
Focus visible on interactive element

WCAG 2.2 AA Assessment

2.4.7 Focus Visible: PASS — focus indicator present
2.4.1 Bypass Blocks: FAIL — no skip nav link
2.1.1 Keyboard: PASS (partial) — element reachable via Tab
2.4.6 Headings and Labels: needs full audit

Findings Summary Table

ID	Severity	Area	Issue	WCAG / Standard	Recommendation
F-001	Critical	Accessibility	No skip navigation link on page	WCAG 2.4.1	Add <a href="#main" class="skip-link">Skip to main content</a> as first focusable element
F-002	Critical	Semantic HTML	No h1 heading — "IBM Tech" is h2	WCAG 1.3.1 / IBM	Change page main heading to h1; use h2 for subsections
F-003	High	Accessibility	Icon-only buttons may lack aria-label	WCAG 4.1.2	Add aria-label to search, settings, expand menu buttons; verify in DOM
F-004	High	Accessibility	"2026 →" and "2025 →" link text not descriptive	WCAG 2.4.6	Add aria-label: "View IBM Tech 2026 invitees" and "View IBM Tech 2025 invitees"
F-005	High	Accessibility	FAQ accordion aria-expanded state unverified	WCAG 4.1.2	Confirm aria-expanded toggles true/false on click; verify id/aria-controls linkage
F-006	High	Accessibility	Search inputs lack visible labels	WCAG 1.3.1	Add visible label element (or at minimum, placeholder text that describes scope)
F-007	High	Performance	Content loading delay on tablet/mobile viewports (SPA rendering)	IBM Exp. Standards	Investigate lazy-loading or SSR; ensure spinner communicates loading state to AT
F-008	Medium	Visual Design	Icon sizes slightly inconsistent across criteria section	Carbon Guidelines	Standardize all criteria icons to 24px using Carbon icon tokens
F-009	Medium	Accessibility	Alt text on icons and images unverified	WCAG 1.1.1	Audit all <img> elements: decorative → alt=""; informative → descriptive alt text
F-010	Medium	Visual Design	Footer links lack visual grouping	IBM Design Lang.	Group related links (legal group, feedback group) with subtle separators or headings
F-011	Medium	Visual Design	Carbon component usage unconfirmed	Carbon / IBM	DOM inspection required; migrate to Carbon Accordion, Button, and Grid components
F-012	Low	UX	No "Back to top" link for long mobile scroll	UX Best Practice	Add floating back-to-top button visible after scrolling 500px
F-013	Low	UX	Social assets download CTA is a text link, not a button	Carbon / IBM	Use Carbon tertiary Button for "Download the frame" for clearer affordance
F-014	Low	Accessibility	Footer landmark has no aria-label	WCAG Best Practice	Add aria-label="Site footer" to <footer> element

Recommendations Roadmap

Phase 1 — Critical Fixes (Implement immediately, <1 day effort)

F-001: Add skip link <a href="#main-content" class="skip-link">Skip to main content</a> as first DOM child; style to be visible on focus only
F-002: Change page main heading from h2 to h1 in w3 Publisher CMS template

Phase 2 — High Priority (1–2 weeks)

F-003: Audit all icon-only buttons; add aria-label where missing
F-004: Add aria-label to year navigation links
F-005: Verify and fix FAQ accordion ARIA states in implementation
F-006: Add visible labels to search input fields
F-007: Investigate and fix mobile/tablet content loading delay

Phase 3 — Medium (1–3 months)

F-008: Standardize icon sizes across criteria section
F-009: Complete alt text audit for all images and icons
F-010: Improve footer link grouping and visual hierarchy
F-011: Migrate to Carbon Design System components where possible

Phase 4 — Enhancements (Ongoing)

Run IBM Equal Access Checker (axe-core based) against the live page
Test with VoiceOver (macOS) and JAWS for complete screen reader validation
Test at 200% zoom per WCAG 1.4.4
Test at 320px minimum viewport width
Consider migrating to Carbon React or Carbon Web Components for full design system alignment
Add "Back to top" button for mobile UX (F-012)
Change social assets CTA to Carbon tertiary Button (F-013)

IBM Universal Experiences Mapping

Stage	Status	Observations
Discover	Partial	Value prop clear in intro text; no prominent CTA to "learn more" or "apply"
Learn / Try	Medium	Criteria section is informative; FAQ covers key questions; no interactive demo
Use	Good	Social assets section helps invitees amplify their recognition; actionable and visual
Get Help	Medium	FAQ covers common questions; no live support or chatbot integration observed
Manage	N/A	This is an informational page; management flows (nominations) are offsite
Expand	N/A	Links to 2025 and 2026 invitees support exploration

Conclusion

The IBM Tech Recognition page is visually strong — clean IBM Plex typography, consistent IBM blue branding, and a clear logical content structure. The experience works well for its primary use case: informing eligible IBMers about the IBM Tech recognition program.

The two critical accessibility issues (missing skip nav + missing h1) are easily fixed with minor CMS configuration changes. The high-priority ARIA labeling issues require developer attention. Once these are addressed, the page will substantially meet WCAG 2.2 AA requirements.

Long-term, aligning to Carbon Design System components would improve maintainability, ensure design consistency across the IBMer Recognition site family, and provide built-in accessibility that removes the need for individual ARIA audits.