Frontmatter

`acknowledgements`

(string) Path to an Acknowledgements page. The token ACKNOWLEDGEMENTS in the footer variable is replaced with this value. The URL gets properly adapted to the deployment environment.

Example

The code:

acknowledgements: /media/av/acknowledgements/
footer: >
  <p>Footer content. ACKNOWLEDGEMENTS.</p>

produces on the live website:

<p>Footer content. <a href="/WAI/media/av/acknowledgements/">Acknowledgements</a>.</p>

`class`

(string) Specifies a class on the body element.
(Note that the page automatically creates a class with the name of the current page on the body element.)

Common value:

tight-page: Uses less space above h2 headings, mainly used on for overview-ish pages.

`contributors`

(map array) A list of people who contributed to the translation.

Every (translation) contributor is specified by their name in a separate line, like:

In addition, links can be added (note: there are strict rules of which pages to link to):

Following keys are available:

name *: (string) Translator name.
link: (string) Link to the translator personal page.
org: (string) Name of the translator organization.
orglink: (string) Link to the organization website.

`custom_changelog`

(string) Path to a custom Changelog page. If not set, <ref>/changelog/ is used, if such page exists.

Examples

Example 1:

ref: /media/av/planning/
custom_changelog: /media/av/changelog/

makes the “Latest changes” link point to /media/av/changelog/ page.

Example 2:

ref: /media/av/planning/
# No changelog variable

makes the “Latest changes” link point to /media/av/planning/changelog/, if such page exists.

`date`

(string) The publication date of a news post. Format is based on ISO 8601 : YYYY-MM-DD.

`description`

Most of the SEO/social media metadata is provided by the Jekyll SEO Tag plugin . We provide sensible metadata by default. However, this line should be added to the frontmatter to customize social media preview.

(string) Provides a short description of what the page is all about.

`feedbackmail`

(string) Customs the e-mail address used in the “Help improve this page” box (in text and buttons). Fallback value is wai@w3.org.

`first_published`

(string) The date that the page was first published. Format is plain text.

`footer` *

(string) Footer of the document, written in HTML.

You can use > or | to support multiline:

| keeps the newlines
> replaces newlines with a space character.

Example

footer: >
  <p>First published 10 October 2023.<br />
    History: ...</p>
  <p><strong>Editors:</strong> Name and Name. Contributors: Name, Name. ACKNOWLEDGEMENTS lists contributors. Previous editors: Name; previous contributors: Name.</p>
  <p>Previously developed  as part of the <a href="@@">Acme Project</a> funded by the Sponsor Org. Updated as part of the <a href="@@">Acme Project</a> funded by the Sponsor Org.</p>

`footnotestitle`

(string) Customs heading of the Footnotes list box. Fallback value is Footnotes.

`github`

(map) GitHub related information. May be used to generate the “Fork and edit on GitHub” and “New GitHub issue” links in the “Help improve this page” box.

repository, branch and path are not required for pages developed in the wai-website repository.

Following keys are available:

label: (string) GitHub label to apply when a new issue is created from this page, prepended with wai-.
repository: (string) GitHub repository. If not set, repository value in config.yml is used.
branch: (string) Branch of the document. If not set, branch value in config.yml is used.
path: (string) Path to the document. Programmatically inferred in wai-website repository.

For translations, the language tag is put between the filename and the extension. Examples:

index.md ➡️ index.de.md
this-is-a-longer-name.md ➡️ this-is-a-longer-name.el.md

`image`

(string) A short social media sharing image. This image might also be re-used when linking to a page from other sections of the website, for example as a home page teaser¹.

`inline_css`

(string) Adds custom CSS to the document. Use | to support multiline.

`lang` *

(string) The language tag of the current document.

Where possible, use a single language subtag from IANA Language Subtag Registry .

We usually only add region/script subtags when the language is significantly differently interpreted in different regions or when there is a reasonable expectation to get diverging translations. More info on Choosing a Language Tag.

`last_reviewed`

(string) The date that the page was last checked for accuracy. Format is based on ISO 8601 : YYYY-MM-DD.

`last_updated` *

(string) The date that the page was last substantively updated. Format is based on ISO 8601 : YYYY-MM-DD.

`layout`

(string) Applies a custom layout to the page. Generally fallbacks to default.

Frequently used values:

act_implementation
home
minimal
overview
standalone_resource
sidenav

`license`

(string) Defines a license for the content. If not set, the W3C Document License is assumed.

Possible value:

creative-commons: outputs a paragraph in the footer area that links to the Creative Commons license and sets the metadata of the page appropriately.

Example

The code:

license: creative-commons
footer: >
  <p>Footer content.</p>

produces:

<p>Footer content.</p>
<p><svg focusable="false" aria-hidden="true" class="icon-creative-commons "><use xlink:href="/assets/images/icons.svg#icon-creative-commons"></use></svg> This work is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by/4.0/">Creative Commons Attribution 4.0 International License</a>.</p>

`metafooter`

(boolean) Use frontmatter variables to build the page footer, instead of the the footer value. Only Tutorials pages use the metafooter for now.

Example

metafooter: true
editors:
- Eric Eggert: "https://www.w3.org/People/yatil/"
- Shadi Abou-Zahra: "https://www.w3.org/People/shadi/"
update_editors:
- Brian Elton
contributing_participants:
- see <a href="/WAI/tutorials/acknowledgements/">Acknowledgements</a>
support: Developed by the Education and Outreach Working Group (<a href="https://www.w3.org/groups/wg/eowg">EOWG</a>). Developed with support from the <a href="https://www.w3.org/WAI/ACT/">WAI-ACT project</a>, co-funded by the <strong>European Commission <abbr title="Information Society Technologies">IST</abbr> Programme</strong>.

If metafooter is set to true, the footer will be built using the following variables:

`editors`

(string array) list of editors.

`update_editors`

(string array) list of update editors.

`contributing_participants`

(string array) Contributing participants. A link to an “Acknowledgements” page is often used.

`support`

(array) Additional information about participants, sponsoring, funding projects, etc.

`navigation`

(map) Specifies next and previous pages (by their ref reference), so that previous/next arrows can be shown.

Following keys are available:

previous: (string) ref of the previous page
next: (string) ref of the next page

`nav_title` * 🧪

(string) A short title that we will use as the navigation text (in the left navigation) in the future. It should be short and succinct.

`parent`

(string) Used in header and secondarynav.

`permalink` *

(string) Output path of a page. The URL gets properly adapted to the deployment environment.

Note: Collection pages generally have a default permalink, set in the _config.yml configuration file.

For translations, add the language tag to the end of the permalink, without a closing slash (/), like /path/to/page/es

`ref` *

(string) Unique identifier (“reference”) of a page. Must match the permalink of the English version of the page. Is used (among other things) to identify the set of translations of a page.

`resource`

(map) Specifies that the current page is part of a multi-page resource.

Usage:

On resource subpages, the resource homepage is displayed underneath the h1 element.
Example: Writing for Web Accessibility.
In All WAI translations page, translations are grouped by resource.

Following keys are available:

ref *: (string) ref of the resource homepage.
title: (string) Resource title to display. Only use this key on the resource homepage.

`title` *

(string) A title that describes the page. Used as an h1 and in the HTML title tag.

Examples

title: Accessibility Fundamentals

or:

title: "Web Accessibility Perspectives: Keyboard Navigation"

Note: when using colons (:) in the values of the frontmatter, using straight double (") or single (') quotes is required.

`title_html`

(string) If you need to use HTML in the title (for example to highlight a word, use code markup or force a line break), you can use this line to provide that HTML variant.

The title value will still be used in the HTML title, or when referring to the page using WAI Markdown links (in English).

Examples

title: The br Element
title_html: "The <code>&lt;br></code> element"

or:

title: "Web Accessibility Perspectives: Keyboard Navigation"
title_html: "Web Accessibility Perspectives:<br>Keyboard Navigation"

`title_icon`

(string) A path to an icon image. If set, an icon is displayed on the left of the h1 heading.

`title_image`

(string) A path to an image. If set, an image is displayed on the right of the h1 heading.
If the image contains text, it needs to be adjusted to the language of the document.

`tlang`

(string) The language tag of the current translation sitemap.

`translation`

(map) Key information about a translation.

All translations must have a translation variable.

Following keys are available:

last_updated *: (string) The date the translation was last updated. Format is based on ISO 8601 : YYYY-MM-DD.
outdated: (boolean) When set to true, marks the translation as outdated.
draft: (boolean) When set to true, marks the translation as draft.

`translators`

(map array) A list of the people who created the translation.

All translation pages should have a translators list.

Every translator is specified by their name in a separate line, like:

In addition, links can be added (note: there are strict rules of which pages to link to):

Following keys are available:

name * (string): Translator name.
link (string): Link to the translator personal page.
org (string): Name of the translator organization.
orglink (string): Link to the organization website.

Not yet implemented. ↩

acknowledgements

class

contributors

custom_changelog

date

description

feedbackmail

first_published

footer *

footnotestitle

github

image

inline_css

lang *

last_reviewed

last_updated *

layout

license

metafooter

editors

update_editors

contributing_participants

support

navigation

nav_title * 🧪

parent

permalink *

ref *

resource

title *

title_html

title_icon

title_image

tlang

translation

translators

`acknowledgements`

`class`

`contributors`

`custom_changelog`

`date`

`description`

`feedbackmail`

`first_published`

`footer` *

`footnotestitle`

`github`

`image`

`inline_css`

`lang` *

`last_reviewed`

`last_updated` *

`layout`

`license`

`metafooter`

`editors`

`update_editors`

`contributing_participants`

`support`

`navigation`

`nav_title` * 🧪

`parent`

`permalink` *

`ref` *

`resource`

`title` *

`title_html`

`title_icon`

`title_image`

`tlang`

`translation`

`translators`