頁框用來內嵌額外資訊到站內，多數內嵌的資訊是他站內容。
之前我們看過使用「另開新視窗」的連結連至他站，頁嵌比較像是把他站的部分資訊直接放到我的頁面上。
實務上較常看到的嵌入資訊，包括嵌入 youtube 影片、氣象局的天氣資訊或臉書粉專內容等。
若嵌入的是他站內容，無論修改權責或範圍皆已超過原本檢測網站之標的，除非是網站的重要組成部分，否則將不列入檢測範圍。
<frameset cols="50%,50%">
<frame src="11-1-1.html">
<frame title="我有標題屬性" src="11-1-2.html">
</frameset><iframe src="11-2-1.html" title="小星星歌詞">
</iframe>關於頁框嵌入臉書內容使用瀑布式開發來顯示資訊是否符合 GN1210200E 焦點被困住的條件，這是值得討論的問題。
瀑布式的開發讓使用者往下捲動資訊時能夠由新到舊的一直顯示資訊，除非使用者停止捲動或離開該區域。
我們先排除頁框中的內容是否已經超出檢測範圍這個議題，先就焦點被困住這件事來討論就好。
從 GN1210200E 可知，若焦點被困住時，只要有提供這些快速鍵或按鍵可以離開的方式就不算是被困住，例如 tab、shitft + tab、esc 等。
在瀑布式顯示時，很快速的往下移動到他來不及顯示舊資訊是可以離開該區塊的例如快速的一直按 tab 鍵。。
從 GN1240101E 可知，使用頁框來群聚重複出現內容的方式是可以被接受的。
因此我的結論會是，瀑布式開發或滾動式顯示資訊並不構成焦點被困住的要件。
我認為真正焦點被困住的狀況發生時，是無法由使用者自行排除的，以下舉三個例子：
也就是這些困住鍵盤焦點的狀態，實際上是由開發者的程式設計有問題所造成，需要由開發者修改程式才能解決焦點被困住的問題，使用者無法自行排除狀況。
而瀑布式或滾動式的顯示資訊，並不是程式設計的錯誤，而是一種顯示資訊的方式，你可以說這樣的設計對鍵盤操作不方便，但實際上鍵盤焦點並沒有被永遠的困住，極端的說法就是慢慢移動，資訊顯示完就好了，他沒有困住焦點，只是資訊很多而已。
最後，我們換個場景來思考，當一個頁面的主要內容有1000則最新消息且沒有做分頁，使用tab鍵逐一瀏覽時，你會覺得怎麼資訊那麼多，為什麼不做分頁，但你不會覺得焦點被困住或壞掉了，頂多就是覺得顯示方式設計不良而已。
所以，同樣都是顯示資訊，也都是資訊很多，我們就應該有同樣客觀的標準來看待此事。不過以上都是我個人的看法而已。無論如何，為了避免焦點在頁框裡不容易脫離的狀況，直接在頁框前加上跳過頁框的設計是最理想的做法。
頁籤又稱索引標籤。用於選擇一個主題後，相應的內容區塊會隨著這個選中的主題而有所變化，通常內容版型相同，但不同主題有不同的內容。
我們在很多程式的設定畫面較常看到這樣的設計，例如 Mozilla Firefox 或 Microsoft Office 功能表中的「選項」等。如果是在應用程式出現索引標籤，通常使用 control + tab 鍵可以切換，也可在類似頁籤的地方使用方向鍵進行切換。
另外，類似頁籤概念的設計也不少，像是 NVDA 的設定，win10 的設定等。
但如果是在網頁中出現頁籤，我們無法使用 control + tab 切換，通常是直接點擊標題來切換，或者按照頁面或網站導覽指示進行切換。
良好的設計是可以像選擇鈕那樣，將 NVDA 切換成焦點模式，使用方向鍵來循環選擇頁籤，這是頁籤的其中一種鍵盤瀏覽方式。
如果是按 tab 鍵可以依序瀏覽每個頁籤的內容，也是正確的鍵盤瀏覽方式。
關於頁籤的鍵盤正確瀏覽方式請參考 無障礙網路空間服務網 常見問題。
<ul style="list-style-type:none">
<li>
<a class="tab" id="q1li" role="tab" href="#q1">最新消息</a>
</li>
<li>
<a class="tab" id="q2li" role="tab" href="#q2">最新公告</a>
</li>
<li>
<a class="tab" id="q3li" role="tab" href="#q3">最新刊物</a>
</li>
</ul><div class="tabs">
<div role="tablist">
<button role="tab" aria-selected="true" aria-controls="panel-1" id="tab-1" tabindex="0">
最新消息
</button>
<button role="tab" aria-selected="false" aria-controls="panel-2" id="tab-2" tabindex="-1">
最新公告
</button>
<button role="tab" aria-selected="false" aria-controls="panel-3" id="tab-3" tabindex="-1">
最新刊物
</button>
</div>
<div id="panel-1" role="tabpanel" tabindex="0" aria-labelledby="tab-1">
<p><a href="#">消息1</a></p>
<p><a href="#">消息2</a></p>
<p><a href="#">消息3</a></p>
</div>
<div id="panel-2" role="tabpanel" tabindex="0" aria-labelledby="tab-2" hidden>
<p><a href="#">公告1</a></p>
<p><a href="#">公告2</a></p>
<p><a href="#">公告3</a></p>
</div>
<div id="panel-3" role="tabpanel" tabindex="0" aria-labelledby="tab-3" hidden>
<p><a href="#">刊物1</a></p>
<p><a href="#">刊物2</a></p>
<p><a href="#">刊物3</a></p>
</div>
</div>表單是由多種元素所組成，大部分是網頁想要與使用者互動時所產生的。透過這些元素的特性，依據目的可以組合成多樣性的表單。例如報名課程、填寫意見、捐款、註冊登入、問卷調查等。
在之前的講義中，我們已經學習到各種表單元素的無障礙，如下拉式方塊、選擇鈕、編輯區、核取方塊、按鈕、連結等元件。
現在，我們利用實測練習來檢視各元素，也就是整個表單的無障礙。
<form action="wai.php" method="post">
<div>
<label for="myid">姓名</label>
<input type="text" id="myid" name="myid">
</div>
<div>
<label for="k">喜歡吃的水果</label>
<select id="k" name="k">
<option value="">請選擇</option>
<option value="芭樂">芭樂</option>
<option value="香蕉">香蕉</option>
<option value="草莓">草莓</option>
</select>
</div>
<div>
<button type="button">送出</button>
</div>
</form>