Need consistancy in 1.3.1 issues related to semantic grouping on a series of things

[goodwitch]

I'm pretty sure that if I ran a survey asking the current active members of AGWG to determine if the following 8 different scenarios required 1.3.1 semantic grouping, that we would not all agree on what is required by the normative.

I bring this up because it causes problems for anyone trying to meet WCAG (and perhaps we can resolve this with notes/examples in the Understanding doc for 1.3.1).

Because I do not want to get on a theoretical merry-go-round debate, I've created a google spreadsheet with 8 scenarios with specific URLS so we can ground our decisions in the reality of these 8 real pages/real situations.

So you can indicate your expert opinion on what is required, we can refer to each individual scenario by the Scenario ID/Short Description:

1. What about a horizontal series of links visually inline separated by vertical pipes |
2. What about a horizontal series of social media links that are visually distinct from other links
3. What about a series of links visually grouped by the design element of a box drawn around the links?
4. What about a series of THINGS (not necessarily links) on a page
5. What about a series of things/cards (not necessarily links) in a carousel
6. What about a series of things/buttons
7. What about a series of things/cards like we see on Netflix (logged in)
8. What about under a carousel the dots to get to the next pages? 4 dots, 1st dot is selected. Other dots are clickable.

The googlesheet with each of these 8 scenarios can be found here: https://docs.google.com/spreadsheets/d/18BMoTxQOvMKa_WrtBbDHZlJu8p_SnJbzCllGcf1Nsug/edit#gid=0

Thanks in advance for your review of this problem. I look forward to an objective solution/decision/documentation that can bring consistency to how the world uses 1.3.1 for each of these common scenarios.

[goodwitch]

It may come as no surprise to you that I've thought long and hard about these 8 scenarios (and we have reached consensus within the Deque A11Y Jedi Council. My mission in asking this question here...is to:

1. Get validation that our interpretation is correct.
2. Save others from having to figure this out on their own. Saving time, money and endless merry-go-round arguments about what fails and what does not.

As I approached this issue (with some really smart a11y experts/colleagues)...some of my thought patterns included the following:

• Definition of "block" = the start of a block occurs on a NEW line. Anything following the block, happens an the NEXT line.
• example

  (starts a new line).

  forces next element to be on a NEW line.
• Definition of "inline" = occurs on the SAME line.
• Semantic Structure for grouping a series of Things can be achieved with (for example):

  • list markup
    

  • headings
    

  • landmark role
    

  • For MAIN NAVIGATION you could  also use: 
    

  • role="navigation"
    

  • <nav> element
    

  • menu with menuitem(s)
    

  • menubar with menuitem(s)
    

  • and more (in other words, this list is not exhaustive).

[goodwitch]

My vote on these 8 scenarios:

1. What about a horizontal series of links visually inline separated by vertical pipes | - Is semantic grouping required for these 2 links (Terms of Use | Legal)? No. Because this can be treated like links in a sentence. And contentinfo provides minimal grouping.
2. What about a horizontal series of social media links that are visually distinct from other links - Is semantic grouping required for these 3 visually distinct social media links? No. Because this can be treated like links in a sentence. And contentinfo provides minimal grouping. (but my a11y heart wants to require the grouping. I'm on the fence on this one)
3. What about a series of links visually grouped by the design element of a box drawn around the links? - Is semantic grouping required for these 2 links ("Understanding..." and "How to..." )? - Yes. That box around these 2 links is a visual showing relationship. That needs to be conveyed with a semantic group of some sort.
4. What about a series of THINGS (not necessarily links) on a page - Is semantic grouping required for these series of customer logos? No. The h2 "Deque Customers" is sufficient. No additional grouping semantics required. (but my a11y advocate heart really, really wants to suggest as a best practice that the customer logos should be in a list).
5. What about a series of things/cards (not necessarily links) in a carousel - Is semantic grouping required for these series of Insights (article) CARDS? The h2 "Simple Insights" is sufficient. No additional grouping semantics required.
6. What about a series of things/buttons -Is semantic grouping required for this series of two buttons? No. That would be silly! These buttons are already semantically grouped in a form, and AT can pull up a list of buttons any time easily with no additional semantics. (I included this scenario to make sure we were looking at this with consistency and from many different angles)
7. What about a series of things/cards like we see on Netflix (logged in) - Is semantic grouping required for this series of movie cards? The h2 "Only on Netflix" is sufficient. No additional grouping semantics required.
8. What about under a carousel where there are dots to get to the next pages? 3 dots, 1st dot is selected. Other dots are clickable. - Is semantic grouping required for the 3 dots under the movie player? No, but the text "Life was possible on Mars" must be a heading, and the heading provides a minimal group.

And...I swear I'm not asking this to be annoying. I'm asking because I really, really want the poor folks who are trying to meet WCAG to have a shot at getting consistent answers from experts like us!

[patrickhlauke]

even for case 3, your only "yes", I'd say it's a slippery slope. at that stage you may imply that any time something has a border around it, it MUST be structured / wrapped somehow otherwise it hard-fails 1.3.1. also from a "does a screen reader user miss out on important context if those two links aren't semantically grouped somehow?" perspective...I'd give that a pass if I encountered that in an audit, to be honest. (i might point out a suggestion/best practice though)

[awkawk]

I'd call #3 a pass also - there is a heading preceding those that provides sufficient context without specific grouping.

[goodwitch]

I appreciate your perspectives. And I can live with that. I just wonder how many seasoned experts would call some of these failures. And for the record, on scenario 3, while I still believe it is a technical failure of 1.3.1...I would set the impact of the failure to minor.

[awkawk]

@goodwitch maybe I'd feel differently if the content was different, but with a preceding H4 heading of "Success Criterion 1.1.1 Non-text Content" the two links ("How to meet non-text content" and "Understanding non-text content") I like to think that people understand the connection from the content. :)

[goodwitch]

Ahhhhh....Andrew, you and Patrick are very wise...and I think you are swaying me. I was too focused on "the box" being a visual clue of grouping. But it is really no different than all of the other scenarios where I said the preceding heading was good enough.

I sure do value both of your a11y brains. Thanks tons y'all!

[stevefaulkner]

@goodwitch I copied your spreadsheet and provided comments in it
https://docs.google.com/spreadsheets/d/1rdk5R1Uijhr23n9y04pUoNQM74a3HUM_GRe3yEF5HPc/edit?usp=sharing

[goodwitch]

@stevefaulkner thanks so much for your perspective! I wanted to answer a question you posed related to scenario 4 (the collection of customer icons).

You asked: "They are already in a list and have a section title (heading), are you asking if more is required?"

My response: For scenario 4, I was imagining what I would do if the customer icons were not in a list (if it was just div soup.) Would the heading be enough? I would say, for minimum WCAG 2.1 A/AA compliance it would sadly pass.

[avkuo]

@goodwitch , the issue appears to be addressed in the comments, so we are closing this issue. Feel free to reopen and add additional information if you feel this is not resolved.