Updates after the first phase of the audits

src/open_inwoner/accounts/templates/registration/login.html

@@ -3,7 +3,9 @@
 
 
 {% block header_image %}
-    <img class="main-image" src="{{ hero_image_login }}" alt="Header image">
+<aside aria-hidden="true">
+    <img class="main-image" src="{{ hero_image_login }}" alt="Header afbeelding">
+</aside>
 {% endblock header_image %}
 
 

src/open_inwoner/components/templates/components/AnchorMenu/AnchorMenu.html

@@ -1,6 +1,6 @@
 {% load i18n icon_tags button_tags %}
 
-<aside class="anchor-menu {% if desktop %}anchor-menu--desktop{% else %}anchor-menu--mobile{% endif %}">
+<aside class="anchor-menu {% if desktop %}anchor-menu--desktop{% else %}anchor-menu--mobile{% endif %}" aria-label="{% trans "Secundaire paginanavigatie" %}">
     <ul class="anchor-menu__list">
         {% for anchor in anchors %}
             <li class="anchor-menu__list-item">

src/open_inwoner/components/templates/components/Button/Button.html

@@ -5,7 +5,7 @@
         class="{{ classes }}"
         href="{{href}}"
         title="{% firstof title text %}"
-        aria-describedby="{{ text }}"
+        aria-label="{% firstof title text %}"
         {% if href|startswith:"http" %}target="_blank"{% endif %}
     >
         {% if icon %}{% icon icon=icon outlined=icon_outlined %}{% endif %}
@@ -17,7 +17,7 @@
         type="{{type}}"
         name="{{ name }}"
         title="{% firstof title text %}"
-        aria-describedby="{{ text }}"
+        aria-label="{% firstof title text %}"
     >
         {% if icon %}{% icon icon=icon outlined=icon_outlined %}{% endif %}
         {% if not hide_text %}{{text}}{% endif %}

src/open_inwoner/components/templates/components/Card/DescriptionCard.html

@@ -3,11 +3,11 @@
 {% render_card grid=image %}
     {% if image %}
         <a href="{{ url }}" class="card__image-container">
-            <img class="card__image" src="{{ image|thumbnail_url:'card-image' }}" />
+            <img class="card__image" src="{{ image|thumbnail_url:'card-image' }}" alt="{{ image.default_alt_text }}" />
         </a>
         <div class="card__content">
     {% endif %}
-    <h3 class="h3">{% link url text=title %}</h3>
+    <h2 class="h2">{% link url text=title %}</h2>
     <p class="p">{{ description }}</p>
     {% if object.end_date %}
         <div class="card__tabled">

src/open_inwoner/components/templates/components/Card/RenderCard.html

@@ -10,13 +10,13 @@
 
     <div class="card__body{% if direction %} card__body--direction-{{ direction }}{% endif %}{% if grid %} card__body--grid{% endif %}">
         {% if title %}
-            <h4 class="h4">
+            <p class="h3">
                 {% if href %}
                     {% link href=href text=title %}
                 {% else %}
                     {{ title }}
                 {% endif %}
-            </h4>
+            </p>
         {% endif %}
         {{ contents }}
     </div>

src/open_inwoner/components/templates/components/Dashboard/Dashboard.html

@@ -1,6 +1,6 @@
-{% load icon_tags %}
+{% load i18n icon_tags %}
 
-<aside class="dashboard">
+<aside class="dashboard" aria-label="{% trans "Dashboard" %}">
     <ul class="dashboard__list">
         {% for metric in config.metrics %}
             <li class="dashboard__list-item">

src/open_inwoner/components/templates/components/Faq/Faq.html

@@ -1,6 +1,6 @@
-{% load link_tags render_tags %}
+{% load i18n link_tags render_tags %}
 
-<aside class="faq">
+<aside class="faq" aria-label="{% trans "Veelgestelde vragen" %}">
     {% if title %}<h2 class="h2">{{ title }}</h2>{% endif %}
 
     <ul class="faq__list">

src/open_inwoner/components/templates/components/File/File.html

@@ -1,14 +1,14 @@
 {% load i18n link_tags utils icon_tags form_tags dropdown_tags button_tags string_tags %}
 
-<aside class="file">
+<aside class="file" aria-label="{% trans "Bestand" %} {{ name }}">
     <div class="file__file">
     {% if is_image %}
         {% icon icon="image" outlined=True %}
     {% else %}
         {% icon icon="description" outlined=True %}
     {% endif %}
     <p class="p">
-        {% firstof name %}
+        {{ name }}
         {% if extension and size %}
             ({{extension}}, {{size|readable_size}})
         {% elif extension %}

src/open_inwoner/components/templates/components/File/FileList.html

@@ -1,11 +1,11 @@
 {% load i18n file_tags %}
 
-<nav class="file-list">
+<div class="file-list">
     {% if title %}
         {% if h1 %}
             <h1 class="h1 h1--bottom" id="files">{{ title }}</h1>
         {% else %}
-            <h4 class="h4" id="files">{{ title }}</h4>
+            <h3 class="h3" id="files">{{ title }}</h3>
         {% endif %}
     {% endif %}
     <ul class="file-list__list">
@@ -18,4 +18,4 @@ <h4 class="h4" id="files">{{ title }}</h4>
             <li><p class="p">{% trans "Er zijn nog geen bestanden geupload" %}</p></li>
         {% endfor %}
     </ul>
-</nav>
+</div>

src/open_inwoner/components/templates/components/Filter/Filter.html

@@ -1,7 +1,7 @@
-{% load filter_tags icon_tags form_tags %}
+{% load i18n filter_tags icon_tags form_tags %}
 
 <div>
-    <aside class="filter filter--open">
+    <aside class="filter filter--open" aria-label="{% trans "Filter" %}">
         <h4 class="h4 filter__title">
             {{ field.label }}
             {% icon icon="expand_more" %}

src/open_inwoner/components/templates/components/Footer/Footer.html

@@ -3,25 +3,25 @@
 {% get_solo "configurations.SiteConfiguration" as config %}
 
 <footer class='footer'>
-    {% logo src=config.logo.file|thumbnail_url:'logo' alt=""%}
+    {% logo src=config.logo.file|thumbnail_url:'logo' alt=config.logo.default_alt_text %}
 
-    <aside class="footer__visitor">
-        <h4 class="h4">{{footer_texts.footer_visiting_title}}</h4>
+    <div class="footer__visitor">
+        <h2 class="h2">{{footer_texts.footer_visiting_title}}</h2>
         <p class="p">
             {{footer_texts.footer_visiting_intro|linebreaksbr}}
         </p>
         {% button icon="arrow_forward" icon_position='before' transparent=True text=_("Bekijk op Google Maps") href=footer_texts.footer_visiting_map %}
-    </aside>
+    </div>
 
 
-    <aside class="footer__mail">
-        <h4 class="h4">{{footer_texts.footer_mailing_title}}</h4>
+    <div class="footer__mail">
+        <h2 class="h2">{{footer_texts.footer_mailing_title}}</h2>
         <p class="p">
             {{footer_texts.footer_mailing_intro|linebreaksbr}}
         </p>
-    </aside>
+    </div>
 
-    <nav class="footer__links">
+    <nav class="footer__links" aria-label="Footer navigatie">
         <ul class="footer__list">
             {% for flatpage in footer_texts.flatpages.all %}
                 <li class="footer__list-item">

src/open_inwoner/components/templates/components/Form/ChoiceRadio.html

@@ -1,6 +1,7 @@
 {% load l10n form_tags %}
 
 <label class="radio">
+    {% spaceless %}
     {% initial_match as checked %}
     <input
         class="radio__input"
@@ -11,4 +12,5 @@
         {% if choice.0 in data or checked %}checked="checked"{% endif %}
     />
     <label class="radio__label" for="id_{{ name }}_{{ index }}">{{ choice.1 }}</label>
+    {% endspaceless %}
 </label>

src/open_inwoner/components/templates/components/Form/FormActions.html

@@ -2,5 +2,5 @@
 <div class="form__actions {% if single %}form__actions--single{% endif %}">
     {% if secondary_text %}{% button href=secondary_href secondary=secondary text=secondary_text icon=secondary_icon icon_position=secondary_icon_position %}{% endif %}
     {% if secondary_name %}{% button name=secondary_name type="submit" secondary=secondary text=secondary_text icon=secondary_icon icon_position=secondary_icon_position %}{% endif %}
-    {% button text=primary_text icon=primary_icon primary=primary type="submit" icon_position="after" transparent=transparent %}
+    {% button text=primary_text icon=primary_icon primary=primary type="submit" icon_position="after" hide_text=hide_primary_text transparent=transparent %}
 </div>

src/open_inwoner/components/templates/components/Form/Input.html

@@ -1,9 +1,11 @@
 {% load form_tags icon_tags %}
 
 <div class="form__control {{ extra_classes|default:"" }}">
-    <label class="label">
+    <label class="label {% if no_label %}label--gapless{% endif %}">
         {% if icon %}{% icon icon outlined=True %}{% endif %}
-        {% if not no_label %}{{ field.label }}{% endif %}
+        <label class="label__label {% if no_label %}label__label--hidden{% endif %}">
+            {{ field.label }}
+        </label>
         {{ field|addclass:"input" }}
         {% if field.help_text and not no_help %}
             <p class="p">{{ field.help_text }}</p>

src/open_inwoner/components/templates/components/Form/MultipleRadio.html

@@ -1,7 +1,8 @@
 {% load form_tags utils %}
 
 <div class="form__control">
-    <div class="form__stack">
+    <fieldset class="form__stack">
+        <legend>{{ field.label }}</legend>
         {% if field.field.choices %}
             {% for choice in field.field.choices %}
                 {% choice_radio choice=choice name=field.name data=field.value index=forloop.counter initial=field.form.initial %}
@@ -11,7 +12,7 @@
                 {% choice_radio choice=choice name=field.name data=field.value index=forloop.counter initial=field.form.initial %}
             {% endfor %}
         {% endif %}
-    </div>
+    </fieldset>
 
     {% if field.help_text %}
         <p class="p">{{ field.help_text }}</p>

src/open_inwoner/components/templates/components/Header/AccessibilityHeader.html

@@ -1,7 +1,7 @@
 {% load i18n link_tags %}
 
-<header class="accessibility-header">
-    <ul class="accessibility-header__list">
+<div class="accessibility-header">
+    <ul class="accessibility-header__list" role="complementary" aria-label="{% trans "Toegangkelijkheids help" %}">
         <li class="accessibility-header__list-item">
             {% trans "Lees voor" as link_text %}
             {% link href="#" icon="hearing" text=link_text extra_classes="accessibility--read" %}
@@ -32,5 +32,5 @@
         </li>
     </ul>
     <div class="help-modal" data-help-title="{% trans 'Uitleg pagina' %}" data-help-text="{{ help_text }}" data-help-close="{% trans 'Sluiten' %}"></div>
-</header>
+</div>
 

src/open_inwoner/components/templates/components/Header/Breadcrumbs.html

@@ -1,6 +1,6 @@
-{% load icon_tags %}
+{% load i18n icon_tags %}
 
-<nav class="breadcrumbs">
+<nav class="breadcrumbs" aria-label="{% trans "breadcrumbs" %}">
     <ul class="breadcrumbs__list">
         {% for url, name in breadcrumbs %}
             <li class="breadcrumbs__list-item">

src/open_inwoner/components/templates/components/Header/Header.html

@@ -3,16 +3,16 @@
 {% get_solo "configurations.SiteConfiguration" as config %}
 
 {% accessibility_header request=request %}
-<header class="header">
+<header class="header" aria-label="Navigatie header">
     <div class="header__container">
-        {% logo src=config.logo.file|thumbnail_url:'logo' alt="" %}
+        {% logo src=config.logo.file|thumbnail_url:'logo' alt=config.logo.default_alt_text %}
 
         <div class="header__menu">
             <div class="header__menu-icon">
                 {% icon icon="menu" %}
             </div>
             <div class="header__submenu">
-                <nav class="header__actions">
+                <nav class="header__actions" aria-label="Zoek navigatie mobiel">
                     <div class="header__text-actions">
                         <p class="p">
                             {% trans "Welkom" %}
@@ -40,15 +40,15 @@
                     {% url 'search:search' as search_url %}
                     {% render_form form=search_form method="GET" form_action=search_url inline=True spaceless=True %}
                         {% input search_form.query no_label=True %}
-                        {% form_actions primary_icon="search" %}
+                        {% form_actions primary_icon="search" primary_text=_("Zoeken") hide_primary_text=True %}
                     {% endrender_form %}
                 </nav>
 
                 {% primary_navigation categories=categories request=request has_general_faq_questions=has_general_faq_questions %}
             </div>
         </div>
 
-        <nav class="header__actions">
+        <nav class="header__actions" aria-label="Zoek navigatie desktop">
             <div class="header__text-actions">
                 <p class="p">
                     {% trans "Welkom" %}
@@ -76,7 +76,7 @@
             {% url 'search:search' as search_url %}
             {% render_form form=search_form method="GET" form_action=search_url inline=True spaceless=True %}
                 {% input search_form.query no_label=True %}
-                {% form_actions primary_icon="search" %}
+                {% form_actions primary_icon="search" primary_text=_("Zoeken") hide_primary_text=True %}
             {% endrender_form %}
         </nav>
 

src/open_inwoner/components/templates/components/Header/PrimaryNavigation.html

@@ -1,6 +1,6 @@
 {% load i18n icon_tags link_tags string_tags solo_tags %}
 
-<nav class="primary-navigation">
+<nav class="primary-navigation" aria-label="Hoofd navigatie">
     <ul class="primary-navigation__list">
         <li class="primary-navigation__list-item">
             {% trans "Home" as link_text %}

src/open_inwoner/components/templates/components/Icon/Icon.html

@@ -1,7 +1,7 @@
 {% if icon == "file-pdf" %}
-    <i class="fa-regular fa-file-pdf"></i>
+    <i aria-hidden="true" class="fa-regular fa-file-pdf"></i>
 {% elif social %}
-    <i class="fa-brands fa-{{ icon }}"></i>
+    <i aria-hidden="true" class="fa-brands fa-{{ icon }}"></i>
 {% else %}
-    <span class="{% if outlined %}material-icons-outlined{% else %}material-icons{% endif %} {{ extra_classes }}">{{ icon }}</span>
+    <span aria-hidden="true" class="{% if outlined %}material-icons-outlined{% else %}material-icons{% endif %} {{ extra_classes }}">{{ icon }}</span>
 {% endif %}

src/open_inwoner/components/templates/components/Map/Map.html

@@ -1,8 +1,8 @@
-{% load l10n %}
+{% load l10n i18n %}
 
-<aside class="{{ classes }}"{% if id %} id="{{ id }}"{% endif %}>
+<aside aria-hidden="true" class="{{ classes }}"{% if id %} id="{{ id }}"{% endif %} aria-label="{% trans "Locatie kaart" %}">
     {% if title %}
-        <h4 class="h4">{{ title }}</h4>
+        <h3 class="h3">{{ title }}</h3>
     {% endif %}
 
     <div class="map__leaflet" data-lat="{{ lat|unlocalize }}" data-lng="{{ lng|unlocalize }}" data-zoom="{{ zoom }}"{% if geojson_feature_collection %} data-geojson-feature-collection="{{ geojson_feature_collection|force_escape }}"{% endif %}></div>

src/open_inwoner/components/templates/components/Messages/Message.html

@@ -1,7 +1,7 @@
 {% load i18n link_tags %}
 
 
-<aside class="message{% if ours %} message--ours{% else %} message--theirs{% endif %}" id="message-{{ message.pk }}" title="{% trans 'Bericht van:' %} {{ message.sender }}">
+<aside class="message{% if ours %} message--ours{% else %} message--theirs{% endif %}" id="message-{{ message.pk }}" title="{% trans 'Bericht van:' %} {{ message.sender }}" aria-label="{% trans "Bericht" %}">
     <div class="message__body">
         {% if file %}
             {% url "accounts:inbox_download" uuid=message.uuid as download_url %}

src/open_inwoner/components/templates/components/Product/finder.html

@@ -1,12 +1,12 @@
 {% load i18n grid_tags form_tags button_tags %}
 
 {% render_column span=6 compact=True extra_classes="product-finder" %}
-    <h1 class="h1">{% trans "Productzoeker" %}</h1>
+    <h2 class="h2">{% trans "Productzoeker" %}</h2>
     <p class="p">Met een paar simpele vragen ziet u welke producten passen bij uw situatie</p>
 
     <div class="product-finder__form">
         {% if not conditions_done %}
-            <h4 class="h4">{{ condition.question }}</h4>
+            <h3 class="h3">{{ condition.question }}</h3>
             {% if condition.rule %}
             <p class="p p--compact">{{ condition.rule }}</p>
             {% endif %}

src/open_inwoner/components/templates/components/Step/StepIndicator.html

@@ -1,7 +1,7 @@
-{% load link_tags %}
+{% load link_tags i18n %}
 
 {% spaceless %}
-    <aside class="step-indicator">
+    <aside class="step-indicator" aria-label="{% trans "Stappen indicator" %}">
         <ol class="step-indicator__list">
             {% for step in steps %}
                 <li class="step-indicator__list-item{% if step.is_current %} step-indicator__list-item--active{% elif step.is_completed %} step-indicator__list-item--completed{% endif %} P" data-step={{ step.step }}>

src/open_inwoner/components/templates/components/Tag/Tag.html

@@ -1,4 +1,6 @@
-<aside class="tag-list">
+{% load i18n %}
+
+<aside class="tag-list" aria-label="{% trans "Tag lijst" %}">
     <ul class="tag-list__list">
         {% for tag in tags %}
             <li class="tag-list__list-item">

src/open_inwoner/components/templates/components/Typography/Link.html

@@ -16,7 +16,7 @@
         data-use-aria="true"
     {% endif %}
     {% if toggle_exclusive %}data-toggle-exclusive="{{ toggle_exclusive }}"{% endif %}
-    aria-describedby="{{ text }}"
+    aria-label="{{ text }}"
     title="{% firstof title text %}"
 >
     {% if src %}

src/open_inwoner/components/templates/components/status/status_list.html

@@ -1,6 +1,6 @@
-{% load icon_tags %}
+{% load icon_tags i18n %}
 
-<aside class="status-list">
+<aside class="status-list" aria-label="{% trans "Status lijst" %}">
     <ul class="status-list__list">
         {% for object in statuses %}
         <li class="status-list__list-item">

src/open_inwoner/components/templatetags/form_tags.py

@@ -336,6 +336,7 @@ def form_actions(primary_text="", primary_icon=None, secondary=True, **kwargs):
         - primary: bool | if false, hide the primary button.
         - primary_text: string | The text for the primary button.
         - primary_icon: string | The icon for the primary button.
+        - hide_primary_text: boolean | Hide the primary text.
         - single: bool | if it should be single.
         - secondary: bool | if the secondary button should be styled like a secondary button or not.
         - secondary_href: string | The action when the secondary button is pressed.