E-mail List Archives

Search E-mail List Archives for

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


-----Original Message-----
From: Dennis Deacon [mailto: = EMAIL ADDRESS REMOVED = ]
Sent: Monday, March 28, 2016 9:53 AM
To: = EMAIL ADDRESS REMOVED =
Subject: [WebAIM] Semantic Order -

We have an internal debate over the best way to handle semantic order.
Here's an example:

<h2>Sub heading</h2>
<ul>
<li>
<h3>Sub sub heading 1</h3>
<p>Textual content related to Sub sub heading 1</p> </li> <li> <h3>Sub sub heading 2</h3> <p>Textual content related to Sub sub heading 1</p> </li> <li> <h3>Sub sub heading 3</h3> <p>Textual content related to Sub sub heading 1</p> </li> </ul>

<p>Some text not related to Sub sub heading 3, but could be related to the last h2 Sub heading.</p>

Does the paragraph after the unordered list need a heading to take it out of the Sub sub heading 3 grouping? Would wrapping the unordered list with a div create a grouping, eliminating the need for a heading before this paragraph?

Thanks in advance.

--
Dennis Deacon
Email: = EMAIL ADDRESS REMOVED =
Website/Portfolio: dennisdeacon.com
Blog: dennisdeacon.com/blog
LinkedIn Profile: linkedin.com/in/dennisdeacon


To unsubscribe from receiving further commercial electronic messages from The Bank of Nova Scotia in Canada, please click here: https://unsubscribe.scotiabank.com?entid=BNS&buid=SBNK

To unsubscribe from receiving further commercial electronic messages from certain other senders set out in the attached list, please click here: https://www.unsubscribe.gwm.scotiabank.com?page=gwm

This email may contain confidential information the use of which by an unintended recipient is unauthorized. This email may also contain important disclosure information for the records of the intended recipient(s). For details please click here: http://www.scotiabank.com/email_disclaimer/email_english.html

Pour vous désabonner et cesser de recevoir des messages électroniques commerciaux de La Banque de Nouvelle-Écosse, veuillez cliquer ici : https://desabonnement.banquescotia.com?entid=BNS&buid=SBNK

Pour vous désabonner et cesser de recevoir des messages électroniques commerciaux de certains autres expéditeurs figurant dans la liste ci-jointe, veuillez cliquer ici : https://www.unsubscribe.gwm.scotiabank.com?page=gwm&lang=fr

Cette transmission peut contenir de l'information confidentielle et son utilisation par toute personne autre que la personne à laquelle cette transmission est destinée est interdite. Le présent courriel peut aussi contenir des renseignements importants pour les dossiers du ou des destinataires prévus. Pour plus de détails, veuillez vous diriger vers: http://www.scotiabank.com/email_disclaimer/email_francais.html

Para dejar de recibir mensajes electrónicos comerciales de The Bank of Nova Scotia en Canadá, haga clic aquí: https://cancelarsuscripcion.scotiabank.com?entid=BNS&buid=SBNK

Para dejar de recibir mensajes electrónicos comerciales de otras entidades incluidas en la lista adjunta, haga clic aquí: https://www.unsubscribe.gwm.scotiabank.com?page=gwm&lang=es

Este correo electrónico puede contener información confidencial cuyo uso por parte de personas distintas de los destinatarios del mismo está prohibido. El mensaje puede tener también datos importantes para los archivos del(de los) destinatario(s) a quien(es) está dirigido. Para más detalles, por favor dirigirse a: http://www.scotiabank.com/email_disclaimer/email_espanol.html

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
>
>
> -----Original Message-----
> From: Dennis Deacon [mailto: = EMAIL ADDRESS REMOVED = ]
> Sent: Monday, March 28, 2016 9:53 AM
> To: = EMAIL ADDRESS REMOVED =
> Subject: [WebAIM] Semantic Order -
>
> We have an internal debate over the best way to handle semantic order.
> Here's an example:
>
> <h2>Sub heading</h2>
> <ul>
> <li>
> <h3>Sub sub heading 1</h3>
> <p>Textual content related to Sub sub heading 1</p> </li> <li> <h3>Sub sub
> heading 2</h3> <p>Textual content related to Sub sub heading 1</p> </li>
> <li> <h3>Sub sub heading 3</h3> <p>Textual content related to Sub sub
> heading 1</p> </li> </ul>
>
> <p>Some text not related to Sub sub heading 3, but could be related to the
> last h2 Sub heading.</p>
>
> Does the paragraph after the unordered list need a heading to take it out of
> the Sub sub heading 3 grouping? Would wrapping the unordered list with a div
> create a grouping, eliminating the need for a heading before this paragraph?
>
> Thanks in advance.
>
> --
> Dennis Deacon
> Email: = EMAIL ADDRESS REMOVED =
> Website/Portfolio: dennisdeacon.com
> Blog: dennisdeacon.com/blog
> LinkedIn Profile: linkedin.com/in/dennisdeacon
>
>
> To unsubscribe from receiving further commercial electronic messages from
> The Bank of Nova Scotia in Canada, please click here:
> https://unsubscribe.scotiabank.com?entid=BNS&buid=SBNK
>
> To unsubscribe from receiving further commercial electronic messages from
> certain other senders set out in the attached list, please click here:
> https://www.unsubscribe.gwm.scotiabank.com?page=gwm
>
> This email may contain confidential information the use of which by an
> unintended recipient is unauthorized. This email may also contain important
> disclosure information for the records of the intended recipient(s). For
> details please click here:
> http://www.scotiabank.com/email_disclaimer/email_english.html
>
> Pour vous désabonner et cesser de recevoir des messages électroniques
> commerciaux de La Banque de Nouvelle-Écosse, veuillez cliquer ici :
> https://desabonnement.banquescotia.com?entid=BNS&buid=SBNK
>
> Pour vous désabonner et cesser de recevoir des messages électroniques
> commerciaux de certains autres expéditeurs figurant dans la liste ci-jointe,
> veuillez cliquer ici :
> https://www.unsubscribe.gwm.scotiabank.com?page=gwm&lang=fr
>
> Cette transmission peut contenir de l'information confidentielle et son
> utilisation par toute personne autre que la personne à laquelle cette
> transmission est destinée est interdite. Le présent courriel peut aussi
> contenir des renseignements importants pour les dossiers du ou des
> destinataires prévus. Pour plus de détails, veuillez vous diriger vers:
> http://www.scotiabank.com/email_disclaimer/email_francais.html
>
> Para dejar de recibir mensajes electrónicos comerciales de The Bank of Nova
> Scotia en Canadá, haga clic aquí:
> https://cancelarsuscripcion.scotiabank.com?entid=BNS&buid=SBNK
>
> Para dejar de recibir mensajes electrónicos comerciales de otras entidades
> incluidas en la lista adjunta, haga clic aquí:
> https://www.unsubscribe.gwm.scotiabank.com?page=gwm&lang=es
>
> Este correo electrónico puede contener información confidencial cuyo uso por
> parte de personas distintas de los destinatarios del mismo está prohibido.
> El mensaje puede tener también datos importantes para los archivos del(de
> los) destinatario(s) a quien(es) está dirigido. Para más detalles, por
> favor dirigirse a:
> http://www.scotiabank.com/email_disclaimer/email_espanol.html
> > > > >


--
Work hard. Have fun. Make history.

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 ??

-----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Dennis Deacon
Sent: Wednesday, March 30, 2016 12:16 PM
To: = EMAIL ADDRESS REMOVED =
Subject: Re: [WebAIM] Semantic Order

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
This e-mail originates from the City of Ottawa e-mail system. Any distribution, use or copying of this e-mail or the information it contains by other than the intended recipient(s) is unauthorized. Thank you.

Le présent courriel a été expédié par le système de courriels de la Ville d'Ottawa. Toute distribution, utilisation ou reproduction du courriel ou des renseignements qui s'y trouvent par une personne autre que son destinataire prévu est interdite. Je vous remercie de votre collaboration.

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
-----Original Message-----
From: Dennis Deacon [mailto: = EMAIL ADDRESS REMOVED = ]
Sent: Wednesday, March 30, 2016 12:16 PM
To: = EMAIL ADDRESS REMOVED =
Subject: Re: [WebAIM] Semantic Order

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


To unsubscribe from receiving further commercial electronic messages from The Bank of Nova Scotia in Canada, please click here: https://unsubscribe.scotiabank.com?entid=BNS&buid=SBNK

To unsubscribe from receiving further commercial electronic messages from certain other senders set out in the attached list, please click here: https://www.unsubscribe.gwm.scotiabank.com?page=gwm

This email may contain confidential information the use of which by an unintended recipient is unauthorized. This email may also contain important disclosure information for the records of the intended recipient(s). For details please click here: http://www.scotiabank.com/email_disclaimer/email_english.html

Pour vous désabonner et cesser de recevoir des messages électroniques commerciaux de La Banque de Nouvelle-Écosse, veuillez cliquer ici : https://desabonnement.banquescotia.com?entid=BNS&buid=SBNK

Pour vous désabonner et cesser de recevoir des messages électroniques commerciaux de certains autres expéditeurs figurant dans la liste ci-jointe, veuillez cliquer ici : https://www.unsubscribe.gwm.scotiabank.com?page=gwm&lang=fr

Cette transmission peut contenir de l'information confidentielle et son utilisation par toute personne autre que la personne à laquelle cette transmission est destinée est interdite. Le présent courriel peut aussi contenir des renseignements importants pour les dossiers du ou des destinataires prévus. Pour plus de détails, veuillez vous diriger vers: http://www.scotiabank.com/email_disclaimer/email_francais.html

Para dejar de recibir mensajes electrónicos comerciales de The Bank of Nova Scotia en Canadá, haga clic aquí: https://cancelarsuscripcion.scotiabank.com?entid=BNS&buid=SBNK

Para dejar de recibir mensajes electrónicos comerciales de otras entidades incluidas en la lista adjunta, haga clic aquí: https://www.unsubscribe.gwm.scotiabank.com?page=gwm&lang=es

Este correo electrónico puede contener información confidencial cuyo uso por parte de personas distintas de los destinatarios del mismo está prohibido. El mensaje puede tener también datos importantes para los archivos del(de los) destinatario(s) a quien(es) está dirigido. Para más detalles, por favor dirigirse a: http://www.scotiabank.com/email_disclaimer/email_espanol.html