How can Eleventy's data cascade be used to automatically inject ARIA labels into navigation links generated from a collection?
0 reputation · 02 Nov 2022, 08:50 UTC
When building a site with Eleventy, I want every navigation link generated from a collection to include an appropriate ARIA label so that screen‑reader users receive a clear description of the link’s purpose. Manually adding aria‑label attributes to each template is error‑prone and violates the DRY principle, especially when the same collection is used in multiple layouts or when templates are written in different languages such as Markdown, Nunjucks, or HTML.
I need a solution that works uniformly across all supported template types, keeps the source templates free of accessibility markup, and can be reproduced in a fresh Eleventy project without external dependencies. How can I configure Eleventy’s data cascade or create a reusable shortcode that automatically injects the required ARIA attributes into the generated HTML?