Web Accessibility Tutorials

Web accessibility refers to the design and development of web pages to ensure that the content is easily accessible and usable by all individuals, including those with disabilities and the elderly. This encompasses users with various abilities, including vision, hearing, motor, and cognitive abilities. The goal of web accessibility is to eliminate barriers, providing an equal online experience for everyone.

網頁無障礙指的是設計和開發網頁的方式，以確保所有人（包括殘障人士和老年人）都能夠輕鬆訪問和使用該網站的內容。這包括視力、聽力、運動和認知等不同能力的用戶。網頁無障礙旨在消除任何障礙，使每個人都能獲得平等的網上體驗。

The importance of web accessibility 網頁無障礙的重要性

Equal rights: Web accessibility is a basic human right, allowing everyone to have equal access to information and services. This is not only a moral responsibility, but also a requirement to comply with legal norms.
平等權利：網頁無障礙是一種基本人權，讓所有人都能平等地獲取資訊和服務。這不僅是道德責任，也是遵循法律規範的要求。
Expand the user base: As more of the world’s population has varying abilities, ensuring website accessibility expands the potential user base and serves more people, thereby increasing business opportunities.
擴大用戶基礎：隨著全球有越來越多的人口擁有不同的能力，確保網站無障礙可以擴大潛在用戶基礎，為更多人提供服務，從而增加商業機會。
Improved user experience: Web accessibility design usually leads to a better user experience because it takes into account various usage scenarios and needs. This means that the browsing experience is generally smoother and friendlier for all users.
改善用戶體驗：網頁無障礙的設計通常會帶來更好的用戶體驗，因為它考慮了各種使用情境和需求。這意味著所有用戶的瀏覽體驗通常會更加順暢和友好。
Enhanced SEO (search engine optimization): Accessibly designed websites usually have clearer structure and content tags, which is beneficial for search engine optimization, thereby improving the website's ranking in search results.
增強SEO（搜尋引擎優化）：無障礙設計的網站通常具有更清晰的結構和內容標籤，這對於搜尋引擎優化是有利的，從而提高網站在搜尋結果中的排名。
Legal Compliance: In many countries and regions, websites must comply with accessibility laws and regulations, such as the ADA in the United States or the Accessible Web Directive in the European Union. Violation of these laws may result in legal proceedings or fines.
法律合規性：在許多國家和地區，網站必須遵循無障礙法律和規範，例如美國的ADA或歐盟的無障礙網頁指令，違反這些法律可能會導致法律訴訟或罰款。
Social Responsibility: Many organizations and businesses want to be seen as socially responsible, and providing accessible websites is one way to demonstrate this responsibility.
社會責任：許多組織和企業都希望被視為社會責任感強的機構，提供可無障礙的網站是體現這一責任的一種方式。

To sum up, web accessibility is not only a technical and design requirement, but also a reflection of social equity and inclusiveness.

綜上所述，網頁無障礙不僅是技術和設計的要求，也是社會公平和包容性的體現。

Standard Guideline 無障礙指導原則

Mainly comes from W3C's Web Content Accessibility Guidelines (WCAG, Web Content Accessibility Guidelines). These guidelines are designed to help web developers and designers create websites that are accessible to all users, including people with disabilities. WCAG’s guiding principles are divided into four core areas:

主要來自於W3C的網頁內容無障礙指導原則（WCAG，Web Content Accessibility Guidelines）。這些指導原則旨在幫助網頁開發者和設計師創建可供所有使用者（包括有殘障的人士）訪問的網站。WCAG的指導原則分為四個核心領域：

Perceivable 可感知性

Users must be able to perceive the content of the web page. This means that information and user interface components must be provided in a way that humans can perceive.Specific measures include:

用戶必須能夠感知網頁內容。這意味著資訊和用戶界面元件必須以人類可以感知的方式提供。具體措施包括：

Provide text alt text to describe the image.
提供文本替代（alt text）以描述圖像。
Make sure there is enough color contrast for easy reading.
確保有足夠的顏色對比度以輕鬆閱讀。
Provide subtitles or transcriptions of video or audio content.
提供視頻或音頻內容的字幕或轉錄。

Operable 可操作性

User interface elements and navigation must be easy to operate. This includes support for various input methods, such as keyboard and mouse. Specific measures include:

用戶界面元件和導航必須易於操作。這包含了對各種輸入方式的支持，如鍵盤和滑鼠。具體措施包括：

All functions should be accessible using the keyboard and not just rely on the mouse.
所有功能應可以使用鍵盤訪問，而不僅依賴滑鼠。
Provide clear navigation options so users can easily find what they are looking for.
提供明確的導航選項，使用戶能夠輕鬆找到所需內容。
Avoid the use of potentially epileptic dynamic content and provide user-controlled functionality.
避免使用可能引起癲癇的動態內容，並提供用戶控制的功能。

可理解性（Understandable）

Content and actions must be understandable. This means users should be able to easily understand how the information is structured and how to interact with it. Specific measures include:

內容和操作必須是可理解的。這意味著用戶應該能夠輕鬆理解資訊的結構及如何與其互動。具體措施包括：

Use simple, clear language to express your content.
確保網站的操作流程邏輯且一致。
Make sure the website’s operational flow is logical and consistent.
確保網站的操作流程邏輯且一致。
Provide effective error information and guidance to help users correct errors.
提供有效的錯誤信息和指導，幫助用戶糾正錯誤。

健壯性（Robust）

Content must be robust enough to function in a variety of technology environments, including assistive technologies. This includes:

內容必須足夠健壯，以便能夠在各種技術環境中運行，包括輔助技術。這包括：

Use standards-compliant HTML and CSS to ensure content is interpretable by a variety of technologies and devices.
使用符合標準的HTML和CSS，確保內容可由各種技術和設備解釋。
Make sure the website’s operational flow is logical and consistent.
確保網站的操作流程邏輯且一致。
Make sure web pages run and display properly across different browsers and devices.
確保網頁在不同的瀏覽器和設備上均可運行和正常顯示。

這四個原則的主要目標是促進網頁內容的可及性，讓所有人都能更好地訪問和使用網頁。按照這些指導原則實施無障礙設計，有助於提升所有用戶的整體上網經驗。

Testing and evaluation tools 測試和評估工具

Introduce some available accessibility testing tools and resources to help check whether their website meets accessibility standards, such as WAVE, aXe, etc.

介紹一些可用的無障礙測試工具和資源，幫助檢查他們的網站是否符合無障礙標準，比如WAVE、aXe等。

1. WAVE Web Accessibility Evaluation Tool is a suite of evaluation tools that helps to identify many accessibility errors, and also facilitates human evaluation of web content. You can use the online WAVE tool by entering a web page address (URL) in the field above.

2. WAVE Chrome, Firefox are available for testing accessibility directly within your web browser - handy for checking password protected, locally stored, or highly dynamic pages.

3. Color contrast checker for images tool, which you can upload image to detect foreground colour accessibility on a background image, it is intended as guide for designers and developers to test if their design solution is accessible.