Accessibility & Performance

Make your portfolio accessible to everyone and optimize for maximum performance — ARIA, keyboard navigation, and Core Web Vitals.

50 min•By Priygop Team•Last updated: Feb 2026

Accessibility Essentials

Alt Text: Descriptive for informational images ('Chart showing 50% revenue growth'), empty alt='' for decorative images (backgrounds, dividers). Screen readers skip empty alt entirely
ARIA Labels: Use aria-label for elements without visible text — <a href='https://github.com/you' aria-label='GitHub profile'><svg>...</svg></a>. Essential for icon-only links and buttons
Keyboard Navigation: All interactive elements must be keyboard accessible — Tab to navigate, Enter/Space to activate. Use tabindex='0' to make custom elements focusable, never tabindex > 0
Focus Management: Visible focus indicators on all interactive elements — :focus-visible for keyboard-only focus rings. Never use outline: none without a replacement. Test by tabbing through entire page
Heading Hierarchy: h1 → h2 → h3 in order, never skip levels. Screen reader users navigate by headings (like a table of contents). Each section should start with h2, subsections with h3
Color Contrast: 4.5:1 ratio for normal text, 3:1 for large text (18px+ or 14px+ bold). Use WebAIM Contrast Checker. Never convey information by color alone — add icons, patterns, or text labels

Resource Hints: <link rel='preconnect' href='https://fonts.googleapis.com'> — early DNS+TCP+TLS connection. <link rel='preload' as='image' href='hero.jpg'> — fetch critical resources immediately
Script Loading: <script defer src='app.js'></script> — downloads during parsing, executes after DOM ready. defer for most scripts, async for independent scripts (analytics). Place at end of <body> as fallback
Font Loading: <link rel='preload' as='font' type='font/woff2' href='font.woff2' crossorigin> + font-display: swap in CSS — text visible immediately with fallback font, swaps when custom font loads
Image Optimization: Use WebP/AVIF formats (50-80% smaller than JPEG). Specify width/height on all images. Use srcset for responsive images. fetchpriority='high' on hero image for faster LCP
Structured Data: <script type='application/ld+json'>{'@context':'https://schema.org','@type':'Person','name':'Your Name',...}</script> — rich search results with your portfolio info in Google
HTML Validation: Use W3C Markup Validator to catch errors — unclosed tags, missing quotes, invalid nesting. Valid HTML renders consistently across browsers and is more accessible