Skip to content

Commit

Permalink
chore(zh-tw): fix broken links to learn area (#25201)
Browse files Browse the repository at this point in the history
* zh-tw: use script to fix broken links to learn area

* fix the broken links in page macros
  • Loading branch information
yin1999 authored Dec 22, 2024
1 parent 15ec328 commit a4e7906
Show file tree
Hide file tree
Showing 133 changed files with 567 additions and 563 deletions.
2 changes: 1 addition & 1 deletion files/zh-tw/glossary/dns/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -11,5 +11,5 @@ DNS 主要的功能,是將人類易於辨識的域名(例如 mozilla.org)

## 參見

- [什麼是域名?](/zh-TW/docs/Learn/Common_questions/Web_mechanics/What_is_a_domain_name)
- [什麼是域名?](/zh-TW/docs/Learn_web_development/Howto/Web_mechanics/What_is_a_domain_name)
- 維基百科上的[域名系統](https://zh.wikipedia.org/wiki/域名系统)
2 changes: 1 addition & 1 deletion files/zh-tw/glossary/ftp/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -11,5 +11,5 @@ slug: Glossary/FTP

### 基礎知識

- [初學者指引通過 FTP 上傳文件](/zh-TW/docs/Learn/Common_questions/Tools_and_setup/Upload_files_to_a_web_server)
- [初學者指引通過 FTP 上傳文件](/zh-TW/docs/Learn_web_development/Howto/Tools_and_setup/Upload_files_to_a_web_server)
- 維基百科上的[FTP](https://zh.wikipedia.org/wiki/File_Transfer_Protocol)
2 changes: 1 addition & 1 deletion files/zh-tw/glossary/mime_type/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ slug: Glossary/MIME_type

- 維基百科上的[網際網路媒體型式](https://zh.wikipedia.org/wiki/互联网媒体类型)
- [MIME 類型列表](https://www.iana.org/assignments/media-types/media-types.xhtml)
- [正確的伺服器 MIME 類型配置](/zh-TW/docs/Learn/Server-side/Configuring_server_MIME_types)
- [正確的伺服器 MIME 類型配置](/zh-TW/docs/Learn_web_development/Extensions/Server-side/Configuring_server_MIME_types)
- [MIME 類型](/zh-TW/docs/Web/HTTP/MIME_types)在 Web 上下文中的詳細用法
- [MIME 類型的不完整列表](/zh-TW/docs/Web/HTTP/MIME_types/Common_types)
- [MediaRecorder.mimeType](/zh-TW/docs/Web/API/MediaRecorder/mimeType)
2 changes: 1 addition & 1 deletion files/zh-tw/glossary/progressive_enhancement/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ slug: Glossary/Progressive_Enhancement

漸進增強中的「漸進」指的是設計一個能夠在舊版瀏覽器或功能有限的設備上,實現「更簡單但仍可用」的體驗。同時並在新版瀏覽器或功能豐富的設備上實現更引人入勝、功能完整的體驗。

技術上會使用[功能偵測](/zh-TW/docs/Learn/Tools_and_testing/Cross_browser_testing/Feature_detection)(Feature detection)來判斷瀏覽器是否支持更現代的功能。若偵測到設備不支援,則可以使用 JavaScript [polyfill](/zh-TW/docs/Glossary/Polyfill) 等技術來補充缺失的功能。
技術上會使用[功能偵測](/zh-TW/docs/Learn_web_development/Extensions/Testing/Feature_detection)(Feature detection)來判斷瀏覽器是否支持更現代的功能。若偵測到設備不支援,則可以使用 JavaScript [polyfill](/zh-TW/docs/Glossary/Polyfill) 等技術來補充缺失的功能。

遵照這個設計哲學,並要特別考慮到網頁親和性,盡可能在受限狀況下,仍然提供簡單但不犧牲親和力的替代方案。

Expand Down
4 changes: 2 additions & 2 deletions files/zh-tw/glossary/url/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -19,8 +19,8 @@ URLs 同樣可以用於文件傳輸({{Glossary("FTP")}}) , 郵件 ({{Glossary("S

### 學習其他

- [Understanding URLs and their structure](/zh-TW/docs/Learn/Common_questions/Web_mechanics/What_is_a_URL)
- [Understanding URLs and their structure](/zh-TW/docs/Learn_web_development/Howto/Web_mechanics/What_is_a_URL)

### Specification

- [Understanding URLs and their structure](/zh-TW/docs/Learn/Common_questions/Web_mechanics/What_is_a_URL)
- [Understanding URLs and their structure](/zh-TW/docs/Learn_web_development/Howto/Web_mechanics/What_is_a_URL)
10 changes: 5 additions & 5 deletions files/zh-tw/learn_web_development/core/accessibility/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -29,20 +29,20 @@ When someone describes a site as "accessible," they mean that any user can use a

- [何謂無障礙網頁?](/zh-TW/docs/Learn_web_development/Core/Accessibility/What_is_accessibility)
- : 這篇文章針對何謂無障礙網頁,起了一個好開頭。這模塊包含了要考慮哪些族群以及理由、不同族群會用什麼工具和 Web 互動、還有怎麼把無障礙網頁導入 Web 開發工作流程。
- [HTML:無障礙網頁的好開始](/zh-TW/docs/Learn/Accessibility/HTML)
- [HTML:無障礙網頁的好開始](/zh-TW/docs/Learn_web_development/Core/Accessibility/HTML)
- : 只要確保在任何時候,正確的 HTML 元素都用於正確的目的,就能消除各種網頁的障礙。這篇文章詳述 HTML 如何確保網頁無障礙。
- [充分實踐 CSS 與 JavaScript 的無障礙](/zh-TW/docs/Learn/Accessibility/CSS_and_JavaScript)
- [充分實踐 CSS 與 JavaScript 的無障礙](/zh-TW/docs/Learn_web_development/Core/Accessibility/CSS_and_JavaScript)
- : 如果 CSS 與 JavaScript 使用得當,將可以為無障礙網頁提供助力……反過來的話,就會嚴重影響無障礙體驗。這篇文章詳述如何在內容複雜的情況下,確保能充分實踐 CSS 與 JavaScript 的無障礙。
- [WAI-ARIA 基礎](/zh-TW/docs/Learn_web_development/Core/Accessibility/WAI-ARIA_basics)
- : 從之前的文章來看,有時製作要涉及到非語意的 HTML 還有動態 JavaScript 更新技術……等,會令複雜的 UI 控制變得很困難。WAI-ARIA 正是為了解決此一問題而生。它對瀏覽器和輔助技術添加進一步的語意,讓用戶能知道發生了什麼事。我們將介紹如何在基本層面使用此技術,以提昇無障礙。
- [無障礙多媒體](/zh-TW/docs/Learn/Accessibility/Multimedia)
- [無障礙多媒體](/zh-TW/docs/Learn_web_development/Core/Accessibility/Multimedia)
- : 會導致無障礙網頁出問題的另一個根源是多媒體:影片、聲音、圖片等內容,需要有合適的文字替代,以便輔助技術和它的用戶能夠理解。我們將在這篇文章中闡明作法。
- [行動無障礙網頁](/zh-TW/docs/Learn/Accessibility/Mobile)
- [行動無障礙網頁](/zh-TW/docs/Learn_web_development/Core/Accessibility/Mobile)
- : 隨著行動設備訪問漸受歡迎、還有像是 iOS 與 Android 這般熱門平台,已經具備完善的輔助工具,考慮到如何在這些平台上實踐無障礙網頁,就變得十分重要。這篇文章將討論行動裝置特有的無障礙網頁相關議題。

## 評估

- [無障礙網頁偵錯](/zh-TW/docs/Learn/Accessibility/Accessibility_troubleshooting)
- [無障礙網頁偵錯](/zh-TW/docs/Learn_web_development/Core/Accessibility/Accessibility_troubleshooting)
- : 要評估本模塊,我們會提出一些簡單的網站,你需要偵測有哪些無障礙的問題並修復之。

## 參見
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ slug: Learn_web_development/Core/Accessibility/WAI-ARIA_basics
original_slug: Learn/Accessibility/WAI-ARIA_basics
---

{{LearnSidebar}}{{PreviousMenuNext("Learn/Accessibility/CSS_and_JavaScript","Learn/Accessibility/Multimedia", "Learn/Accessibility")}}
{{LearnSidebar}}{{PreviousMenuNext("Learn_web_development/Core/Accessibility/CSS_and_JavaScript","Learn_web_development/Core/Accessibility/Multimedia", "Learn_web_development/Core/Accessibility")}}

接續之前的文章,有時在涉及非語意 HTML 與動態 JavaScript 更新的內容製作複雜的 UI 控制措施將是個難題。WAI-ARIA 即是一個能藉由添加進一步的語意幫助處理這種問題的技術 ,讓瀏覽器與輔助科技可以辨識及用以讓使用者知道發生甚麼事情。這裡我們將展示如何以基本水準的運用來增進無障礙使用。

Expand Down Expand Up @@ -105,7 +105,7 @@ original_slug: Learn/Accessibility/WAI-ARIA_basics

在下一個章節我們將更仔細地看看這 4 個領域,並附帶實際的範例。在繼續之前,你應該將備妥螢幕報讀器測試設置,以便在過程中你可以測試這些範例。

更多資訊請參見[螢幕報讀器測試](/zh-TW/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#Screenreaders)章節。
更多資訊請參見[螢幕報讀器測試](/zh-TW/docs/Learn_web_development/Core/Accessibility/Tooling#Screenreaders)章節。

### 路標/地標

Expand Down Expand Up @@ -232,7 +232,7 @@ var intervalID = window.setInterval(showQuote, 10000);
這將使螢幕報讀器在內容更新時讀出更新的內容。

> [!NOTE]
> 如果你嘗試從 `XMLHttpRequest` 執行 `file://` URL``大部分的瀏覽器會拋出安全異常,例如你直接上傳該檔案到瀏覽器(透過雙擊滑鼠鍵等)。為了這項可以執行,你需要將檔案上傳到一個網站伺服器如 [GitHub](/zh-TW/docs/Learn/Common_questions/Tools_and_setup/Using_GitHub_pages),或本機網站伺服器如 [Python's SimpleHTTPServer](http://www.pythonforbeginners.com/modules-in-python/how-to-use-simplehttpserver/)
> 如果你嘗試從 `XMLHttpRequest` 執行 `file://` URL``大部分的瀏覽器會拋出安全異常,例如你直接上傳該檔案到瀏覽器(透過雙擊滑鼠鍵等)。為了這項可以執行,你需要將檔案上傳到一個網站伺服器如 [GitHub](/zh-TW/docs/Learn_web_development/Howto/Tools_and_setup/Using_GitHub_pages),或本機網站伺服器如 [Python's SimpleHTTPServer](http://www.pythonforbeginners.com/modules-in-python/how-to-use-simplehttpserver/)
這裡有一項額外的考量—只有文字更新才讀出。如果我們也總是讀出標題,那將很好,以讓使用者記住讀出的內容。為做到這樣,我們可以添加 [`aria-atomic`](https://www.w3.org/TR/wai-aria-1.1/#aria-atomic) 屬性到這個部分,再次更新你的 `<section>` 標籤如下所示:

Expand All @@ -258,15 +258,15 @@ var intervalID = window.setInterval(showQuote, 10000);
- `tabindex="0"` —如上述,此值允許正常不被 tab 遊走到的元素變得可以 tab 遊走,這是`tabindex`最有用的值。
- `tabindex="-1"` — 此允許正常不被 tab 遊走到的元素,可以程式化地獲得焦點,如透過 JavaScript 或作為連結的對象。

我們更詳細討論這一點並在我們的 HTML 無障礙文章中展示典型的實作—請參見 [Building keyboard accessibility back in](/zh-TW/docs/Learn/Accessibility/HTML#Building_keyboard_accessibility_back_in).
我們更詳細討論這一點並在我們的 HTML 無障礙文章中展示典型的實作—請參見 [Building keyboard accessibility back in](/zh-TW/docs/Learn_web_development/Core/Accessibility/HTML#Building_keyboard_accessibility_back_in).

### 非語意控制措施的無障礙

本部份接續前一章節—當一系列巢狀的 `<div>`搭配 CSS/JavaScript 用於創建一個複雜的 UI 特徵,或者一個透過 JavaScript 大幅增強/改變的原生控制措施,不僅鍵盤無障礙會遭遇到困難,而且如果沒有語意或其他線索,螢幕報讀器使用者也會發覺難以理解該特徵的作用。在這種情況下,ARIA 可以幫助提供缺失的語意。

#### 表單驗證與錯誤警告

首先,讓我們再看一次在我們的 CSS 與 JavaScript 無障礙文章中第一次看的表單範例(請閱讀 [Keeping it unobtrusive](/zh-TW/docs/Learn/Accessibility/CSS_and_JavaScript#Keeping_it_unobtrusive)完整回顧)。在本章節文末我們展示當你試著送出表單而驗證錯誤時,出現我們包含一些在錯誤訊息框的 ARIA 屬性。
首先,讓我們再看一次在我們的 CSS 與 JavaScript 無障礙文章中第一次看的表單範例(請閱讀 [Keeping it unobtrusive](/zh-TW/docs/Learn_web_development/Core/Accessibility/CSS_and_JavaScript#Keeping_it_unobtrusive)完整回顧)。在本章節文末我們展示當你試著送出表單而驗證錯誤時,出現我們包含一些在錯誤訊息框的 ARIA 屬性。

```html
<div class="errors" role="alert" aria-relevant="all">
Expand Down Expand Up @@ -343,7 +343,7 @@ function toggleMusician(bool) {

#### 描述非語意按鈕為按鈕

本課程我們已經談過幾次按鈕、連結或表單元素(參見 HTML 無障礙文章的 [UI controls](/zh-TW/docs/Learn/Accessibility/HTML#UI_controls) ,以及前述[增強鍵盤無障礙](#增強鍵盤無障礙)的原生無障礙(以及在使用其他元素偽造背後的無障礙議題)。基本上,使用 `tabindex` 與一些 JavaScript,在很多情況下,你可以在沒有太多困難下增加鍵盤無障礙支援功能。
本課程我們已經談過幾次按鈕、連結或表單元素(參見 HTML 無障礙文章的 [UI controls](/zh-TW/docs/Learn_web_development/Core/Accessibility/HTML#UI_controls) ,以及前述[增強鍵盤無障礙](#增強鍵盤無障礙)的原生無障礙(以及在使用其他元素偽造背後的無障礙議題)。基本上,使用 `tabindex` 與一些 JavaScript,在很多情況下,你可以在沒有太多困難下增加鍵盤無障礙支援功能。

但螢幕報讀器的情況如何呢?他們仍然無法將這些元素視為按鈕。如果我們用螢幕報讀器測試我們的 [fake-div-buttons.html](https://mdn.github.io/learning-area/tools-testing/cross-browser-testing/accessibility/fake-div-buttons.html) 範例,我們偽造的按鈕將會用句子如 "Click me!, group"讀出,很顯然地令人困惑。

Expand All @@ -364,7 +364,7 @@ function toggleMusician(bool) {

除了標準 HTML 可用外,還有一堆其他[角色](https://www.w3.org/TR/wai-aria-1.1/#role_definitions)可以辨識非語意的元素結構作為一般的使用者介面特徵,例如 [`combobox`](https://www.w3.org/TR/wai-aria-1.1/#combobox), [`slider`](https://www.w3.org/TR/wai-aria-1.1/#slider), [`tabpanel`](https://www.w3.org/TR/wai-aria-1.1/#tabpanel), [`tree`](https://www.w3.org/TR/wai-aria-1.1/#tree)。你可在 [Deque university code library](https://dequeuniversity.com/library/)中找到很多有用的範例,可給你這些控制措施如何做到無障礙的想法。

我們來看看我們自己的範例,我們回到我們簡單的絕對位置頁籤的介面(參見在我們的 CSS 與 JavaScript 無障礙文章中的 [Hiding things](/zh-TW/docs/Learn/Accessibility/CSS_and_JavaScript#Hiding_things) ),你可以找到 [頁籤資訊框範例](https://mdn.github.io/learning-area/css/css-layout/practical-positioning-examples/info-box.html)(看[原始碼](https://github.com/mdn/learning-area/blob/master/css/css-layout/practical-positioning-examples/info-box.html)).
我們來看看我們自己的範例,我們回到我們簡單的絕對位置頁籤的介面(參見在我們的 CSS 與 JavaScript 無障礙文章中的 [Hiding things](/zh-TW/docs/Learn_web_development/Core/Accessibility/CSS_and_JavaScript#Hiding_things) ),你可以找到 [頁籤資訊框範例](https://mdn.github.io/learning-area/css/css-layout/practical-positioning-examples/info-box.html)(看[原始碼](https://github.com/mdn/learning-area/blob/master/css/css-layout/practical-positioning-examples/info-box.html)).

本範例以鍵盤無障礙而言運作正常—你可以開心地在不同的頁籤間跳位,並且選擇他們顯示該頁籤的內容,也相當地容易操作—你可以滾動內容並使用標題來導覽,即使你看不到螢幕上正發生的事情。然而內容是甚麼並非很明顯—螢幕報讀器目前以連結的清單報讀內容,以及有三個標題的內容。這樣無法給你了解內容之間的關係。最好給予使用者更多關於內容結構的線索。

Expand Down Expand Up @@ -436,4 +436,4 @@ function toggleMusician(bool) {
- [WAI-ARIA Authoring Practices](http://w3c.github.io/aria-practices/) — 由 W3C 發佈之非常詳細的設計模型,解釋如何使用 WAI-ARIA 特徵實作不同類型的複雜 UI 控制措施無障礙
- [ARIA in HTML](https://www.w3.org/TR/html-aria/) — W3C 標準針對每一個 HTML 特徵定義由瀏覽器設置隱含特徵的無障礙(ARIA)語意,以及如果需要額外的語意,你可以設置的 WAI-ARIA 特徵。

{{PreviousMenuNext("Learn/Accessibility/CSS_and_JavaScript","Learn/Accessibility/Multimedia", "Learn/Accessibility")}}
{{PreviousMenuNext("Learn_web_development/Core/Accessibility/CSS_and_JavaScript","Learn_web_development/Core/Accessibility/Multimedia", "Learn_web_development/Core/Accessibility")}}
Loading

0 comments on commit a4e7906

Please sign in to comment.