E-mail List Archives

Search E-mail List Archives for

Number of posts in this thread: 2 (In chronological order)

From: McGehee, Michele
Date: Fri, Nov 22 2019 3:55PM
Subject: Using aria or html articles
No previous message | Next message →

I'm working on an interesting page and would love to get feedback. I have a=
ttached a picture of the basic layout of the page and I will do my best to =
describe the setup.

The page has a navigation along the side and then two columns of informatio=
n. The Heading 3s in the picture are different categories of information th=
at can contain 1 or more 'cards'. The right column has sliders that dynamic=
ally change amounts and totals near the green confirm button. Users need to=
be able to navigate down and across both columns of information.

I don't have the option of changing the layout unfortunately, but I need a=
way to tag this screen so that the Group 1 and Group 2 in the design can l=
ive together under the Header 3 category.
Would you tag the cards as articles? And if so, would you tag all of them a=
rticles or am I making this too complicated.

Thank you.

Michele McGehee | Digital Accessibility Specialist
Washington Health Benefits Exchange



NOTICE: This message (including any attachments) may contain information th=
at is privileged, confidential, proprietary and/or otherwise protected from=
disclosure to anyone other than its intended recipient(s). Any disseminati=
on, copying, retention or use of this message or its contents (including an=
y attachments) by persons other than the intended recipient(s) is strictly =
prohibited. If you have received this message in error, please immediately =
notify the sender by reply e-mail or telephone and permanently delete all c=
opies of this message and any attachments. Thank you for your cooperation.

From: glen walker
Date: Fri, Nov 22 2019 4:36PM
Subject: Re: Using aria or html articles
← Previous message | No next message

The solution depends on what your intent is. Minimally, having various
heading levels is sufficient for screen reader navigation. You have h1
through h4 specified on your design. The groups can be navigated to using
the heading shortcut key with the screen reader, either 'H' or '4'.

I would not use the article element unless that group/card can stand by
itself on its own page. If you think of a literal article as in newspaper
article or magazine article and you're on the newspaper/magazine website,
each article can stand by itself so it makes sense to use the article
element in that case.

> Users need to be able to navigate down and across both columns of
information.

If you're talking about keyboard navigation, only one tab order will be
possible - the DOM order (ignoring the use of tabindex which would change
the tab order but still only give you one possible tab order). So a
keyboard user can't navigate both down a column or across a row using just
the TAB key. You could certainly program it so that the unmodified TAB key
moves in the DOM order, which you might have organized to go down a column,
and then have a modified TAB key (or some other keyboard shortcut) tab
across the columns, but I don't see that as necessary in your case.

> I need a way to tag this screen so that the Group 1 and Group 2 in the
design can live together under the Header 3 category.

Not sure what "live together" means. If the groups have h4s under the h3,
that's essentially "living together".

<div>
<h3>heading 3</h3>
...stuff...
<div>
<h4>group 1 heading 4</h4>
...stuff...
</div>
<div>
<h4>group 2 heading 4</h4>
...stuff...
</div>
</div>

You could make the groups a region landmark if you wanted an additional way
for screen reader users to navigate. An article is not a landmark. A
region landmark is kind of your generic catchall landmark if the other
landmarks don't fit.

On Fri, Nov 22, 2019 at 3:55 PM McGehee, Michele <
= EMAIL ADDRESS REMOVED = > wrote:

> I'm working on an interesting page and would love to get feedback. I have
> attached a picture of the basic layout of the page and I will do my best to
> describe the setup.
>
> The page has a navigation along the side and then two columns of
> information. The Heading 3s in the picture are different categories of
> information that can contain 1 or more 'cards'. The right column has
> sliders that dynamically change amounts and totals near the green confirm
> button. Users need to be able to navigate down and across both columns of
> information.
>
> I don't have the option of changing the layout unfortunately, but I need
> a way to tag this screen so that the Group 1 and Group 2 in the design can
> live together under the Header 3 category.
> Would you tag the cards as articles? And if so, would you tag all of them
> articles or am I making this too complicated.
>
> Thank you.
>
> Michele McGehee | Digital Accessibility Specialist
> Washington Health Benefits Exchange
>
>
>
> NOTICE: This message (including any attachments) may contain information
> that is privileged, confidential, proprietary and/or otherwise protected
> from disclosure to anyone other than its intended recipient(s). Any
> dissemination, copying, retention or use of this message or its contents
> (including any attachments) by persons other than the intended recipient(s)
> is strictly prohibited. If you have received this message in error, please
> immediately notify the sender by reply e-mail or telephone and permanently
> delete all copies of this message and any attachments. Thank you for your
> cooperation.
> > > > >