設計/建築
網頁-27
WEB-27:所有機構均應未改變,並按照《COV 設計系統》定義展示英聯邦旗幟。
了解網頁-27
聯邦品牌律師協助公民識別弗吉尼亞聯邦政府組織的官方網站。 它還可以幫助訪客了解他們所在的網站是官方和安全的。 新的品牌欄還可以作為網站訪客的導航門戶,可以輕鬆地在政府機構之間瀏覽並搜索共和國各地的信息,而無需返回 Virginia.gov。
品牌列易於安裝,並且可以在獲取聯邦品牌條下找到指示和代碼,供代理商在其網站上放置。 此頁面提供了生成代碼以放置在代理商網站的頭標籤中的逐步說明。 代理商還可以選擇在灰色和白色品牌條之間進行選擇,以更適合其網站的顏色主題。
產生的每個品牌列都包含:
- 弗吉尼亞州徽標
- 機構或弗吉尼亞州政府實體名稱,其產生器必須完整拼寫名稱
- 一條旁白說:「弗吉尼亞聯邦的官方網站」,並一個下拉列表明「以下是您知道的方式」。
- 下拉列表包含有關弗吉尼亞聯邦徽標和 HTTPS 憑證的信息。
- 標記為「查找英聯邦資源」的子菜單,單擊時允許用戶在弗吉尼亞州機構或政府實體搜索,以及按代理服務區域排序的常用聯邦服務和資源。
產生的代碼應該原樣使用,不應以任何方式修改。 任何安裝問題應通過電子郵件發送給 VITA 的企業 Web 服務團隊。 生成的代碼應該原樣使用,不應以任何方式修改。 如有安裝的任何問題,應通過電子郵件發送給 VITA 的企業網絡服務團隊,以電子郵件 developer@vita.virginia.gov。
網頁-28
WEB-28:COV 網絡系統應提供一個代理網站搜索框,該框應顯示在每個頁面上,並按照 COV 設計系統的指令顯示。
了解網頁-28
在每個代理商網站和頁面上擁有一個全代理的網站搜索框,使用者可以通過輸入相關關鍵字和搜索詞來將他們引導到相關鏈接列表,以更快地訪問信息。 機構不能僅依賴主要或次要導航來將用戶引導到相關信息。
由於存放大量內容和信息的網站(尤其是涉及政策、程序或公民服務)的網站,搜索框變得越來越重要,因此搜索框應該在每個頁面上顯示明顯,並且應該容易被用戶注意到。
此外,搜尋方塊應遵守下列最佳做法:
- 在可能的情況下,搜尋應保留一個帶有標記為「search」的預留位置文字的開放文字查詢欄位,或其中包含更多關聯式指示,僅限於使用者可以輸入查詢的幾個單詞。
- 搜索框應附有最少細節的放大鏡圖示S 可能(簡單的線性)。 用戶通常認識到放大鏡是搜索功能的符號。
- 在可能的情況下,此圖示不應隱藏搜索功能,因為它會增加互動成本(點擊次數更多)並使搜索功能變得不同。
- 如果有疑問,請像谷歌一樣做。
- 搜索查詢應通過點擊 enter 來確認。 如果需要,也可以通過點擊確認按鈕來確認搜索查詢,但應保留在搜索框中點擊 enter 的互動。
- 如果添加確認按鈕,則應適當的大小和放置(通常是搜索框本身的高度,放置在開放文本查詢欄位的右側)。 此搜尋按鈕的大小至少必須為 45 x 45 像素,才能符合輔助使用最佳做法。
- 輸入文本框的大小應該是寬大,以最少處理大約 27 字符的長度(使用 ems 設置)。
- 在可能的情況下,搜索框應放在代理商網站的右上角,聯邦品牌欄下方。
- 不到 10 項目的自動建議下拉欄位可以幫助使用者更快地找到他們要尋找的內容,但是,使用此功能的機構應確保該欄位自動產生的建議應與輸入欄位中輸入的搜尋字詞相關。
- 一旦使用者按下 enter,除非使用者清除該使用者清除,否則原始搜尋字詞應保留在欄位中,並且應顯示使用者根據其搜尋查詢顯示結果的結果頁面。
- 如果搜尋查詢沒有傳回結果,則應顯示使用者清楚說明沒有相符的結果的資訊。
網頁-29
WEB-29:COV 網絡系統應包括網站地圖,以使搜索引擎更有效率地檢索網站。 例子將在 COV 設計系統中提供。
了解網頁-29
Sitemap 是一個文件,可讓搜索引擎通過檢索其內容來發現您的網站大部分。
網站地圖應該是 XML 格式,這允許搜索引擎不僅索引 HTML 文件,還可以索引有關圖像,視頻,新聞內容和代理商網頁的本地化版本的數據。
若要進一步了解如何以 XML 格式建立網站地圖,請造訪 網站地圖 XML 格式文件在 Sitemaps.org 上。
VITA 建議遵循下列在 developers.google.com 上所載的網站地圖最佳做法:
- 單一網站地圖應限制在未壓縮的 50 MB。 如果您的機構的網站地圖檔案較大,請將您的網站地圖分成多個網站地圖。
- 網站地圖檔案必須是 UTF-8 編碼。
- 建議您的網站地圖託管在網站根目錄。
- 在網站地圖中使用完全符合條件的絕對網址,例如,使用 https://www.myvaagency.gov/agencypage.html 而不是 /agencypage.html。
網頁-30
WEB-30:COV 網絡系統應確保每個頁面都有一個頁尾,至少包含以下信息:
- 機構名稱
- 版權資訊
- 文字或已核准的圖示鏈接,指出 Web 無障礙倡議 (WAI) 符合性。
- 鏈接到該機構的互聯網隱私政策聲明。
- 連結至 FOIA 資訊
- 翻譯免責聲明
- 聯絡我們頁面
- COV 設計系統定義的其他項目
了解網頁-30
網站頁腳是一種靜態 UI 模式,顯示在所有機構網站頁面的最下方。 WEB-30 規定在每個頁尾上顯示以下內容:
- 機構名稱: 應顯示完整的代理商名稱
- 版權資訊: 顯示為版權 © 全部代理名稱 [本年]
- 文字或已核准的圖示連結,指出無障礙網頁計劃 (WAI): 編寫為無障礙網頁計劃,並鏈接到 WCAG 2 .0 AA 一致性頁面。或者,機構可以使用 WAI 標誌連結至 WAI。 標誌使用指南和代碼可以在 W3C 新增 WCAG 符合標誌頁面。
- 在使用此鏈接時,機構必須努力滿足 WCAG 2 .0 中所述的 AA 合規性非常重要。
- 連結至該機構的互聯網隱私政策聲明: 隱私政策是特定於機構的,但至少應說明機構在訪問網站時如何使用和收集用戶的信息,收集哪些信息,它如何與弗吉尼亞州法律相關,用戶可以在哪裡聯繫以獲取更多信息,cookie 政策和與使用用戶數據有關的其他信息。 一個例子可以在 弗吉尼亞州。gov。
- 聯繫 FOIA 信息: FOIA 信息是特定於機構的,應包含有關弗吉尼亞州信息自由法案,用戶的 FOIA 權利,用戶如何請求記錄,發送請求的位置以及機構接收請求時的責任的信息。 有關 FOIA 的更多信息可以在 弗吉尼亞州代碼,第 37 章。
- 翻譯免責聲明:翻譯免責聲明指出第三方(通常是 Google 翻譯)可以本地化頁面。 本免責聲明應該命名第三方,以及說明該選項是為了幫助用戶以英語以外的語言提供網站,但沒有自動翻譯是完美的,並且第三方服務是「現狀」提供的。 一個例子可以在 VITA 的翻譯免責聲明頁面。
- 「聯繫我們」頁面:頁尾應包含聯繫我們頁面。 有關更多信息,請參閱 WEB-31。
此外,COV 設計系統建議所有頁尾
- 在行動裝置上工作
- 頁尾中的其他鏈接應有目的選擇(常用,迷你網站地圖等)
- 包含社交媒體鏈接/圖標,但不包含整個社交摘要
- 清晰易讀,圖像最少或無
- 如果使用,請保持行動呼籲簡短,並具有明確的方向和目的。
網頁-31
WEB-31: COV 網絡系統應提供「聯繫我們」頁面,該頁面至少應包括該機構的:
- 郵寄地址
- 傳真號碼 (如有)
- 電話號碼,包括免費電話號碼和/或 TTY 號碼(如有)
- 通過電子郵件鏈接或聯繫表格給代理商聯繫人。
- 請從頁尾存取「聯絡我們」頁面。
了解網頁-31
注意事項 機構應使用通用電子郵件地址,避免將機構聯繫鏈接與特定個人聯繫起來。
「聯繫我們」頁面允許用戶通過各種方式與機構聯繫有任何問題或疑慮,以滿足不同的用戶。
- 郵寄地址應該是機構的實體地址,而不是郵政信箱,格式如下:
全部機構名稱
123 街道地址道路, 套房編號 456
城市,弗吉尼亞州郵遞區號
- 傳真號碼 (如有) 格式如下:
123 -555-5555 (傳真)
- 電話號碼,包括免費電話號碼和/或 TTY 號碼(如果有),格式化如下:
1 -123-555 -5555 (電話)
1 -800-555 -5555 (免費電話)
1 -123-555 -5555 (台灣時間)
- 如有需要,可以提供有關如何使用 TTY 或中繼服務(如果有)的更多說明。
- 應使用通用電子郵件鏈接,以避免將機構聯繫與特定個人聯繫起來,並應以下格式化:
contact@agency.virginia.gov
代理商聯絡人的聯絡表單是電子郵件地址的替代方式。 如果使用表單,表格應至少包含以下需要回覆的欄位, 帶有適當的標籤: - 名字
- 姓氏 (?姓氏真的是必要的嗎?遵循最小原則)
- 電子郵件或電話號碼
- 留言或評論欄位
網頁-36
WEB-36:COV 平台網絡系統,包括商業現貨系統(COTS)系統,應支持白標籤,以便無縫地使用 COV 設計系統所定義的聯邦品牌。
了解網頁-36
平台 Web 系統由 EA 定義為:
提供大規模或多租戶實作的企業級功能的任何 Web 系統,包括人力資源管理系統 (HRMS)、財務管理解決方案 (FMS)、供應鏈管理 (SCM)、客戶關係管理 (CRM)、企業績效管理 (EPM) 和內容管理系統 (CMS)。
這些系統應允許 COVA 機構在外部展示或面向公眾時,將其外觀重新品牌,以符合 EA 外觀和設計系統標準(也稱為白標)。 至少,可供公共用戶訪問的平台網絡系統應在頁面頂部顯示聯邦品牌欄。
無障礙
網頁-39
WEB-39: COV 網絡系統應提供必要的無障礙資訊,該資訊必須按照 COV 設計系統的指令顯示,以便用戶就如何最佳瀏覽網站的知識。
了解網頁-39
COV 網站系統應清楚列出 WEB-30 列出的網站的 無障礙 性合規性,特 別 是 通知用戶 瀏覽網站所需的策略,無論能力如何。 此外 ,機 構應 包括一份無障礙聲明,其中包括該 機構在開發無障礙網站方面所做 的努 力,他們如何跟踪無障礙性,以及用戶可以向誰指出無障礙性相關問題 。
網頁-40-網站-43
視覺要求 (網頁-40-網-43)
了解網頁-40-網-43
高對比色彩指引基於 WCAG 的成功標準 1 .4。3 對比度(最小),其中表示:
視覺呈現 文本 和 文字的圖像 有一個 對比率 至少為 4 .5:1,以下情況除外:
- 大規模 大規模文字的文字和圖像對比率至少為 3:1;
- 屬於非作用中文件的文字或影像 使用者介面元件,那就是 純淨的裝飾,任何人都無法看到的,或是包含其他重要視覺內容的圖片的一部分,沒有對比度要求。
- 屬於標誌或品牌名稱的文字沒有對比度要求。
可以使用 SiteImprove 等稽核工具或線上檢查器來確定顏色對比比率,例如 網上海姆。
音訊提示指引以 WCAG 的成功標準 1 .2 為基礎。2 字幕(預先錄製),其中表示:
同步媒體中所有預先錄製的音訊內容均提供字幕,但媒體是文字替代媒體並清楚標示為此。
有關渲染字幕的最佳實踐指南可在 世界棒球協會推薦網站 joeclark.org 以及 描述和字幕媒體計劃網站。
此外,並非所有用戶都可以理解或感知顏色、影像或其他視覺提示,這是因影響視力的障礙,例如視力障礙的使用者失明或色盲。 WEB-41 基於世界總會的成功標準 1 .4。1 顏色的使用,其中指出:
顏色不是用作傳輸資訊、指示動作、提示回應或區分視覺元素的唯一視覺方式。
例如,如果聯繫表單有一個用於「提交」的綠色按鈕,用於「清除表單」的灰色按鈕,」, 提交的按鈕和說明都應清楚標示。 在這種情況下,綠色按鈕應標示為「提交」,紅色按鈕應標示「清除」。」。 該說明應該指導用戶「單擊提交按鈕確認提交表格,或單擊清除表單按鈕清除表單並重新開始」。
標籤應清晰且描述性,以避免使用者混亂,但足夠簡潔,使用者能夠快速閱讀,並幫助讀取或其他認知障礙的用戶。
機構不應單獨使用顏色來表示其網站上的超鏈接。 機構應該尋求使用 一致,易於識別的設計模式,表示內部和外部面向的超鏈接,例如通過基礎,CSS 懸停狀態和圖標(尤其是在面向外部超鏈接的情況下)。
此外,標記為必填的欄位或遇到輸入錯誤的欄位必須以不僅透過使用顏色識別的方式顯示此資訊。 例如,欄位不能僅在紅色邊框中突出顯示,或旁邊有紅色星號。 相反,機構應考慮識別碼,例如「必填名字」或「名字 *」,以及表示「* = 必填欄位」的通知人。
必要欄位最佳做法的視覺範例和程式碼範例可在 Deque 的無障 礙表單解析:必填表格欄位頁面。
對於用戶輸入的錯誤,錯誤應該通過清晰簡潔的錯誤描述來輕鬆識別錯誤。 每個錯誤訊息也應符合下列條件:
- 識別錯誤的每個字段
- 提供建議(如果已知)來更正錯誤 ,
- 適當地將這些信息暴露給輔助技術。
有關如何格式化有錯誤的可訪問表單欄位的其他信息和示例,請訪問 層次存取 '如何 提供可存取的表單錯誤識別頁面。
ARIA 要求
網頁-44-網站-53
網站 44-網-53:ARIA 要求
了解網頁-44-網-53
HTML 5 包含更多種類和更具描述性的 HTML 標籤,可幫助開發人員和可訪問的技術更輕鬆地理解網頁的結構、內容和組織。 機構應確保其網站正確使用語義 HTML,以幫助開發人員,用戶和可訪問的技術適當地訪問其網站的內容。 此外,HTML5 語義標記有助於限制 ARIA 在 HTML 代碼中的使用。 有關 HTML 5 中的語義標記及其在可訪問中的作用的更多信息,請訪問 Mozilla 的 HTML:無障礙網頁的良好基礎。
ARIA 或可訪問的豐富互聯網應用程序是一組角色和屬性添加到 HTML 代碼中,以使用輔助 Web 技術的用戶更容易訪問網站。 如果您可以選擇使用已內置語義和行為的 HTML 元素,請使用該 HTML 元素而不是 AIRA。 如果沒有其他 HTML 元素以語義或行為方式描述或執行其作用的 HTML 元素,機構應該將 ARIA 與 HTML 元素一起使用。 當機構選擇使用 ARIA 時,他們應該注意,他們負責為輔助 Web 技術(例如鍵盤標籤順序)創建適當且類似的原生體驗。
WEB-44 — WEB-53 特別表示 ARIA 使用要求,如果機構發現沒有相等語義標記的情況。 開發人員可以參考 W3C 無障礙的豐富互聯網應用程式 (WAI-ARIA) 1 .3 有關 ARIA 標準的更深入細節,而設計師可以參考 W3C 的 ARIA 創作實踐指南(APG) 了解有關常見設計模式以及如何設計最適合 ARIA 使用情況的互動的信息。
使用者與版面配置互動
網頁-54-網站-102
WEB-54-WEB-102:用戶與佈局的互動
了解網頁-54-網-102
當代理商創建網站時,他們不僅應考慮「最常見」的用戶,而且應考慮為各種用戶類型和生活體驗的設計。 這些群組通常分為以下類別:
- 視覺
- 聽覺
- 馬達
- 認知
因此,機構應確保他們的網站能夠訪問和與這五個用戶組進行互動,並提供其他網站互動的替代變體。 例如,如果可以使用鼠標指標訪問鏈接,則它也必須通過鍵盤通過標籤順序進行訪問,通過屏幕閱讀器通過語義標記來訪問,並且不僅通過顏色表示可以視覺化表示。 此外,機構應考慮通過替代文本描述視覺媒介(例如圖像),以及描述性或其他同等文本來用於聽覺提示。
機構應允許用戶完全控制網頁(如果網頁包含播放的媒體(聽覺和/或視覺),並避免閃爍和滾動圖像,對於可能患有動症或偏頭痛觸發的用戶。
如果有疑問,請保持簡單!
開發商和機構可以參考 WCAG 網絡 2 .1 標準 如果他們想進一步深入探索,獲得最新和經批准的 Web 標準。 但是, 哈佛大學制定了一份簡單易於閱讀的指南,針對開發人員在無障礙功能方面應考慮的頂級 10 基本要點 它涵蓋了 WEB-54-WEB-71 中涵蓋的大多數主題。
WEB-72-WEB-102 專注於製作網站 可感知,可操作, 和 堅固耐用。 這些是記錄的四個原則中的三個 WCAG 的四個無障礙原則。
根據 WCAG,以下四個原則是:
- 可感知 -信息和用戶界面組件必須以他們可以感知的方式向用戶呈現。 這意味著用戶必須能夠感知所顯示的信息(它不能對他們所有感官看不到)
- 可操作 -使用者介面元件和導航必須可操作。 這意味著使用者必須能夠操作介面(介面不能需要使用者無法執行的互動)
- 可以理解 -信息和用戶界面的操作必須是可以理解的。 這意味著用戶必須能夠理解信息以及用戶界面的操作(內容或操作不能超越他們的理解)
- 堅固耐用 -內容必須足夠強大,以便由各種用戶代理程式(包括輔助技術)可靠地解釋它。 這意味著隨著技術的進步,用戶必須能夠訪問內容(隨著技術和用戶代理的發展,內容應該保持可訪問)
這四個原則構成了當今網絡上現代無障礙標準的骨幹。
此外,WEB-72 指出代理商網站應至少包含 二 以下項目中:
- 相關頁面列表
- 目錄
- 網站地圖
- 搜索
- 所有頁面列表
有關簡明簡明的更多信息,機構可參考 哈佛大學數位無障礙倡議網站的原則。
使用者裝置導覽
網頁-103-網站-120
網頁 103- WEB-120: 使用者裝置導航
了解網頁-103-網-120
WEB-103 — WEB-120 專注於瀏覽網站的替代方式。 重要的是要意識到,並非所有用戶都使用使用鼠標指針的輸入設備。 其他輸入設備可以包括螢幕閱讀器、語音指令、口棒、sip 和泡泡,以及電腦鍵盤上的 Tab 鍵和輸入鍵,以及其中幾個。
機構可以在 伯克利大學輔助技術類型網頁。
此外,本 EA 部分還引用了移動設備上的潛在用戶的馬達控制功能,指出:
COV Web 系統不得要求多點或基於路徑的手勢,例如夾住、滑動或拖曳。 用於功能,除非手勢對該功能至關重要。
這意味著在觸摸屏裝置上,用戶應該能夠在網頁上縮放、放大文字或執行基本互動,而無需手勢控制;而且應該開發網站以原生回應不同的屏幕尺寸和裝置。
機構可以在下面找到其他無障礙技術的細節,包括該部分中的技術 哈佛大學輔助技術網頁。
影音內容
網頁-121-網站-128
影音內容:網頁-121-網頁-128
了解網頁-121-網-128
所有音頻和視覺媒體應適當地訪問和格式化,供用戶在 Web 上使用。 EA 中的本節具體參考 WCAG 指引 1 .2-以時間為本的媒體,其中概述了如何使網站上的 AV 內容可訪問。 標準 1 .2.1 和 1 .2.應該引用 5,如下所示:
- 提供了一種以時間為基礎的媒體的替代方案,為預先錄製的僅限音頻或僅視頻內容提供相等信息。
- 為同步媒體中所有預先錄製的音頻內容提供字幕。
- 同步化媒體提供預錄影片內容的時間型媒體或音訊描述的替代方案,
- 為同步媒體中的所有實時音頻內容提供字幕。
- 為同步媒體中所有預先錄製的視頻內容提供音頻描述。
此外,所有實時內容,例如在機構網站或應用程序上託管的網絡廣播和網絡廣播,也應提供準確且準時的字幕(例如實時字幕和/或 CART 轉錄)。
用戶還應該能夠隨時暫停,播放和停止媒體;並且媒體不應該在用戶訪問頁面時自動播放。
