Add links to footer menu/items?

[jordesign]

In the current Footer Template Part the columns in the right appear as though they are a menu - but are just paragraph blocks. Should these be changed to be linked in some way? Or are they more decorative?

[michaelshowes]

I will tackle this task

[lefty55104]

@michaelshowes For accessibility, these links should be in a list rather than individual paragraphs.

WCAG Principle: Perceivable
WCAG SC: 1.3.1 Info and Relationships

[mrwweb]

I would think the links should be in a Navigation Block for the accessibility semantics @lefty55104 mentions + the general Block Editor semantics of "use a Navigation block to make a list of links that are site navigation".

Things that brings up:

1. The two-column style would require a custom block style probably, but that seems like it would be a great thing for a default theme to demonstrate!
2. What is the placeholder state of a navigation block when inserted? How can that be made as easy as possible for users?

[carolinan]

And what is its mobile design? Not all users are going to limit it to two columns of 3.

[jordesign]

Does having 2 columns with a nav block in each allow for mobile better - ending up stacking on top of each other?

[carolinan]

What if it was one latest posts block and one navigation block?

[carolinan]

Where in Figma is the two-column menu footer design? I can't find it.

[jordesign]

Great question - I don't see them in the Figma at all...

So maybe the template part just needs to be corrected.

[mrwweb]

Does having 2 columns with a nav block in each allow for mobile better - ending up stacking on top of each other?

That would still probably be an accessibility issue to have two lists of three links rather than one list of six links.

[joedolson]

This is something it would be nice to have a solution for; it's a problem I've also flagged in the wordpress.org footer.

[carolinan]

@beafialho Is the navigation in the default footer horizontal like in Figma, or is it two columns like above?

[beafialho]

@carolinan thanks for double checking. Ideally they'd look like the two columns above, but I wasn't sure how we'd achieve that, we'd need two navigation blocks, correct? I wondered if that was a good practice. So, for that reason, I mocked up the one on Figma, which uses the same header navigation links but it doesn't look as neat.

It would actually be cool if we could use an existing navigation menu but display it in columns (very common treatment in footers). @MaggieCabrera @richtabor do you think a setting like this would be possible to implement?

[carolinan]

I wonder if we could use this feature: Block Supports: Add text columns (column count) to typography block supports.
WordPress/gutenberg#33587

[carolinan]

It would need some CSS work, but maybe we shouldn't completely discard it:

Screen.Recording.2023-09-01.at.14.02.05.mov

[mrwweb]

@MaggieCabrera @jordesign @beafialho @richtabor I'm a little confused looking at the PR that closed this issue. It seems that it didn't take into account any of the accessibility feedback provided by a bunch of folks in this ticket.

I'd be happy to open a new issue raising those points again, but it seems like this ticket is the place to discuss those.

To recap: a series of links in separate paragraphs is a WCAG 1.3.1 WCAG failure because it doesn't communicate that those links are related to each other in a list and/or a nav element (ideally both, I would think). There's also a second issue in the PR where a paragraph is used for "Social Media" which appears to be a heading based on context.

What's the best way to proceed with addressing this?

Part of #3

[MaggieCabrera]

@MaggieCabrera @jordesign @beafialho @richtabor I'm a little confused looking at the PR that closed this issue. It seems that it didn't take into account any of the accessibility feedback provided by a bunch of folks in this ticket.

I'd be happy to open a new issue raising those points again, but it seems like this ticket is the place to discuss those.

To recap: a series of links in separate paragraphs is a WCAG 1.3.1 WCAG failure because it doesn't communicate that those links are related to each other in a list and/or a nav element (ideally both, I would think). There's also a second issue in the PR where a paragraph is used for "Social Media" which appears to be a heading based on context.

What's the best way to proceed with addressing this?

Part of #3

This was an oversight on my part, I'll raise a new PR addressing those concerns