Problem/Motivation

Testing with https://accessibilityinsights.io and their Ad hoc tools, the Landmarks widget identified that the ARIA landmarks are missing around some of the content on the main page.

"Contain all visible content within the landmark areas.
Turn on the Landmarks visualization, then zoom out so you can see the entire page. If you see any visible content (like text, images, or controls) outside the dashed borders, that’s a failure."

The Main content isn't in a region.

screenshot of images with aria regions exposed via Accessibility Insights - top of page

The Recipes title isn't either. Although the main region is visible for the list of recopies:

screenshot of images with aria regions exposed via Accessibility Insights - lower in the page.

Missing Footer. This probably should have a <footer> tag rather than just a series of div's too.

screenshot of images with aria regions exposed via Accessibility Insights - bottom of the page

Steps to reproduce

Open any Umami page, notice that some regions are not placed inside landmark regions.

Proposed resolution

Make sure all Drupal regions are inside landmarks - header, footer, main.

Remaining tasks

Move code in page.html.twig around a little to make sure header and footer items are inside the header/footer landmarks and that all other content is inside a 'main' landmark

Update the CSS to reflect this new mark up.

User interface changes

None

Introduced terminology

None

API changes

None

CommentFileSizeAuthor
Screen Shot 2019-04-24 at 2.34.00 PM.png505.15 KBmgifford
Screen Shot 2019-04-24 at 2.34.13 PM.png823.79 KBmgifford
Screen Shot 2019-04-24 at 2.34.31 PM.png884.46 KBmgifford

Issue fork drupal-3050559

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

About issue forks

Comments

mgifford created an issue. See original summary.

mgifford’s picture

mgifford
he/him
Primary language English
commented
Issue summary: View changes
mgifford’s picture

mgifford
he/him
Primary language English
commented
Issue summary: View changes

Version: 8.8.x-dev » 8.9.x-dev

Drupal 8.8.0-alpha1 will be released the week of October 14th, 2019, which means new developments and disruptive changes should now be targeted against the 8.9.x-dev branch. (Any changes to 8.9.x will also be committed to 9.0.x in preparation for Drupal 9’s release, but some changes like significant feature additions will be deferred to 9.1.x.). For more information see the Drupal 8 and 9 minor version schedule and the Allowed changes during the Drupal 8 and 9 release cycles.

Version: 8.9.x-dev » 9.1.x-dev

Drupal 8.9.0-beta1 was released on March 20, 2020. 8.9.x is the final, long-term support (LTS) minor release of Drupal 8, which means new developments and disruptive changes should now be targeted against the 9.1.x-dev branch. For more information see the Drupal 8 and 9 minor version schedule and the Allowed changes during the Drupal 8 and 9 release cycles.

Version: 9.1.x-dev » 9.2.x-dev

Drupal 9.1.0-alpha1 will be released the week of October 19, 2020, which means new developments and disruptive changes should now be targeted for the 9.2.x-dev branch. For more information see the Drupal 9 minor version schedule and the Allowed changes during the Drupal 9 release cycle.

Version: 9.2.x-dev » 9.3.x-dev

Drupal 9.2.0-alpha1 will be released the week of May 3, 2021, which means new developments and disruptive changes should now be targeted for the 9.3.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Version: 9.3.x-dev » 9.4.x-dev

Drupal 9.3.0-rc1 was released on November 26, 2021, which means new developments and disruptive changes should now be targeted for the 9.4.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Version: 9.4.x-dev » 9.5.x-dev

Drupal 9.4.0-alpha1 was released on May 6, 2022, which means new developments and disruptive changes should now be targeted for the 9.5.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Version: 9.5.x-dev » 10.1.x-dev

Drupal 9.5.0-beta2 and Drupal 10.0.0-beta2 were released on September 29, 2022, which means new developments and disruptive changes should now be targeted for the 10.1.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Version: 10.1.x-dev » 11.x-dev

Drupal core is moving towards using a “main” branch. As an interim step, a new 11.x branch has been opened, as Drupal.org infrastructure cannot currently fully support a branch named main. New developments and disruptive changes should now be targeted for the 11.x branch, which currently accepts only minor-version allowed changes. For more information, see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

mgifford’s picture

mgifford
he/him
Primary language English
commented
Issue tags: +wcag412

markconroy made their first commit to this issue’s fork.

markconroy’s picture

markconroy commented

I'm working on this.

---
Thanks to Code Enigma for sponsoring my time to work on this.

markconroy opened merge request !8676

markconroy’s picture

markconroy commented
Status: Active » Needs review

Hi @mgifford

Can you have a glance at this please?

The MR moves tabs/highlighted/content-top/etc all inside the <main> element. And then amends the CSS to target a new container I created inside this called - .main-content-area so that sidebars, etc continue to work.

However, I am not sure if it's best for us to move all those items inside <main> or if, perhaps, we should create a new <section> above <main> and place them in there instead.

Thanks very much!

---
Thanks to Code Enigma for sponsoring my time to work on this.

finnsky made their first commit to this issue’s fork.

finnsky’s picture

finnsky commented

Fixed footer which was reported for me by Axe devtools.

markconroy’s picture

markconroy commented

Thanks @finnsky

I've made some amends to your fixes.

Moved the .footer class back to the <footer> element
Set .layout-footer class to use the CSS that was targetting .footer

I think this is looking pretty good now.

===
Thanks to Code Enigma for sponsoring my time to work on this.

smustgrave’s picture

smustgrave commented
Status: Needs review » Needs work

Was hoping someone with better eyes would pick this one up.

But could the issue summary be updated to use the standard template. Like what regions are being fixed, how? (see its rearranging all the page.html.twig?)

May help the reviewer. If no one can get to it though I'll try and give it my best shot.

markconroy’s picture

markconroy commented
Issue summary: View changes
markconroy’s picture

markconroy commented
Status: Needs work » Needs review

Issue summary updated, moving back to 'Needs review'.

---

Thanks to The Confident for sponsoring my time to work on this.

smustgrave’s picture

smustgrave commented

Not sure if I'm testing wrong but using Accessibility insight and Landmark navigation I'm not seeing any different with the MR applied or not?

smustgrave’s picture

smustgrave commented
Status: Needs review » Reviewed & tested by the community

Think I was able to see the change with Landmark navigation? But leaning more on the code changes and that moving everything into main /footer region appears correct.

Regular visual check nothing seemed to break. Going to say it's probably good.

nod_’s picture

nod_
Primary language French
Location Lille
commented
Status: Reviewed & tested by the community » Needs work

small update regarding role=main, we can simplify/fix it while we're at it.

finnsky’s picture

finnsky commented
Status: Needs work » Needs review
smustgrave’s picture

smustgrave commented
Status: Needs review » Reviewed & tested by the community
Issue tags: +Needs Review Queue Initiative

Appears functional test was a random failure, re-running it's all green

Feedback around the role removal has been addressed.

nod_ closed merge request !8676

  • nod_ committed d86a0ee4 on 11.x 
    Issue #3050559 by markconroy, finnsky, mgifford, smustgrave, nod_: Umami...
nod_’s picture

nod_
Primary language French
Location Lille
commented
Title: Umami Home Page Missing Regions » Umami Home Page content is not in the main region
Status: Reviewed & tested by the community » Fixed

Committed d86a0ee and pushed to 11.x. Thanks!

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.