Skip to main content
Edit page
Print whole chapter
Previous page
Next page

Accessibility

Accessibility in the NATURE theme (version 2.5.0 and later)

With version 2.5.0 the NATURE theme was thoroughly revised with regard to accessibility and switched to CSS variables (Bulma 1.x). To use these features, a manual intermediate step is necessary when updating from an older version (< 2.5.0) to a newer version (≥ 2.5.0). ➡️ Guide: Update to CSS variables

1. Header icons for contrast mode and font size

Version 2.6.0 adds controls to the header to:

  • toggle contrast mode (high contrast)
  • adjust the font size (links to the accessibility statement by default)

Settings

  1. Edit the website root in the site structure.
  2. Under WCAG settings (Web Content Accessibility Guidelines) you find two checkboxes:
    • “Allow switching to high contrast mode”
    • “Allow displaying the icon for changing the font size” These options are active by default in a fresh installation.

If you installed the theme from scratch

If you install the NATURE theme from version 2.6.0 and import the demo, the icons are already in the header.

If you have an existing installation

  1. Create an article
    • Under Articles, create a new article, e.g. “02 contrast and size” under Nature Theme Elemente -> 01_Header.
    • In the article settings, select the Theme Helper Tag NATURE01/02 under Template settings.

  1. Add content
    • Create a text element in the article with the following content:
      {{comp::contrast}} {{comp::size::barrierefreiheit.html#fontSize}}
    • Add the CSS class wcag.

  1. Including it in the template
    • The article with the Theme Helper Tag NATURE01/02 is included automatically via the navigation template.
    • If you have customized your own mod_navigation_nature.html5, add the insert tag there manually.
<div id="navbarMain" class="navbar-menu is-primary">
    <?= $this->items ?>
    {{theme::content::NATURE01/02}}
</div>

2. New accessible templates (version 2.5.0 and later)

To avoid redundant links (e.g. image, headline and button all linked), it is enough to link only the button. This improves keyboard navigation.

Adapted templates are available for various content elements such as teaser box, content box, feature element etc. These templates have the suffix _bf (German “barrierefrei”, accessible).

3. General accessibility tips

When creating content, pay attention to the following:

  • Provide alternative texts (alt tags) for images
  • Use meaningful link texts (not just “click here”)
  • Mind the contrast (text color/background color)
  • Use headings in a correct hierarchy
  • Use tables only for tabular data (not for layout)
  • Give forms label elements

4. Tools for testing accessibility