Accessibility

Date & Author is a line of text with an optional link. It follows no single WAI-ARIA pattern and meets WCAG 2.1 AA through plain semantics: the date is a machine-readable <time>, the author is a real link, and the separator between them stays out of the accessibility tree, so a screen reader hears the date and the author as two separate items.

For designers

• The date, the separator and the author must keep a contrast of at least 4.5:1 against every surface they sit on. The subtle foreground tokens are chosen for that. Source: WCAG 1.4.3 Contrast (Minimum).
• The author link is told apart from the date by its underline as well as its colour. Source: WCAG 1.4.1 Use of Color.

For developers

• Wrap the date in <time datetime="…"> with an ISO 8601 value, such as 2026-01-22, so machines read the date regardless of how it’s formatted for display.
• Use a real <a href="…"> for the author, never a <span> or <div> with a click handler. It is the component’s only tab stop and follows the reading order after the headline. Source: WCAG 2.1.1 Keyboard.
• A link name such as “View all articles by Name Surname” is clearer out of context than the bare name. If you set one with aria-label, keep the visible name in it. Source: WCAG 2.5.3 Label in Name.
• Don’t add a separator in the markup. The CSS draws it with empty alternative text, so it isn’t read out as “vertical bar”.
• Expose the author and publication date in the page’s structured data (schema.org Article) as well, since the component’s main goal is SEO.