開發網站無障礙模板與檢測工具導入文件

為保有啟發性,「無障礙」雖為常見用詞,此份文件 accessibility, accessible 二詞將根據不同語境、詞態使用不同譯法。「親和力」涵蓋範圍遠多於「無障礙」,並非僅服務特定族群順利瀏覽網頁取得資訊,且親和力是可以不斷努力提升且沒有終點的。例如,基於追求親和力,使用 accessibility statement 作為宣示之外,也有助於提升親和力、吸引使用者親近數位服務,故有意識地譯為「親和力宣告」;涉及數位服務可及性,則依詞態使用「可及性」或「可及無礙」;「無障礙」則多半用於法規或各式規範脈絡下。

選擇首頁與意見回饋頁面,優先實作頁面範例。主要考量頁面功能性、展示現有共用元件如何應。 首頁、意見回饋頁面皆為服務進入點,而意見回饋頁面又可以展示表單欄位元件,這類元件常見於意見回饋、反映問題的管道。

首頁將使用到 landmark, breadcrumb, button and link, skip-to 等共用元件。

意見回饋頁面,將使用到 landmark, breadcrumb, button and link, form, checkable, #NEW! password-input, textarea, skip-to 等共用元件。

WAI-ARIA

針對 WAI-ARIA 技術依賴 javascript,從漸進式觀點處理方式可能是:

<fieldset class="fieldset">
  <label for="name" class="field-label">姓名</label>
  <input type="text" id="name" autocomplete="name" class="field-input" data-required="true">
</fieldset>
<script>
  window.onload = function() {
    document.querySelectorAll('[data-required="true"]').forEach(function(input) {
      input.setAttribute('aria-required', 'true');
    });
  };
</script>

說明頁面

開發網站無障礙模板

檢測工具導入文件

延伸參考資料