Problem/Motivation

Media content is wrapped with an article wrapper if the stable theme is used.
The article tag was replaced with a div tag in the media core module template at #2878115: Make the HTML wrapper tag for media items more semantically correct to be more semantically correct and better for accessibility.

Remaining tasks

review needed

Release notes snippet

The Stable and Classy themes use an old media twig template with an <article> wrapper instead of a <div> wrapper.
Replaced the article tag with a div tag to match the core media markup.

Comments

Corn696 created an issue. See original summary.

corn696’s picture

StatusFileSize
new488 bytes

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

Drupal 8.7.0-alpha1 will be released the week of March 11, 2019, which means new developments and disruptive changes should now be targeted against the 8.8.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

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.

dww’s picture

Title: Media content is wrapped with an article wrapper if the stable theme is used. » Media content is wrapped with an article wrapper if stable or classy theme is used or extended
Issue summary: View changes
Issue tags: +Accessibility, +Needs frontend framework manager review
Related issues: +#2881745: Wrapping embedded entities in <article> is bad for accessibility, use <div> instead
StatusFileSize
new1.01 KB
new433 bytes

Classy does the same thing. Expanding scope of title and patch to address both.

I think not fixing classy and stable during #2878115: Make the HTML wrapper tag for media items more semantically correct was an intentional choice, since stable and classy templates aren't supposed to change for BC reasons. However, as an accessibility bug, #2878115 perhaps should have gotten an exception for this.

Also marking this related to #2881745: Wrapping embedded entities in <article> is bad for accessibility, use <div> instead where this fix was made to entity_embed module as a 'Critical bug' for accessibility.

Tagging for 'needs frontend framework manager review' to get an opinion from the core frontend framework manager.

Status: Needs review » Needs work

The last submitted patch, 5: 3029740-5.media-wrapper.patch, failed testing. View results

andrewmacpherson’s picture

This isn't a serious issue for accessibility.

If #2881745: Wrapping embedded entities in <article> is bad for accessibility, use <div> instead was marked critical on the basis of accessibility, that's way off the mark. It's based on comment #2 there:

Articles like sections are both regions that should have an associated heading.

This is misleading in several ways:

  • <article> and <section> are very different in their ARIA mappings.
    • A <section> is treated as a landmark region, but only if it has a computed accessible name via aria-label or aria-labelledby.
    • An <article> is never a landmark region, regardless of whether it has a computed accessible name. Some accessibility checkers (notably SiteImprove) erroneously identify article as a landmark region, and complain if it doesn't have an accessible name, but this is incorrect. The HTML accessibility API mappings do not treat it as a landmark region, and nor does any assistive tech AFAIK.
    • Assistive technology SHOULD provide a way for users to navigate to landmark regions. For articles, assistive technology MAY provide a way to navigate them, but they are not required to.
  • It isn't mandatory for <article> to have a heading, per HTML 5.2. It isn't mandatory for any other sectioning content either, and it makes no difference anyway because the section outline algorithm hasn't been implemented by any browsers.
  • It isn't mandatory for the article role to have an accessible name, per ARIA 1.0 and ARIA 1.1. The WAI-ARIA Authoring Practices recommend it, for situations where it helps distinguish articles from one another. This isn't necessary for our use of media entities in my view. Note that we aren't using computed accessible names on node entity <article> wrappers either (though I think it would be a good idea there).

Both HTML and ARIA recs explicitly permit nested articles:

When article elements are nested, the inner article elements represent articles that are in principle related to the contents of the outer article.

The only place where I think the use of <article> is at odds with the W3C recs is this:

A general rule is that the article element is appropriate only if the element’s contents would be listed explicitly in the document’s outline.

For most uses of media entities, this is unlikely to be the case. However this "general rule" isn't binding, and the HTML rec doesn't use MUST/SHOULD terms here. It might count as a failure of WCAG "Info and relationships", but I think it would be a rather pedantic interpretation of that success criterion.

The current usage by Drupal media is conforming to the HTML 5.2, ARIA 1.0, and ARIA 1.1 recs.

That's all theory though. How about in practice? To date, the use of <article> makes little difference. Most assistive tech doesn't do anything special with it.

  • Assistive tech isn't required to convey the semantics of article at all, per ARIA.
    • So far, JAWS and Talkback announce "article" when the reading cursor moves into one during normal "browse-mode" reading.
    • JAWS announces the accessible name of the article, if it has one.
    • I expect more screen readers will announce articles in the future, perhaps based on user preferences for verbosity.
    • I'd speculate that some screen readers may restrict announcing the article wrapper semantics to those which have an accessible name.
  • Assisitive tech isn't required to provide a quick navigation mechanism for jumping to articles, but ARIA says they may provide a way to quickly navigate to nested articles. So far, I think JAWS might be the only screen reader which provides navigation to articles, but I need to check whether it addresses the nesting hierarchy.

The use of nested article wrappers could potentially be confusing, if it's not clear that it's nested. However this isn't any different to the situation with nested landmark regions, or nested lists, in normal "browse" reading mode.

It would be nice to avoid unnecessary semantic wrappers, but it's not particularly urgent or severe in this case, and it certainly doesn't have a big impact on accessibility in practice. We're planning to remove Classy in D9, and Stable will be reset (I'm behind on those issues, so correct me if I'm wrong).

dww’s picture

Status: Needs work » Closed (works as designed)
Issue tags: -Accessibility, -Needs frontend framework manager review

@andrewmacpherson - as usual, thanks for the incredibly detailed and useful explanation! I almost always learn a ton from your comments.

Whereas:

a) This isn't actually an accessibility bug per #7.
b) Changing classy/stable would be a BC break + disruption for existing sites.
c) Classy is being removed in #3050378: [meta] Replace Classy with a starterkit theme and stable is being reset in #3050374: Create Drupal 9 stable theme

Therefore be it resolved that this works as designed. ;)

Thanks,
-Derek

liam morland’s picture