E-mail List Archives
Thread: HTML5 Article Tag - How to use?
Number of posts in this thread: 5 (In chronological order)
From: Joey G.
Date: Sun, Mar 01 2015 12:40PM
Subject: HTML5 Article Tag - How to use?
No previous message | Next message →
This is how I use the <article> landmark.
<article>
Article Title
MetaInformation
Social Sharing Buttons
The Actual article
Other Meta
</article>
But other blogs use it like this.
Article Title
MetaInformation
Social Networks
<article>
Body
</article>
Other meta
What's the correct usage of this landmark please?
Blind Street
http://www.blindstreet.com/
Twitter
http://www.twitter.com/blindstreetphil
From: Jonathan Avila
Date: Sun, Mar 01 2015 12:26PM
Subject: Re: HTML5 Article Tag - How to use?
← Previous message | Next message →
Joey, I would consider your implementation more correct because the title and other related content of the article are wrapped within the article element. For your article title it could be within a header with a heading element and could be referenced by aria-labelledby on the article element. Other things like the social media or meta content could possibly be asides if they are only tangentially related to the article'ss content.
Jonathan
--
Jonathan Avila
Chief Accessibility Officer
SSB BART Group
= EMAIL ADDRESS REMOVED =
703-637-8957 (o)
Follow us: Facebook | Twitter | LinkedIn | Blog | Newsletter
-----Original Message-----
From: = EMAIL ADDRESS REMOVED = [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Joey G.
Sent: Sunday, March 01, 2015 2:40 PM
To: = EMAIL ADDRESS REMOVED =
Subject: [WebAIM] HTML5 Article Tag - How to use?
This is how I use the <article> landmark.
<article>
Article Title
MetaInformation
Social Sharing Buttons
The Actual article
Other Meta
</article>
But other blogs use it like this.
Article Title
MetaInformation
Social Networks
<article>
Body
</article>
Other meta
What's the correct usage of this landmark please?
Blind Street
http://www.blindstreet.com/
Twitter
http://www.twitter.com/blindstreetphil
From: Chris Moore
Date: Wed, Mar 04 2015 1:32AM
Subject: Re: HTML5 Article Tag - How to use?
← Previous message | Next message →
It always puzzles me why people place the social media stuff before the article. Surely it should appear at the end?
How are you going to know if you want to share it until youve read it?
If you then decide to share, then you have to scroll back up.
On 1 Mar 2015, at 19:40, Joey G. < = EMAIL ADDRESS REMOVED = > wrote:
> This is how I use the <article> landmark.
>
>
>
> <article>
>
> Article Title
>
> MetaInformation
>
> Social Sharing Buttons
>
> The Actual article
>
> Other Meta
>
> </article>
>
>
>
> But other blogs use it like this.
>
> Article Title
>
> MetaInformation
>
> Social Networks
>
> <article>
>
> Body
>
> </article>
>
> Other meta
>
>
>
> What's the correct usage of this landmark please?
>
>
>
>
>
> Blind Street
>
> http://www.blindstreet.com/
>
> Twitter
>
> http://www.twitter.com/blindstreetphil
>
>
>
> > >
From: Joey G.
Date: Wed, Mar 04 2015 5:44PM
Subject: Re: HTML5 Article Tag - How to use?
← Previous message | Next message →
Though it's not an answer to my question, yes, I think people do this to get
the attention of the readers or entice them; share the article immediately
after reading only the title.
I once implemented buttons that follow the reader while they scroll the
page, but I was told it wasn't the best idea.
-----Original Message-----
From: = EMAIL ADDRESS REMOVED =
[mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Chris Moore
Sent: Wednesday, March 04, 2015 12:32 AM
To: WebAIM Discussion List
Subject: Re: [WebAIM] HTML5 Article Tag - How to use?
It always puzzles me why people place the social media stuff before the
article. Surely it should appear at the end?
How are you going to know if you want to share it until you've read it?
If you then decide to share, then you have to scroll back up.
On 1 Mar 2015, at 19:40, Joey G. < = EMAIL ADDRESS REMOVED = > wrote:
> This is how I use the <article> landmark.
>
>
>
> <article>
>
> Article Title
>
> MetaInformation
>
> Social Sharing Buttons
>
> The Actual article
>
> Other Meta
>
> </article>
>
>
>
> But other blogs use it like this.
>
> Article Title
>
> MetaInformation
>
> Social Networks
>
> <article>
>
> Body
>
> </article>
>
> Other meta
>
>
>
> What's the correct usage of this landmark please?
>
>
>
>
>
> Blind Street
>
> http://www.blindstreet.com/
>
> Twitter
>
> http://www.twitter.com/blindstreetphil
>
>
>
> > > list messages to = EMAIL ADDRESS REMOVED =
messages to = EMAIL ADDRESS REMOVED =
From: Gunderson, Jon R
Date: Thu, Mar 05 2015 7:49AM
Subject: Re: HTML5 Article Tag - How to use?
← Previous message | No next message
The default role for the HTML5 <article> element in the ARIA ³article"
role and the ARIA ³article" role is NOT defined as a landmark role. The
definition of the ARIA ³article" role is supports representing the
structure of nested discussion lists, see the ARIA definition. The
definition of the <article> element though is not limited to discussion
lists. It is unfortunate that they share the same name, it can lead to a
lot of confusion.
ARIA 1.0 ARTICLE role definition:
http://www.w3.org/TR/wai-aria/roles#article
HTML5 ARTICLE element definition:
http://www.w3.org/html/wg/drafts/html/master/semantics.html#the-article-ele
ment
Hope this helps,
Jon
On 3/4/15, 4:44 PM, "Joey G." < = EMAIL ADDRESS REMOVED = > wrote:
>Though it's not an answer to my question, yes, I think people do this to
>get
>the attention of the readers or entice them; share the article immediately
>after reading only the title.
>
>I once implemented buttons that follow the reader while they scroll the
>page, but I was told it wasn't the best idea.
>
>-----Original Message-----
>From: = EMAIL ADDRESS REMOVED =
>[mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Chris Moore
>Sent: Wednesday, March 04, 2015 12:32 AM
>To: WebAIM Discussion List
>Subject: Re: [WebAIM] HTML5 Article Tag - How to use?
>
>It always puzzles me why people place the social media stuff before the
>article. Surely it should appear at the end?
>
>How are you going to know if you want to share it until you've read it?
>
>If you then decide to share, then you have to scroll back up.
>
>
>On 1 Mar 2015, at 19:40, Joey G. < = EMAIL ADDRESS REMOVED = > wrote:
>
>> This is how I use the <article> landmark.
>>
>>
>>
>> <article>
>>
>> Article Title
>>
>> MetaInformation
>>
>> Social Sharing Buttons
>>
>> The Actual article
>>
>> Other Meta
>>
>> </article>
>>
>>
>>
>> But other blogs use it like this.
>>
>> Article Title
>>
>> MetaInformation
>>
>> Social Networks
>>
>> <article>
>>
>> Body
>>
>> </article>
>>
>> Other meta
>>
>>
>>
>> What's the correct usage of this landmark please?
>>
>>
>>
>>
>>
>> Blind Street
>>
>> http://www.blindstreet.com/
>>
>> Twitter
>>
>> http://www.twitter.com/blindstreetphil
>>
>>
>>
>> >> >> list messages to = EMAIL ADDRESS REMOVED =
>
>>>messages to = EMAIL ADDRESS REMOVED =
>>>