E-mail List Archives
Thread: Semantic Order
Number of posts in this thread: 6 (In chronological order)
From: Dennis Deacon
Date: Mon, Mar 28 2016 12:27PM
Subject: Semantic Order
No previous message | Next message →
Agreed. If we could leverage HTML5 markup such as <section>, this would
potentially be helpful. However, we can't.
Here's an example (common pattern we run across):
https://www.united.com/CMS/en-US/travel/Pages/ChangedBagRulesOptionalServices.aspx
Under 'Other baggage service charges', you'll see three columns each with
inferred headings (h3?). After the columns, there's a link. The link
pertains to the previous h2 "Other baggage service charges." So how to
associate the link after the three columns with the previous h2 rather than
the previous h3?
TIA
--
Dennis Deacon
Email: = EMAIL ADDRESS REMOVED =
Website/Portfolio: dennisdeacon.com
Blog: dennisdeacon.com/blog
LinkedIn Profile: linkedin.com/in/dennisdeacon
From: Cousins, Earl
Date: Mon, Mar 28 2016 1:56PM
Subject: Re: Semantic Order -
← Previous message | Next message →
Hi Dennis,
The paragraph element should result in that last text content not appearing to be part of the last list.
I suggest viewing the content without CSS and checking if the last paragraph of text obviously has the intended context. If not, you may need to add another heading or move the paragraph before the last list to convey the proper context.
Earl Cousins | Accessibility Technical Analyst
Scotiabank | Enabling Solutions & Support Management (ESSM)
Information Technology & Solutions
44 King St. West, 9th floor, Suite 902, Toronto, Ontario, Canada M5H 1H1
= EMAIL ADDRESS REMOVED =
Scotiabank is a business name used by The Bank of Nova Scotia
From: Birkir R. Gunnarsson
Date: Mon, Mar 28 2016 6:19PM
Subject: Re: Semantic Order -
← Previous message | Next message →
Two thoughts.
A. if you are using list items for the content, do you need the h3s?
The list item kind of serves as a separator. Then you have an h2, a
list and more text, and no additional headings are needed.
b. You can make this more explicit by using an html5 section element
or div with role="region". Whichever you choose yo need to add an
accessible name to expose it to a.t.
e.g.
<h2 id="id1">heading</h2>
<div role="region" aria-labelledby="id1">
all the list stuff and headings yu want.
paragraph.
</div> end of section starting with the h2.
If the element that comes after your content is an h2, I would say
that is sufficient. Any content between the h2s belongs with the first
one, and the end of that content is demakated with use of the second
h2. I would still use the section trick to make it absolutely
explicit.
On 3/28/16, Cousins, Earl < = EMAIL ADDRESS REMOVED = > wrote:
> Hi Dennis,
>
> The paragraph element should result in that last text content not appearing
> to be part of the last list.
>
> I suggest viewing the content without CSS and checking if the last paragraph
> of text obviously has the intended context. If not, you may need to add
> another heading or move the paragraph before the last list to convey the
> proper context.
>
>
>
> Earl Cousins | Accessibility Technical Analyst
> > Scotiabank | Enabling Solutions & Support Management (ESSM)
> Information Technology & Solutions
> 44 King St. West, 9th floor, Suite 902, Toronto, Ontario, Canada M5H 1H1
>
> = EMAIL ADDRESS REMOVED =
> Scotiabank is a business name used by The Bank of Nova Scotia
>
>
>
From: Dennis Deacon
Date: Wed, Mar 30 2016 10:16AM
Subject: Re: Semantic Order
← Previous message | Next message →
Attempting to get further detail.
Forgetting visual layout completely (as I should have upfront),
Here's the content as it appears semantically today:
Subheading (h2)
Sub-sub heading (h3)
Some relevant textual content.
A text link
Sub-sub heading (h3)
Some relevant textual content.
A text link
Sub-sub heading (h3)
Some relevant textual content.
A text link
Link (not directly related to the previous h3, but the previous h2)
How would you create the semantic separation between the last sub-sub
heading grouping and the link not related to the last h3 grouping?
Options considered:
- Heading (h3?) prior to the link
- A div wrapping the three subheads. While W3C provides this as an
actual example, my impress is that the lack of semantic value of a div
would not provide the seperation needed.
Thanks again for any guidance provided.
--
Dennis Deacon
Email: = EMAIL ADDRESS REMOVED =
Website/Portfolio: dennisdeacon.com
Blog: dennisdeacon.com/blog
LinkedIn Profile: linkedin.com/in/dennisdeacon
From: Trafford, Logan
Date: Wed, Mar 30 2016 10:27AM
Subject: Re: Semantic Order
← Previous message | Next message →
<aside role="complementary"> perhaps ??
From: Cousins, Earl
Date: Tue, Apr 05 2016 7:00AM
Subject: Re: Semantic Order
← Previous message | No next message
Hi Dennis,
Because the link in the previous h2 is of greater importance in the hierarchy, I would move it above the h3 content like so:
Subheading (h2)
Link (not directly related to the previous h3, but the previous h2)
Sub-sub heading (h3)
Some relevant textual content.
A text link
Sub-sub heading (h3)
Some relevant textual content.
A text link
Sub-sub heading (h3)
Some relevant textual content.
A text link
Earl Cousins | Web Accessibility Specialist