Did some work on accesibility #298
Conversation
| @@ -3,7 +3,9 @@ | |||
|
|
|||
|
|
|||
| {% block header_image %} | |||
| <aside aria-label="{% trans "Header afbeelding" %}"> | |||
| <img class="main-image" src="{{ hero_image_login }}" alt="Header image"> | |||
There was a problem hiding this comment.
Can we add a proper alt label which describes the contents of the image?
| @@ -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 "Zijmenu mobiel" %}"> | |||
There was a problem hiding this comment.
I think setting a nav tag for this implicitly sets a navigation role, If a label is used, the position is not relevant for the assistive technology so a label can better describe the menu's contents like "primary navigation"?
There was a problem hiding this comment.
User agents, such as screen readers targeting disabled users, can use this element to determine whether to omit the initial rendering of navigation-only content.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/nav
There was a problem hiding this comment.
renamed to "Secundaire navigatie", kept as is with aria-label
src/open_inwoner/components/templates/components/Button/Button.html
Outdated
Show resolved
Hide resolved
| @@ -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> | |||
There was a problem hiding this comment.
I think nesting labels may confuse assistive technology, can we get rid of the inner label?
| @@ -3,7 +3,9 @@ | |||
|
|
|||
|
|
|||
| {% block header_image %} | |||
| <aside aria-label="{% trans "Header afbeelding" %}"> | |||
| <img class="main-image" src="{{ hero_image_login }}" alt="Header image"> | |||
There was a problem hiding this comment.
Can add a proper alt text here describing the content of the image?
The alt attribute holds a text description of the image, which isn't mandatory but is incredibly useful for accessibility — screen readers read this description out to their users so they know what the image means. Alt text is also displayed on the page if the image can't be loaded for some reason: for example, network errors, content blocking, or linkrot.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img
src/open_inwoner/components/templates/components/Button/Button.html
Outdated
Show resolved
Hide resolved
|
Will be bypassing the other comments and proper review, sorry! Wanted to get the changes on test and staging to ensure our auditor doesn't flag accessibility issues we've already resolved. |
No description provided.