updated landmark design pattern

[jongund]

• Moved information from landmark example pages into the landmark patterns page
• Changed tabs used for code examples from Bootstrap to ARIA practice tabs
• Screenshot Images are now responsive and use figure/figcaption element
• Updated source code examples to use the same markup as other ARIA examples
• Updated AT to include skipTo.js example
• Updated Resources section
• Updated search landmark

Preview new Landmarks Pattern Page

Preview updated landmark practices page (mostly updated links into patterns page)

---

WAI Preview Link (Last built on Thu, 27 Mar 2025 13:06:14 GMT).

[jongund]

@howard-e @mcking65
Hi Howard,
What do I need to do to get a preview of this pull request?
Thanks,
Jon

[jongund]

@howard-e

Hi Howard, I updated the URLs for landmark information in the index and coverage scripts.
How do I run them in this pull request to see if they generate the correct URLs?

[howard-e]

@howard-e

Hi Howard, I updated the URLs for landmark information in the index and coverage scripts. How do I run them in this pull request to see if they generate the correct URLs?

Hey @jongund, the generated link failed to build because of an unexpected structure, with the following message: "Error: Expected pattern landmarks to have an Example(s) section".

This comes from wai-aria-practices' transformPattern.js builder logic which expects that there is a section element which contains an h2, with Example (or Examples) as the text, to then apply a style, examples-section. This is the current structure for all the patterns and their example sections on the WAI-APG website. But they have their own individual pages.

We could probably replicate that structure with these landmark patterns but I assume this proposed change here is intentional in how it's structured. So I've submitted wai-aria-practices#382 to relax this constraint instead.

[howard-e]

... I updated the URLs for landmark information in the index and coverage scripts. How do I run them in this pull request to see if they generate the correct URLs?

The coverage report build step result matches exactly except for a newline being added at the end of the coverage-and-quality-report.html document. Perhaps your code editor is automatically doing this if you have the file open? Removing the new line at the end or just re-running npm run coverage-report without the file being open should do the trick.

[howard-e]

... I've submitted wai-aria-practices#382 to relax this constraint instead.

@jongund w3c/wai-aria-practices#382 has been merged now so the Landmarks page renders in the generated preview now.

Just the coverage report build step issue exists. #3216 (comment) should still resolve this

[jongund]

@mcking65
In the navigation region examples we show links in unordered lists, is that still the best practice or should we remove the unordered list makeup?

[css-meeting-bot]

The ARIA Authoring Practices (APG) Task Force just discussed PR 3216 - Landmark pattern changes.

The full IRC log of that discussion

<jugglinmike> Topic: PR 3216 - Landmark pattern changes
<jugglinmike> github: https://github.com//pull/3216
<jugglinmike> Matt_King: I think we'll skip this for now because jongunderson isn't here today

[jongund]

@mcking65
Updated pull request to include search element as a way to define a search landmark region

[mcking65]

Thank you for working on this. Unfortunately, I don't think this approach fits the APG information architecture.

Problem: The new pattern page proposed in this PR combines practices, pattern, and examples into one large page.

The currently published version of the pattern page sticks to the pattern template. I don't think we should change that. It points people to the practices page for practices.

The currently published practices page is consistent with other practices pages. It does not need major revision.

The primary problem we need to solve is the current production example pages are inconsistent with other example pages. The current landmark example pages:

• Do not use the example template.
• duplicate information that is in the practices.
• Contain some information, e.g., resources, that is not in the practices. It is worth discussing whether we really want to keep maintaining that information. If yes, perhaps it should move to the practices page.

A discussion to have is what do we want an example page for a landmark to contain. Open questions:

• What do we want to be under the example heading?
• Do we want to include both HTML and ARIA on the example pages?