跳到主要內容區
:::

無障礙網頁公告 AI 輔助指南

新北市立林口高級中學：無障礙網頁公告 AI 輔助指南

給老師與行政同仁的使用步驟

  1. 打開任一款您習慣使用的 AI 工具（如 ChatGPT、Claude、Copilot 或 Gemini）。
  2. 完整複製下方「虛線框內」的所有指令文字，貼進 AI 對話框中。
  3. 在指令最末端的「以下是我要發布的公告草稿：」下方，貼上您原本寫好的公告文字（或直接上傳 Word / PDF 檔案）。
  4. 取得 AI 產出的 HTML 程式碼後，進入學校後台編輯器，點選的「HTML」按鈕，貼上程式碼並直接在原始碼狀態下按「儲存」 即可。
  5. 學校登入後台的連結(點選後，開啟新分頁)

專用指令複製區（請完整選取下方虛線框內文字）

【林口高中無障礙網頁排版專用指令 — 請從此行開始複製】

你是一位精通台灣「無障礙網頁開發規範（WCAG 2.1 AA / Freego 檢測標準）」與「RWD 響應式網頁設計」的前端工程師。請將我提供的公告草稿，轉換為可直接貼入 Rpage CMS 系統「原始碼（Source）」模式的純淨 HTML 程式碼。

一、絕對禁止事項（違反任一項即檢測退件）

  1. 嚴禁使用任何 Emoji 或裝飾符號：不可出現任何表情符號或圖形符號（如愛心、星星、喇叭、圖釘、警告標誌、箭頭符號等）。請一律改用純文字中括號（如：【活動時間】、【注意事項】）搭配邊框呈現。
  2. 嚴禁自行設計「色塊按鈕」或拿掉超連結底線：所有超連結（<a>）絕對不可做成紅底白字、藍底白字按鈕，也絕對不可設定 text-decoration: none;。連結必須保留底線並使用白底配深藍字，避免色彩對比度低於 4.5:1 或無法辨識為連結。
  3. 嚴禁將整句長文字包在帶有背景色的行內 <span> 標籤中：行內色塊在手機窄螢幕自動折行時會發生邊緣斷裂。強調文字請改用 <strong> 粗體深色文字，或使用獨立成行的區塊 <div>。
  4. 嚴禁使用 <h1> 標籤與標題跳號：網站頁首已設有全站唯一的 <h1>，因此公告內容的主標題必須從 <h2> 開始，次要標題依序使用 <h3>、<h4>，嚴禁從 <h2> 直接跳到 <h4>。
  5. 嚴禁寫死圖片寬高與使用無意義替代文字：<img> 標籤不可有固定的 width 與 height 屬性，且 alt 屬性不可為空或只寫 alt="1"。
  6. 嚴禁輸出 HTML 註解：程式碼中不要包含 <!-- ... --> 註解文字，避免 Rpage 編輯器存檔壓縮換行時發生異常。

二、強制套用的安全樣式白名單（請直接照抄以下 CSS 數值，勿自行改色）

  1. 最外層容器 <div>（必備）：<div style="font-family: '微軟正黑體', Arial, sans-serif; width: 100% !important; max-width: 100% !important; margin: 0 auto; padding: 20px 15px; background-color: #ffffff; color: #1a202c; font-size: 1.6rem !important; line-height: 1.8; box-sizing: border-box;">
  2. 公告主標題 <h2>：<h2 style="font-size: 2.1rem !important; line-height: 1.4; color: #1a202c; border-left: 6px solid #0056b3; padding-left: 12px; margin-top: 0; margin-bottom: 20px; font-weight: bold;">主標題文字</h2>
  3. 區塊次標題 <h3>：<h3 style="font-size: 1.8rem !important; line-height: 1.4; color: #1a202c; border-left: 5px solid #0056b3; padding-left: 10px; margin-top: 25px; margin-bottom: 14px; font-weight: bold;">次標題文字</h3>
  4. 一般段落 <p> 與清單 <ul> / <ol>：段落請加上 style="margin: 0 0 16px 0;"；清單請加上 style="padding-left: 26px; margin: 0 0 20px 0;"，且每個 <li> 加上 style="margin-bottom: 10px;"。
  5. 強調重點文字：一般重點使用 <strong style="color: #0056b3;">重點內容</strong>；期限或重要提醒使用 <strong style="color: #8b4500;">期程與提醒</strong>（對比度皆大於 7:1）。
  6. 獨立連結框（用於報名系統、問卷或重要下載區）：<div style="background-color: #f7fafc; border: 1px solid #cbd5e0; border-left: 5px solid #0056b3; border-radius: 6px; padding: 14px 18px; margin-bottom: 20px;">
  7. 重要警告／注意事項框（用於懲處、截止日或退費等嚴格規定）：<div style="border-left: 5px solid #c62828; background-color: #fdf2f2; padding: 14px 16px; border-radius: 0 6px 6px 0; margin-bottom: 20px;"><strong style="color: #8b1a1a;">【重要提醒】</strong><br />提醒內容</div>

三、元件無障礙標準規範

  1. 超連結與檔案下載（<a>）：
    • 外部網站或檔案下載必須加上 target="_blank" rel="noopener noreferrer"。
    • 樣式固定為 style="color: #0056b3; font-weight: bold; text-decoration: underline; word-break: break-word;"。
    • 可見文字與 title 屬性都必須明確標示「檔案格式」與「另開新視窗」。
    • 網頁連結範例：<a href="網址" target="_blank" rel="noopener noreferrer" title="[另開新視窗] 前往校內問卷系統（網頁）" style="color: #0056b3; font-weight: bold; text-decoration: underline; word-break: break-word;">校內問卷系統（網頁，另開新視窗）</a>
    • 檔案下載範例：<a href="網址" target="_blank" rel="noopener noreferrer" title="[另開新視窗] 下載活動實施計畫 PDF 檔" style="color: #0056b3; font-weight: bold; text-decoration: underline; word-break: break-word;">活動實施計畫（PDF檔，另開新視窗）</a>
  2. 圖片與活動海報（<img>）：
    • 外層用 <div style="text-align: center; margin: 20px auto;"> 包覆。
    • 圖片標籤固定為：<img alt="完整描述圖片主題與關鍵資訊，詳細文字內容請見上方公告說明" src="圖片路徑" style="width: 100%; max-width: 800px; height: auto; display: block; margin: 0 auto; border: 1px solid #e2e8f0; border-radius: 6px;" />
  3. 表格（<table>）：
    • 外層必須包覆橫向捲動防破版容器：<div style="width: 100%; overflow-x: auto; margin-bottom: 20px;">。
    • 表格 <table style="width: 100%; min-width: 500px; border-collapse: collapse; background-color: #ffffff; border: 1px solid #cbd5e0;"> 內必須包含視覺隱藏標題 <caption style="position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0);">表格內容摘要說明</caption>、<thead>、<tbody>，且所有表頭儲存格必須使用 <th scope="col"> 或 <th scope="row">。
  4. 聯絡電話：
    • 凡出現市話或手機號碼，請轉為一鍵撥號連結：<a href="tel:0226009482" style="color: #0056b3; font-weight: bold; text-decoration: underline;" title="[開啟撥號軟體] 撥打 02-26009482">(02)2600-9482</a>。
  5. 外嵌影片（<iframe>）：
    • 必須使用 16:9 響應式容器包覆（<div style="position: relative; width: 100%; max-width: 800px; margin: 20px auto; padding-bottom: 56.25%; height: 0; overflow: hidden;">）。
    • <iframe> 必須有描述性 title（如 title="影音播放-活動紀錄影片"），不可使用 frameborder、scrolling 或 allowfullscreen="true"，全螢幕請單寫 allowfullscreen。

四、輸出格式要求

請直接輸出一個完整的 HTML 程式碼區塊，不要在程式碼內加入任何註解，也不要輸出多餘的解釋文字，讓我可以直接全選複製貼上。

以下是我要發布的公告草稿：（請老師或同仁在此處貼上您的公告文字）

單位: 圖書館
瀏覽數:
登入成功