Directory channel: search and facets appear before the h1 in the DOM

[msayoung]

In microsites, on a Directory channel page, the search and facets appear before the Page title etc. in the markup.

I suspect that folk using a screen reader may find it confusing , and may not understand that this is a directory search as opposed to a sitewide search (for example). This is obvious visually athrough the layout and design.

I think this might be a failure of WCAG 1.3.2 Meaningful Sequence : When the sequence in which content is presented affects its meaning, a correct reading sequence can be programmatically determined.

or possibly

1.3.1: info and relationships. Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text, e.g. headings, landmarks, lists, tables, footnotes etc.

If not a failure, I still think it would be better practice to have this content come after the h1.

@waako @Mayur2609 - could you offer your thoughts please?

Note, this isn't an issue on localgov_base as the title etc is in a region above /before the aside containing the search and facets.

[Mayur2609]

Agreed here with @msayoung.
The simple way to check for this S.C. is to observe the page by disabling the CSS styles and observe if the structure is appropriate.
This would be an issue, as identified from the image below.

[waako]

I agree it's not great, although surprisingly my gut says it's not exactly a failure of either 1.3.1 or 1.3.2 at least in terms of the order, especially as the same ambiguity in order exists on narrow viewports (visually).
However, I wholeheartedly agree that better to have the Page title first, but having the filters/facets container (visually) labelled accurately and assigned role="search" could be another way to fix/improve it.

[markconroy]

I've a PR for this if someone can test it?

#324