The <link> Element
As defined in the HTML Living Standard, the <link> element defines a relationship between the current document and an external resource. It is a void element and must be placed within the <head>.
<link rel="stylesheet" href="styles.css">
<link rel="icon" href="favicon.ico">
<link rel="canonical" href="https://example.com/page">The <link> tag is essential for loading the styles and metadata that make a page functional and accessible.
Accessibility Impact: Stylesheets & Performance
While the <link> tag itself is invisible, the resources it loads are critical for accessibility.
WCAG Requirement: Contrast & Visuals
Success Criterion 1.4.3 (Level AA): Contrast (Minimum).
If a <link rel="stylesheet"> fails to load, the page reverts to browser defaults. While the content remains accessible, the visual hierarchy and contrast ratios may be compromised. Ensuring your critical CSS is linked correctly is the first step in meeting visual accessibility standards.
Key Attributes for Accessibility
rel: Defines the relationship.rel="stylesheet"is the most common, butrel="preload"can be used to improve performance for critical assets, reducing layout shift (CLS) which benefits users with cognitive disabilities.href: The absolute or relative path to the resource. Broken links here can lead to "unstyled" pages that are difficult to navigate.media: Allows you to load stylesheets only for specific media types (e.g.,media="print"), ensuring that print-accessible versions of the page are available.
A11y Tip: Preloading Critical Assets
Using <link rel="preload" as="style"> for your main design system CSS prevents the "Flash of Unstyled Content" (FOUC). This provides a more stable and predictable experience for users who rely on consistent visual cues.