landmark structure of layout html

[IK-Ngoo]

Root cause

layout html for running example didn't support proper landmark structure:

• 頁面有兩個 main 且呈現巢狀關係
  參考：hierarchically-correct-main-element
• 缺乏頁面層級的 footer
  參考：footer being used both for site wide footer and section footer

將造成：

• 瀏覽者不易掌握頁面地標結構。
• 使用 NVDA 測試，無法使用快捷鍵迅速在地標之間移動。

References

html

guide/_layouts/boilerplate.html

Line 16 in c864a32

<main id="main">{{ content }}</main>

guide/_components/landmark/one-column.html

Lines 6 to 17 in c864a32

	<div class="one-col">
	<header class="site-header">
	<a href="{{ "/" | absolute_url}}" class="flex items-center">
	<div class="bg-layer1 w2 mr3" style="aspect-ratio: 1;"><!-- logo --></div>
	<h1>{{ page.title }}</h1>
	</a>
	<nav aria-label="主要" class="flex gap4 mt4">
	<a href="#">首頁</a>
	<a href="#">關於我們</a>
	</nav>
	</header>
	<main class="site-main" id="main">

guide/_components/landmark/one-column.html

Lines 52 to 59 in c864a32

	<div class="one-column bg-layer1">
	<footer class="site-footer f6 flex items-center gap4">
	<div class="plain w2 mr3" style="aspect-ratio: 1;"><!-- logo --></div>
	<div class="mw5">
	<a href="/accessibility-statement">親和力宣告</a>
	</div>
	</footer>
	</div>

Possible solutions

1. 暫時處理方式： demo page, landmark 元件先使用不同 layout
2. 後續處理方式：應該設計出一套可以兼容不同展示情境需求的 layout