如果要當 web 開發者，學會 HTML、CSS、JavaScript 是很重要的。不過除此之外，你還要學得更多：你需要負責任地運用這些技術，才能讓所有讀者都能使用你的網頁。要達成這點，本模塊將展示一般最佳實做（在 HTML、CSS、JavaScript 有示範）、跨瀏覽器測試、還有其他啟動的要點。
-
-
概觀
-
-
When someone describes a site as "accessible," they mean that any user can use all its features and content, regardless of how the user accesses the web — even and especially users with physical or mental impairments.
-
-
-
Sites should be accessible to keyboard, mouse, and touch screen users, and any other way users access the web, including screen readers and voice assistants like Alexa and Google Home.
-
Applications should be understandable and usable by people regardless of auditory, visual, physical, or cognitive abilities.
-
Sites should also not cause harm: web features like motion can cause migraines or epileptic seizures.
-
-
-
By default, HTML is accessible, if used correctly. Web accessibility involves ensuring that content remains accessible, regardless of who and how the web is accessed.
diff --git a/files/zh-tw/learn/accessibility/index.md b/files/zh-tw/learn/accessibility/index.md
new file mode 100644
index 00000000000000..7b7568b5ee3f2b
--- /dev/null
+++ b/files/zh-tw/learn/accessibility/index.md
@@ -0,0 +1,65 @@
+---
+title: 無障礙網頁
+slug: Learn/Accessibility
+tags:
+ - ARIA
+ - Accessibility
+ - Articles
+ - Beginner
+ - CSS
+ - CodingScripting
+ - HTML
+ - JavaScript
+ - Landing
+ - Learn
+ - Module
+ - NeedsTranslation
+ - TopicStub
+translation_of: Learn/Accessibility
+---
+{{LearnSidebar}}
+
+如果要當 web 開發者，學會 HTML、CSS、JavaScript 是很重要的。不過除此之外，你還要學得更多：你需要**負責任地**運用這些技術，才能讓所有讀者都能使用你的網頁。要達成這點，本模塊將展示一般最佳實做（在 [HTML](/zh-TW/docs/Learn/HTML)、[CSS](/zh-TW/docs/Learn/CSS)、[JavaScript](/en-US/docs/Learn/JavaScript) 有示範）、[跨瀏覽器測試](/zh-TW/docs/Learn/Tools_and_testing/Cross_browser_testing)、還有其他啟動的要點。
+
+## 概觀
+
+When someone describes a site as "accessible," they mean that any user can use all its features and content, regardless of how the user accesses the web — even and especially users with physical or mental impairments.
+
+- Sites should be accessible to keyboard, mouse, and touch screen users, and any other way users access the web, including screen readers and voice assistants like Alexa and Google Home.
+- Applications should be understandable and usable by people regardless of auditory, visual, physical, or cognitive abilities.
+- Sites should also not cause harm: web features like motion can cause migraines or epileptic seizures.
+
+**By default, HTML is accessible, if used correctly.** Web accessibility involves ensuring that content remains accessible, regardless of who and how the web is accessed.
+
+## 先決條件
+
+要理解本模塊的概念，最少理解 [HTML](/zh-TW/docs/Learn/HTML)、[CSS](/zh-TW/docs/Learn/CSS)、[JavaScript](/zh-TW/docs/Learn/JavaScript) 是個好主意。如果在學習相關技術時學習會更好。
+
+> **備註：** 如果使用的設備無法讓你建立自己的文件，可以試著在 [JSBin](http://jsbin.com/) 或 [Thimble](https://thimble.mozilla.org/) 這種程式撰寫網站，執行大多數範例。
+
+## 教學
+
+- [何謂無障礙網頁？](/zh-TW/docs/Learn/Accessibility/What_is_accessibility)
+ - : 這篇文章針對何謂無障礙網頁，起了一個好開頭。這模塊包含了要考慮哪些族群以及理由、不同族群會用什麼工具和 Web 互動、還有怎麼把無障礙網頁導入 Web 開發工作流程。
+- [HTML：無障礙網頁的好開始](/zh-TW/docs/Learn/Accessibility/HTML)
+ - : 只要確保在任何時候，正確的 HTML 元素都用於正確的目的，就能消除各種網頁的障礙。這篇文章詳述 HTML 如何確保網頁無障礙。
+- [充分實踐 CSS 與 JavaScript 的無障礙](/zh-TW/docs/Learn/Accessibility/CSS_and_JavaScript)
+ - : 如果 CSS 與 JavaScript 使用得當，將可以為無障礙網頁提供助力……反過來的話，就會嚴重影響無障礙體驗。這篇文章詳述如何在內容複雜的情況下，確保能充分實踐 CSS 與 JavaScript 的無障礙。
+- [WAI-ARIA 基礎](/zh-TW/docs/Learn/Accessibility/WAI-ARIA_basics)
+ - : 從之前的文章來看，有時製作要涉及到非語意的 HTML 還有動態 JavaScript 更新技術……等，會令複雜的 UI 控制變得很困難。WAI-ARIA 正是為了解決此一問題而生。它對瀏覽器和輔助技術添加進一步的語意，讓用戶能知道發生了什麼事。我們將介紹如何在基本層面使用此技術，以提昇無障礙。
+- [無障礙多媒體](/zh-TW/docs/Learn/Accessibility/Multimedia)
+ - : 會導致無障礙網頁出問題的另一個根源是多媒體：影片、聲音、圖片等內容，需要有合適的文字替代，以便輔助技術和它的用戶能夠理解。我們將在這篇文章中闡明作法。
+- [行動無障礙網頁](/zh-TW/docs/Learn/Accessibility/Mobile)
+ - : 隨著行動設備訪問漸受歡迎、還有像是 iOS 與 Android 這般熱門平台，已經具備完善的輔助工具，考慮到如何在這些平台上實踐無障礙網頁，就變得十分重要。這篇文章將討論行動裝置特有的無障礙網頁相關議題。
+
+## 評估
+
+- [無障礙網頁偵錯](/zh-TW/docs/Learn/Accessibility/Accessibility_troubleshooting)
+ - : 要評估本模塊，我們會提出一些簡單的網站，你需要偵測有哪些無障礙的問題並修復之。
+
+## 參見
+
+- [Start Building Accessible Web Applications Today](https://egghead.io/courses/start-building-accessible-web-applications-today)：Marcy Sutton 所作的一套優秀教學影片。
+- [Deque University resources](https://dequeuniversity.com/resources/)：包含程式碼範例、螢幕閱讀器參考、或是其他有用的資源。
+- [WebAIM resources](http://webaim.org/resources/)：有教學、便覽、工具……等。
+- [Web Accessibility Evaluation Tools List](https://www.w3.org/WAI/ER/tools/) - includes a list of web accessibility evaluation tools.
diff --git a/files/zh-tw/learn/accessibility/mobile/index.html b/files/zh-tw/learn/accessibility/mobile/index.html
deleted file mode 100644
index f0e6bc9676237d..00000000000000
--- a/files/zh-tw/learn/accessibility/mobile/index.html
+++ /dev/null
@@ -1,302 +0,0 @@
----
-title: Mobile accessibility
-slug: Learn/Accessibility/Mobile
-translation_of: Learn/Accessibility/Mobile
----
-
With web access on mobile devices being so popular, and popular platforms such as iOS and Android having fully fledged accessibility tools, it is important to consider the accessibility of your web content on these platforms. This article looks at mobile-specific accessibility considerations.
-
-
-
-
-
Prerequisites:
-
Basic computer literacy, a basic understanding of HTML, CSS, and JavaScript, and an understanding of the previous articles in the course.
-
-
-
Objective:
-
To understand what problems exist with accessibility on mobile devices, and how to overcome them.
-
-
-
-
-
行動裝置上的無障礙
-
-
The state of accessibility — and support for web standards in general — is good in modern mobile devices. Long gone are the days when mobile devices ran completely different web technologies to desktop browsers, forcing developers to use browser sniffing and serve them completely separate sites (although quite a few companies still detect usage of mobile devices and serve them a separate mobile domain).
To make a website accessible and usable on mobile, you just need to follow general good web design and accessibility best practices.
-
-
There are some exceptions that need special consideration for mobile; the main ones are:
-
-
-
Control mechanisms — Make sure interface controls such as buttons are accessible on mobiles (i.e., mainly touchscreen), as well as desktops/laptops (mainly mouse/keyboard).
-
User input — Make user input requirements as painless as possible on mobile (e.g., in forms, keep typing to a minimum).
-
Responsive design — Make sure layouts work on mobile, conserve image download sizes, and think about provision of images for high-resolution screens.
-
-
-
Summary of screenreader testing on Android and iOS
-
-
The most common mobile platforms have fully functional screenreaders. These function in much the same way as desktop screenreaders, except they are largely operated using touch gestures rather than key combinations.
-
-
Let's look at the main two: TalkBack on Android and VoiceOver on iOS.
-
-
Android TalkBack
-
-
The TalkBack screenreader is built into the Android operating system.
-
-
To turn it on, select Settings > Accessibility > TalkBack, and then press the slider switch to turn it on. Follow any additional on-screen prompts that you are presented with.
When TalkBack is turned on, your Android device's basic controls will be a bit different. For example:
-
-
-
Single-tapping an app will select it, and the device will read out what the app is.
-
Swiping left and right will move between apps, or buttons/controls if you are in a control bar. The device will read out each option.
-
Double-tapping anywhere will open the app/select the option.
-
You can also "explore by touch" — hold your finger down on the screen and drag it around, and your device will read out the different apps/items you move across.
-
-
-
If you want to turn TalkBack off:
-
-
-
Navigate to your Settings app using the above gestures.
-
Navigate to Accessibility > TalkBack.
-
Navigate to the slider switch and activate it to turn it off.
-
-
-
Note: You can get to your homescreen at any time by swiping up and left in a smooth motion. If you have more than one homescreen, you can move between them by swiping two fingers left and right.
When TalkBack is turned on, unlocking the phone is a bit different.
-
-
You can do a two-finger swipe up from the bottom of the lock screen. If you've set a passcode or pattern for unlocking your device, you will then be taken to the relevant entry screen to enter it.
-
-
You can also explore by touch to find the Unlock button at the bottom middle of the screen, and then double-tap.
-
-
Global and local menus
-
-
TalkBack allows you to access global and local context menus, wherever you have navigated to on the device. The former provides global options relating to the device as a whole, and the latter provides options relating just to the current app/screen you are in.
-
-
To get to these menus:
-
-
-
Access the global menu by quickly swiping down, and then right.
-
Access the local menu by quickly swiping up, and then right.
-
Swipe left and right to cycle between the different options.
-
Once you've selected the option you want, double-click to choose that option.
You can use the local context menu while in a web browser to find options to navigate web pages using just the headings, form controls, or links, or navigate line by line, etc.
-
-
For example, with TalkBack turned on:
-
-
-
Open your web browser.
-
Activate the URL bar.
-
Enter a web page that has a bunch of headings on it, such as the front page of bbc.co.uk. To enter the text of the URL:
-
-
Select the URL bar by swiping left/right till you get to it, and then double-tapping.
-
Hold your finger down on the virtual keyboard until you get the character you want, and then release your finger to type it. Repeat for each character.
-
Once you've finished, find the Enter key and press it.
-
-
-
Swipe left and right to move between different items on the page.
-
Swipe up and right with a smooth motion to enter the local content menu.
-
Swipe right until you find the "Headings and Landmarks" option.
-
Double-tap to select it. Now you'll be able to swipe left and right to move between headings and ARIA landmarks.
-
To go back to the default mode, enter the local context menu again by swiping up and right, select "Default", and then double-tap to activate.
A mobile version of VoiceOver is built into the iOS operating system.
-
-
To turn it on, go to Your Settings app and select General > Accessibility > VoiceOver. Press the VoiceOver slider to enable it (you'll also see a number of other options related to VoiceOver on this page).
-
-
Once VoiceOver is enabled, the iOS's basic control gestures will be a bit different:
-
-
-
A single tap will cause the item you tap on to be selected; your device will speak the item you've tapped on.
-
You can also navigate the items on the screen by swiping left and right to move between them, or by sliding your finger around on the screen to move between different items (when you find the item you want, you can remove your finger to select it).
-
To activate the selected item (e.g., open a selected app), double-tap anywhere on the screen.
-
Swipe with three fingers to scroll through a page.
-
Tap with two fingers to perform a context-relevant action — for example, taking a photo while in the camera app.
-
-
-
To turn it off again, navigate back to Settings > General > Accessibility > VoiceOver using the above gestures, and toggle the VoiceOver slider back to off.
-
-
Unlock phone
-
-
To unlock the phone, you need to press the home button (or swipe) as normal. If you have a passcode set, you can select each number by swiping/sliding (as explained above) and then double-tapping to enter each number when you've found the right one.
-
-
Using the Rotor
-
-
When VoiceOver is turned on, you have a navigation feature called the Rotor available to you, which allows you to quickly choose from a number of common useful options. To use it:
-
-
-
Twist two fingers around on the screen like you are turning a dial. Each option will be read aloud as you twist further around. You can go back and forth to cycle through the options.
-
Once you've found the option you want:
-
-
Release your fingers to select it.
-
If it is an option you can iterate the value of (such as Volume or Speaking Rate), you can do a swipe up or down to increase or decrease the value of the selected item.
-
-
-
-
-
The options available under the Rotor are context-sensitive — they will differ depending on what app or view you are in (see below for an example).
-
-
Browsing web pages
-
-
Let's have a go at web browsing with VoiceOver:
-
-
-
Open your web browser.
-
Activate the URL bar.
-
Enter a web page that has a bunch of headings on it, such as the front page of bbc.co.uk. To enter the text of the URL:
-
-
Select the URL bar by swiping left/right until you get to it, and then double-tapping.
-
For each character, hold your finger down on the virtual keyboard until you get the character you want, and then release your finger to select it. Double-tap to type it.
-
Once you've finished, find the Enter key and press it.
-
-
-
Swipe left and right to move between items on the page. You can double-tap an item to select it (e.g., follow a link).
-
By default, the selected Rotor option will be Speaking Rate; you can currently swipe up and down to increase or decrease the speaking rate.
-
Now turn two fingers around the screen like a dial to show the rotor and move between its options. Here are a few examples of the options available:
-
-
Speaking Rate: Change the speaking rate.
-
Containers: Move between different semantic containers on the page.
-
Headings: Move between headings on the page.
-
Links: Move between links on the page.
-
Form Controls: Move between form controls on the page.
-
Language: Move between different translations, if they are available.
-
-
-
Select Headings. Now you'll be able to swipe up and down to move between headings on the page.
In our CSS and JavaScript accessibility article, we looked at the idea of events that are specific to a certain type of control mechanism (see Mouse-specific events). To recap, these cause accessibility issues because other control mechanisms can't activate the associated functionality.
-
-
As an example, the click event is good in terms of accessibility — an associated event handler can be invoked by clicking the element the handler is set on, tabbing to it and pressing Enter/Return, or tapping it on a touchscreen device. Try our simple-button-example.html example (see it running live) to see what we mean.
-
-
Alternatively, mouse-specific events such as mousedown and mouseup create problems — their event handlers cannot be invoked using non-mouse controls.
-
-
If you try to control our simple-box-drag.html (see example live) example with keyboard or touch, you'll see the problem. This occurs because we are using code such as the following:
Responsive design is the practice of making your layouts and other features of your apps dynamically change depending on factors such as screen size and resolution, so they are usable and accessible to users of different device types.
-
-
In particular, the most common problems that need to be addressed for mobile are:
-
-
-
Suitability of layouts for mobile devices. A multi-column layout won't work as well on a narrow screen, for example, and the text size may need to be increased so it is legible. Such issues can be solved by creating a responsive layout using technologies such as media queries, viewport, and flexbox.
-
Conserving image sizes downloaded. In general, small screen devices won't need images that are as large as their desktop counterparts, and they are more likely to be on slow network connections. Therefore, it is wise to serve smaller images to narrow screen devices as appropriate. You can handle this using responsive image techniques.
-
Thinking about high resolutions. Many mobile devices have high-resolution screens, and therefore need higher-resolution images so that the display can continue to look crisp and sharp. Again, you can serve images as appropriate using responsive image techniques. In addition, many image requirements can be fulfilled using the SVG vector images format, which is well-supported across browsers today. SVG has a small file size and will stay sharp regardless of whatever size is being displayed (see Adding vector graphics to the web for more details).
-
-
-
Note: We won't provide a full discussion of responsive design techniques here, as they are covered in other places around MDN (see above links).
-
-
Specific mobile considerations
-
-
There are other important issues to consider when making sites more accessible on mobile. We have listed a couple here, but we will add more when we think of them.
-
-
Not disabling zoom
-
-
Using viewport, it is possible to disable zoom. Alwasy ensure resizing is enabled, and set the width to the device's width in the {{htmlelement("head")}}:
You should never set user-scalable=no if at all possible — many people rely on zoom to be able to see the content of your website, so taking this functionality away is a really bad idea. There are certain situations where zooming might break the UI; in such cases, if you feel that you absolutely need to disable zoom, you should provide some other kind of equivalent, such as a control for increasing the text size in a way that doesn't break your UI.
-
-
Keeping menus accessible
-
-
Because the screen is so much narrower on mobile devices, it is very common to use media queries and other technologies to make the navigation menu shrink down to a tiny icon at the top of the display — which can be pressed to reveal the menu only if it's needed — when the site is viewed on mobile. This is commonly represented by a "three horizontal lines" icon, and the design pattern is consequently known as a "hamburger menu".
-
-
When implementing such a menu, you need to make sure that the control to reveal it is accessible by appropriate control mechanisms (normally touch for mobile), as discussed in Control mechanisms above, and that the rest of the page is moved out of the way or hidden in some way while the menu is being accessed, to avoid confusion with navigating it.
On mobile devices, inputting data tends to be more annoying for users than the equivalent experience on desktop computers. It is more convenient to type text into form inputs using a desktop or laptop keyboard than a touchscreen virtual keyboard or a tiny mobile physical keyboard.
-
-
For this reason, it is worth trying to minimize the amount of typing needed. As an example, instead of getting users to fill out their job title each time using a regular text input, you could instead offer a {{htmlelement("select")}} menu containing the most common options (which also helps with consistency in data entry), and offer an "Other" option that displays a text field to type any outliers into. You can see a simple example of this idea in action in common-job-types.html (see the common jobs example live).
-
-
It is also worth considering the use of HTML5 form input types such as date on mobile platforms as they handle them well — both Android and iOS, for example, display usable widgets that fit well with the device experience. See html5-form-examples.html for some examples (see the HTML5 form examples live) — try loading these and manipulating them on mobile devices. For example:
-
-
-
Types number, tel, and email display suitable virtual keyboards for entering numbers/telephone numbers.
-
Types time and date display suitable pickers for selecting times and dates.
-
-
-
If you want to provide a different solution for desktops, you could always serve different markup to your mobile devices using feature detection. See input types for raw information on detecting different input types, and also check out our feature detection article for much more information.
-
-
總結
-
-
In this article we have provided you with some details about common mobile accessibility-specific issues and how to overcome them. We also took you through usage of the most common screenreaders to aid you in accessibility testing.
diff --git a/files/zh-tw/learn/accessibility/mobile/index.md b/files/zh-tw/learn/accessibility/mobile/index.md
new file mode 100644
index 00000000000000..dc6f57a840a395
--- /dev/null
+++ b/files/zh-tw/learn/accessibility/mobile/index.md
@@ -0,0 +1,282 @@
+---
+title: Mobile accessibility
+slug: Learn/Accessibility/Mobile
+translation_of: Learn/Accessibility/Mobile
+---
+{{LearnSidebar}}{{PreviousMenuNext("Learn/Accessibility/Multimedia","Learn/Accessibility/Accessibility_troubleshooting", "Learn/Accessibility")}}
+
+With web access on mobile devices being so popular, and popular platforms such as iOS and Android having fully fledged accessibility tools, it is important to consider the accessibility of your web content on these platforms. This article looks at mobile-specific accessibility considerations.
+
+
+
+
+
Prerequisites:
+
+ Basic computer literacy, a basic understanding of HTML, CSS, and
+ JavaScript, and an understanding of the
+ previous articles in the course.
+
+
+
+
Objective:
+
+ To understand what problems exist with accessibility on mobile devices,
+ and how to overcome them.
+
+
+
+
+
+## 行動裝置上的無障礙
+
+The state of accessibility — and support for web standards in general — is good in modern mobile devices. Long gone are the days when mobile devices ran completely different web technologies to desktop browsers, forcing developers to use browser sniffing and serve them completely separate sites (although quite a few companies still detect usage of mobile devices and serve them a separate mobile domain).
+
+目前，行動裝置通常可以處理“全脂(full fat)”網站，主要平台甚至還內置了屏幕閱讀器，使視障人士能夠成功使用它們。 現代手機行動瀏覽器也傾向於對[WAI-ARIA](/en-US/docs/Learn/Accessibility/WAI-ARIA_basics)有很好的支持。
+
+To make a website accessible and usable on mobile, you just need to follow general good web design and accessibility best practices.
+
+There are some exceptions that need special consideration for mobile; the main ones are:
+
+- Control mechanisms — Make sure interface controls such as buttons are accessible on mobiles (i.e., mainly touchscreen), as well as desktops/laptops (mainly mouse/keyboard).
+- User input — Make user input requirements as painless as possible on mobile (e.g., in forms, keep typing to a minimum).
+- Responsive design — Make sure layouts work on mobile, conserve image download sizes, and think about provision of images for high-resolution screens.
+
+## Summary of screenreader testing on Android and iOS
+
+The most common mobile platforms have fully functional screenreaders. These function in much the same way as desktop screenreaders, except they are largely operated using touch gestures rather than key combinations.
+
+Let's look at the main two: TalkBack on Android and VoiceOver on iOS.
+
+### Android TalkBack
+
+The TalkBack screenreader is built into the Android operating system.
+
+To turn it on, select _Settings > Accessibility > TalkBack_, and then press the slider switch to turn it on. Follow any additional on-screen prompts that you are presented with.
+
+**Note:** Older versions of TalkBack are turned on in [slightly different ways](https://play.google.com/store/apps/details?id=com.google.android.marvin.talkback).
+
+When TalkBack is turned on, your Android device's basic controls will be a bit different. For example:
+
+1. Single-tapping an app will select it, and the device will read out what the app is.
+2. Swiping left and right will move between apps, or buttons/controls if you are in a control bar. The device will read out each option.
+3. Double-tapping anywhere will open the app/select the option.
+4. You can also "explore by touch" — hold your finger down on the screen and drag it around, and your device will read out the different apps/items you move across.
+
+If you want to turn TalkBack off:
+
+1. Navigate to your _Settings_ app using the above gestures.
+2. Navigate to _Accessibility > TalkBack_.
+3. Navigate to the slider switch and activate it to turn it off.
+
+**Note:** You can get to your homescreen at any time by swiping up and left in a smooth motion. If you have more than one homescreen, you can move between them by swiping two fingers left and right.
+
+For a more complete list of TalkBack gestures, see [Use TalkBack gestures](https://support.google.com/accessibility/android/answer/6151827).
+
+#### Unlocking the phone
+
+When TalkBack is turned on, unlocking the phone is a bit different.
+
+You can do a two-finger swipe up from the bottom of the lock screen. If you've set a passcode or pattern for unlocking your device, you will then be taken to the relevant entry screen to enter it.
+
+You can also explore by touch to find the _Unlock_ button at the bottom middle of the screen, and then double-tap.
+
+#### Global and local menus
+
+TalkBack allows you to access global and local context menus, wherever you have navigated to on the device. The former provides global options relating to the device as a whole, and the latter provides options relating just to the current app/screen you are in.
+
+To get to these menus:
+
+1. Access the global menu by quickly swiping down, and then right.
+2. Access the local menu by quickly swiping up, and then right.
+3. Swipe left and right to cycle between the different options.
+4. Once you've selected the option you want, double-click to choose that option.
+
+For details on all the options available under the global and local context menus, see [Use global and local context menus](https://support.google.com/accessibility/android/answer/6007066).
+
+#### Browsing web pages
+
+You can use the local context menu while in a web browser to find options to navigate web pages using just the headings, form controls, or links, or navigate line by line, etc.
+
+For example, with TalkBack turned on:
+
+1. Open your web browser.
+2. Activate the URL bar.
+3. Enter a web page that has a bunch of headings on it, such as the front page of bbc.co.uk. To enter the text of the URL:
+
+ - Select the URL bar by swiping left/right till you get to it, and then double-tapping.
+ - Hold your finger down on the virtual keyboard until you get the character you want, and then release your finger to type it. Repeat for each character.
+ - Once you've finished, find the Enter key and press it.
+
+4. Swipe left and right to move between different items on the page.
+5. Swipe up and right with a smooth motion to enter the local content menu.
+6. Swipe right until you find the "Headings and Landmarks" option.
+7. Double-tap to select it. Now you'll be able to swipe left and right to move between headings and ARIA landmarks.
+8. To go back to the default mode, enter the local context menu again by swiping up and right, select "Default", and then double-tap to activate.
+
+**Note:** See [Get started on Android with TalkBack](https://support.google.com/accessibility/android/answer/6283677?hl=en&ref_topic=3529932) for more complete documentation.
+
+### iOS VoiceOver
+
+A mobile version of VoiceOver is built into the iOS operating system.
+
+To turn it on, go to Your _Settings_ app and select _General > Accessibility > VoiceOver_. Press the _VoiceOver_ slider to enable it (you'll also see a number of other options related to VoiceOver on this page).
+
+Once VoiceOver is enabled, the iOS's basic control gestures will be a bit different:
+
+1. A single tap will cause the item you tap on to be selected; your device will speak the item you've tapped on.
+2. You can also navigate the items on the screen by swiping left and right to move between them, or by sliding your finger around on the screen to move between different items (when you find the item you want, you can remove your finger to select it).
+3. To activate the selected item (e.g., open a selected app), double-tap anywhere on the screen.
+4. Swipe with three fingers to scroll through a page.
+5. Tap with two fingers to perform a context-relevant action — for example, taking a photo while in the camera app.
+
+To turn it off again, navigate back to _Settings > General > Accessibility > VoiceOver_ using the above gestures, and toggle the _VoiceOver_ slider back to off.
+
+#### Unlock phone
+
+To unlock the phone, you need to press the home button (or swipe) as normal. If you have a passcode set, you can select each number by swiping/sliding (as explained above) and then double-tapping to enter each number when you've found the right one.
+
+#### Using the Rotor
+
+When VoiceOver is turned on, you have a navigation feature called the Rotor available to you, which allows you to quickly choose from a number of common useful options. To use it:
+
+1. Twist two fingers around on the screen like you are turning a dial. Each option will be read aloud as you twist further around. You can go back and forth to cycle through the options.
+2. Once you've found the option you want:
+
+ - Release your fingers to select it.
+ - If it is an option you can iterate the value of (such as Volume or Speaking Rate), you can do a swipe up or down to increase or decrease the value of the selected item.
+
+The options available under the Rotor are context-sensitive — they will differ depending on what app or view you are in (see below for an example).
+
+#### Browsing web pages
+
+Let's have a go at web browsing with VoiceOver:
+
+1. Open your web browser.
+2. Activate the URL bar.
+3. Enter a web page that has a bunch of headings on it, such as the front page of bbc.co.uk. To enter the text of the URL:
+
+ - Select the URL bar by swiping left/right until you get to it, and then double-tapping.
+ - For each character, hold your finger down on the virtual keyboard until you get the character you want, and then release your finger to select it. Double-tap to type it.
+ - Once you've finished, find the Enter key and press it.
+
+4. Swipe left and right to move between items on the page. You can double-tap an item to select it (e.g., follow a link).
+5. By default, the selected Rotor option will be Speaking Rate; you can currently swipe up and down to increase or decrease the speaking rate.
+6. Now turn two fingers around the screen like a dial to show the rotor and move between its options. Here are a few examples of the options available:
+
+ - _Speaking Rate_: Change the speaking rate.
+ - _Containers_: Move between different semantic containers on the page.
+ - _Headings_: Move between headings on the page.
+ - _Links_: Move between links on the page.
+ - _Form Controls_: Move between form controls on the page.
+ - _Language_: Move between different translations, if they are available.
+
+7. Select _Headings_. Now you'll be able to swipe up and down to move between headings on the page.
+
+**Note:** For a more complete reference covering the VoiceOver gestures available and other hints on accessibility testing on iOS, see [Test Accessibility on Your Device with VoiceOver](https://developer.apple.com/library/content/technotes/TestingAccessibilityOfiOSApps/TestAccessibilityonYourDevicewithVoiceOver/TestAccessibilityonYourDevicewithVoiceOver.html#//apple_ref/doc/uid/TP40012619-CH3).
+
+## Control mechanisms
+
+In our CSS and JavaScript accessibility article, we looked at the idea of events that are specific to a certain type of control mechanism (see [Mouse-specific events](/en-US/docs/Learn/Accessibility/CSS_and_JavaScript#mouse-specific_events)). To recap, these cause accessibility issues because other control mechanisms can't activate the associated functionality.
+
+As an example, the [click](/en-US/docs/Web/API/GlobalEventHandlers/onclick) event is good in terms of accessibility — an associated event handler can be invoked by clicking the element the handler is set on, tabbing to it and pressing Enter/Return, or tapping it on a touchscreen device. Try our [simple-button-example.html](https://github.com/mdn/learning-area/blob/master/accessibility/mobile/simple-button-example.html) example ([see it running live](http://mdn.github.io/learning-area/accessibility/mobile/simple-button-example.html)) to see what we mean.
+
+Alternatively, mouse-specific events such as [mousedown](/en-US/docs/Web/API/GlobalEventHandlers/onmousedown) and [mouseup](/en-US/docs/Web/API/GlobalEventHandlers/onmouseup) create problems — their event handlers cannot be invoked using non-mouse controls.
+
+If you try to control our [simple-box-drag.html](https://github.com/mdn/learning-area/blob/master/accessibility/mobile/simple-box-drag.html) ([see example live](http://mdn.github.io/learning-area/accessibility/mobile/simple-box-drag.html)) example with keyboard or touch, you'll see the problem. This occurs because we are using code such as the following:
+
+```js
+div.onmousedown = function() {
+ initialBoxX = div.offsetLeft;
+ initialBoxY = div.offsetTop;
+ movePanel();
+}
+
+document.onmouseup = stopMove;
+```
+
+To enable other forms of control, you need to use different, yet equivalent events — for example, touch events work on touchscreen devices:
+
+```js
+div.ontouchstart = function(e) {
+ initialBoxX = div.offsetLeft;
+ initialBoxY = div.offsetTop;
+ positionHandler(e);
+ movePanel();
+}
+
+panel.ontouchend = stopMove;
+```
+
+We've provided a simple example that shows how to use the mouse and touch events together — see [multi-control-box-drag.html](https://github.com/mdn/learning-area/blob/master/accessibility/mobile/multi-control-box-drag.html) ([see the example live](http://mdn.github.io/learning-area/accessibility/mobile/multi-control-box-drag.html) also).
+
+**Note:** You can also see fully functional examples showing how to implement different control mechanisms at [Implementing game control mechanisms](/en-US/docs/Games/Techniques/Control_mechanisms).
+
+## 響應式設計
+
+[Responsive design](/en-US/docs/Web/Apps/Progressive/Responsive) is the practice of making your layouts and other features of your apps dynamically change depending on factors such as screen size and resolution, so they are usable and accessible to users of different device types.
+
+In particular, the most common problems that need to be addressed for mobile are:
+
+- Suitability of layouts for mobile devices. A multi-column layout won't work as well on a narrow screen, for example, and the text size may need to be increased so it is legible. Such issues can be solved by creating a responsive layout using technologies such as [media queries](/en-US/docs/Web/CSS/Media_Queries), [viewport](/en-US/docs/Mozilla/Mobile/Viewport_meta_tag), and [flexbox](/en-US/docs/Learn/CSS/CSS_layout/Flexbox).
+- Conserving image sizes downloaded. In general, small screen devices won't need images that are as large as their desktop counterparts, and they are more likely to be on slow network connections. Therefore, it is wise to serve smaller images to narrow screen devices as appropriate. You can handle this using [responsive image techniques](/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images).
+- Thinking about high resolutions. Many mobile devices have high-resolution screens, and therefore need higher-resolution images so that the display can continue to look crisp and sharp. Again, you can serve images as appropriate using responsive image techniques. In addition, many image requirements can be fulfilled using the SVG vector images format, which is well-supported across browsers today. SVG has a small file size and will stay sharp regardless of whatever size is being displayed (see [Adding vector graphics to the web](/en-US/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web) for more details).
+
+**Note:** We won't provide a full discussion of responsive design techniques here, as they are covered in other places around MDN (see above links).
+
+### Specific mobile considerations
+
+There are other important issues to consider when making sites more accessible on mobile. We have listed a couple here, but we will add more when we think of them.
+
+#### Not disabling zoom
+
+Using [viewport](/en-US/docs/Mozilla/Mobile/Viewport_meta_tag), it is possible to disable zoom. Alwasy ensure resizing is enabled, and set the width to the device's width in the {{htmlelement("head")}}:
+
+```html
+
+```
+
+You should never set `user-scalable=no` if at all possible — many people rely on zoom to be able to see the content of your website, so taking this functionality away is a really bad idea. There are certain situations where zooming might break the UI; in such cases, if you feel that you absolutely need to disable zoom, you should provide some other kind of equivalent, such as a control for increasing the text size in a way that doesn't break your UI.
+
+#### Keeping menus accessible
+
+Because the screen is so much narrower on mobile devices, it is very common to use media queries and other technologies to make the navigation menu shrink down to a tiny icon at the top of the display — which can be pressed to reveal the menu only if it's needed — when the site is viewed on mobile. This is commonly represented by a "three horizontal lines" icon, and the design pattern is consequently known as a "hamburger menu".
+
+When implementing such a menu, you need to make sure that the control to reveal it is accessible by appropriate control mechanisms (normally touch for mobile), as discussed in [Control mechanisms](#control_mechanisms) above, and that the rest of the page is moved out of the way or hidden in some way while the menu is being accessed, to avoid confusion with navigating it.
+
+Click here for a [good hamburger menu example](http://fritz-weisshart.de/meg_men/).
+
+## User input
+
+On mobile devices, inputting data tends to be more annoying for users than the equivalent experience on desktop computers. It is more convenient to type text into form inputs using a desktop or laptop keyboard than a touchscreen virtual keyboard or a tiny mobile physical keyboard.
+
+For this reason, it is worth trying to minimize the amount of typing needed. As an example, instead of getting users to fill out their job title each time using a regular text input, you could instead offer a {{htmlelement("select")}} menu containing the most common options (which also helps with consistency in data entry), and offer an "Other" option that displays a text field to type any outliers into. You can see a simple example of this idea in action in [common-job-types.html](https://github.com/mdn/learning-area/blob/master/accessibility/mobile/common-job-types.html) (see the [common jobs example live](http://mdn.github.io/learning-area/accessibility/mobile/common-job-types.html)).
+
+It is also worth considering the use of HTML5 form input types such as date on mobile platforms as they handle them well — both Android and iOS, for example, display usable widgets that fit well with the device experience. See [html5-form-examples.html](https://github.com/mdn/learning-area/blob/master/accessibility/mobile/html5-form-examples.html) for some examples (see the [HTML5 form examples live](http://mdn.github.io/learning-area/accessibility/mobile/html5-form-examples.html)) — try loading these and manipulating them on mobile devices. For example:
+
+- Types `number`, `tel`, and `email` display suitable virtual keyboards for entering numbers/telephone numbers.
+- Types `time` and `date` display suitable pickers for selecting times and dates.
+
+If you want to provide a different solution for desktops, you could always serve different markup to your mobile devices using feature detection. See [input types](http://diveinto.html5doctor.com/detect.html#input-types) for raw information on detecting different input types, and also check out our [feature detection article](/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Feature_detection) for much more information.
+
+## 總結
+
+In this article we have provided you with some details about common mobile accessibility-specific issues and how to overcome them. We also took you through usage of the most common screenreaders to aid you in accessibility testing.
+
+## 延伸閱讀
+
+- [Guidelines For Mobile Web Development](https://www.smashingmagazine.com/guidelines-for-mobile-web-development/) — A list of articles in _Smashing Magazine_ covering different techniques for mobile web design.
+- [Make your site work on touch devices](http://www.creativebloq.com/javascript/make-your-site-work-touch-devices-51411644) — Useful article about using touch events to get interactions working on mobile devices.
+
+{{PreviousMenuNext("Learn/Accessibility/Multimedia","Learn/Accessibility/Accessibility_troubleshooting", "Learn/Accessibility")}}
+
+## In this module
+
+- [What is accessibility?](/en-US/docs/Learn/Accessibility/What_is_accessibility)
+- [HTML: A good basis for accessibility](/en-US/docs/Learn/Accessibility/HTML)
+- [CSS and JavaScript accessibility best practices](/en-US/docs/Learn/Accessibility/CSS_and_JavaScript)
+- [WAI-ARIA basics](/en-US/docs/Learn/Accessibility/WAI-ARIA_basics)
+- [Accessible multimedia](/en-US/docs/Learn/Accessibility/Multimedia)
+- [Mobile accessibility](/en-US/docs/Learn/Accessibility/Mobile)
+- [Accessibility troubleshooting](/en-US/docs/Learn/Accessibility/Accessibility_troubleshooting)
diff --git a/files/zh-tw/learn/accessibility/wai-aria_basics/index.html b/files/zh-tw/learn/accessibility/wai-aria_basics/index.html
deleted file mode 100644
index c2ca453ba612b1..00000000000000
--- a/files/zh-tw/learn/accessibility/wai-aria_basics/index.html
+++ /dev/null
@@ -1,421 +0,0 @@
----
-title: WAI-ARIA基礎
-slug: Learn/Accessibility/WAI-ARIA_basics
-translation_of: Learn/Accessibility/WAI-ARIA_basics
----
-
function toggleMusician(bool) {
- var instruItem = formItems[formItems.length-1];
- if(bool) {
- instruItem.input.disabled = false;
- instruItem.label.style.color = '#000';
- instruItem.input.setAttribute('aria-disabled', 'false');
- hiddenAlert.textContent = 'Instruments played field now enabled; use it to tell us what you play.';
- } else {
- instruItem.input.disabled = true;
- instruItem.label.style.color = '#999';
- instruItem.input.setAttribute('aria-disabled', 'true');
- instruItem.input.removeAttribute('aria-label');
- hiddenAlert.textContent = 'Instruments played field now disabled.';
- }
-}
注意: 這裡最引人注目的是我們移除在原來範例中的連結，並且只使用清單項目作為頁籤—這樣做是因為對螢幕報讀器使用者比較少困擾(連結並非真正地帶妳到哪個地方；他們只是改變視窗)，並且可讓組件大小/位置在組件特徵中有很好的運作—當這些是放在連結上的時候，瀏覽器將維持報讀"1 of 1"，而非"1 of 3"、"2 of 3"等。
