Headings and forms accessibility improvements #458

shyusu4 · 2024-02-05T14:02:13Z

This PR addresses accessibility issues related to heading levels and forms:

Fixed instances (in hero, headline, and icon-link blocks) where headings were used consecutively after one another.
Changed menu_get_started to use an h2
Decorative shapes overlap section subheadings #457
Sign up form styling #459
Currently screen reader announces sign up forms on the site with "Enter your email address" repeated 3 times. Fixed by changing base_form to use aria-label="Email" instead of <label>
Changes the use of fieldset in search-form to a div (fieldset is used to group multiple form fields together, but there's only one here)

Screenshots

before	after

Scotchester · 2024-02-06T14:31:38Z

Fixed instances (in hero, headline, and icon-link blocks) where headings were used consecutively after one another.

I looked for an issue in the audit spreadsheet that this addresses but couldn't easily find one. Could you point it out for me?

I'm a bit concerned about the addition of hgroup elements. They're probably harmless in the short term, but according to MDN, they have been removed from the HTML spec and are discouraged from being used. If a wrapper is helpful for applying the role="group" aria-roledescription="heading group" attributes, a div is probably best in this case.

Morsey187

This looks great, I haven't looked so much into the use of aria tags and hgroup as I noticed Scot's comment and certain things were discussed already on Zoom so I think Thibaud is better placed to review that aspect.

Instead I've checked out the branch and tested locally, the SCSS looks fine to me I've just left some nickpicks/suggestions around text overlapping.

Morsey187 · 2024-02-06T15:43:27Z

wagtailio/project_styleguide/templates/patterns/components/hero/hero.html

-            {% if value.sub_heading or value.subheading %}
-                <h2 class="hero__subheading intro-big">{% firstof value.sub_heading value.subheading %}</h2>
-            {% endif %}
+                {% if value.sub_heading or value.subheading %}


Nickpick: Not related to your code at all, but value here has been assigned a page instance though the hero template tag, unfortunately the FeatureIndexPage has a field defined as subheading, instead of sub_heading which is used else where.

Modifying subheading to sub_heading would be a nice way to improve the codebase and an opportunity to become familiar with django migrations.

Although this is out of scope so feel free to ignore.

Morsey187 · 2024-02-06T16:06:10Z

wagtailio/static/sass/components/_headline.scss

+
+    &__heading {
+
+        @include media-query(large) {
            width: 120%; // to get a bit of overlap on the icon


Suggested fix

Make sure icons are always behind text elements in z-index layering or/and add a solid background according to theme behind the text.

Question: Just to comment on the suggested fix here, there is quite a lot of overlap with icons and text at mobile, this could effect the readability in terms of contrast as well as the overall readability of the text (although likely difficult to know without real usability testing).
I was wondering if you considered applying a background colour to headline__inner perhaps one with some transparency if not wanting to cut the icons out too much but still wanting to provide better contrast.

Example

Morsey187 · 2024-02-06T17:52:37Z

wagtailio/static/sass/components/_sign-up-form.scss

            width: 170px;
            height: 170px;
+
+            @include media-query(medium) {
+                inset: -100px 0 auto auto;


Nickpick: This is a huge improvement over the current styling, however it's still possble to have the text overlap at some viewports, which given the bright colour of the icon here makes the text really difficuly to read.

Example

If you altered the DOM a little, you could then constrain the text to a division element and have both the text and icon be responsive to their respective containers, using display: flex.

Example using flex
You could then use `flex-direction: column` to move the icon below the form at mobile viewports. We also wouldn't have to offset the image using CSS which can be tricky to manage (as proven by the original code).

…orms-accessibility

thibaudcolas

There are a few things that need changing, and I think more work needed on the text overlap, but this goes in the right direction.

thibaudcolas · 2024-02-21T12:00:43Z

wagtailio/project_styleguide/templates/patterns/components/hero/hero.html

@@ -3,11 +3,13 @@
 <div class="grid">
    <div class="hero {% if classes %}{{ classes }}{% endif %}">
        <div class="hero__inner">
-            <h1 class="hero__heading">{% firstof value.heading value.title %}</h1>
+            <hgroup role="group" aria-roledescription="heading group">


hgroup makes sense to me semantically. I don’t think we’d need the role though as group is the default role for that element. aria-roledescription feels way too advanced of a property for the problem at hand, would prefer we avoid using this unless there’s a very specific problem we’re wanting to solve.

thibaudcolas · 2024-02-21T12:01:04Z

wagtailio/project_styleguide/templates/patterns/components/hero/hero.html

-                <h2 class="hero__subheading intro-big">{% firstof value.sub_heading value.subheading %}</h2>
-            {% endif %}
+                {% if value.sub_heading or value.subheading %}
+                    <p aria-roledescription="subheading" class="hero__subheading intro-big">{% firstof value.sub_heading value.subheading %}</p>


Suggested change

<p aria-roledescription="subheading" class="hero__subheading intro-big">{% firstof value.sub_heading value.subheading %}</p>

<p class="hero__subheading intro-big">{% firstof value.sub_heading value.subheading %}</p>

thibaudcolas · 2024-02-21T12:02:03Z

wagtailio/project_styleguide/templates/patterns/components/sign_up_form/base_form.html

@@ -3,8 +3,7 @@ <h2 class="sign-up-form__heading heading-three">{{ heading }}</h2>
    <p class="sign-up-form__sub-heading">{{ sub_heading }}</p>
    <form class="sign-up-form__container" action="https://torchbox.us1.list-manage.com/subscribe/post?u={{ mailchimp_account_id }}&id={{ mailchimp_newsletter_id }}" method="post">
        <div>
-            <label for="email" class="u-sr-only">Enter your email address</label>
-            <input class="sign-up-form__input" id="email" name="EMAIL" type="email" autocomplete="email" placeholder="Enter your email address" required/>
+            <input class="sign-up-form__input" id="email" name="EMAIL" type="email" autocomplete="email" placeholder="Enter your email address" aria-label="Email" required/>


Looks good!

thibaudcolas · 2024-02-21T12:16:12Z

wagtailio/project_styleguide/templates/patterns/components/streamfields/headline/headline.html

    </div>
-</div>
+</div>


Suggested change

</div>

</div>

thibaudcolas · 2024-02-25T09:56:06Z

wagtailio/project_styleguide/templates/patterns/includes/search-form.html

@@ -1,10 +1,10 @@
 <form action="{% url 'search' %}" method="get" role="search" class="search {% if classes %}{{ classes }}{% endif %}" {% if data_attrs %}{{ data_attrs }}{% endif %} {% if form_id %}id="{{ form_id }}"{% endif %}>
-    <fieldset class="search__wrap">
+    <div class="search__wrap">


Looking good!

thibaudcolas

Merging without the role and aria-roledescription usage!

shyusu4 added 4 commits February 5, 2024 16:18

Modify forms

efb41be

Modify hero and get started blocks

539d577

Modify icon link block

a4f6e2f

Modify headline block

a9b7afd

shyusu4 marked this pull request as ready for review February 6, 2024 12:09

thibaudcolas requested review from thibaudcolas and Morsey187 February 6, 2024 14:09

Morsey187 reviewed Feb 6, 2024

View reviewed changes

shyusu4 added 2 commits February 21, 2024 13:55

Merge branch 'main' of github.com:shyusu4/wagtail.org into headings-f…

3534cc5

…orms-accessibility

Modify sign up form

2499027

thibaudcolas reviewed Feb 25, 2024

View reviewed changes

Remove aria-roledescription usage

552e4cd

thibaudcolas approved these changes Feb 25, 2024

View reviewed changes

thibaudcolas merged commit c1035b6 into wagtail:main Feb 25, 2024
1 check passed

This was referenced Feb 25, 2024

Sign up form styling #459

Closed

Decorative shapes overlap section subheadings #457

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Headings and forms accessibility improvements #458

Headings and forms accessibility improvements #458

shyusu4 commented Feb 5, 2024 •

edited

Loading

Scotchester commented Feb 6, 2024

Morsey187 left a comment

Morsey187 Feb 6, 2024

Morsey187 Feb 6, 2024

Morsey187 Feb 6, 2024 •

edited

Loading

thibaudcolas left a comment

thibaudcolas Feb 21, 2024

thibaudcolas Feb 21, 2024

thibaudcolas Feb 21, 2024

thibaudcolas Feb 21, 2024

thibaudcolas Feb 25, 2024

thibaudcolas left a comment

	<p aria-roledescription="subheading" class="hero__subheading intro-big">{% firstof value.sub_heading value.subheading %}</p>
	<p class="hero__subheading intro-big">{% firstof value.sub_heading value.subheading %}</p>

Headings and forms accessibility improvements #458

Headings and forms accessibility improvements #458

Conversation

shyusu4 commented Feb 5, 2024 • edited Loading

Scotchester commented Feb 6, 2024

Morsey187 left a comment

Choose a reason for hiding this comment

Morsey187 Feb 6, 2024

Choose a reason for hiding this comment

Morsey187 Feb 6, 2024

Choose a reason for hiding this comment

Morsey187 Feb 6, 2024 • edited Loading

Choose a reason for hiding this comment

thibaudcolas left a comment

Choose a reason for hiding this comment

thibaudcolas Feb 21, 2024

Choose a reason for hiding this comment

thibaudcolas Feb 21, 2024

Choose a reason for hiding this comment

thibaudcolas Feb 21, 2024

Choose a reason for hiding this comment

thibaudcolas Feb 21, 2024

Choose a reason for hiding this comment

thibaudcolas Feb 25, 2024

Choose a reason for hiding this comment

thibaudcolas left a comment

Choose a reason for hiding this comment

shyusu4 commented Feb 5, 2024 •

edited

Loading

Morsey187 Feb 6, 2024 •

edited

Loading