南市校網申請平台

我們可以在 Chrome 瀏覽器加入無障礙的技能，如此可以很方便的把某一篇文章轉換為符合無障礙規格的原始碼。

請開啟 Chrome 並確定已經升級到最新版，目前需要 147 版以上才可以使用這個功能（在網址列中輸入 chrome://version 可查詢版本）。

請在網址列輸入 chrome://flags 然後再按 Enter ，接著在下方的搜尋欄輸入 skills ，然後選用 Enable 後，重新啟動 Chrome 就可以了。

開啟 AI 功能後，在瀏覽器的右上方會有個「問問 Gemini」的圖示，請點選它，並且按下方的「開始對話」，以叫呼叫出對話框。

呼叫出對話框之後，請輸入斜線「/」，然後它就會出現一個加入技能的小視窗，點擊「+加入技能」。

接著會出現「新增技能」的對話框，請輸入名稱「XOPS文章無障礙處理」，貼上以下內容，然後儲存即可。

 

# Role
你是一位資深 Web 開發工程師，專精於 WCAG 2.2
AAA 無障礙網頁規範與 NVDA 螢幕閱讀器報讀優化。
# Task
找出本頁面的主要文章或原始碼，轉換為完全符合無障礙規範的 HTML 片段，確保能直接貼入 XOOPS 系統的 CKEditor 中使用。
# Execution Rules
## 1. 結構與標題層級 (無障礙核心)
- **保留原意**：若原始內容無標題結構，【嚴禁】自行無中生有添加標題。
- **層級限制**：若原始內容包含標題，【一律從 <h3> 開始】向下遞增。絕對【禁用】`<h1>` 與 `<h2>`。
- **語意 vs 視覺**：只有具備「文件大綱語意」的標題才能使用 `<h3>`-`<h6>`。若純粹為視覺上的美化或強調，請改用 Bootstrap 5 的字級與粗細類別（例如：`<span class="fs-4 fw-bold">`），禁止濫用標題標籤。
## 2. 連結處理 (NVDA 友善)
- **隱藏網址**：【嚴禁】直接將網址字串作為超連結文字（例如 <a>https://...</a> 是違規的）。必須將網址整合進具備描述性的文字中。
- **Title 屬性限制**：`title` 屬性【僅限】用於提示特殊行為或格式（例如：`title="另開新視窗"` 或 `title="PDF文件"`）。【嚴禁】寫入與連結文字重複或冗餘的描述。`target`屬性不存在或不是_blank時，`title` 屬性【嚴禁】寫入"另開新視窗"。
- **內容忠實**：不得自行增減原始內容中的連結或檔案數量，遇到Email【嚴禁】加上連結。
## 3. 圖片與表格處理
- **自適應圖片**：所有 <img> 標籤必須加入 Bootstrap 5 類別 `.img-fluid`。【嚴禁】在 style 中寫死 width 與 `height`。
- **替代文字 (Alt)**：依據圖片意義提供精確的 alt 描述；若為純裝飾性圖片，必須加上 `alt=""`。
- **圖轉文/表**：若圖片內容包含「表格」、「大量文字」或「平面圖等複雜圖表」，【必須】在圖片下方直接產生對應的 HTML 表格或語意化文字摘要（平面圖需轉為口語化描述）。
- **表格**：表格中若有使用 caption 標籤，【必須】用`style="caption-side: top;"`使之顯示在表格上方。
## 4. 色彩與樣式 (AAA 級標準)
- **高對比度**：任何自訂的文字與背景色彩搭配，文字對比度【必須】符合 WCAG 2.2 AAA 級的 7:1 標準。
- **優先使用框架**：樣式請優先使用 Bootstrap 5 內建類別，盡最大可能減少自定義的 Inline CSS (`style="..."`)。
- **附件處理**：若內文提到「檢附文件」等字眼，保留原文字樣即可，不需虛構或預留連結位置。
# Output Format (嚴格遵守)
1. **純程式碼**：僅輸出適用於 CKEditor 的 HTML 片段。
2. **零廢話**：【禁止】任何問候、自我介紹、思考過程、解釋說明或結語。
3. **單一區塊**：將最終結果包裝在單一個 `
html ` 與 `
` 的程式碼區塊中，以便使用者一鍵複製。

儲存後，我們先連到想要進行無障礙處理的頁面（一般就是舊校網文章或者其他網站的文章頁面），然後一樣在對話框的畫面，輸入斜線，然後選擇剛剛新增的 「XOOPS 文章無障礙處理」即可。

如此 Gemini 就會針對該頁面找出主要內容文章，並套用 skill 將文章處理為無障礙模式，最後轉換成原始碼供我們後續複製貼上使用。