Page MenuHomePhabricator

HTML5 Semantic element <aside></aside> not seemingly parsed.
Open, LowPublic


Test example here, The aside is not seemingly being parsed. The reason I found this issue, was that i was trying to sandbox and work on a solution to how to do consistent sidetitles in a more consistent manner than the rather cumbersome kludge of template I had been using to this point.

Event Timeline

ShakespeareFan00 raised the priority of this task from to Needs Triage.
ShakespeareFan00 updated the task description. (Show Details)
ShakespeareFan00 added a subscriber: ShakespeareFan00.
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptJul 4 2015, 3:22 PM
Aklapper triaged this task as Low priority.Jul 16 2015, 2:20 PM

The HTML5 recommendation says:

The aside element represents a section of a page that consists of content that is tangentially related to the content around the aside element, and which could be considered separate from that content. Such sections are often represented as sidebars in printed typography.
The element can be used for typographical effects like pull quotes or sidebars, for advertising, for groups of nav elements, and for other content that is considered separate from the main content of the page.
Note: It's not appropriate to use the aside element just for parentheticals, since those are part of the main flow of the document.

So it's not really the thing to use for side-titles (not that using elements for other than their original semantic purpose is particular foreign to MediaWiki!) but they're probably the thing to use for sidenotes (c.f. Wikisource:Template:Sidenotes begin).

Regardless, I think it'd be great to at least render them! Skins can make up their mind what to do with them, then.

It's not a full solution, but MediaWiki since 1.27 allows <div role="complementary"> and <div role="note"> for part of the functionality of an <aside>.

Do you have more information about the role attribute? My normal sources on HTML5 don't mention it.

See the WAI-ARIA 1.1 role definitions to get started.

An element's role corresponds to its semantic meaning — how a human understands the element's place in the document structure. Most of the time, elements won't have a role attribute, because the element's default role is the intended semantics. For example, <li>'s default role is listitem, so <li> used as an item in a list should have no role attribute. The role attribute, if present, overrides the element's default role — <table role="presentation"> is common for layout tables — or provides semantics to a semantically void element, such as <div>.

That makes the role attribute useful when I want an HTML5 semantic element like <aside>, but have to worry about old JavaScript-disabled browsers. Specifically, IE8 with JavaScript disabled will not display an <aside> element or any of its contents.

So I use a <div> with the role attribute to substitute for HTML5 semantic elements. First, I look at the element's default role, then I use that for the <div>'s role attribute. In <aside>'s case, <aside>'s default role is complementary. So, where I would normally use <aside> but also need no-JS IE8 support, I'd instead use <div role="complementary">. Screen readers should announce and navigate <div role="complementary"> identically to <aside>; I don't know any screen readers that don't.

If I were going to use a non-default role on the element, for example <aside role="note"> for a "see also" hatnote, I just use <div> with the same role attribute: <div role="note">.

Thanks. So it maybe a case of coding in the case of Wikisource - CSS styles for suitable spans and coding the role appropriately. ...