When an editor uses the heading check to see an outline of their content, the headings on navigation blocks appear as part of the structure and there is not a current method to exclude them. These navigational headings appear even when the block is outside of the regions designated in "Check content in these containers" and when the block CSS selector is listed in "Skip over these elements". This is a problem if the editor skips levels because they might get the impression that the outline is fine even when they start with an h3.
For example, in the image below, the heading tag associated with the tabs block appears in the outline.
Enable editoria11y and configure it to check a content region based on a CSS selector. Then add a block (tabs, menu, etc) that has an h2 title. Use the heading check feature.
Could we have a method to exclude via CSS selector any regions that we don't want to include in the heading structure?
| Comment | File | Size | Author |
|---|---|---|---|
| editoria11y_headings.png | 180.67 KB | jastraat |
Comments
Comment #2
itmaybejj commentedThat's irksome; I try to keep up with default selectors to knock out all those Drupal elements, but not every theme is the same. Could you share the DOM of that primary tabs instance? I'm curious to know why it's getting missed.
That said, try targeting the heading directly in "Skip over these elements" -- e.g., "
.my-site-drupal-tabs-selector h2" or.my-site-drupal-tabs-selector *Comment #3
jastraat commentedHey @itmaybe, I already tried to add them to the "Skip over these elements" section. That removes those sections from being checked for accessibility issues, but does not remove them from the heading outline.
My guess is that's what your code to exclude standard elements is doing as well; the elements are not checked for accessibility but are still part of the outline.
Comment #4
jastraat commentedUpdate: the "Skip over these elements" configuration option works if you use a wildcard to include all child elements. For example, to exclude the core local tasks block specified above along with its heading, use ".block-local-tasks-block *"
Comment #6
jastraat commented(A big thanks to @itmaybejj; that's really going above and beyond as a maintainer.)
Comment #7
adriancooke commentedWoohoo! Adding my thanks @itmaybejj. Cc. @jastraat.
Comment #8
itmaybejj commentedAww thanks.
For what it's worth the way you expected it to work is how it will work in 3.x.
Five years of other optimizations means the extra performance I got out of using very specific selectors is no longer measurable.