Caleb Rogers
    • Create new note
    • Create a note from template
      • Sharing URL Link copied
      • /edit
      • View mode
        • Edit mode
        • View mode
        • Book mode
        • Slide mode
        Edit mode View mode Book mode Slide mode
      • Customize slides
      • Note Permission
      • Read
        • Only me
        • Signed-in users
        • Everyone
        Only me Signed-in users Everyone
      • Write
        • Only me
        • Signed-in users
        • Everyone
        Only me Signed-in users Everyone
      • Engagement control Commenting, Suggest edit, Emoji Reply
      • Invitee
    • Publish Note

      Share your work with the world Congratulations! 🎉 Your note is out in the world Publish Note

      Your note will be visible on your profile and discoverable by anyone.
      Your note is now live.
      This note is visible on your profile and discoverable online.
      Everyone on the web can find and read all notes of this public team.
      See published notes
      Unpublish note
      Please check the box to agree to the Community Guidelines.
      View profile
    • Commenting
      Permission
      Disabled Forbidden Owners Signed-in users Everyone
    • Enable
    • Permission
      • Forbidden
      • Owners
      • Signed-in users
      • Everyone
    • Suggest edit
      Permission
      Disabled Forbidden Owners Signed-in users Everyone
    • Enable
    • Permission
      • Forbidden
      • Owners
      • Signed-in users
    • Emoji Reply
    • Enable
    • Versions and GitHub Sync
    • Note settings
    • Engagement control
    • Transfer ownership
    • Delete this note
    • Save as template
    • Insert from template
    • Import from
      • Dropbox
      • Google Drive
      • Gist
      • Clipboard
    • Export to
      • Dropbox
      • Google Drive
      • Gist
    • Download
      • Markdown
      • HTML
      • Raw HTML
Menu Note settings Sharing URL Create Help
Create Create new note Create a note from template
Menu
Options
Versions and GitHub Sync Engagement control Transfer ownership Delete this note
Import from
Dropbox Google Drive Gist Clipboard
Export to
Dropbox Google Drive Gist
Download
Markdown HTML Raw HTML
Back
Sharing URL Link copied
/edit
View mode
  • Edit mode
  • View mode
  • Book mode
  • Slide mode
Edit mode View mode Book mode Slide mode
Customize slides
Note Permission
Read
Only me
  • Only me
  • Signed-in users
  • Everyone
Only me Signed-in users Everyone
Write
Only me
  • Only me
  • Signed-in users
  • Everyone
Only me Signed-in users Everyone
Engagement control Commenting, Suggest edit, Emoji Reply
Invitee
Publish Note

Share your work with the world Congratulations! 🎉 Your note is out in the world Publish Note

Your note will be visible on your profile and discoverable by anyone.
Your note is now live.
This note is visible on your profile and discoverable online.
Everyone on the web can find and read all notes of this public team.
See published notes
Unpublish note
Please check the box to agree to the Community Guidelines.
View profile
Engagement control
Commenting
Permission
Disabled Forbidden Owners Signed-in users Everyone
Enable
Permission
  • Forbidden
  • Owners
  • Signed-in users
  • Everyone
Suggest edit
Permission
Disabled Forbidden Owners Signed-in users Everyone
Enable
Permission
  • Forbidden
  • Owners
  • Signed-in users
Emoji Reply
Enable
Import from Dropbox Google Drive Gist Clipboard
   owned this note    owned this note      
Published Linked with GitHub
Subscribed
  • Any changes
    Be notified of any changes
  • Mention me
    Be notified of mention me
  • Unsubscribe
Subscribe
--- tags: Website Accessibility, --- # Taiwan Website Accessibility Compilation, Contacting, Fixing 台灣網站無障礙編譯、聯繫、修復 Many Taiwanese websites suffer from horrendous accessibility issues. Many of these issues have very simple fixes - for example, not using window.alert(), and instead simply appending a new DOM node or showing warning text somewhere. 許多台灣網站都存在可怕的可訪問性問題。不過其中許多問題都有非常簡單的修復方法。例如,不要使用 window.alert(),而是簡單地附加一個新的 DOM 節點,或在某處顯示提醒文字。 These issues are so wide-spread that I consider them endemic. 這些問題是如此廣泛,以至於我認為這些問題已經是流行性的。 I have time and knowledge to fix these issues, and am willing to do so for free, when the issues are on societal-good websites, such as government websites or hospital websites. 當問題出現在社會公益網站(例如政府網站或醫院網站)上時,我願意投入時間和知識技術,來解決這些問題,並且我也願意免費這樣做。 I *don't* have: 提案者 Caleb *沒有*: 1. Good mandarin ability 我並沒有良好的普通話能力。 2. The knowledge of who to contact 看到一個需要改善無障礙環境的網站,但我不曉得該聯繫哪一個單位。 3. Relationships with points of contact 若我知道了營運網站的單位名稱,但我並沒有與網站事務相關窗口的聯絡管道。 By working with g0v volunteers, we can find more people like me (with time, skill, and willingness to fix these issues) and combine with people that have the above attributes, or can help us find people that have the above attributes, and begin to solve these accessibility issues. 我期待通過與 g0v 志願者們合作,我們可以找到更多像我這樣的人(有時間、技能和意願來解決這些問題)並與具有上述屬性的人結合,或者您可以推薦、幫助我們找到具有上述屬性的參與者,並開始來解決這些網站可訪問性問題。 ## The Solution 假設的解決方案 A GitHub that lists issues that we organize. Methods to collect accessibility issues. A GitHub to track contacts in organizations with websites we want to fix. An accessibility issue list would be displayed in a manner intended to seek points of contact in a given agency. 網站可訪問性問題列表,顯示方式目的,是在尋找該網站(可能是醫院、政府網站、公益組織的網站)的營運單位,是否有該單位的聯繫窗口。 An example: 舉例來說: ``` List of accessibility issues: * NTU Hospital uses a popup `no contact found` * Department of Health, Taipei, uses images with text `no contact found` ``` https://github.com/twa11y ## How is this Different from accessibility.ncc.gov ? 這與accessibility.ncc.gov 有何不同? As far as I can tell: 據我所知: 1. accessibility.ncc.gov lists accessibility ratings for various agency websites, it doesn't point out *specific issues*. This project will. accessibility.ncc.gov 列出了各種機構網站的可訪問性評級,它沒有指出*具體問題*。 而我們的專案將會做到這部分。 2. accessibility.ncc.gov is for government websites only. This project will target any website that contributes to social good. access.ncc.gov 目前該網站僅適用於政府單位的網站。 而我們的專案將會進一步針對任何有助於社會公益的網站。 3. accessibility.ncc.gov has no mechanism for connecting agencies with volunteers willing to fix accessibility issues. This project will. access.ncc.gov 並沒有將網站單位,與願意解決網站無障礙問題的志願者,相互媒合、聯繫起來的機制。 而我們的專案會嘗試建立這樣的媒合機制。 4. This project will not simply be a list, it will also be a team that will actively try to connect volunteer engineers with agencies in charge of broken websites. The project isn't just an app, it's a team that does stuff in real life. 這個項目將不僅僅是一個列表,它還將是一個團隊,將積極嘗試將志願者工程師與需要改善的網站,其營運的機構單位,相互聯繫起來。 我們的專案不僅僅是一個應用程序,它是一個在現實生活中做事的團隊。 5. I feel that accessibility.ncc.gov's accessibility standards are either not good enough or their method of checking isn't good enough. All I know is websites are getting AA or AAA ratings that definitely shouldn't be. 我覺得 accessibility.ncc.gov 的可訪問性標準要麼不夠好,要麼他們的檢查方法不夠好。 我所知道的是網站正在獲得絕對不應該的 AA 或 AAA 評級。 6. There's no accessibility engineering learning opportunities on accessibility.ncc.gov. This team will attempt to provide accessibility engineering learning opportunities to teammates. 在 accessibility.ncc.gov 網站上並沒有提供關於,可訪問性工程學習機會。 而我們的專案與團隊參加者,將會為參加者們,提供無障礙工程學習機會。 ## Why? 為什麼? 1. Bad accessibility makes the world less easy to live in for people with disabilities, for no reason 不甚理想的網站造訪體驗,讓無障礙環境讓殘障人士的生活變得更為困難,這不應該是既成事實。 2. Taiwanese website accessibility is often so bad it's also making it harder for just about everyone to do things normally 台灣網站的可訪問性通常非常糟糕,這也讓幾乎每個人都更難正常做事。 3. Accessibility affect people you don't realize: images used as text can't be zoomed in when you're on your phone, can't be copy-pasted to share in a LINE chat, and can't be translated with google translate, for example. 可訪問性會影響您不知道的人:例如將圖像套用為文字格式,這會使得您在使用手機閱讀的時候,無法將圖片放大查看,無法複製貼到像是 LINE 聊天群組中,進行分享,也無法使用例如 Google 翻譯工具。 ## Current Needs 當前需求 * Copy-editing the mandarin google translation of this document 複製編輯本文檔的普通話谷歌翻譯。 * Any kind of person to brainstorm solutions along the above lines during the hackathon 歡迎任何人在黑客松期間,按照上述思路一起集思廣益。 * Engineers to develop the above solution, hopefully as soon as during the hackathon 歡迎工程師一起開發上述解決方案,期待可以運用本次黑客松期間來推展進度。 * Anybody with any contacts at hospitals, the government, or other places we determine are for the social good and can receive our engineering time for free in good faith 若您有推薦,包含醫院、政府單位、公益目的明確的社會單位,請您提供相關資訊給我們,我們樂於與該單位,就網站可及性優化進行合作。 ## What are accessibility issues? 什麼是可訪問性問題? Web accessibility issues are problems with websites that make them harder for everyone to use, but especially for people with disabilities. Web 可訪問性問題是網站的問題,這些問題使每個人都難以使用它們,尤其是對身障人士而言。 Here's an article in mandarin that might be about web accessibility, I'm not sure lol: https://blog.techbridge.cc/2019/10/13/web-accessibility-intro/ 這是一篇中文文章〈Web Accessibility 的重要性〉您可以參考文章中的介紹內容:https://blog.techbridge.cc/2019/10/13/web-accessibility-intro/ And here's one from the W3C: https://www.w3.org/WAI/fundamentals/accessibility-intro/ 這是來自 W3C 的一個:https://www.w3.org/WAI/fundamentals/accessibility-intro/ check your designs https://webaim.org/resources/contrastchecker/ FB Group 國內有一個社團討論該如何漸進推動無障礙網站 https://www.facebook.com/groups/2015338878480237/posts/5353941134619978/ PDIS 青年學生體檢政府網站專案 Young Student Examination Government Website Project https://github.com/PDIS/ray2021-result 關於醫院: - 新南向政策,有影響了更多醫院想要提供對外語者友善的環境。 - 這個專案可以讓醫療部門的工程師,知道外語使用者在網站上普遍遇到的問題。 ### Examples of Accessibility Issues 可訪問性問題示例 1. Contrast. Light text on a light background. This makes it harder for everyone to read. 對比。 淺色背景上的淺色文本。 這讓每個人都更難閱讀。 2. Using window.alert(). This text usually can't be copy/pasted, can't be zoomed-in, displays poorly or not at all on mobile, is often blocked by browser safety controls, and if is closed, can't be opened again. 使用 window.alert()。 此文本通常無法複製/粘貼,無法放大,在移動設備上顯示效果不佳或根本無法顯示,經常被瀏覽器安全控件阻止,如果關閉,則無法再次打開。 3. Using images of text, instead of text. This can't be copy/pasted, can't be zoomed in, might not display at all if the images fail to load or are blocked, cause unecessarily large web page sizes, and often load in low-quality and are unreadable to anybody. 使用文本圖像,而不是文本。 這不能複制/粘貼,不能放大,如果圖像無法加載或被阻止,可能根本不顯示,導致不必要的大網頁,並且經常以低質量加載並且任何人都無法閱讀 . 4. Timed webpages that stop working after some amount of time. These are terrible for everyone. For example, imagine if you're filling out a large government form, and suddenly the whole webpage goes away, with all your hard work, because you took too long to fill it out, or stopped for a quick snack break. Awful. 定時網頁在一段時間後停止工作。 這些對每個人來說都是可怕的。 例如,想像一下,如果您正在填寫一份大型政府表格,但由於您的辛勤工作,整個網頁突然消失了,因為您填寫的時間太長,或者停下來吃點零食。 可怕。 These are the four most common, and most harmful, accessibility issues that I've noticed in my time here. There are hundreds of more accessibility concepts. 這是我在此期間注意到的四個最常見、最有害的可訪問性問題。 還有數百個可訪問性概念。 ## End-Game 結束遊戲 Ideally, eventually organizations will recognize that they need help with accessibility, and come to us for that help directly, rather than deploying terrible products and waiting for users to report issues. 理想情況下,網站的營運單位,會了解到他們需要網站通用化面向的幫助,並且可以直接向我們的專案尋求幫助,而不是遲遲等待網站使用者提出抱怨,甚至放棄抱怨! ## Opportunities for Members of This Team 該團隊成員的機會 1. To improve the world a little bit by making websites easier to use. 使網站更易於使用,來改善世界。 3. To learn more about accessibility engineering and how to solve accessibility issues. The founding member (caleb) is a full-time software engineer from san francsico that specializes in web accessibility. If you're interested in this subject, this will be a great way to learn. 了解有關可訪問性工程以及如何解決可訪問性問題的更多議題內容。 這個專案的創始成員 Caleb 是一位來自舊金山的全職軟體工程師,專門研究 Web 可訪問性。 如果您對這個主題感興趣,這將是一個很好的學習方式。 4. To network with people in the government and organizations that provide social good. 與政府人員和提供社會公益的組織建立聯繫。 5. To work on, and get on your portfolio, a fully deployed website / app. Good opportunity for new engineers or those that need to develop their portfolio. 透過這項專案,您可以累積您的作品與開發經歷,例如一個完全部署的網站/應用程序。對於新工程師或需要累積作品成果的工程師來說,這是一個很好的實踐機會。 ## Secret Plan My goal isn't only to fix accessibility issues, it's also to create opportunities for new engineers to get actual projects on their portfolio. If we can get access to fix accessibility issues on NGO and government sites, we can have new engineers help do that work, and then they can put real work on their portfolio!

Import from clipboard

Paste your markdown or webpage here...

Advanced permission required

Your current role can only read. Ask the system administrator to acquire write and comment permission.

This team is disabled

Sorry, this team is disabled. You can't edit this note.

This note is locked

Sorry, only owner can edit this note.

Reach the limit

Sorry, you've reached the max length this note can be.
Please reduce the content or divide it to more notes, thank you!

Import from Gist

Import from Snippet

or

Export to Snippet

Are you sure?

Do you really want to delete this note?
All users will lose their connection.

Create a note from template

Create a note from template

Oops...
This template has been removed or transferred.
Upgrade
All
  • All
  • Team
No template.

Create a template

Upgrade

Delete template

Do you really want to delete this template?
Turn this template into a regular note and keep its content, versions, and comments.

This page need refresh

You have an incompatible client version.
Refresh to update.
New version available!
See releases notes here
Refresh to enjoy new features.
Your user state has changed.
Refresh to load new user state.

Sign in

Forgot password

or

By clicking below, you agree to our terms of service.

Sign in via Facebook Sign in via Twitter Sign in via GitHub Sign in via Dropbox Sign in with Wallet
Wallet ( )
Connect another wallet

New to HackMD? Sign up

Help

  • English
  • 中文
  • Français
  • Deutsch
  • 日本語
  • Español
  • Català
  • Ελληνικά
  • Português
  • italiano
  • Türkçe
  • Русский
  • Nederlands
  • hrvatski jezik
  • język polski
  • Українська
  • हिन्दी
  • svenska
  • Esperanto
  • dansk

Documents

Help & Tutorial

How to use Book mode

Slide Example

API Docs

Edit in VSCode

Install browser extension

Contacts

Feedback

Discord

Send us email

Resources

Releases

Pricing

Blog

Policy

Terms

Privacy

Cheatsheet

Syntax Example Reference
# Header Header 基本排版
- Unordered List
  • Unordered List
1. Ordered List
  1. Ordered List
- [ ] Todo List
  • Todo List
> Blockquote
Blockquote
**Bold font** Bold font
*Italics font* Italics font
~~Strikethrough~~ Strikethrough
19^th^ 19th
H~2~O H2O
++Inserted text++ Inserted text
==Marked text== Marked text
[link text](https:// "title") Link
![image alt](https:// "title") Image
`Code` Code 在筆記中貼入程式碼
```javascript
var i = 0;
```
var i = 0;
:smile: :smile: Emoji list
{%youtube youtube_id %} Externals
$L^aT_eX$ LaTeX
:::info
This is a alert area.
:::

This is a alert area.

Versions and GitHub Sync
Get Full History Access

  • Edit version name
  • Delete

revision author avatar     named on  

More Less

Note content is identical to the latest version.
Compare
    Choose a version
    No search result
    Version not found
Sign in to link this note to GitHub
Learn more
This note is not linked with GitHub
 

Feedback

Submission failed, please try again

Thanks for your support.

On a scale of 0-10, how likely is it that you would recommend HackMD to your friends, family or business associates?

Please give us some advice and help us improve HackMD.

 

Thanks for your feedback

Remove version name

Do you want to remove this version name and description?

Transfer ownership

Transfer to
    Warning: is a public team. If you transfer note to this team, everyone on the web can find and read this note.

      Link with GitHub

      Please authorize HackMD on GitHub
      • Please sign in to GitHub and install the HackMD app on your GitHub repo.
      • HackMD links with GitHub through a GitHub App. You can choose which repo to install our App.
      Learn more  Sign in to GitHub

      Push the note to GitHub Push to GitHub Pull a file from GitHub

        Authorize again
       

      Choose which file to push to

      Select repo
      Refresh Authorize more repos
      Select branch
      Select file
      Select branch
      Choose version(s) to push
      • Save a new version and push
      • Choose from existing versions
      Include title and tags
      Available push count

      Pull from GitHub

       
      File from GitHub
      File from HackMD

      GitHub Link Settings

      File linked

      Linked by
      File path
      Last synced branch
      Available push count

      Danger Zone

      Unlink
      You will no longer receive notification when GitHub file changes after unlink.

      Syncing

      Push failed

      Push successfully