課程教材無障礙考量

在 Udemy,您的影片內容與課程教材將相互配合,強化您教導的內容,並且幫助學會新技能。因此,為了確保您的整個課程具備無障礙性,您課程中提供的任何內容均應具備無障礙性。

在這個章節中,我們將分四個部分討論無障礙課程教材: 

 

內容組織

  • 保持內容井井有條,並以有區別性的標題將文字分成較短的段落。這將讓所有使用者更輕鬆地瀏覽,並且讓內容更易於閱讀。
  • 請在所有文件的開頭提供目錄或概述 (幾句話,或者使用項目符號清單) 說明即將教導的內容。
  • 包含術語表及其定義並設為可下載資源,協助使用者完成課程。如果有使用任何投影片,最好也能包含投影片的可下載資源或連結。
  • 請務必檢查您的拼字、文法與可讀性。可讀性指的是一段文字對某人而言容易閱讀的程度。可讀性涉及諸多因素,例如句子長度、音節密度、主題複雜度和單字熟悉度。進行最終檢查時,找一位同事或好友閱讀課程內容並試著做看看練習,以確保您的課程具備無障礙性!

 

使文件具備無障礙性

視覺障礙人士使用的螢幕閱讀器 (如 JAWS、NVDA 或 Voiceover) 不僅能夠閱讀頁面上的文字,還能將其組織成標題、副標題和條列式選項的方式傳達出來。舉例來說,當以視覺閱讀者看見頁面上以大型粗體字顯示章節標題時,視覺障礙人士則透過所謂的「語義標記 (semantic markup)」得知標題為何。這種元資料對於無障礙文件而言十分關鍵。值得高興的是,許多文字處理程式和應用程式 (如 Microsoft Word 和 Google 文件) 均內建此功能。

瞭解哪些因素會讓螢幕閱讀器更難工作也很重要。例如,如果表格中有合併儲存格,使用螢幕閱讀器時,可能會更難瀏覽及理解其結構。此外,使用非語義的方式完成格式設定時,螢幕閱讀器可能會傳達令人困惑的資訊。舉例來說,若您使用星號與 Tab 鍵建立項目符號,螢幕閱讀器可能會讀成「Tab」或「星號」,而非「項目符號」。

本節針對在數位文件新增語義只提到幾個主題,但我們附上了幾個內容相當全面的資源。

 

制式標題

標題是讓您的內容更加無障礙的最佳方式之一。使用制式的語義和視覺標題,無論視力良好或視力不良的使用者,都能更輕鬆地閱讀內容。

透過使用制式的語義標題 (這些標題有時在文字處理或投影片應用程式會標記為「H1」或「Heading 1」) 來組織您的內容,可以確保螢幕閱讀器精確地傳達您的內容。舉例來說,文件標題應為第一級標題,章節標題應為第二級 (如 H2),而子章節標題可能是第三或第四級。請看以下範例:

 

頁面標題 (標題 1)

章節標題 (標題 2)

此處為文字內容。

子章節標題 (標題 3)

此處為文字內容。

注意:請避免略過標題層級,比方說,請勿從第一級標題跳至第三級標題。 

 

制式項目清單與編號清單

一律使用文字處理或投影片應用程式的項目符號 (無序列表) 和編號清單 (有序列表) 功能,而非使用 Tab 鍵、星號和數字手動設定文字樣式。螢幕閱讀器將識別這些清單類型,並正確呈現您的內容。 

 

簡單的表格結構

小心跨 (或合併) 行/列的表格結構,並且避免表格標題出現多個層級。 合併儲存格對向學習者解釋和螢幕閱讀器的解譯都會造成混淆。如果可以,請避免使用表格作為視覺配置。 

 

確保使用敘述性的連結

請避免使用缺少上下文脈絡的獨立短句,如:

  • 「按一下這裡」 
  • 「這裡」
  • 「更多」
  • 「更多資訊」
  • 「閱讀更多」
  • 「繼續」 

 

我們建議使用以下能提供更多脈絡的短句替代:

  • 「您可以在此下載教學大綱」
  • 「連向引用____的資源」
  • 「從此連結可取得額外的____」

除非是要用於列印的文件,或是 URL 為相關內容,否則請避免單獨使用 URL 作為連結,例如 www.abcde.com。

 

影像/媒體的替代文字

一張照片勝過千言萬語,但視力受損或失明的學習者將仰賴您提供的影像替代文字。始終為文件、投影片簡報等內容中的影像,提供清晰且有上下文脈絡的替代文字。對於使用螢幕閱讀器或其他輔助技術的使用者,這些文字會被大聲讀出來。

  • 有許多工具可讓您提供影像的替代文字。這些空格有時會標記為「alt text」、「alternative」,或甚至「image description」之類的詞組。若有出現,請使用此欄位提供影像的替代文字。
  • 替代文字應呈現影像的真實意思,不一定僅為單純描述。舉例來說,替代文字應說出「代表『設定』的齒輪影像」,而不僅僅是「齒輪圖示」。如果您必須移除影像,您會在原本的位置放入什麼文字?或者,如果您必須透過電話向某人描述影像,請試著想想您可能會向對方提及的內容,並且將其作為您的影像描述資訊。
  • 如果影像沒有相關內容、功能或只是單純裝飾用,或是在附近的文字中有提供其替代文字,則該影像的替代文字欄位應盡可能空白。部分文字處理或投影片應用程式設有「blank」(空白) 或「empty」(留白) 選項。 
  • 請避免使用「XX 的照片」、「XX 的影像」,或是「XX 的連結」之類的字眼。輔助技術將自動處理此類狀況,讓使用者知道他們目前接收的資訊是關於某個影像。
  • 在不犧牲清晰度與上下文脈絡的情況下,盡可能使用最少的字數。
  • 就 PDF 文件而言,Adobe Acrobat Pro 可驗證您的文件是否符合無障礙標準。您可在「資源」區塊下找到連結。

 

附替代文字的影像範例

沙發上坐著一個使用筆記型電腦工作的成人,以及一個帶著耳機觀看平板電腦的兒童。

大多數時候,預設文字為影像檔案名稱,此類文字可能無法幫助瞭解影像。

預設的替代文字 (檔案名稱) adult-kid-tech_revised_220811.jpg

修改後的替代文字: 沙發上坐著一個使用筆記型電腦工作的成人,以及一個帶著耳機觀看平板電腦的兒童。

 

使用強烈的色彩對比

色彩對比指的是兩種顏色不同亮度層級的衡量結果,通常會以 1:1 (差) 到 21:1 (絕佳) 的比例表示。請務必使用高色彩對比,特別是文字與背景之間應有高對比。包含文字的影像同樣應具備高對比。為了協助說明低對比和高對比組合之間的差異,我們提供了下方幾個在白色背景上顯示彩色文字的範例。 

較差對比度

符合無障礙內容標準的最低對比值為 4.5:1。以下是未達到門檻的色彩組合範例,應避免使用:

  • 黃色文字 – 分數:1.07:1
  • 淡綠色文字 – 分數:1.12:1
  • 橙色文字 – 分數:2.14:1
  • 粉紅色文字 – 分數:3.14:1
  • 紅色文字 – 分數:4.0:1

 

良好對比度

下列色彩組合是能夠提供足夠對比度的好選擇 (對比值為 4.5:1 至 7:1)

  • 藍色文字 – 分數:4.68:1
  • 深綠色文字 – 分數:5.14:1
  • 紫色文字 – 分數:6.95:1

 

絕佳對比度

您一定會想要使用下列色彩,因為它們能提供最佳對比度:(對比值高於 7:1):

  • 焦橙色文字 – 分數:7.43:1
  • 深灰色文字 – 分數:12.63:1
  • 黑色文字 – 分數:21:1

 

無障礙課程內容最佳實務總結

内容

  • 保持文案井井有條,並且將內容分成較短的段落
  • 所有內容很長的文件,均應提供目錄或摘要
  • 應提供術語表
  • 檢查拼字、文法與可讀性

 

文件語義

  • 使用語義標記,使輔助技術能夠正常運作 
  • 使用制式標題組織您的內容
  • 使用制式項目清單與編號清單
  • 盡可能使用最簡單的表格結構
  • 確保使用敘述性的連結

 

替代文字

  • 為您的文件、投影片簡報等內容中的影像,提供適當的替代文字。 

 

色彩對比

  • 針對文字和影像,使用強烈的色彩對比

 

其他無障礙與共融相關文章連結

準備好建立課程了嗎?開始吧!

建立課程