Skipped headings

Disclosure - I'm sighted and look for logic not slavish adherence to a rule for the sake of it.

Firstly my colleagues who use screenreaders say that skipped headings do cause them to be confused: is that because  we, as an industry, have made the case too strongly that nesting must be seamless? Should we not be reflecting the relationships in the content not looking to plug apparent gaps.

Take this example (which is an extension of the Webaim example on their page)
H1: My Favorite Recipes
H2: Quick and Easy
H3: Spaghetti

              *   Ingredients of spaghetti

H3: Hamburgers
H3: Tacos
H4: Beef Tacos

              *   Ingredients of Beef tacos

H4: Chicken Tacos
H4: Fish Tacos
I would strongly argue that visually, logically and semantically both sets of ingredients should be the same heading level - they are the same thing. However, because there are sub-types of Taco the Taco ingredients drop to H5. As the semantics are supposed to convey relationships then surely spaghetti ingredients are also H5 irrespective of where the sit respective to Spaghetti?
I'm genuinely looking to understand why grouping similar things is wrong purely to maintain a lack of gaps. Visually you would clearly not miss the H4 under Spaghetti because it's not needed - why is it so important for a screenreader?

My reading also shows it's strong best practice but not, as far as I can tell, a failure of 1.3.1. And the essence of 1.3.1 is to convey the relationships shown visually (and visually all the ingredients are peers.

Sorry - really  would like to hear the consensus on how this should be marked up and why?

Kevin


Kevin Prince

Product Accessibility & Usability Consultant



E kevin.prince@fostermoore.com

Christchurch

fostermoore.com

This email and its contents are confidential. If you are not the intended recipient, you should contact the sender immediately, you must not use, copy or disclose any of the information in the email, and you must delete it from your system immediately.