Semantic HTML

Using HTML elements according to their intended meaning rather than just visual appearance, improving accessibility and SEO. Semantic elements like header, nav, main, and article convey document structure to assistive technologies. Framer generates semantic HTML from visual designs automatically.

Related terms

Related terms

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 navigation">keyboard navigation support.

Alt Text

Descriptive text added to images that screen readers announce to visually impaired users and search engines use to understand image content. Good alt text describes the image's content and purpose, not just its appearance—'Team celebrating product launch' is better than 'people in office.' Framer makes adding alt text simple through the image properties panel.

ARIA Label

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-labelledby to reference existing text on the page.

Color Contrast

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.

Focus State

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

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.

Keyboard Navigation

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.

Screen Reader

Assistive software that converts on-screen content into speech or braille for people with visual impairments. Good screen-reader support requires html">semantic HTML, proper heading structure, and clear labels. Testing with screen readers helps catch accessibility issues early.

Tab Index

The tabindex attribute controls whether an element can receive keyboard focus and in what order. Use 0 to include an element in natural tab order and -1 for programmatic focus only. Avoid positive values because they create confusing navigation order.

WCAG

Web Content Accessibility Guidelines—international standards defining how to make web content accessible to people with disabilities. WCAG compliance is increasingly required legally and expands your potential audience. Aim for at least WCAG 2.1 AA conformance.

Web Accessibility

Designing and developing websites usable by people with various disabilities including visual, auditory, motor, and cognitive. Accessibility is both ethically important and often legally required. Build accessibility in from the start rather than retrofitting.