Accessibility
The practice of designing websites that can be used by everyone, including people with visual, auditory, motor, or cognitive disabilities. Beyond being ethically important, accessibility improves SEO, expands your audience, and is legally required in many jurisdictions. Key practices include proper heading structure, alt text for images, sufficient color contrast, and navigationkeyboard navigation support.
ARIA Label
Accessibility
An HTML attribute that provides accessible names for elements that lack visible text labels, helping screen readers describe interactive elements. These are essential for icon buttons, decorative links, and complex widgets where the visual context isn’t available to assistive technology. Use aria-label when there’s no visible text, and aria-labelled by to reference existing text on the page. See Improving Accessibility with ARIA Labels. See Optimizing images, icons & interactive elements.
Color Contrast
Accessibility
The difference in luminance between foreground and background colors, critical for text readability and accessibility. WCAG guidelines require minimum contrast ratios of 4.5:1 for normal text and 3:1 for large text. Use contrast checking tools to ensure your color combinations are accessible to users with visual impairments. See Understanding contrast ratio.
Focus State
Accessibility
The visual appearance of an interactive element when it receives keyboard focus, which is critical for accessibility. Focus states must remain clearly visible; do not remove them without providing an equally visible replacement. A strong focus style improves usability for keyboard and assistive-technology users.
Heading Hierarchy
Accessibility
The structured use of heading levels (H1-H6) to organize content and communicate importance to users and search engines. Proper heading hierarchy improves accessibility, SEO, and content scanability. Use only one H1 per page and don't skip levels for visual styling. See Text styles and semantic tags.
HTML
General
HyperText Markup Language—the standard code that structures web content using tags that define headings, paragraphs, links, and other elements. While Framer generates HTML automatically, understanding its structure helps with SEO, accessibility, and debugging. Semantic HTML using proper tags like header, nav, and main improves accessibility and search rankings.
Keyboard Navigation
Accessibility
The ability to navigate and interact with a website using only keyboard controls, essential for accessibility. Test tab order, focus visibility, and keyboard-activated interactions to ensure full functionality. Many users rely on keyboard navigation due to motor disabilities or preference.