WP admin - Subpages in the list of pages are not indicated as subpages for blind people

[juliemoynat]

Description of the problem

In the WordPress administration, in the list of all pages, a sighted person can identify subpages thanks to a long dash before the name of the subpage (example: — A subpage of a page). And so, you know that the above page is its parent.

But, this is absolutely not accessible to blind people.

The code of the link on the page name is that one: <a class="row-title" href="https://example.org/wp-admin/post.php?post=554&amp;action=edit" aria-label="“My beautiful subpage” (Edit)">— My beautiful subpage</a>

The aria-label attribute removes the long dash and doesn't replace it by the information it conveys.

What is expected

• The link name should, at least, inform that a subpage is a subpage.
• It would also ideally give the name of the parent page because you can see it quickly but a blind person must navigate until they find a link which is not indicated as a subpage.

We could have: <a class="row-title" href="https://example.org/wp-admin/post.php?post=554&amp;action=edit" aria-label="“My beautiful subpage” (subpage of “Wonderful page”) (Edit)">— My beautiful subpage</a>

[audrasjb]

Hi and thanks for the ticket Julie,
I confirm there is currently no indication of a page being a child of another one.
Adding good-first-bug as this seems like a pretty simple patch at a glance.

[ekaterina92]

$parent_name was empty for pages with subpages, but if I set the value than this part works (code below) and subpage name is concatinated to title. I guess in that case no aria label needed

if ( isset( $parent_name ) ) {
	$post_type_object = get_post_type_object( $post->post_type );
	echo ' | ' . $post_type_object->labels->parent_item_colon . ' ' . esc_html( $parent_name );
}

[ekaterina92]

Title with parent name

[juliemoynat]

I think that adding the text "Parent Page: [Name of the page]" next to the link is a good alternative to have the name of the parent page.

But, the aria-label is still required because:

1. It is already adding the information that the link is an edit link (the "(Edit)" at the end).
2. We still need to add an alternative to the long dash in the link name.

So, with your proposal, I recommend just adding the text "Subpage" before the page name in the aria-label:

<a class="row-title" href="https://example.org/wp-admin/post.php?post=554&amp;action=edit" aria-label="Subpage “My beautiful subpage” (Edit)">— My beautiful subpage</a>

Trac ticket: https://core.trac.wordpress.org/ticket/64932

## Use of AI Tools

Trac ticket: https://core.trac.wordpress.org/ticket/64932

Added an aria-label for subpages because with screen reader it's not clear if it's a page or subpage.

## Use of AI Tools

[ekaterina92]

I just saw that aria labels were actually recently removed from those links https://core.trac.wordpress.org/ticket/33002 but they didn't have information about subpages.

[juliemoynat]

I was not aware of that removing. Thank you for the information.

I've tested your PR (thankyou!) on the WordPress Playground and it seems good but I noticed that there is the "(Edit)" in the aria-label so if #33002 removed it, we shouldn't re-add it.

So it should be:

<a class="row-title" href="https://example.org/wp-admin/post.php?post=554&amp;action=edit" aria-label="Subpage “My beautiful subpage”">— My beautiful subpage</a>

[ekaterina92]

I added a new commit to the same branch, but I guess I should have created a new pull request (or not?)
Sorry, I'm new here.

[juliemoynat]

It might be OK to add a commit, I guess.

For me, the PR is OK but I'm not a person who can validate. I let the WordPress team do it.

[joedolson]

Thank you! I'm milestoning this for 7.1 and taking ownership to shepherd through.

The reason that the aria-label was removed was also to improve the experience for voice command users, who benefit from having the accessible name of a control match the visual name - so I'd prefer to find a way that doesn't require re-breaking that fix.

[ekaterina92]

Ok! I think at least |Parent Page: Parent page title must be shown and be pronounced by screenreader . The word Parent would suggest it's a subpage.

The code for this was already there, but it wasn't working because of an empty $parent_name.

[juliemoynat]

The text "|Parent Page: Parent page title" is not part of the link name so it's not the same thing.

We have a long dash in the link name that needs an alternative inside the link name so that blind people have the same level of information.

[aion11]

Adding a UX and content management perspective here.

One concern with adding parent context directly to the link's aria-label is that it changes the accessible name from the visible label, which can create issues for speech recognition users who rely on the accessible name matching the visible text.

Would it be worth exploring a solution that exposes the parent page context separately from the link name, for example, through existing screen-reader-text patterns or another associated description mechanism? That could preserve the visible and accessible name of the link while still providing hierarchy information to assistive technology users.

Before introducing new labels, it may also be worth confirming whether the existing parent page information can be surfaced correctly, as noted in comment #2.

Conveys the immediate parent, if assigned. Moves dash characters out of the link so they don't impact naming.

Alternate fix using aria-describedby

Trac ticket: 64932

## Use of AI Tools

AI assistance: no.

[joedolson]

I added an alternate PR that handles this using aria-describedby, instead of aria-label. This allows it to provide that feedback without having the same impact on voice command users.

[sabernhardt]

​PR 12394 adds the aria-describedby attributes and content for hierarchical post types without adding them to the lists of non-hierarchical post types.

Added a couple of changes: one to strip tags before printing HTML inside the span, and one to extend coverage onto posts without links, which requires a different mechanism to expose the information.

@Maxerns If you can link your Github profile to a WordPress profile (​https://profiles.wordpress.org), I can give you props; as it is, I'm unable to link your account. I'm going to cite your Github handle; but I can change the props later, if you provide a WordPress profile handle.

[joedolson]

In 62814:

Administration: Make subpage hierarchy in post list tables accessible.

In post list tables, subpages within hierarchical post types were visibly marked using an em dash to represent their nesting position. This information was not communicated in any way to screen reader users. Add aria-describedby with associated descriptive text to linked post titles, and screen reader text for non-editable post title contexts.

Developed in ​https://github.com/WordPress/wordpress-develop/pull/12394

Props juliemoynat, audrasjb, ekaterina92, ishikaatxecurify, aion11, sabernhardt, maxerns, joedolson.
Fixes #64932.