[{"data":1,"prerenderedAt":8128},["ShallowReactive",2],{"article-\u002Fzh\u002Fblog\u002Fa11y-dev-tool":3,"article-alt-\u002Fzh\u002Fblog\u002Fa11y-dev-tool":228,"article-related-\u002Fzh\u002Fblog\u002Fa11y-dev-tool":466},{"id":4,"title":5,"body":6,"date":210,"description":211,"draft":212,"extension":213,"meta":214,"navigation":215,"ogImage":216,"path":217,"seo":218,"stem":219,"tags":220,"translationKey":216,"updatedAt":226,"__hash__":227},"blog_zh\u002Fzh\u002Fblog\u002Fa11y-dev-tool.md","Accesserty DevCheck — 在開發階段模擬與偵測無障礙問題",{"type":7,"value":8,"toc":199},"minimark",[9,13,16,19,22,25,28,33,36,52,55,69,72,76,81,84,115,119,127,130,133,136,139,142,156,160,163,166,169,173,193,196],[10,11,12],"p",{},"2026\u002F06\u002F22 更新：已新增 AI 圖片 alt 語意輔助辨識與建議，以下為原文不修正。",[10,14,15],{},"--",[10,17,18],{},"在開發網站時，我們總習慣寫完程式碼後再補測試，再補無障礙，再補設計稿上的細節。",[10,20,21],{},"但「無障礙設計」這件事，其實不只是檢查通過，而是讓人真的可以用得順、看得懂、操作得了。",[10,23,24],{},"這就是我設計 Accesserty DevCheck 的初衷：",[10,26,27],{},"讓開發者在開發階段，就能模擬真實世界中遇到的可及性挑戰，並結合機器工具進行基本檢測。",[29,30,32],"h3",{"id":31},"為什麼需要模擬","為什麼需要模擬？",[10,34,35],{},"無障礙問題，有些可以用程式碼掃出來，例如：",[37,38,39,43,46,49],"ul",{},[40,41,42],"li",{},"圖片缺少 alt",[40,44,45],{},"標題結構錯誤",[40,47,48],{},"Landmark 缺少 main\u002Fnav\u002Ffooter",[40,50,51],{},"沒有設定 aria 屬性或設錯",[10,53,54],{},"但更多的問題，其實是無法自動抓出來的：",[37,56,57,60,63,66],{},[40,58,59],{},"你怎麼知道配色對色盲者來說是不是一樣？",[40,61,62],{},"你怎麼知道頁面文字模糊時還能不能閱讀？",[40,64,65],{},"你怎麼知道某個區塊如果看不見，會影響理解整體內容？",[40,67,68],{},"這些情境都無法靠 Lighthouse、axe-core 完全處理。",[10,70,71],{},"所以我們需要的是：模擬情境 + 偵測工具。",[29,73,75],{"id":74},"accesserty-devcheck-提供了什麼功能","Accesserty DevCheck 提供了什麼功能？",[77,78,80],"h4",{"id":79},"模擬情境simulation-modes","模擬情境（Simulation Modes）",[10,82,83],{},"這些功能可以讓你在任何網站中，快速切換視覺環境來體驗他人可能遇到的困難：",[37,85,86,89],{},[40,87,88],{},"色盲模擬：支援多種色盲類型（紅綠色盲、藍黃色盲、全色盲等）",[40,90,91,92],{},"視覺模糊模擬：\n",[37,93,94,97,100,103,106,109,112],{},[40,95,96],{},"近視（整體模糊）",[40,98,99],{},"老花／遠視（只有中央清晰）",[40,101,102],{},"白內障（亮光擴散模糊）",[40,104,105],{},"視覺遮蔽模擬：模擬眼前有一塊區域是看不到的情況（常見於眼疾或視野限制者）",[40,107,108],{},"大文字／間距模擬：模擬放大字體時排版是否崩壞",[40,110,111],{},"顏色反轉模式：模擬強制暗色模式對 UI 的影響",[40,113,114],{},"單指點擊區模擬：讓你了解手指點擊範圍過小是否會導致誤觸（特別適合行動裝置開發者）",[77,116,118],{"id":117},"偵測功能debug-tools","偵測功能（Debug Tools）",[37,120,121,124],{},[40,122,123],{},"axe-core 自動偵測",[40,125,126],{},"PDF 結構偵測",[29,128,129],{"id":129},"使用方式簡單直覺",[10,131,132],{},"DevCheck 是一個 Chrome Extension，只要安裝後點擊圖示，就能開啟模擬選單。",[10,134,135],{},"你可以即時切換不同情境、看到畫面變化，並點擊一鍵啟動偵測。",[10,137,138],{},"不用換頁、不用複製網址，不論是開發者測試 staging 站、還是設計師審查 prototype，都能即時驗證。",[29,140,141],{"id":141},"它不只是給工程師的工具",[37,143,144,147,150,153],{},[40,145,146],{},"設計師可以用來檢查配色與字級",[40,148,149],{},"專案經理可以在 Demo 前模擬各種情境",[40,151,152],{},"測試人員可以用來快速重現視覺問題",[40,154,155],{},"客服也能在用戶報案後馬上模擬狀況",[29,157,159],{"id":158},"為什麼這很重要","為什麼這很重要？",[10,161,162],{},"因為「有問題」不代表「會回報」，也不代表「知道怎麼回報」。",[10,164,165],{},"你可以等到用戶投訴，再來修修補補，或是在開發階段就先體驗一次他們的痛苦。",[10,167,168],{},"如果體驗一次你就覺得難用，那真正需要這個功能的人，可能早就放棄這個網站了。",[29,170,172],{"id":171},"試試看-accesserty-devcheck","試試看 Accesserty DevCheck",[37,174,175,186],{},[40,176,177],{},[178,179,185],"a",{"href":180,"rel":181,"target":183,"title":184},"https:\u002F\u002Faccesserty.com\u002Fdevcheck",[182],"nofollow","_blank","另開新視窗","介紹",[40,187,188],{},[178,189,192],{"href":190,"rel":191,"target":183,"title":184},"https:\u002F\u002Fchromewebstore.google.com\u002Fdetail\u002Faccesserty-devcheck\u002Fompbhahmipenipgiiiehbkiibkonoeec",[182],"擴充程式",[10,194,195],{},"你不需要學會所有 WCAG 條文，也不需要改變整個流程，",[10,197,198],{},"只要在開發中，點一下模擬，就能早一步降低後期修正的成本。",{"title":200,"searchDepth":201,"depth":201,"links":202},"",2,[203,205,206,207,208,209],{"id":31,"depth":204,"text":32},3,{"id":74,"depth":204,"text":75},{"id":129,"depth":204,"text":129},{"id":141,"depth":204,"text":141},{"id":158,"depth":204,"text":159},{"id":171,"depth":204,"text":172},"2025-05-31","不是等到出問題才補救，而是提早在開發階段「感受」與「理解」可能的障礙",false,"md",{},true,null,"\u002Fzh\u002Fblog\u002Fa11y-dev-tool",{"title":5,"description":211},"zh\u002Fblog\u002Fa11y-dev-tool",[221,222,223,224,225],"ChromeExtension","無障礙網頁設計","A11Y","無障礙","Accessibility","2026-06-22","M40eGuKDkLUUm3UE5O9lKKbApbnmec-ds0zzD4shv00",{"id":229,"title":230,"body":231,"date":210,"description":240,"draft":212,"extension":213,"meta":459,"navigation":215,"ogImage":216,"path":460,"seo":461,"stem":462,"tags":463,"translationKey":216,"updatedAt":226,"__hash__":465},"blog_en\u002Fen\u002Fblog\u002Fa11y-dev-tool.md","Accesserty DevCheck — Simulate and Detect Accessibility Challenges Before You Ship",{"type":7,"value":232,"toc":452},[233,236,238,241,244,247,264,267,270,274,277,280,297,300,304,307,348,352,380,384,401,405,408,411,414,425,428,431,446,449],[10,234,235],{},"2026\u002F06\u002F22 update：Added image alt suggestion by Gemini。",[10,237,15],{},[10,239,240],{},"Stop waiting for complaints. Start feeling what your users feel — directly inside your dev workflow.",[10,242,243],{},"When we talk about accessibility, most people think of checklists, screen readers, or legal compliance.",[10,245,246],{},"But real accessibility issues don’t always show up in audits.\nThey show up when:",[37,248,249,252,255,258,261],{},[40,250,251],{},"A user can’t tell where the content begins",[40,253,254],{},"A button is too small for touch",[40,256,257],{},"Text is blurry for someone with poor vision",[40,259,260],{},"A flashing banner causes discomfort",[40,262,263],{},"A layout breaks when text size increases",[10,265,266],{},"These problems often go unnoticed — until it’s too late.",[10,268,269],{},"That’s why I built Accesserty DevCheck:\nA developer tool that helps you simulate real-world accessibility challenges and run basic tests, all from your browser.",[29,271,273],{"id":272},"why-simulation-matters","Why Simulation Matters",[10,275,276],{},"Automated tools like Lighthouse or axe-core can check for missing alt text, bad heading structure, or missing ARIA labels.",[10,278,279],{},"But they can’t tell you what it’s like to actually use your product if:",[37,281,282,285,288,291,294],{},[40,283,284],{},"You have color blindness",[40,286,287],{},"You experience visual blur or cataracts",[40,289,290],{},"You can’t see part of the screen",[40,292,293],{},"You use only one finger on a touchscreen",[40,295,296],{},"You rely on large text or dark modes",[10,298,299],{},"That’s where DevCheck’s simulation layer comes in.",[29,301,303],{"id":302},"what-devcheck-offers","What DevCheck Offers",[10,305,306],{},"These tools let you experience a website the way many users do — with visual or interaction limitations:",[37,308,309,312,315,318,321,324,327,330,333,336,339,342,345],{},[40,310,311],{},"Color Blindness Simulation\n(Red-green, blue-yellow, total monochrome, and more)",[40,313,314],{},"Visual Blur Simulation",[40,316,317],{},"Myopia (full blur)",[40,319,320],{},"Presbyopia (center blur)",[40,322,323],{},"Cataracts (glare + fog)",[40,325,326],{},"Screen Occlusion",[40,328,329],{},"Simulate partial visual field loss (common with eye diseases)",[40,331,332],{},"Large Text \u002F Increased Spacing",[40,334,335],{},"Helps test responsive behavior under assistive settings",[40,337,338],{},"Color Inversion Mode",[40,340,341],{},"Simulate forced dark mode effects",[40,343,344],{},"Finger Tap Zone Simulation",[40,346,347],{},"Shows a 64px circle around your cursor to test if small clickable areas are accessible",[29,349,351],{"id":350},"detection-tools-debug-mode","Detection Tools (Debug Mode)",[37,353,354,357,360],{},[40,355,356],{},"axe-core audit",[40,358,359],{},"Run in-browser checks for common violations",[40,361,362,363],{},"(Coming Soon)\n",[37,364,365,368,371,374,377],{},[40,366,367],{},"Image alt text analysis",[40,369,370],{},"Heading structure visualizer",[40,372,373],{},"Landmark checks",[40,375,376],{},"SEO metadata detection",[40,378,379],{},"ARIA misuse warnings",[29,381,383],{"id":382},"who-is-it-for","Who is it for?",[37,385,386,389,392,395,398],{},[40,387,388],{},"Frontend developers — Test as you build",[40,390,391],{},"Designers — Validate layouts, spacing, and color choices",[40,393,394],{},"PMs — Simulate user pain points before demo day",[40,396,397],{},"Testers — Reproduce visual experience issues",[40,399,400],{},"Customer support — Understand user complaints better",[29,402,404],{"id":403},"its-not-about-compliance-its-about-empathy","It’s not about compliance — it’s about empathy",[10,406,407],{},"Most users won’t report accessibility issues.",[10,409,410],{},"Why?",[10,412,413],{},"Because:",[37,415,416,419,422],{},[40,417,418],{},"They don’t know how",[40,420,421],{},"They don’t know who to tell",[40,423,424],{},"They don’t believe anything will change",[10,426,427],{},"DevCheck gives you a way to feel what they feel — before they bounce, quit, or struggle in silence.",[10,429,430],{},"Try Accesserty DevCheck Now:",[37,432,433,440],{},[40,434,435],{},[178,436,439],{"href":180,"rel":437,"target":183,"title":438},[182],"Open new window","Introduction",[40,441,442],{},[178,443,445],{"href":190,"rel":444,"target":183,"title":438},[182],"Chrome Extension",[10,447,448],{},"You don’t have to be an accessibility expert.",[10,450,451],{},"You just need the curiosity to simulate, and the willingness to adjust before it hurts.",{"title":200,"searchDepth":201,"depth":201,"links":453},[454,455,456,457,458],{"id":272,"depth":204,"text":273},{"id":302,"depth":204,"text":303},{"id":350,"depth":204,"text":351},{"id":382,"depth":204,"text":383},{"id":403,"depth":204,"text":404},{},"\u002Fen\u002Fblog\u002Fa11y-dev-tool",{"title":230,"description":240},"en\u002Fblog\u002Fa11y-dev-tool",[221,223,225,464],"DevTool","9ebSB5oBE1IVi29IEoukEPZqLdcEOMlZoNKN2BMepDU",[467,1172,1292,1333,1493,1568,1614,2526,2662,2836,3112,3298,3488,3737,3833,4650,4949,5253,5452,5934,7939],{"id":468,"title":469,"body":470,"date":1159,"description":1160,"draft":212,"extension":213,"meta":1161,"navigation":215,"ogImage":216,"path":1162,"seo":1163,"stem":1164,"tags":1165,"translationKey":216,"updatedAt":216,"__hash__":1171},"blog_zh\u002Fzh\u002Fblog\u002Fa11y-world-rules.md","全球網頁無障礙制度設計：各國法規、公私部門執行工具與驅動力比較",{"type":7,"value":471,"toc":1152},[472,475,484,487,491,494,505,508,512,531,535,540,543,554,558,561,575,579,582,605,609,614,618,621,669,672,686,690,694,697,700,703,706,709,712,715,718,721,727,731,734,737,740,743,746,749,752,755,758,763,766,774,778,781,792,794,797,811,814,818,822,829,836,843,850,853,860,867,870,877,884,891,894,901,908,915,918,925,932,935,942,949,952,959,966,969,976,983,990,997,1000,1007,1014,1017,1024,1031,1038,1041,1048,1055,1058,1065,1072,1075,1082,1089,1096,1099,1106,1113,1116,1123,1130,1133,1140,1147,1149],[29,473,474],{"id":474},"前言",[10,476,477,478,483],{},"最近我正在幫我的 Accesserty Signal",[178,479,482],{"href":480,"rel":481,"target":183,"title":184},"https:\u002F\u002Faccesserty.com\u002Fsignal",[182],"連結"," 擴充標章功能。原本只是單純想收集各國的標章、法規與檢測項目，但收集到一半時發現——應該要先理解各國的「政策」才行，於是著手手動收集；然而要涵蓋的國家與細節實在太多，不得不借助 AI 協助整理與分析，也順便分享給大家閱讀。以下資料可能有誤，歡迎專家不吝指正。 預計下一篇將分析各國標章概況。",[10,485,486],{},"先把本文制度地基講清楚：\n盤點 臺灣、美國、英國、澳洲、韓國、日本、印度，以及歐盟框架下的德國、法國、西班牙、葡萄牙、奧地利、比利時、荷蘭與非歐盟的瑞士，共十六個法域的網頁無障礙制度設計。重點不在「技術標準是 WCAG 幾點幾」（這幾乎全球趨同於 WCAG 2.1／2.2 AA），而在一個更根本的問題——到底是用什麼力量，讓網站願意做到無障礙？ 是政府發一張證書、派人定期抽查、開一張罰單，還是等身心障礙者上法院告？各國的答案，差異遠比想像中大。",[29,488,490],{"id":489},"一分析框架先分公部門與民間再看用哪種工具","一、分析框架：先分公部門與民間，再看用哪種工具",[10,492,493],{},"比較各國制度時，最常見的錯誤是把一個國家當成「一格」。事實上幾乎每個法域，對公部門與對民間都是兩套不同的法、不同的執行者、不同的後果：",[37,495,496,499,502],{},[40,497,498],{},"歐盟用兩條不同指令——WAD（管公部門）與 EAA（管民間）；",[40,500,501],{},"德國公部門（BITV）無罰則、民間（BFSG）卻可罰 €10 萬；",[40,503,504],{},"臺灣對政府網站法律強制取得標章、對民間幾乎零要求。",[10,506,507],{},"所以本文採雙軸分析：先區分「公部門 \u002F 民間」，再用一套共通的「機制詞彙」標定每個法域落在哪裡。",[77,509,511],{"id":510},"六種制度工具機制詞彙","六種制度工具（機制詞彙）",[10,513,514,515,518,519,521,522,524,525,527,528,530],{},"① 強制認證制：事前、政府或指定機構檢測、發證，法律要求特定對象取得",[516,517],"br",{},"\n② 自我聲明＋政府監測制：持續、受規範者自評並公布無障礙聲明，政府抽樣複查＋申訴",[516,520],{},"\n③ 採購／供應鏈槓桿制：進場、「政府只買無障礙的東西／不合規喪失標案資格」",[516,523],{},"\n④ 市場監督＋罰鍰制：事後、市場監督機關查核、命令改善、課罰鍰乃至下架",[516,526],{},"\n⑤ 反歧視訴訟驅動制：事後、無事前認證，靠個案申訴、民事訴訟、行政救濟",[516,529],{},"\n⑥ 軟法／努力義務制：--、無強制門檻與罰則，靠行政指導與聲譽壓力",[77,532,534],{"id":533},"二各法域制度檢視依主導模式分組","二、各法域制度檢視（依主導模式分組）",[536,537,539],"h5",{"id":538},"群組-a政府強制認證型東亞印度","群組 A：政府強制認證型（東亞＋印度）",[10,541,542],{},"這群共同點是——政府（或政府指定機構）扮演發證者，並把「取得認證」寫進法律或政策。",[37,544,545,548,551],{},[40,546,547],{},"臺灣：母法《身心障礙者權益保障法》第 52 條之 2 明文要求政府機關、學校網站「應通過第一優先等級以上無障礙檢測，並取得認證標章」。數位發展部建平台，含自我、機器、人工（含身障者）檢測。標準以 WCAG 2.1 AA 為底、預計 2026 年底升 2.2。公部門強制、民間無規範。",[40,549,550],{},"韓國：以《禁止歧視身心障礙者法》第 21 條為核心，科學技術資訊通信部（MSIT）指定三家認證機構核發官方品質標章，標準 KWCAG 2.2。罰則相對硬——惡意歧視最高 3 年徒刑或 3,000 萬韓元罰金，另有行政罰鍰、喪失標案資格。公部門認證、民間靠反歧視法強制（分階段）。",[40,552,553],{},"印度：以《身心障礙者權利法》（RPwD 2016）為母法，MeitY 旗下 STQC 官方機構檢測、核發 CQW 認證（把無障礙、資安、易用性綁在一起），標準 GIGW 3.0（WCAG 2.1 AA）。罰則初犯 ₹1 萬、累犯最高 ₹5 lakh。2025 年 SEBI 通函首次把無障礙強制擴及金融業——印度正從公部門向民間擴張。",[536,555,557],{"id":556},"群組-b反歧視訴訟驅動型普通法系日本","群組 B：反歧視訴訟驅動型（普通法系＋日本）",[10,559,560],{},"這群不設政府事前認證，把無障礙定位為「反歧視／平等權」，靠申訴與訴訟推動。",[37,562,563,566,569,572],{},[40,564,565],{},"美國：雙軌——ADA（反歧視，Title II 州\u002F地方政府、Title III 民間）＋ Section 508（聯邦採購）。標準須分層：ADA Title II 2024 新規採 WCAG 2.1 AA、Section 508 仍是 WCAG 2.0 AA、Title III 無法定標準靠判例。著名的「訴訟驅動」國家，每年數千件網站官司。",[40,567,568],{},"英國：公部門《2018 公部門無障礙規範》（PSBAR，轉化 WAD），GDS 監測、EHRC 執法；民間《2010 平等法》要求「合理調整」，身障者可向郡法院求償。標準綁「WCAG as amended」（現行 2.2 AA）。脫歐後未轉化 EAA，民間僅靠平等法。",[40,570,571],{},"澳洲：《1992 身心障礙歧視法》（DDA）涵蓋公私，但無法定技術標準、無行政罰鍰；AHRC 受理申訴→調解→聯邦法院判賠並命改善（指標案 Maguire v SOCOG 2000）。聯邦政府另透過 DTA《Digital Service Standard 2.0》要求採最新 WCAG（現 2.2 AA）。",[40,573,574],{},"日本：《障害者差別解消法》第 7 條（政府）、第 8 條（民間），標準 JIS X 8341-3:2016（對應 WCAG 2.0，實務向 2.1）。2024\u002F4\u002F1 起民間「合理調整」從努力義務升為法定義務，但網頁無障礙仍偏努力目標、幾乎無直接罰則（唯一罰鍰 ¥20 萬針對拒絕政府調查\u002F虛偽報告）。典型「軟法」。",[536,576,578],{"id":577},"群組-c歐盟雙指令型wad-公部門eaa-民間","群組 C：歐盟雙指令型（WAD 公部門＋EAA 民間）",[10,580,581],{},"這群結構高度一致：公部門源自 WAD（2016\u002F2102）、走自我聲明＋政府監測；民間源自 EAA（2019\u002F882，2025\u002F6\u002F28 適用）、走市場監督＋罰鍰。差異在「監測的牙齒」與「罰鍰金額」。標準一律 EN 301 549 → WCAG 2.1 AA。",[37,583,584,587,590,593,596,599,602],{},[40,585,586],{},"德國：三層——BGG（母法）＋BITV 2.0（公部門）＋BFSG（民間）。公部門無罰則，靠團體訴訟（Verbandsklage）；民間由各邦聯合市場監督機關（設於 Magdeburg）查處，最高罰 €10 萬。",[40,588,589],{},"法國：第 2005-102 號法第 47 條＋RGAA 4.1.2，DINUM 制定規範。特別之處：2023 年起 ARCOM 對公部門也有實質裁罰權——申報義務缺失 €25,000、無障礙不合規 €50,000，且持續未改正每年可重罰。民間（EAA）由 DGCCRF 統籌市場監督，罰金累計可達 €250,000。法國是少數讓公部門監測「長出牙齒」的歐盟國。",[40,591,592],{},"西班牙：公部門 RD 1112\u002F2018＋無障礙觀測站（Observatorio）監測；民間 RDL 11\u002F2023。罰鍰分體系——公部門監督約 €3,000–100,000，民間／EAA 級距最高可達 €100 萬（非常嚴重），是歐盟中上限最高者之一。無官方標章，AENOR、Ilunion 屬民間自願認證。",[40,594,595],{},"葡萄牙：公部門 DL 83\u002F2018，AMA 監測並營運官方但自願的「易用性與無障礙標章 Selo」（金\u002F銀\u002F銅）；民間 DL 82\u002F2022，由 ANACOM、ASAE 等多家部門別監理機關稽查，法人罰鍰最高約 €44,892。",[40,597,598],{},"奧地利：公部門 WZG，FFG（研究促進署）監測；民間 BaFG（2025），社會部服務處（Sozialministeriumservice）市場監督，最高罰 €8 萬。WACA 為民間自願標章。",[40,600,601],{},"比利時：聯邦制使法源分散——1 部聯邦法（2018\u002F7\u002F19）＋多個地區法令；BOSA 轄下的數位無障礙署監測協調。民間 EAA 由聯邦經濟部等執行。AnySurfer 為民間自願標章。",[40,603,604],{},"荷蘭：公部門《政府數位無障礙臨時法令》，採「遵循或解釋（comply-or-explain）」＋Logius 查核聲明＋公開 Dashboard，無罰鍰；民間《實施法》由消費者暨市場管理局（ACM）監督，最高罰 €9 萬並可禁止提供服務。Drempelvrij\u002FDigital Inclusive 為民間自願標章。",[536,606,608],{"id":607},"群組-d非歐盟自成一套","群組 D：非歐盟自成一套",[37,610,611],{},[40,612,613],{},"瑞士：《身心障礙者平等法》（BehiG，2004）＋eCH-0059 標準（WCAG 2.1 AA），目前僅及於聯邦行政機關、無罰鍰、靠當事人主張權利。非歐盟、不適用 EAA。修法中，預計最快 2027\u002F1\u002F1 才把義務擴及民間線上服務。",[77,615,617],{"id":616},"三公私-機制定位矩陣","三、公私 × 機制定位矩陣",[10,619,620],{},"把十六個法域同時放上「公部門」\u002F「民間」兩軸：",[10,622,623,624,626,627,629,630,632,633,635,636,638,639,641,642,644,645,647,648,650,651,653,654,656,657,659,660,662,663,665,666,668],{},"臺灣 ① 強制認證（母法要求取得標章） ／ ⑥ 無",[516,625],{},"\n韓國 ① 政府指定機構認證（官方標章） ／ ⑤ 反歧視法（分階段強制＋刑\u002F罰）",[516,628],{},"\n印度 ① STQC、CQW 強制認證 ／ ④⑤ RPwD＋SEBI(2025) 新興強制",[516,631],{},"\n美國 ③ Section 508 採購＋⑤ ADA Title II ／ ⑤ ADA Title III 訴訟",[516,634],{},"\n英國 ② PSBAR 自我聲明＋GDS 監測（EHRC 執法） ／ ⑤ 平等法訴訟",[516,637],{},"\n澳洲 ⑤\u002F⑥ DDA＋DSS（政府採 WCAG，靠申訴） ／ ⑤ DDA 訴訟",[516,640],{},"\n日本 ⑥ 努力義務＋軟性引導 ／ ⑥ 軟法（2024 合理調整法定義務、無罰則）",[516,643],{},"\n歐盟 ② WAD ／ ④ EAA",[516,646],{},"\n德國 ② BITV（無罰則／團體訴訟） ／ ④ BFSG（市場監督＋€10萬）",[516,649],{},"\n法國 ②＋④ RGAA＋ARCOM（可罰 €5萬） ／ ④ EAA（DGCCRF，累計 €25萬）",[516,652],{},"\n西班牙 ② RD 1112＋Observatorio 監測 ／ ④ RDL 11\u002F2023（最高 €100萬）",[516,655],{},"\n葡萄牙 ② DL 83\u002F2018＋AMA 監測（＋自願 Selo） ／ ④ DL 82\u002F2022（部門別監理）",[516,658],{},"\n奧地利 ② WZG＋FFG 監測 ／ ④ BaFG（€8萬）",[516,661],{},"\n比利時 ② 2018 法＋BOSA 監測 ／ ④ EAA（聯邦經濟部）",[516,664],{},"\n荷蘭 ② 臨時法＋Logius（comply-or-explain） ／ ④ EAA（ACM，€9萬）",[516,667],{},"\n瑞士 ②\u002F⑥ BehiG 聯邦自我落實 ／ 無（2027 才擴及民間）",[77,670,671],{"id":671},"從矩陣讀出的四個結構性事實",[37,673,674,677,680,683],{},[40,675,676],{},"公部門集中在「認證／監測」，民間則明顯分兩條路。 公部門欄不是①就是②；民間欄則裂成兩種法律傳統——普通法系（美、英、澳）＋東亞反歧視（日、韓）靠⑤訴訟，歐盟靠④市場監督＋罰鍰。",[40,678,679],{},"「民間」這一格長期最弱，2024–2025 才被補起來。 臺灣民間仍近乎空白、日本到 2024 才硬化、歐盟 EAA 與印度 SEBI 都在 2025 才上路、瑞士要等 2027。網頁無障礙的執法重心，正從公部門外溢到民間。",[40,681,682],{},"同一個②「監測」機制，但差很多。 多數歐盟國公部門無罰鍰（德、荷、比、奧、葡），靠透明與團體訴訟；法國比較不一樣，ARCOM 對公部門可罰 €5 萬並 name & shame；英國則無罰鍰但 EHRC 有調查與訴訟權。",[40,684,685],{},"罰鍰金額（民間\u002FEAA）落差極大。 葡萄牙約 €4.5 萬、奧地利 €8 萬、荷蘭 €9 萬、德國 €10 萬、法國累計 €25 萬，西班牙最高 €100 萬。同一條 EAA，各國「定價」天差地別。",[29,687,689],{"id":688},"四各機制優缺點分析分公部門民間兩組","四、各機制優缺點分析（分公部門、民間兩組）",[77,691,693],{"id":692},"甲公部門常見機制","甲、公部門常見機制",[10,695,696],{},"① 強制認證（臺、韓、印）",[10,698,699],{},"標準統一、通過與否明確、可公開查核；對政府網站效力最強；天然產生「官方標章」可供信任",[10,701,702],{},"行政成本高、易僵化於發證當下、難規模化；認證後品質可能回落（一次性過關）",[10,704,705],{},"② 自我聲明＋監測（歐盟公部門、英）",[10,707,708],{},"門檻低、可覆蓋海量網站；持續監測反映現況；不需龐大發證機器",[10,710,711],{},"自評可信度低、監測僅抽樣；罰則弱時流於形式（聲明漂亮、實際不無障礙）",[10,713,714],{},"③ 採購／供應鏈槓桿（美 Section 508）",[10,716,717],{},"不必另立罰則即驅動大量供應商；示範效果強、責任鏈清楚",[10,719,720],{},"只及於與政府交易者；易被「自我宣告（VPAT）」灌水",[722,723,724],"blockquote",{},[10,725,726],{},"公部門的共同弱點：力度雖強，邊界卻止於政府自己。臺、印的強制認證對民間無外溢力；歐盟監測制覆蓋廣卻深度不足，且多數國家對公部門根本沒有罰鍰（法國是少數例外）。",[77,728,730],{"id":729},"乙民間常見機制","乙、民間常見機制",[10,732,733],{},"④ 市場監督＋罰鍰（歐盟民間、印 SEBI）",[10,735,736],{},"經濟嚇阻力強、明確覆蓋民間、責任歸屬清楚；可下架\u002F禁營運",[10,738,739],{},"事後性（傷害已發生）、執法量能有限；中小企業負擔重、易靠豁免規避；金額各國落差大、2025 才上路成效待觀察",[10,741,742],{},"⑤ 反歧視訴訟驅動（美、英、澳、韓）",[10,744,745],{},"賦予當事人實權、判例能快速拉高標準、不需事前行政機器",[10,747,748],{},"高度不確定、標準由法院碎片化形成；訴訟成本轉嫁、易生「掠奪性訴訟」；弱勢者未必告得起",[10,750,751],{},"⑥ 軟法／努力義務（日、臺民間、瑞士民間至 2027）",[10,753,754],{},"推行阻力小、易作過渡；可先建共識再硬化",[10,756,757],{},"幾乎無強制力、淪為宣示；改善高度依賴企業善意與聲譽壓力",[722,759,760],{},[10,761,762],{},"民間的共同難題：要嘛事後（罰鍰、訴訟都在傷害發生後），要嘛無力（軟法）。沒有任何一國對民間採「事前強制認證」——這正說明為何官方標章幾乎只長在公部門。",[77,764,765],{"id":765},"跨組綜合觀察",[37,767,768,771],{},[40,769,770],{},"沒有單一最佳解，成熟法域都是「疊加」。 美國＝採購(③)＋訴訟(⑤)；歐盟各國＝監測(②)＋市場監督(④)，再加個人訴訟。強的制度是多工具互相補位，而非單押一種。",[40,772,773],{},"罰鍰的「有無」與「高低」並不等於成效。 荷蘭公部門無罰鍰卻靠 comply-or-explain＋公開 Dashboard 維持透明壓力；西班牙民間罰到 €100 萬，但實際執法量能仍是問號。制度的真正差別在執行密度，不只在條文上的數字。",[29,775,777],{"id":776},"五綜合觀察與趨勢","五、綜合觀察與趨勢",[10,779,780],{},"把十六個法域攤開，可以看到三個清楚的走向：",[37,782,783,786,789],{},[40,784,785],{},"技術標準全球趨同、制度工具高度分歧。 大家都收斂到 EN 301 549 \u002F WCAG 2.1（漸進 2.2）AA；真正的差異全在「誰來逼、怎麼逼」。",[40,787,788],{},"重心從「公部門軟法／事前認證」走向「民間市場監督＋基本權」。 2024–2025 是分水嶺：歐盟 EAA、日本合理調整義務化、印度最高法院 2025 判決與 SEBI 通函，都把無障礙從「努力目標」推向「可罰、可訴的權利」。瑞士 2027 將是下一棒。",[40,790,791],{},"「有沒有官方標章」≠「制度強不強」。 臺、韓、印有強制官方標章；但德、西、荷這些制度完整的國家刻意不設官方標章，改用自我聲明＋監測，把標章讓給民間自願市場；葡萄牙的 Selo 雖由政府營運，仍只是自願卓越獎而非合規門檻。",[10,793,15],{},[10,795,796],{},"下一篇預告：當「標章」遇上不同制度\n本文畫出了一張「公私 × 機制」的制度地圖。而在這張地圖上，「無障礙標章」其實落在很不一樣的位置：",[37,798,799,802,805,808],{},[40,800,801],{},"在臺灣，標章是法律強制的守門員——政府網站沒拿到就不合規；",[40,803,804],{},"在韓國、印度，標章是政府或指定機構核發的官方憑證；",[40,806,807],{},"在德國、西班牙、荷蘭、奧地利、比利時、瑞士，官方根本不發標章，市面上的 WACA、AnySurfer、AENOR、Ilunion、Access for all、Drempelvrij 全是民間自願的信任標記——它是加分項，不是門檻；",[40,809,810],{},"而葡萄牙的 Selo 則卡在中間：政府營運，卻是自願的卓越獎。",[10,812,813],{},"也就是說，同樣叫「無障礙標章」，有的是「過不了就違法」的關卡，有的只是「做到了給你拍拍手」的獎章。下一篇，我會把各國的標章逐一攤開——誰發的、怎麼分級、有沒有有效期限、查不查得到名單、設計長什麼樣——並對照本文這張制度地圖，看看每一枚標章，到底站在哪個位置。",[29,815,817],{"id":816},"reference-列表","Reference 列表",[77,819,821],{"id":820},"國際框架","國際／框架",[10,823,824],{},[178,825,828],{"href":826,"rel":827,"target":183,"title":184},"https:\u002F\u002Fwww.w3.org\u002FWAI\u002Fpolicies\u002F",[182],"W3C WAI, Web Accessibility Laws & Policies",[10,830,831],{},[178,832,835],{"href":833,"rel":834,"target":183,"title":184},"https:\u002F\u002Feur-lex.europa.eu\u002Feli\u002Fdir\u002F2016\u002F2102\u002Foj",[182],"EU Web Accessibility Directive 2016\u002F2102",[10,837,838],{},[178,839,842],{"href":840,"rel":841,"target":183,"title":184},"https:\u002F\u002Fcommission.europa.eu\u002Fstrategy-and-policy\u002Fpolicies\u002Fjustice-and-fundamental-rights\u002Fdisability\u002Feuropean-accessibility-act-eaa_en",[182],"European Accessibility Act, Directive 2019\u002F882",[10,844,845],{},[178,846,849],{"href":847,"rel":848,"target":183,"title":184},"https:\u002F\u002Faccessible-eu-centre.ec.europa.eu\u002F",[182],"EN 301 549（Accessible EU Centre）",[77,851,852],{"id":852},"臺灣",[10,854,855],{},[178,856,859],{"href":857,"rel":858,"target":183,"title":184},"https:\u002F\u002Flaw.moj.gov.tw\u002FLawClass\u002FLawSingle.aspx?Pcode=D0050046&FLNO=52-2",[182],"身心障礙者權益保障法第 52-2 條",[10,861,862],{},[178,863,866],{"href":864,"rel":865,"target":183,"title":184},"https:\u002F\u002Faccessibility.moda.gov.tw\u002F",[182],"數位發展部《網站無障礙規範》",[77,868,869],{"id":869},"美國",[10,871,872],{},[178,873,876],{"href":874,"rel":875,"target":183,"title":184},"https:\u002F\u002Fwww.ada.gov\u002Flaw-and-regs\u002Fada\u002F",[182],"ADA",[10,878,879],{},[178,880,883],{"href":881,"rel":882,"target":183,"title":184},"https:\u002F\u002Fwww.section508.gov\u002F",[182],"Section 508",[10,885,886],{},[178,887,890],{"href":888,"rel":889,"target":183,"title":184},"https:\u002F\u002Fwww.levelaccess.com\u002Fblog\u002Fada-vs-section-508-whats-the-difference\u002F",[182],"ADA Title II 2024 規則 vs Section 508（WCAG 2.1\u002F2.0 比較，Level Access）",[77,892,893],{"id":893},"英國",[10,895,896],{},[178,897,900],{"href":898,"rel":899,"target":183,"title":184},"https:\u002F\u002Fwww.legislation.gov.uk\u002Fuksi\u002F2018\u002F952\u002Fcontents",[182],"PSBAR 2018",[10,902,903],{},[178,904,907],{"href":905,"rel":906,"target":183,"title":184},"https:\u002F\u002Fwww.legislation.gov.uk\u002Fukpga\u002F2010\u002F15\u002Fcontents",[182],"Equality Act 2010",[10,909,910],{},[178,911,914],{"href":912,"rel":913,"target":183,"title":184},"https:\u002F\u002Fwww.gov.uk\u002Fguidance\u002Faccessibility-requirements-for-public-sector-websites-and-apps",[182],"公部門無障礙要求（GOV.UK）",[77,916,917],{"id":917},"澳洲",[10,919,920],{},[178,921,924],{"href":922,"rel":923,"target":183,"title":184},"https:\u002F\u002Fwww.legislation.gov.au\u002FC2004A04426\u002Flatest",[182],"Disability Discrimination Act 1992",[10,926,927],{},[178,928,931],{"href":929,"rel":930,"target":183,"title":184},"https:\u002F\u002Fhumanrights.gov.au\u002Four-work\u002Fdisability-rights\u002Fworld-wide-web-access-disability-discrimination-act-advisory-notes-ver",[182],"AHRC, World Wide Web Access: DDA Advisory Notes",[77,933,934],{"id":934},"韓國",[10,936,937],{},[178,938,941],{"href":939,"rel":940,"target":183,"title":184},"https:\u002F\u002Felaw.klri.re.kr\u002Feng_mobile\u002Fviewer.do?hseq=55535&type=part&key=38",[182],"Act on Prohibition of Discrimination against Persons with Disabilities（KLRI 英譯）",[10,943,944],{},[178,945,948],{"href":946,"rel":947,"target":183,"title":184},"https:\u002F\u002Fenglish.seoul.go.kr\u002Fweb-accessibility-quality-mark\u002F",[182],"Seoul, Web Accessibility Quality Mark",[77,950,951],{"id":951},"日本",[10,953,954],{},[178,955,958],{"href":956,"rel":957,"target":183,"title":184},"https:\u002F\u002Fwww8.cao.go.jp\u002Fshougai\u002Fsuishin\u002Flaw_h25-65.html",[182],"障害者差別解消法（內閣府）",[10,960,961],{},[178,962,965],{"href":963,"rel":964,"target":183,"title":184},"https:\u002F\u002Fwww.amt-law.com\u002Fasset\u002Fpdf\u002Fbulletins9_pdf\u002FLELB63.pdf",[182],"2024\u002F4\u002F1 合理調整義務化（Anderson Mōri & Tomotsune）",[77,967,968],{"id":968},"印度",[10,970,971],{},[178,972,975],{"href":973,"rel":974,"target":183,"title":184},"https:\u002F\u002Fniepvd.nic.in\u002Fthe-rights-of-persons-with-disabilities-rpwd-act-2016\u002F",[182],"RPwD Act 2016",[10,977,978],{},[178,979,982],{"href":980,"rel":981,"target":183,"title":184},"https:\u002F\u002Fguidelines.india.gov.in\u002F",[182],"GIGW 3.0",[10,984,985],{},[178,986,989],{"href":987,"rel":988,"target":183,"title":184},"https:\u002F\u002Fwww.stqc.gov.in\u002Fwebsite-quality-certification-0",[182],"STQC CQW",[10,991,992],{},[178,993,996],{"href":994,"rel":995,"target":183,"title":184},"https:\u002F\u002Fwww.deque.com\u002Fblog\u002Fsebi-sets-a-new-standard-for-digital-accessibility-in-finance-in-india\u002F",[182],"SEBI 2025 數位無障礙（Deque）",[77,998,999],{"id":999},"德國",[10,1001,1002],{},[178,1003,1006],{"href":1004,"rel":1005,"target":183,"title":184},"https:\u002F\u002Fwww.gesetze-im-internet.de\u002Fbfsg\u002F",[182],"BGG \u002F BITV 2.0 \u002F BFSG",[10,1008,1009],{},[178,1010,1013],{"href":1011,"rel":1012,"target":183,"title":184},"https:\u002F\u002Fms.sachsen-anhalt.de\u002Fthemen\u002Fmenschen-mit-behinderungen\u002Faktuelles\u002Fmarktueberwachungsstelle-der-laender-fuer-die-barrierefreiheit-von-produkten-und-dienstleistungen",[182],"各邦市場監督機關（Magdeburg）",[77,1015,1016],{"id":1016},"法國",[10,1018,1019],{},[178,1020,1023],{"href":1021,"rel":1022,"target":183,"title":184},"https:\u002F\u002Fwww.legifrance.gouv.fr\u002Floda\u002Farticle_lc\u002FLEGIARTI000037388867\u002F",[182],"Loi 2005-102, art. 47",[10,1025,1026],{},[178,1027,1030],{"href":1028,"rel":1029,"target":183,"title":184},"https:\u002F\u002Faccessibilite.numerique.gouv.fr\u002F",[182],"RGAA 4.1",[10,1032,1033],{},[178,1034,1037],{"href":1035,"rel":1036,"target":183,"title":184},"https:\u002F\u002Fwww.arcom.fr\u002Fnous-connaitre\u002Fnos-missions\u002Fgarantir-le-pluralisme-et-la-cohesion-sociale\u002Fles-droits-des-personnes-handicapees\u002Faccessibilite-des-sites-et-des-services-numeriques",[182],"ARCOM 無障礙監管",[77,1039,1040],{"id":1040},"西班牙",[10,1042,1043],{},[178,1044,1047],{"href":1045,"rel":1046,"target":183,"title":184},"https:\u002F\u002Fwww.boe.es\u002Fbuscar\u002Fact.php?id=BOE-A-2018-12699",[182],"RD 1112\u002F2018",[10,1049,1050],{},[178,1051,1054],{"href":1052,"rel":1053,"target":183,"title":184},"https:\u002F\u002Fwww.boe.es\u002Fbuscar\u002Fact.php?id=BOE-A-2023-11022",[182],"RDL 11\u002F2023",[77,1056,1057],{"id":1057},"葡萄牙",[10,1059,1060],{},[178,1061,1064],{"href":1062,"rel":1063,"target":183,"title":184},"https:\u002F\u002Fwww.acessibilidade.gov.pt\u002Fmudanca\u002Fdl-n-o-83-2018\u002F",[182],"DL 83\u002F2018",[10,1066,1067],{},[178,1068,1071],{"href":1069,"rel":1070,"target":183,"title":184},"https:\u002F\u002Fwww.acessibilidade.gov.pt\u002F",[182],"DL 82\u002F2022（EAA 轉化）AMA \u002F acessibilidade.gov.pt",[77,1073,1074],{"id":1074},"奧地利",[10,1076,1077],{},[178,1078,1081],{"href":1079,"rel":1080,"target":183,"title":184},"https:\u002F\u002Fwww.ris.bka.gv.at\u002FGeltendeFassung.wxe?Abfrage=Bundesnormen&Gesetzesnummer=20010727",[182],"WZG（RIS）",[10,1083,1084],{},[178,1085,1088],{"href":1086,"rel":1087,"target":183,"title":184},"https:\u002F\u002Fffg.at\u002Fbarrierefreiheit\u002FWZG-Anwendbarkeit",[182],"FFG 監測暨申訴處",[10,1090,1091],{},[178,1092,1095],{"href":1093,"rel":1094,"target":183,"title":184},"https:\u002F\u002Fwww.digitalbarrierefrei.at\u002Fen\u002F",[182],"Digital Barrierefrei",[77,1097,1098],{"id":1098},"比利時",[10,1100,1101],{},[178,1102,1105],{"href":1103,"rel":1104,"target":183,"title":184},"https:\u002F\u002Fbosa.belgium.be\u002Ffr\u002Fregulations\u002Floi-du-19-juillet-2018-accessibilite",[182],"Loi du 19 juillet 2018（BOSA）",[10,1107,1108],{},[178,1109,1112],{"href":1110,"rel":1111,"target":183,"title":184},"https:\u002F\u002Faccessibility.belgium.be\u002Ffr\u002Fmissions-et-plaintes",[182],"Belgian Web Accessibility（監測與申訴）",[77,1114,1115],{"id":1115},"荷蘭",[10,1117,1118],{},[178,1119,1122],{"href":1120,"rel":1121,"target":183,"title":184},"https:\u002F\u002Fwww.digitoegankelijk.nl\u002Fwetgeving\u002Fbeleid-nederland-en-europa",[182],"DigiToegankelijk（政策）",[10,1124,1125],{},[178,1126,1129],{"href":1127,"rel":1128,"target":183,"title":184},"https:\u002F\u002Fwww.levelaccess.com\u002Fwp-content\u002Fuploads\u002F2025\u002F06\u002FNetherlands-Digital-Accessibility-Laws.pdf",[182],"Netherlands Digital Accessibility Laws（Level Access）",[77,1131,1132],{"id":1132},"瑞士",[10,1134,1135],{},[178,1136,1139],{"href":1137,"rel":1138,"target":183,"title":184},"https:\u002F\u002Fwww.bit.admin.ch\u002Fen\u002Faccessibility-in-the-federal-administration",[182],"BehiG \u002F 聯邦行政無障礙（bit.admin.ch）",[10,1141,1142],{},[178,1143,1146],{"href":1144,"rel":1145,"target":183,"title":184},"https:\u002F\u002Fhaerting.ch\u002Fen\u002Finsights\u002Faccessible-websites-and-apps-new-obligations-under-the-draft-of-the-new-swiss-disability-discrimination-act-behig\u002F",[182],"BehiG 修法草案（2027，Härting）",[10,1148,15],{},[10,1150,1151],{},"本文資料整理截至 2026 年 6 月，可能有誤，歡迎指正。下一篇將分析各國標章概況。",{"title":200,"searchDepth":201,"depth":201,"links":1153},[1154,1155,1156,1157,1158],{"id":474,"depth":204,"text":474},{"id":489,"depth":204,"text":490},{"id":688,"depth":204,"text":689},{"id":776,"depth":204,"text":777},{"id":816,"depth":204,"text":817},"2026-06-09","最近我正在幫我的 Accesserty Signal 擴充標章功能。原本只是單純想收集各國的標章、法規與檢測項目，但收集到一半時發現——應該要先理解各國的「政策」才行",{},"\u002Fzh\u002Fblog\u002Fa11y-world-rules",{"title":469,"description":1160},"zh\u002Fblog\u002Fa11y-world-rules",[225,223,222,1166,1167,1168,1169,1170],"數位無障礙","數位平權","包容性設計","無障礙網頁","無障礙標章","LPSgY3yMi9vFk3XDwpdv33haPud_JkVVmM2Z2_Vxf1Y",{"id":1173,"title":1174,"body":1175,"date":1282,"description":1283,"draft":212,"extension":213,"meta":1284,"navigation":215,"ogImage":216,"path":1285,"seo":1286,"stem":1287,"tags":1288,"translationKey":216,"updatedAt":216,"__hash__":1291},"blog_zh\u002Fzh\u002Fblog\u002Faccessibility-testing.md","無障礙測試不該被職業分工綁住",{"type":7,"value":1176,"toc":1280},[1177,1180,1194,1197,1200,1211,1214,1217,1220,1223,1226,1240,1243,1246,1249,1257,1274,1277],[10,1178,1179],{},"這幾年，無障礙不再是少數專家的話題，以前談到網站無障礙，是法規、稽核、檢測報告，或是某個專案最後才會被打開的 checklist，但現在不一樣了：",[37,1181,1182,1185,1188,1191],{},[40,1183,1184],{},"設計師開始在 Figma 裡檢查文字和背景的對比",[40,1186,1187],{},"前端工程師開始知道要跑 Lighthouse、axe、看 DevTools 裡的 Accessibility panel",[40,1189,1190],{},"QA 開始在測試案例裡加入鍵盤操作",[40,1192,1193],{},"產品經理也開始意識到，操作困難不只是「體驗不好」，也代表一群使用者被排除在外。",[10,1195,1196],{},"這些都是很重要的進步，大家也開始重視無障礙，所以我認為是時候要從「推廣無障礙」，變成「無障礙能隨時、隨地、容易的檢測」。",[10,1198,1199],{},"現在的工具和流程，仍然很容易讓無障礙被切成不同職能的責任，例如：",[37,1201,1202,1205,1208],{},[40,1203,1204],{},"設計師使用 Figma 負責看對比",[40,1206,1207],{},"工程師使用 Devtool 負責看程式碼",[40,1209,1210],{},"QA 負責走測試鍵盤操作",[10,1212,1213],{},"這樣的分工看似合理，但可能會造成每個職能只注重自己的範圍，將某些測試只交給該職業測試，我認為現況是不理想的，無障礙測試應該是團隊成員可以隨時、隨地、容易且跨職能地檢查，無障礙測試不應該被工具與職業綁住。",[10,1215,1216],{},"舉個小例子，PM 如果要檢查顏色對比，要不就是學會 Figma，要不就是學會 Devtool，如果遇到沒辦法測試對比的情況，還要另外自己使用線上工具輸入色碼對比前後色，要檢查的門檻還是太高。",[10,1218,1219],{},"不同職能也應該要了解其他職能測試的項目，因為最基本的工夫就是大家都要擁有「無障礙意識」，在任何階段都要遵循此原則。",[10,1221,1222],{},"但我不是要模糊專業，也不是要每個人都取代專家，完整的無障礙稽核仍然需要專業，輔助科技測試、人工判斷、規範理解、複雜互動模式，這些都不是一鍵工具可以完全處理的，但初步檢查不應該困難到只有少數人能開始。",[10,1224,1225],{},"很多問題其實不用等到正式稽核才看得見，有些問題，只要有人願意多按一下，就能提早發現：",[37,1227,1228,1231,1234,1237],{},[40,1229,1230],{},"按一下，跑一次掃描",[40,1232,1233],{},"按一下，切換一種視覺情境",[40,1235,1236],{},"按一下，看看 PDF 有沒有基本結構訊號",[40,1238,1239],{},"按一下，確認目前頁面是不是有明顯的無障礙風險。",[10,1241,1242],{},"這些動作看起來很小，但能提早發現問題的時間點。",[10,1244,1245],{},"不需要每個人都背熟 WCAG，也不需要每個人都變成無障礙顧問，而是當有人覺得「這裡可能有問題」的時候，不會因為自己不是那個職業而停下來。",[10,1247,1248],{},"他可以先看一下、測一下、確認一下，把問題變得具體，這樣就夠重要了！",[10,1250,1251,1252,1256],{},"這也是我看待 Accesserty DevCheck",[178,1253,482],{"href":1254,"rel":1255,"target":183,"title":184},"https:\u002F\u002Faccesserty.com\u002Fdevcheck\u002F",[182]," 的方式，雖然目前可以檢查的東西還很粗淺，但所有職能都可以使用 Chrome 擴充程式檢查跨職能的測試，例如：",[37,1258,1259,1262,1265,1268,1271],{},[40,1260,1261],{},"你可以做設計師要做的色盲測試",[40,1263,1264],{},"你可以做 UX 設計師要做的易用性與情境觀察",[40,1266,1267],{},"你可以做工程師會做的頁面結構與無障礙規則掃描",[40,1269,1270],{},"你可以檢查 PDF 結構",[40,1272,1273],{},"我希望未來的無障礙工具，能讓更多人跨過專業界線，不是把責任丟給所有人，而是讓所有人都有能力，在自己發現問題的那一刻，動手確認。",[10,1275,1276],{},"無障礙測試如果只能被少數人執行，它就很容易積累壓力，最後就會慢慢被消磨殆盡，但如果可以在日常中啟動，它就有機會成為一種文化，不等到使用者受阻，才開始在意的文化，這通常也代表使用者已經在某個流程裡受挫、放棄，或被排除在外。",[10,1278,1279],{},"無障礙意識正在擴散，接下來，我們需要讓檢查能力也一起擴散，而且應該足夠簡單，簡單到任何人，在任何時間點，只要動動手指，就能測試。",{"title":200,"searchDepth":201,"depth":201,"links":1281},[],"2026-05-30","這幾年，無障礙不再是少數專家的話題，以前談到網站無障礙，是法規、稽核、檢測報告，或是某個專案最後才會被打開的 checklist，但現在不一樣了",{},"\u002Fzh\u002Fblog\u002Faccessibility-testing",{"title":1174,"description":1283},"zh\u002Fblog\u002Faccessibility-testing",[223,222,225,1166,1167,1168,1289,1290],"測試","檢測","mkEBNLoxlEY_zJhji5DxSwPdgipUimu8V7s9VR9TYDk",{"id":1293,"title":1294,"body":1295,"date":1325,"description":1299,"draft":212,"extension":213,"meta":1326,"navigation":215,"ogImage":216,"path":1327,"seo":1328,"stem":1329,"tags":1330,"translationKey":216,"updatedAt":216,"__hash__":1332},"blog_zh\u002Fzh\u002Fblog\u002F2026-forbes-accessibility.md","Forbes Accessibility 200",{"type":7,"value":1296,"toc":1323},[1297,1300,1303,1306,1309,1316],[10,1298,1299],{},"前幾天才知道 Forbes Accessibility 200 這個名單。",[10,1301,1302],{},"因為有點好奇，就往下多查了一些資料，順手做了一個擴充版，加上一些比較方便瀏覽和查找的資訊。",[10,1304,1305],{},"這不是官方資料集，也不是 Forbes 授權或背書的內容。只是我自己基於研究和參考目的整理的版本，主要是想讓這份名單更容易瀏覽、檢查和學習。",[10,1307,1308],{},"整理的過程中覺得很有趣的一點是：accessibility 其實出現在非常多不同領域。軟體、教育、交通\u002F移動、娛樂、金融、運動、政策、倡議、輔助科技，還有很多我以前沒有聽過的組織。",[10,1310,1311,1312],{},"放在這裡，給同樣好奇的人參考：",[178,1313,482],{"href":1314,"rel":1315,"target":183,"title":184},"https:\u002F\u002Fneil-lin.github.io\u002F2026-forbes-accessibility-200-list\u002F",[182],[10,1317,1318,1319],{},"Markdown 版本：",[178,1320,482],{"href":1321,"rel":1322,"target":183,"title":184},"https:\u002F\u002Fgithub.com\u002FNeil-Lin\u002F2026-forbes-accessibility-200-list\u002Fblob\u002Fmain\u002Foutput\u002Fforbes_accessibility_200.md",[182],{"title":200,"searchDepth":201,"depth":201,"links":1324},[],"2026-05-28",{},"\u002Fzh\u002Fblog\u002F2026-forbes-accessibility",{"title":1294,"description":1299},"zh\u002Fblog\u002F2026-forbes-accessibility",[225,223,1168,1331,1166,222],"ForbesAccessibility","3RtMk-D7-LHaqm7C_NExBcuxjweKzqnlLCHdM3SB39M",{"id":1334,"title":1335,"body":1336,"date":1481,"description":1482,"draft":212,"extension":213,"meta":1483,"navigation":215,"ogImage":216,"path":1484,"seo":1485,"stem":1486,"tags":1487,"translationKey":216,"updatedAt":216,"__hash__":1492},"blog_zh\u002Fzh\u002Fblog\u002Fa11y-tree-for-who.md","無障礙網頁的服務對象在改變了嗎？",{"type":7,"value":1337,"toc":1475},[1338,1351,1354,1358,1365,1375,1395,1398,1402,1405,1408,1411,1419,1422,1426,1435,1438,1441,1444,1447,1450,1453,1456,1459,1462,1466,1469,1472],[10,1339,1340,1341,1345,1346,1350],{},"前不久，Anthropic 工程師 Thariq",[178,1342,482],{"href":1343,"rel":1344,"target":183,"title":184},"https:\u002F\u002Fx.com\u002Ftrq212\u002Fstatus\u002F2052809885763747935",[182]," 在「人類已不再手改程式」的前提下，提到 HTML 比 Markdown 更適合跟 AI ",[178,1347,482],{"href":1348,"rel":1349,"target":183,"title":184},"https:\u002F\u002Fwww.bnext.com.tw\u002Farticle\u002F90893\u002Fwhen-humans-stop-editing-ai-outputs-why-anthropic-engineers-are-switching-from-markdown-to-html",[182]," 互動這件事。",[10,1352,1353],{},"我就在想：如果 AI 讀取的是優質的無障礙網頁，它是不是會更容易「理解」這個網站，進而和人類互動，產出更好的結果？",[29,1355,1357],{"id":1356},"先簡單看一下無障礙網頁做得好有什麼優點","先簡單看一下，無障礙網頁做得好有什麼優點？",[10,1359,1360,1361,1364],{},"這裡先引用臺灣「無障礙網路空間服務網」",[178,1362,482],{"href":864,"rel":1363,"target":183,"title":184},[182]," 整理的幾個重點：",[1366,1367,1368],"figure",{},[10,1369,1370],{},[1371,1372],"img",{"alt":1373,"src":1374},"網站導入無障礙設計 5 大好處","\u002Fimages\u002Fblog\u002F48.webp",[722,1376,1377],{},[10,1378,1379,1380,1382,1383,1385,1386,1388,1389,1391,1392,1394],{},"導入無障礙的五大好處",[516,1381],{},"\n法規遵循：符合國內法規要求，保障身心障礙者權益，是我們的責任與義務。",[516,1384],{},"\n擴大服務對象：觸及約 120 萬身心障礙者及高齡族群，提升服務涵蓋率。",[516,1387],{},"\n組織社會責任(CSR)：展現對社會共融的承諾，提升組織形象與公眾信任。",[516,1390],{},"\n提升使用者體驗：良好的無障礙設計能讓網站更易用，提升所有使用者的滿意度。",[516,1393],{},"\nSEO 優化：結構清晰的無障礙網站對搜尋引擎更友善，有助於提升排名。",[10,1396,1397],{},"第 1 點是基本保障，第 2、3、4 點主要都是在談「對人的服務」。但第 5 點，現在應該要變成「AXO優化」。",[29,1399,1401],{"id":1400},"無障礙網頁如何讓-ai-更好跟網站互動","無障礙網頁如何讓 AI 更好跟網站互動？",[10,1403,1404],{},"AI Agent 操作網站時，最怕的其實不是畫面醜，而是它不知道：「這是什麼？」「這能不能點？」「點了之後會發生什麼事？」",[10,1406,1407],{},"以前我們幫一個 input 加上正確的 label，是為了讓螢幕閱讀器知道這個欄位是什麼。但現在，AI Agent 也可能靠這個 label 判斷：「這是不是搜尋欄？」「這個欄位要填姓名、Email，還是地址？」",[10,1409,1410],{},"很多東西，人類看一眼就知道是什麼，但 AI 不一定知道。",[10,1412,1413,1414,1418],{},"如果無障礙做得好，AI Agent 就能透過 Accessibility Tree 拿到更乾淨、更精簡，也更接近實際操作需求的資訊。LogRocket Blog",[178,1415,482],{"href":1416,"rel":1417,"target":183,"title":184},"https:\u002F\u002Fblog.logrocket.com\u002Fexploring-agent-browser-ai-agents-web\u002F",[182]," 也提到，這會讓 AI Agent 不必在一大堆 DOM 雜訊裡面硬猜。",[10,1420,1421],{},"以訂票為例，網站 A 還在讓 AI 解析一堆不清楚的元素時，網站 B 可能已經讓 AI 順利完成訂票了。對使用者來說，B 比較快；對 AI 服務商來說，B 也比較省資源。",[29,1423,1425],{"id":1424},"這會帶來什麼改變","這會帶來什麼改變？",[10,1427,1428,1429,1434],{},"No Hacks 在「",[178,1430,1433],{"href":1431,"rel":1432,"target":183,"title":184},"https:\u002F\u002Fnohacks.co\u002Fblog\u002Fhow-ai-agents-see-your-website",[182],"HOW AI AGENTS SEE YOUR WEBSITE (AND HOW TO BUILD FOR THEM)」",":一文中提到：",[10,1436,1437],{},"Last year, before the European Accessibility Act took effect, I half-joked that it would be ironic if the thing that finally got people to care about accessibility was AI agents, not the people accessibility was designed for. That's no longer a joke.",[10,1439,1440],{},"這句話其實很有意思，因為它點出了一個現象：無障礙技術已經不只是服務人類，也開始幫助所有「非視覺型使用者」理解網站。",[10,1442,1443],{},"也因為如此，最大的改變，應該是會有更多企業開始重視無障礙。",[10,1445,1446],{},"只是誘因可能會從「符合法規」變成「商業利益」。",[10,1448,1449],{},"你沒做，可能就接不到那些透過 AI Agent 來完成任務的使用者，也就少了一些原本可能成交的機會。因為比起 SEO，AI Agent 更有機會直接帶來收益。",[10,1451,1452],{},"SEO 比較像是把人帶到目的地，接下來還要靠網站內容、流程和說服力慢慢轉換，但 AI Agent 可能直接幫使用者把事情做完。",[10,1454,1455],{},"這也會帶出第二個影響：網站分析可能會產生巨大改變，當 AI Agent 的使用比例越來越高，以前我們熟悉的「點擊率」、「停留時間」、「轉換率」，可能都需要重新定義。",[10,1457,1458],{},"這種誘因的改變，理論上會形成一種良性競爭，也可能讓整體無障礙網頁環境變好。",[10,1460,1461],{},"畢竟第一步，還是要先把符合無障礙規範的網站數量拉起來。",[29,1463,1465],{"id":1464},"無障礙網頁的服務對象真的改變了嗎","無障礙網頁的服務對象真的改變了嗎？",[10,1467,1468],{},"我認為沒有改變，而是擴大範圍，就像當年 SEO 那樣。",[10,1470,1471],{},"雖然現在無障礙的討論開始被 AI 帶起一波新的聲量，但最後還是會回到人類身上，因為一個網站不只是程式碼，也不只是 accessibility tree，它還包含流程安排、內容理解、情緒感受、信任建立，以及使用者在每一步操作中的真實體驗。",[10,1473,1474],{},"所以 AI 雖然會讓更多人重新重視無障礙，但無障礙真正的核心，還是在於讓人可以更順利、更容易地使用網站。",{"title":200,"searchDepth":201,"depth":201,"links":1476},[1477,1478,1479,1480],{"id":1356,"depth":204,"text":1357},{"id":1400,"depth":204,"text":1401},{"id":1424,"depth":204,"text":1425},{"id":1464,"depth":204,"text":1465},"2026-05-13","前不久，Anthropic 工程師 Thariq 在「人類已不再手改程式」的前提下，提到 HTML 比 Markdown 更適合跟 AI 互動這件事。",{},"\u002Fzh\u002Fblog\u002Fa11y-tree-for-who",{"title":1335,"description":1482},"zh\u002Fblog\u002Fa11y-tree-for-who",[1488,1489,1169,225,223,1490,1491,1166,222,1167],"Anthropic","社會責任","AIAgent","LLM","LczuDA3MtfGVaaYPESpSEx89KJEYwK1_PC97gJorU_Y",{"id":1494,"title":1495,"body":1496,"date":1559,"description":1508,"draft":212,"extension":213,"meta":1560,"navigation":215,"ogImage":216,"path":1561,"seo":1562,"stem":1563,"tags":1564,"translationKey":216,"updatedAt":216,"__hash__":1567},"blog_zh\u002Fzh\u002Fblog\u002Fai-sugar.md","裹著 AI 糖衣的無障礙網頁服務 ?",{"type":7,"value":1497,"toc":1554},[1498,1506,1509,1513,1516,1519,1522,1530,1533,1536,1539,1542,1545,1548,1551],[1366,1499,1500],{},[10,1501,1502],{},[1371,1503],{"alt":1504,"src":1505},"AI 無障礙不是萬靈丹","\u002Fimages\u002Fblog\u002F47.png",[10,1507,1508],{},"就在幾天前，我使用的 Gemini 自動排程幫我抓的每日無障礙消息推送一則文章給我，該則文章裡說明他們的核心技術透過 AI 可以在網頁前端渲染時加上無障礙網頁技術以及提供個人化調整網頁的快捷設定。",[29,1510,1512],{"id":1511},"由興奮急轉直下成極度失望甚至憤怒","由興奮急轉直下成極度失望，甚至憤怒",[10,1514,1515],{},"起先，我看到「透過 AI 可以在網頁渲染時加上無障礙網頁技術」我非常興奮，是不是有什麼新的技術被發明應用在實務上，但仔細了解後我徹底失望了，原來 Gemini 收集的那邊文章實際上是一篇「業配廣告」。",[10,1517,1518],{},"事情是這樣的，該則文章提到已經被證實無法在無障礙網頁領域能幫上多少忙的 Widget，接著述說他們的技術比 Widget 形式的好在哪裡，但事實是，他們只是比那些 Widget 多做了在網頁渲染時加上無障礙網頁的無障礙 DOM 補充，因為他們的「提供個人化調整網頁的快捷設定」這部分基本就是跟其他服務沒兩樣的 Widget（也許提供的工具不同，但本質一樣）。",[10,1520,1521],{},"為什麼我會知道，因為我實際去該技術的官方網站平台以及他們合作的電商，我直接打開我所有機器檢測工具實際測試一遍，最後再根據我自行人工檢核，發現如下問題：",[10,1523,1524,1525,1529],{},"宣稱 AI 會根據圖片進行 image  alt 描述，但實際上只是一個簡單的場景敘述，程度大概是「一個女生穿著一件洋裝」，這其實並沒有太多幫助\n「No ARIA is better than Bad ARIA」，這個技術幾乎把能加的aria都加上去，完全不顧",[1526,1527,1528],"code",{},"\u003Cbutton>","早就有包含文字描述了\nHeadings 完全沒有照順序使用\n顏色對比度仍舊沒有達到 WCAG 2.2 AA等級(更不用說之後的 WCAG 3.0 版本的色彩標準)\nWidget 跟其他相關的產品原則上也是一樣的道理，就不多說了。\n也就是說，光是最常在網路上被看見的「常見無障礙網頁問題」都沒有修復好，最低標準的 Lighthouse 和 axe-core 也都沒通過，也不用討論到人工檢核階段。",[10,1531,1532],{},"官網的問題還好，轉去他們聲稱有專門訓練過的領域看看他們真實用戶網站的表現，結果更吐血，有時候連基本的鍵盤聚焦也完全沒有出現，在這個時刻我完全感到被詐騙，我是真正的生氣了。",[29,1534,1535],{"id":1535},"從憤怒轉向感激",[10,1537,1538],{},"至少那家廠商嘗試了新的做法，自古以來，沒有失敗哪來的後人成功。",[10,1540,1541],{},"抱持著這樣的心情，我感謝他們以具體行動落實了他們的想法，而且推出真實產品用在真實客戶上，雖然有某種程度上的效果但也隨之帶來更多問題，不過至少他們跨出新的一步，也許將來會越來越好。",[10,1543,1544],{},"畢竟，人類是很想偷懶而且要做到產出更多，所以創造了各種偉大發明。",[29,1546,1547],{"id":1547},"總結",[10,1549,1550],{},"AI 不是萬能，沒有訓練好的 AI 更是萬萬不能，在這個糖衣一下，我仍然建議先做過完整測試在推出產品，或還是使用在開發程式的部分，也就是一切網頁的源頭，甚至最好是在設計階段就已經規劃好大致上的規範。",[10,1552,1553],{},"我曾經實驗過在網站上一樣掛個 Widget 但是內容不是一堆設定按鈕，而是一個 AI 對話視窗 ，透過對話就可以改變網頁的各種呈現，這個實驗也成功過，但終歸耗費成本還是巨大，而且使用者變成會聚焦在對話視窗上，延伸出更多問題。",{"title":200,"searchDepth":201,"depth":201,"links":1555},[1556,1557,1558],{"id":1511,"depth":204,"text":1512},{"id":1535,"depth":204,"text":1535},{"id":1547,"depth":204,"text":1547},"2026-05-08",{},"\u002Fzh\u002Fblog\u002Fai-sugar",{"title":1495,"description":1508},"zh\u002Fblog\u002Fai-sugar",[222,1565,1166,1167,223,225,1566],"AI 工具","Widget","-KWdzrXS_HV6zh0ObN_ifufpx_FWF_j-HAw3qYtmdi8",{"id":1569,"title":1570,"body":1571,"date":1606,"description":1607,"draft":212,"extension":213,"meta":1608,"navigation":215,"ogImage":216,"path":1609,"seo":1610,"stem":1611,"tags":1612,"translationKey":216,"updatedAt":216,"__hash__":1613},"blog_zh\u002Fzh\u002Fblog\u002F2026-04-a11y-opinion.md","2026 年 4 月 關於無障礙網頁發展的心得",{"type":7,"value":1572,"toc":1604},[1573,1576,1585,1588,1596,1601],[10,1574,1575],{},"看著目前程式工具在 AI 方面的發展、數位無障礙的各種方向、各種職缺也有所增長、各種無障礙網頁規範 Agent Skills 和 AI 檢測也開始蓬勃發展，我雖然有從中受益，但我感受到更大的迷惘：AI 要到什麼程度才能有巨大的能力幫助數位無障礙的普遍落實，或者應該問：我要怎麼讓 AI 能做到這件事。",[10,1577,1578,1579,1584],{},"我曾經打造的： ",[178,1580,1583],{"href":1581,"rel":1582,"target":183,"title":184},"https:\u002F\u002Faccesserty.com",[182],"Accesserty","，這是一個 side project ，生態系構想是企圖從使用者接觸網頁開始直達企業製作、檢查、統計端，中間各種過程都能讓企業從中獲利，進而讓他們能全面擁抱無障礙。不過中間的各種流程目前還是要耗費較多成本，持續性維護更是一種挑戰， AI 目前仍尚未能容易的解決這所有的過程，尤其是在人工檢測的部分幫助更是有限，我感到有一點沮喪，可能我的構想流程是基於現在普遍開發流程上思考的解法，屬於「降成本」的思考方式，可能要來想個破壞式創新方法才能解開「AI很好，但幫助有限」的困局。",[10,1586,1587],{},"另外還有一個現象，我所在的環境近年雖然設計師和社群網紅開始有意識到數位無障礙並且有在推廣，但普遍還停留在解決常見問題，對於整體無障礙知識認識還不夠深，所以大環境還是在「能用工具通過規範就好」階段，並沒有任何巨大變化。這意味著企業還是在「得過且過」的階段，因為還沒辦法在落實無障礙的過程中帶來明顯利益，現在較多都是「被罰錢的恐懼」或是為了 ESG 驅動去做。",[10,1589,1590,1595],{},[178,1591,1594],{"href":1592,"rel":1593,"target":183,"title":184},"https:\u002F\u002Fwww.a11yjobs.com\u002F",[182],"a11yjobs"," 這篇文章 中有一段話能跟我的想法不謀而合：",[722,1597,1598],{},[10,1599,1600],{},"\"Much of the hiring activity is concentrated in a narrow band of roles, driven by compliance pressures rather than genuine organizational buy-in. Companies are hiring because they have to — not always because they want to build lasting accessibility practices.\"",[10,1602,1603],{},"一樣都是做無障礙，但出發點不同會有什麼樣不同的結果，這將會成為我下一個階段研究的方向。",{"title":200,"searchDepth":201,"depth":201,"links":1605},[],"2026-04-30","看著目前程式工具在 AI 方面的發展、數位無障礙的各種方向、各種職缺也有所增長、各種無障礙網頁規範 Agent Skills 和 AI 檢測也開始蓬勃發展，我雖然有從中受益，但我感受到更大的迷惘",{},"\u002Fzh\u002Fblog\u002F2026-04-a11y-opinion",{"title":1570,"description":1607},"zh\u002Fblog\u002F2026-04-a11y-opinion",[1169,1166,222,1167,223,225,1594],"TCqrlHRF40nKugrMK44HCU77uz5pcGf0gcancIzS-18",{"id":1615,"title":1616,"body":1617,"date":2501,"description":2502,"draft":212,"extension":213,"meta":2503,"navigation":215,"ogImage":216,"path":2504,"seo":2505,"stem":2506,"tags":2507,"translationKey":216,"updatedAt":216,"__hash__":2525},"blog_zh\u002Fzh\u002Fblog\u002Fvibe-coding-product.md","用普通 Prompt 來 Vibe 一個解決自己工作痛點的產品",{"type":7,"value":1618,"toc":2495},[1619,1624,1627,1630,1641,1644,1676,1679,1705,1708,1711,1714,1717,1720,1743,1746,1750,1753,1756,1759,1762,1765,1768,1782,1785,1788,1791,1794,1797,1801,1809,1812,1815,1826,1829,1832,1836,1839,1842,1845,1848,1851,1854,1857,1860,1863,1866,1869,1872,1875,1909,1912,1915,1919,1922,1925,1928,1931,1942,1945,1953,1961,1964,1967,1970,1973,1977,2008,2011,2015,2018,2021,2025,2028,2069,2072,2076,2079,2082,2086,2103,2106,2109,2112,2129,2132,2135,2139,2142,2145,2159,2163,2166,2169,2172,2214,2217,2220,2223,2226,2229,2233,2236,2239,2265,2268,2288,2291,2294,2297,2300,2303,2306,2311,2314,2325,2328,2342,2345,2356,2359,2362,2365,2368,2372,2375,2377,2381,2384,2387,2391,2394,2397,2400,2404,2407,2410,2413,2416,2419,2433,2436,2439,2442,2445,2448,2451,2454,2456,2458,2460,2462,2464,2466,2468,2470,2472,2474,2476,2479,2482,2485,2488],[722,1620,1621],{},[10,1622,1623],{},"話說在前頭，在撰寫文章時，我已經 Vibe 產品到一個進度了，所以遇到的問題和順序有些已經遺忘，只能盡量回憶。",[29,1625,1626],{"id":1626},"起源",[10,1628,1629],{},"今年我為團隊的某位成員定下了一個目標，主要是解決目前公司遇到的規格書協作問題，大致情境如下：",[37,1631,1632,1635,1638],{},[40,1633,1634],{},"公司主要業務是接政府專案，一開始沒有 SA，都是 PM 自己寫規格",[40,1636,1637],{},"後經招募 SA 後，但因為沒有招募很多人，所以變成較爲重要或需要特別深入學習領域知識的專案才會請 SA 撰寫 Spec",[40,1639,1640],{},"所以 PM 跟 SA 都必須寫 Spec",[10,1642,1643],{},"結果導致以下問題：",[37,1645,1646,1649,1652,1655,1658,1661,1664,1667,1670,1673],{},[40,1647,1648],{},"專案 PM 和 SA 都要寫 Spec，使用的工具、寫法都不一樣。",[40,1650,1651],{},"政府專案因為最後會需要繳交系統規格書，會需要輸出 Word 檔，所以如果不是直接使用 Word 編輯，最後整合時還需要複製貼上到 Word。",[40,1653,1654],{},"執行團隊會有很多文件需要一起看，例如政府的初始需求規格書、公司服務建議書、評選簡報、會議記錄、API文件、UI 設計稿、公司工程師的技術文件...等，",[40,1656,1657],{},"導致觀看文件時會需要在不同瀏覽器頁籤或是軟體之間一直切換。",[40,1659,1660],{},"因為文件很多，存放的地方可能也不一樣，例如有些存 Nas、有些存雲端服務。",[40,1662,1663],{},"SA 之間遇到較大型專案會分工，所以有多人協作需求，如果是用Word 那就會需要在意版控問題",[40,1665,1666],{},"當 Spec 異動時，PM 或 SA 為了工程師不要遺漏最新更新，使用的工具可能還需要特別標明修改時間以及保留修改前的描述，造成版面極度混亂。",[40,1668,1669],{},"文件之間有關聯的地方，使用的工具無法很好的建立雙邊的關聯，即使建立了，如果文件內容異動，也可能消失或是忘了去維護，造成文件在後續擴展的開發案時無法高效利用已存在的 Spec。",[40,1671,1672],{},"另外有時候還需要給外部人士觀看，如果是檔案，還要很小心的給對方正確的版本。",[40,1674,1675],{},"有時候網路環境問題，就沒辦法工作了",[10,1677,1678],{},"濃縮一下真正需求：",[37,1680,1681,1684,1687,1690,1693,1696,1699,1702],{},[40,1682,1683],{},"文件希望像 Notion 那種編輯器",[40,1685,1686],{},"工具與寫法統一",[40,1688,1689],{},"文件存放位置統一",[40,1691,1692],{},"觀看文件時可同時看到其他關聯的文件或檔案",[40,1694,1695],{},"可多人協作、可看到對方在編輯什麼",[40,1697,1698],{},"歷史異動",[40,1700,1701],{},"可分享給外部的人看文件",[40,1703,1704],{},"離線也要可以編輯",[10,1706,1707],{},"在我期待著成員會如何解決這個問題的同時，一直有一個點子縈繞在我心頭：",[10,1709,1710],{},"今年 LLM 比 2025 的可靠許多，如果「一個只懂 Html\u002FCSS人」建立了這樣的產品，需要 Vibe 多久？ Vibe時會遇到什麼問題？ Vibe時會需要懂什麼知識？",[10,1712,1713],{},"我一向是有想法就開始規劃與實作了（雖然到最後都是自 High 居多的產品），但我很享受這個過程，可以獲得很多知識與成就感。",[10,1715,1716],{},"我非常想知道在我不碰程式的情況下，我能為這個產品做的極限在哪裡。",[10,1718,1719],{},"除了上述需求外，我也很想要一些自己的需求、新功能和順手實驗：",[37,1721,1722,1725,1728,1731,1734,1737,1740],{},[40,1723,1724],{},"SA 初始範本建立",[40,1726,1727],{},"多國語言",[40,1729,1730],{},"SEO",[40,1732,1733],{},"WCAG 2.2 AA級",[40,1735,1736],{},"Word、PDF、Markdown 以及 Office 系列匯出",[40,1738,1739],{},"嘗試內建 AI 助手，讓有 API Key 的人可以使用",[40,1741,1742],{},"Spec 完成後，可以順便產出 QA 測試案例",[10,1744,1745],{},"還沒開始我就已經非常期待這個產品完成的那天！",[29,1747,1749],{"id":1748},"定位llm使用方式規則與產品定位","定位、LLM使用方式規則與產品定位",[77,1751,1752],{"id":1752},"關於我",[10,1754,1755],{},"我是一個舊時代的「前端設計師」，我入行網頁設計領域是 2013，大概是 iPhone5 發布的時候，那時有個很熱門的討論，就是「設計師應不應該學寫程式」。",[10,1757,1758],{},"我當初的立場是需要學，因為不僅能了解程式真正運作的過程，還能跟工程師溝通無礙、自行掌握 UI，甚至未來還有轉職前端工程師的選項，所以我專精於 CSS，然後 javascript 的部分只學到會使用前端框架切版、版控 flow 概念、會安裝第三方套件、弄個假資料就差不多了。",[10,1760,1761],{},"但在這次的 side project，我給自己的背景與規則是：「有基本網頁知識背景，不要介入程式碼的撰寫」，能動的只有兩個：文案和 User Prompt，也就是不用 Skills、MCP之類的設定，嘗試看看單純這樣能做到什麼程度。",[10,1763,1764],{},"會有這個定位是因為，以前我很想做的一些事情，要完成都需要麻煩到前端工程師和後端工程師，所以很多 side project 都只有做到切版程度就沒再繼續下去，覺得很可惜，或是應該說，覺得無能為力、失落。",[10,1766,1767],{},"再來講講工具，因為我也很好奇 LLM 實際上寫的程式碼會是怎麼樣子，以及他的運作過程，所以：",[37,1769,1770,1773,1776,1779],{},[40,1771,1772],{},"Nuxt 當作前端框架，看看 LLM 在不指定細節下，會怎麼配置。",[40,1774,1775],{},"使用 Antigravity ，來下需求相關的 User Prompt ，觀察思考過程。",[40,1777,1778],{},"跟程式碼和產品無關的提問，我會回歸到網頁版的 LLM 詢問，例如什麼是 supabase 這種問題。",[40,1780,1781],{},"購買 Google AI Pro ，網頁版 Gemini 跟 Antigravity 都可以使用這樣比較方便\n（但因為4月實作時遭遇了Gemini連線問題讓我非常不爽，後期改用 Claude 使用）",[77,1783,1784],{"id":1784},"產品定位",[10,1786,1787],{},"在「起源」篇章，我的需求都集中在撰寫規格書這件事，但其實可以再更廣大的延伸成文件類都可以。因為開發時，要撰寫的文件也是很多：測試計劃、測試案例、規格、API、會議記錄...等。",[10,1789,1790],{},"就從「文件」本身出發，探討「寫文件」、「看文件」和「管理文件」時都會發生什麼活動，最後目的是讓文件是一種「活著」的狀態，而不是專案結束就被遺棄、過往的規格書被雪藏，其中管理文件就只是有做出分類就好，不把重心放在這，而是著重在「寫」和「看」的場景，也可以說是為了「小型軟體開發團隊」做的產品，這樣就有很清晰的使用者受眾。",[10,1792,1793],{},"(不求能真的做出有小型軟體開發團隊願意付錢解決問題的產品，但至少能解決我自己遇到的問題。)",[29,1795,1796],{"id":1796},"實作開始",[77,1798,1800],{"id":1799},"最小需求編輯文件","最小需求：編輯文件",[10,1802,1803,1804,1808],{},"既然是看\u002F寫文件，編輯器就是最重要的，一開始就是先讓 LLM 決定要用什麼編輯器，當時 LLM 直接建議我使用 Tiptap",[178,1805,482],{"href":1806,"rel":1807,"target":183,"title":184},"https:\u002F\u002Ftiptap.dev\u002F",[182],"，因為我之前也有關注過 Tiptap，所以馬上就決定了，",[10,1810,1811],{},"於是我就讓 LLM 幫我建立一個文件編輯器，此時 LLM 建議我，需要有一個文件列表做為文件管理，當然是秒答應，因為我心思都放在文件編輯，完全忘了需要有文件列表，就放手讓 LLM 依照他的建議做，我心想反正就是個列表，我之後再回來改也無傷大雅。",[10,1813,1814],{},"最後這階段產出了：",[37,1816,1817,1820,1823],{},[40,1818,1819],{},"後台排版外觀與主選單",[40,1821,1822],{},"文件管理列表CRUD與儀表板統計頁面",[40,1824,1825],{},"文件標題、編輯區域、大綱區域、工具列區域出現",[10,1827,1828],{},"在這個最小需求的時候，我發現了使用 Antigravity 的非基本的 Model，token 都一下子就到達極限了，然後切回額度最多的 flash ，又跟之前的聊天記錄連接不到，所以我從這個最小需求之後，都只有使用gemini flash，因為其他 model 都一下子就結束了，這會導致程式寫到一半死掉，還要用 flash 接回來非常麻煩。",[10,1830,1831],{},"但這也導致我的程式碼，我一直覺得不滿意，就感覺充其量是拼拼湊湊那種感覺，\n但既然我選擇不干預程式碼只使用一般 PM 會使用 LLM 的模式，那就眼不見為淨了，幸好這個階段大部分是在規劃 UI，功能面就很單純套個 Tiptap 進去而已。",[77,1833,1835],{"id":1834},"第二需求分割視窗與雙向連結","第二需求：分割視窗與雙向連結",[10,1837,1838],{},"分割視窗算是我的需求中最重要的，因為包含了兩個核心功能：預覽外部文件以及預覽雙向錨點連結。",[10,1840,1841],{},"這兩個重點著重在解決以前「spec 在 google doc、API 文件在 google sheet、spec 提到的某個功能不知道在 API 文件的哪裡，還要開 word 檔看外部的需求規格書，還要去 Figma 看設計稿，還要開簡報看評選簡報」的情境",[10,1843,1844],{},"外部文件需要支援無限制的新增，其中新增的項目又分：\n上傳檔案和外部連結，常用檔案格式為 .doc、.md、.pdf、.pptx..等。",[10,1846,1847],{},"外部連結就又分為雲端分享的連結以及相關網站（相關網站只能另開視窗，因為 iframe 因為安全性基本不能跨網域）",[10,1849,1850],{},"雙向錨點連結的使用情境，是編寫 A 文件時，想要把某一個段落或甚至一句話，跟有關的 B, C 文件內的某個段落做相互跳轉的錨點，只要雙向有一方刪除錨點或是異動，這個錨點就會被刪除或是自動移動，以往在 google sheet 要做這件事只能認儲存格的id或是用外掛，而且格子內容異動後，還不能自動更新。",[10,1852,1853],{},"所以就形成了：左邊編輯器為主體，右邊各種外部資源或內部互連的列表，雖然也是像瀏覽器頁籤一樣，但在觀看文件時變成一種沒有中斷的感覺，撰寫文件者也可以隨時觀看資源，相當的方便",[10,1855,1856],{},"在執行這兩個核心功能時，不能一股腦把我所有想像的東西直接塞給 LLM，我的執行方式是先把分割視窗的按鈕和 UI 刻出來，先確定 UI 的大框架，再來就是先做雙向錨點連結，叫 LLM 在工具列中新增一個按鈕，點擊後開啟 Dialog ，可以選擇其他文件，選擇後再選擇文件的哪一行，最後在這兩個文件選擇的那一行最後加上一個標籤，標籤的名字是該行的簡短內容，並且用顏色區分哪個文件主動連結、哪個是被動連結的，這樣在分割視窗預覽時，我就可以顯示列表，以及被連結方的那一行實際內容的預覽，且之後可以擴充成視覺化，勾勒出文件之間的關係。",[10,1858,1859],{},"接著就是做外部連結，這裡很單純 CRUD 連結或檔案而已，但因為考量到之後可能會做單檔的分享開關，就也順便把 UI 給保留位置。",[10,1861,1862],{},"以上這些我當時是列點出來一步一步慢慢說給 LLM 聽，這邊很順利的沒有調整什麼就完全實現了。",[10,1864,1865],{},"順利上傳了，那就是要預覽，外部連結基本都是 iframe，內部連結要呈現當然也沒問題，有問題的是上傳檔案，因為要額外處理，pdf 還好沒遇到太多阻礙，.md 要加個原文和渲染後的樣子，但 office 系列 就難處理要用套件或是 LLM自己寫，跟 LLM 來回了好多次，然後因為還要處理另開視窗放大全螢幕預覽，所以還要多做單獨預覽的一個頁面，供之後類似的情境發生可以使用。",[10,1867,1868],{},"不過有一件事值得一題，我在這裡碰到了奇怪的問題，",[10,1870,1871],{},"就是當我要另開視窗看檔案時，我有用個預覽的模式，結果有一次改完發現檔案都不會正常顯示內容了，內容都變成回首頁，",[10,1873,1874],{},"最後 LLM 修正原因記錄如下：",[37,1876,1877,1883,1894,1897,1900,1903,1906],{},[40,1878,1879,1880,1882],{},"為什麼網址會被「魔改成」首頁？",[516,1881],{},"\n首先，聽到「分割視窗正常顯示了」，這代表我們剛剛修復的 API 和權限機制完全成功了，Cloudflare Functions 也有順利執行！",[40,1884,1885,1886,1889,1890,1893],{},"那為什麼唯獨打開 preview 頁面時，明明輸入的是 ",[1526,1887,1888],{},"https:\u002F\u002Fdahtahdoc.com\u002Fpreview?url=...","，網址列卻會被「拔掉 preview」，物理上強制替換成了 ",[1526,1891,1892],{},"https:\u002F\u002Fdahtahdoc.com\u002F?url=..."," 呢？ 這是因為發生了以下連鎖反應：",[40,1895,1896],{},"伺服器當機 (SSR Crash)：我們剛剛在 preview.vue 裡面使用了 import VueOfficePptx from '@vue-office\u002Fpptx'。這套件天生是設計給瀏覽器用的（裡面用到了 window 物件）。當 Cloudflare 的伺服器嘗試渲染 (SSR) \u002Fpreview 這個頁面時，因為伺服器沒有 window，直接引發了 Fatal Error (伺服器當機)。",[40,1898,1899],{},"Cloudflare 救援機制：Cloudflare 伺服器發現 \u002Fpreview 當機了，於是它啟動了 SPA 網站的標準救援機制——直接回傳網站的 index.html (首頁) 給您。",[40,1901,1902],{},"Nuxt 幫倒忙的強制矯正：當您的瀏覽器拿到首頁的程式碼並準備啟動 Vue 時。Vue Router 說：「咦？伺服器吐給我的畫面明明是首頁，但是你現在瀏覽器上方的網址怎麼寫著 \u002Fpreview？這肯定不對！讓我幫你『修正』網址列！」",[40,1904,1905],{},"於是，Vue Router 就雞婆地把您瀏覽器上的 \u002Fpreview 砍掉，變回了 \u002F (首頁)，但完整保留了後面的問號參數 (?url=...)。",[40,1907,1908],{},"這就是為什麼路徑會完美地「被引導回去首頁，但參數全都在」的詭異真相！",[10,1910,1911],{},"另一個話題，有上傳下載，當然也要有匯出目前編輯區的文件了，所以想到就開始實作，同樣也是先選擇 .pdf, .doc 和 .md，.doc 最麻煩，因為格式和樣式會跑掉，又跟 LLM 來回了好多次，這樣子主體編輯區大概就完成了，不算困難，但也不算輕鬆，如果在都有額度可用的情況下，也是一兩天的事，不禁感嘆出張嘴請 LLM 寫 Code 真是太快了。",[10,1913,1914],{},"總之呢，我就是能列點就列點，出現畫面錯誤就截圖或複製給 LLM 解，每次一點點工作才不會修的難過。",[77,1916,1918],{"id":1917},"第三需求登入與分享","第三需求：登入與分享",[10,1920,1921],{},"接下來就是完全用 google 學 google，因為要做分享，就要做權限，做權限就要有登入，有登入就必須要有登入頁。",[10,1923,1924],{},"然後就發現忘記做真正的資料庫了，也是請 LLM 幫我搜尋免費可用的且有幫忙做 Google 登入的，LLM 幫我找到了 supabase，照著指示一步一步做，不一樣的地方就截圖問，然後回到 Antigravity 說説要做上面那些事資料庫要用supabase ，分享的內容基本就學 google 文件系列，就不多提。",[10,1926,1927],{},"到這邊開始， LLM 基本就會忘東西了，所以我需要不斷幫 LLM 的知識做溫習，這算是第一個崩潰的點，很難受。",[10,1929,1930],{},"我要跟 LLM 解釋權限與文件檔案是否開啟，還要手動測試各種情況的權限以下情況：",[37,1932,1933,1936,1939],{},[40,1934,1935],{},"邀請 email ，然後區分可檢視還是可以編輯，以及公開連結可預覽",[40,1937,1938],{},"外部資源的各個檔案分享 switch 開關，",[40,1940,1941],{},"另開視窗單獨 preview 的頁面",[10,1943,1944],{},"截取LLM的最後整理結果：",[1366,1946,1947],{},[10,1948,1949],{},[1371,1950],{"alt":1951,"src":1952},"權限與身份排列組合","\u002Fimages\u002Fblog\u002F45.png",[1366,1954,1955],{},[10,1956,1957],{},[1371,1958],{"alt":1959,"src":1960},"權限與身份排列組合：未受邀請的同事","\u002Fimages\u002Fblog\u002F46.png",[10,1962,1963],{},"過程中還碰到了 Cache 問題，總之這裡真的花了超級多 token 和時間，有時候崩潰後檔案太亂了只好又重頭來。所以使用 LLM 一定要特別特別注意版控。",[10,1965,1966],{},"提到版控，說真的，我還真不知道如果不知道怎麼用 git 的話，要怎麼版控會比較好。每次修正前自己手動備份一整包檔案嗎？這樣上下文又會斷掉。然後如果不會 npm 的話又要浪費很多時間詢問跟怎麼做，聽起來就好累。",[10,1968,1969],{},"到這邊我大概可以斷定「只改文案和下 Prompt」這種開發方式真的只適合懂寫程式的人使用，因為很容易忽略版控、固定 LLM 前置知識、開發環境等因素，而且下的 Prompt 會很不精準且有時候根本不知道怎麼提問覺得 LLM 一直在鬼打牆。也就是說，2026上半年還不是人人都可以容易的做出一個商用等級的產品，小打小鬧的方便工具倒是可以。",[10,1971,1972],{},"但是我還是想堅持這樣的方式繼續，除非遇到無法逾越的問題再介入。",[77,1974,1976],{"id":1975},"take-a-break稍微整理一下到目前-vibe-開發體驗心得","Take a Break：稍微整理一下到目前 Vibe 開發體驗心得",[37,1978,1979,1982,1985,1996,1999,2002,2005],{},[40,1980,1981],{},"能列點就列點，一個一個小步驟慢慢列，最好有相關性的列在一起",[40,1983,1984],{},"重要的事情必須要強調出來，例如：不要ＸＸＸ",[40,1986,1987,1988],{},"請 LLM 先規劃不要實作\n",[37,1989,1990,1993],{},[40,1991,1992],{},"先規劃 UI 位置、風格",[40,1994,1995],{},"再次確認需求規劃有沒有遺漏或沒思考到的事",[40,1997,1998],{},"進行實作前先備份或做版控",[40,2000,2001],{},"實作後要修改的地方務必非常明確，例如主選單內，Group選單的文字標題，顏色改成ＸＸＸ，並且附上錯誤資訊或截圖",[40,2003,2004],{},"實作後要自己要當 QA",[40,2006,2007],{},"上線到正式環境後再玩一次",[10,2009,2010],{},"對了，講那麼多好像沒講到上線的事，我是用 Gitlab + Cloudflare，只要透過 LLM 教學基本上都可以架起來，所以就不多著墨這邊的事。",[77,2012,2014],{"id":2013},"第四需求簡易文件管理與垃圾桶機制","第四需求：簡易文件管理與垃圾桶機制",[10,2016,2017],{},"有了登入頁→執行登入→進到文件列表頁",[10,2019,2020],{},"Hmm…總覺得有點怪怪的，才發現我忘了做資料夾分類和垃圾桶，這邊 LLM 異常的順利，可能是太常見的任務，迅速就將我的需求和我沒想到的需求都一併做好，例如垃圾桶留 30 天刪除、還原、垃圾桶文件數量...諸如此類。反正這邊我也沒有想要做太複雜，跟市面上一樣就好，垃圾桶嘛...還能做什麼？",[77,2022,2024],{"id":2023},"第五需求臨時天外飛來一筆試試看的功能","第五需求：臨時天外飛來一筆試試看的功能",[10,2026,2027],{},"既然都已經用 LLM 開發，那就來設計一下文件內的 LLM 輔助功能吧，規劃如下：",[37,2029,2030,2033,2036,2039,2042,2045,2048,2051,2054,2057,2060,2063,2066],{},[40,2031,2032],{},"在文件編輯器區塊中央下方，浮動一個區塊，裡面是輸入框和按鈕",[40,2034,2035],{},"功能是要做一個文件編輯 AI 助手，僅可以輸入文字",[40,2037,2038],{},"需要顯示目前使用的是什麼模型",[40,2040,2041],{},"建立一個設定頁面，在頁面中有 LLM 不同廠商，使用頁籤方式分隔，並且在頁籤中標示「使用中」跟「未設定」",[40,2043,2044],{},"有一個可以讓使用者輸入 LLM API 的輸入框，使用密碼輸入模式，避免有外洩風險",[40,2046,2047],{},"每個廠商都要有三個模型和一個自定義模型名稱的下拉式選單，選擇自定義模型後出現另一個輸入框，可以自行輸入模型文字",[40,2049,2050],{},"附上取得廠商 API 的教學",[40,2052,2053],{},"提供 system prompt 輸入框，並且要有預設的 system prompt 內容，預設內容角色為系統分析師，可以根據使用者 prompt，產出結構嚴謹、技術精確的規格內容",[40,2055,2056],{},"ai 助手需要讀取當下文件的內容、使用者 prompt 以及 system propmt，並且在原本滑鼠焦點地方，加上 LLM 產出後的結果",[40,2058,2059],{},"如果沒有填 API ，ai小助手要有警告，並且是不能用的狀態",[40,2061,2062],{},"小助手要可以收合\u002F展開",[40,2064,2065],{},"請幫小助手產生使用 LLM 的警語",[40,2067,2068],{},"...",[10,2070,2071],{},"大概類似這樣吧，總之其實做一個小小功能，prompt 就要下超級多，這些只是需求而已，還沒有加上其他注意事項（例如順便建立的系統設定頁面），其實說實在也是蠻累的。",[77,2073,2075],{"id":2074},"第六需求加入規格書範本","第六需求：加入規格書範本",[10,2077,2078],{},"這裡主要是增加一些不同類型的範本，但因為網路上已經很多，所以我先加一點基本的，至少方便什麼都不知道的人能開始，之後我再想想範本還可以做些什麼，",[10,2080,2081],{},"畢竟在這個 LLM 的時代，範本什麼的都只是變成給 LLM 的「規範」遵守，而不是真的拿來用的了。",[77,2083,2085],{"id":2084},"第七需求歷史異動與發佈版本","第七需求：歷史異動與發佈版本",[37,2087,2088,2091,2094,2097,2100],{},[40,2089,2090],{},"在大綱的下方分割出一個「歷史異動」區塊，內容為發佈版本的歷史紀錄，有標題和描述",[40,2092,2093],{},"歷史異動項目在新建文件時，自動初始化第一個版本",[40,2095,2096],{},"在文件編輯器工具列新增一個「發佈版本」按鈕",[40,2098,2099],{},"點擊後開啟對話視窗，可填寫標題和描述，點擊確定關閉對話視窗，新增一筆歷史異動，點擊取消關閉對話視窗不動作",[40,2101,2102],{},"點擊歷史異動任一項目，自動與點擊版本的前一版做差異對比，新異動的內容加入背景 highlight，舊內容則透明化",[10,2104,2105],{},"目前都是使用免費的東東，至少可以讓觀看文件者知道兩個版本修改了哪裡，之後真的需要的話，再製作回復到特定版本內容",[10,2107,2108],{},"覺得應該要先解個 Bug 、擴充編輯器功能、重構了\n經過以上需求，程式已經變得蠻龐大的了，就需要先解一些 bug、擴充小功能和重構，不然之後的大範圍改動，可能會造成災難。",[10,2110,2111],{},"一開始建立 Tiptap 編輯器時，因為我忘了指定要什麼工具，以下是我的 prompt：",[37,2113,2114,2117,2120,2123,2126],{},[40,2115,2116],{},"我發現tiptap文件編輯器的工具列沒有連結、文字大小、文字顏色、文字背景以及文字字型。",[40,2118,2119],{},"文件現在內文加上連結時，沒有連結顏色和底線，在螢幕上難以察覺，但是匯出時，不要有連結顏色，但是底線保留",[40,2121,2122],{},"文字字型需要先在此專案加入字型檔嗎？伺服器會不會負擔太重？",[40,2124,2125],{},"圖片上傳後，我需要有地方輸入圖片描述和長描述figcaption，目前是開啟系統資料夾就上傳了，請幫我想個方式輸入這兩個資訊",[40,2127,2128],{},"我還有遺漏什麼常用的工具嗎？",[10,2130,2131],{},"請先幫我思考以上列點，並且做加入這些新功能的規劃\n所以 LLM 偷懶只給我幾個常用工具，所以這次把常用但沒加到的都補上，也因為這樣，所以匯出的功能都要重新檢查，然後也發現 LLM 偷懶的很嚴重的一些地方，例如 Dialog 每次都是寫新的，而不是建立一個共用元件來用。",[10,2133,2134],{},"這些就是肉眼可見的不一樣，不需要看程式碼就能明顯察覺，所以又花了一些時間做了這些東西，讓網站的整體一致認性更好，順便多一些小功能：刪除 account、協作時要看到在同一份文件的人、他們的權限以及他們正在哪一行編輯。",[77,2136,2138],{"id":2137},"第九需求登入前的介紹產品頁面","第九需求：登入前的介紹產品頁面",[10,2140,2141],{},"剛剛都是 LLM 在偷懶，這是換我偷懶了，登入前的頁面基本都是請 LLM 先理解我的專案，然後我給出我想要的插畫、網站風格以及各區塊要介紹什麼，先做出首頁。",[10,2143,2144],{},"接著補上各種雜項：",[37,2146,2147,2150,2153,2156],{},[40,2148,2149],{},"補上各種分析的工具：GA、GSC、GTM、Microsoft Clarity、Bing Webmaster Tool。",[40,2151,2152],{},"補上分析工具用到的 \u002Fprivacy、\u002Fterms 注意事項",[40,2154,2155],{},"補上各種 SEO 相關東西：Schema.org、Social Share、Sitemap.xml、Og Image Dynamic、\u002Ffaq 常見問答",[40,2157,2158],{},"最後當然不能忘記無障礙：\u002Fsitemap、定位點、Skip to Content、顏色對比、Landmark、Image ALT、HTML Structure...等",[77,2160,2162],{"id":2161},"第十需求多國語系","第十需求：多國語系",[10,2164,2165],{},"大崩潰！這邊應該卡了 3 天 0 進展，並且耗費完 Google AI Pro 的 Antigravity 額度和 Claude Code 額度，",[10,2167,2168],{},"以下是我最後一次從零進行的 Prompt：",[10,2170,2171],{},"我需要建立多國語言環境，很複雜，請仔細分析以下需求並先做出規劃：",[2173,2174,2175,2178,2181,2184,2187,2190,2193,2196,2199,2202,2205,2208,2211],"ol",{},[40,2176,2177],{},"此專案有分為登入前和登入後",[40,2179,2180],{},"請使用 @nuxtjs\u002Fi18n",[40,2182,2183],{},"使用者第一次到達網站時，使用使用者瀏覽器的語言呈現",[40,2185,2186],{},"使用者切換語言時，登入前和登入後都一起切換",[40,2188,2189],{},"使用者切換語言後，離開網站再回到網站，語言要保持上次離開的語言",[40,2191,2192],{},"登入前的切換放在header，登入後的切換放在系統設定頁面裡",[40,2194,2195],{},"登入前和登入後的切換器，都是使用 dropdown形式",[40,2197,2198],{},"請依照現在的繁體中文，翻譯成英文，並製作兩者的語言檔案，登入前和登入後的要分開儲存，以便維護",[40,2200,2201],{},"文字過多的靜態頁面，使用新的.vue檔案進行多國語系，不要放在語言檔案裡，以便維護",[40,2203,2204],{},"請將網站內部連結，換成@nuxtjs\u002Fi18n 的 localePath() 方式",[40,2206,2207],{},"未來可能有更多語言，請保持擴充彈性，以便維護",[40,2209,2210],{},"路由策略 預設繁體中文不帶前綴 (如 \u002Flogin)，英文則帶前綴 (如 \u002Fen\u002Flogin)",[40,2212,2213],{},"靜態頁面 (.vue 檔案) 的實作方式採用方案A組件替換",[10,2215,2216],{},"另外請特別注意，我的檔案內已經有做 seo 相關以及 schema.org，在執行多國語言時，請一起納入考量如何修正目前的檔案。\n不要隨便刪除我已經做好的功能，除非有特別的情況再跟我討論後再決定執行方式。",[10,2218,2219],{},"以上如果有沒有說清楚或有疑問的地方，請先詢問我，等我說「開始執行」才開始。",[10,2221,2222],{},"即便是寫這麼清楚了，還是會有漏改的問題，不過都已經是老生常談的問題了，例如 token用完了換模型接續不上去...等。",[10,2224,2225],{},"這個功能災難般完成後，又遇到 Gemini 全球大當機，我從此轉向 Claude Code，有一種人生真好的感覺，所以之後的內容都比較有我的 Prompt 和 LLM 反問我什麼。",[10,2227,2228],{},"（結果寫文章的當下，有新聞指出全球有 2%的人 Pricing 頁面有看到 Pro 方案不能用 Claude Code 了，心情莫名的悲哀）",[77,2230,2232],{"id":2231},"第十一需求留言功能","第十一需求：留言功能",[10,2234,2235],{},"留言功能，大概 30 分鐘，Claude Code 每一階段的額度用了 88%，驚險完成",[10,2237,2238],{},"我的 prompt 是：我想要做段落層級意見，需求如下：",[37,2240,2241,2244,2247,2250,2253,2256,2259,2262],{},[40,2242,2243],{},"權限唯有登入且可檢視該文件，才可以留言",[40,2245,2246],{},"當我將鼠標焦點在該行時，該行最左側有一個評論的icon按鈕，點擊後出現popover可以輸入留言與取消和確定兩個按鈕",[40,2248,2249],{},"留言完成後，在分割視窗新增位置在第一個頁籤，這個頁籤顯示留言列表",[40,2251,2252],{},"留言列表以卡片呈現",[40,2254,2255],{},"留言項目顯示誰留言、留言內容、「執行完成」的按鈕、「不執行」按鈕，點擊按鈕後顯示狀態在卡片內容裡，如果在點擊另一個按鈕，狀態可以更改",[40,2257,2258],{},"目前不要支援可以回覆留言",[40,2260,2261],{},"當卡片內容還沒更新執行狀態時，文件該行最左方的icon顯示藍色，如果有任何執行動作，則將icon變成灰色。",[40,2263,2264],{},"請根據以上需求，規劃可行性程式做法，並且幫我思考有什麼我遺漏的功能，列出來給我決定。",[10,2266,2267],{},"Claude Code 詢問我",[37,2269,2270,2273,2276,2279,2282,2285],{},[40,2271,2272],{},"權限唯有登入且可檢視該文件，建議有編輯權限的人也可以使用留言。 好的",[40,2274,2275],{},"手機無 hover，留言 icon 無法觸發，要如何處理？  長按段落觸發",[40,2277,2278],{},"點卡片捲動到對應段落？是",[40,2280,2281],{},"孤兒留言提示？是（就是如果留言的地方被刪掉了）",[40,2283,2284],{},"Tab 未解決數量 badge？是（就是有多少未解決的留言）",[40,2286,2287],{},"即時同步？是",[10,2289,2290],{},"大概修了三次小 bug，都是從文件移動到按鈕 icon 時，icon會突然消失點擊不到。",[10,2292,2293],{},"然後因為做了 RWD，所以現在測試都是花兩倍時間以上在測試，因為有些問題只會在手機上發生，例如長按段落觸發這事，在手機上就會跟原生的「選取」相關的工作列互相衝突。",[10,2295,2296],{},"不過這個複雜的行為瞬間完成，這寫 bug 都不算什麼。",[10,2298,2299],{},"第十一需求：安全性問題\n做到這邊其實也差不多要收尾了，所以我就請 Claude Code 幫我抓一下之前 Gemini 寫的程式有什麼安全性問題：",[10,2301,2302],{},"安全性審查報告",[10,2304,2305],{},"P0 — CRITICAL（立即處理）",[37,2307,2308],{},[40,2309,2310],{},".env 中的 Service Key 是否有進入 Git 歷史？",[10,2312,2313],{},"P1 — HIGH",[37,2315,2316,2319,2322],{},[40,2317,2318],{},"Image Proxy SSRF",[40,2320,2321],{},"帳號刪除 API",[40,2323,2324],{},"WebSocket token 驗證邏輯",[10,2326,2327],{},"P2 — MEDIUM",[37,2329,2330,2333,2336,2339],{},[40,2331,2332],{},"AI API 沒有 Rate Limiting",[40,2334,2335],{},"Collab Server 沒有連線\u002F訊息大小限制",[40,2337,2338],{},"Storage API 路徑驗證",[40,2340,2341],{},"console.log 在生產環境洩漏資訊",[10,2343,2344],{},"P3 — LOW",[37,2346,2347,2350,2353],{},[40,2348,2349],{},"v-html 使用",[40,2351,2352],{},"Auth Middleware 只在 client-side 執行",[40,2354,2355],{},"Hocuspocus CORS 未設定 ",[10,2357,2358],{},"不看不知道，一看嚇一跳，還是蠻多要改的，所以 LLM 開發的東西真的是...不知道該怎麼說...因為我也不懂安全性",[10,2360,2361],{},"第十二需求：類似 Notion slash 功能\n話說我原本以為 Gemini 已經有做這種功能了，可能在某一次崩潰後沒有重做到，所以又用 Claude Code 重做一次，使用 Claude Code 之後真的很少在修改。",[10,2363,2364],{},"原先我以為像這個功能，我記得 Tiptap 是要付費，後來才發現是用官方做好的才要付費，自己刻不用，",[10,2366,2367],{},"所以就直接請 Claude Code 挑選適合在文件行內使用的工具列，直接幫我做這功能，過程也不重要了，反正是一次到位。",[77,2369,2371],{"id":2370},"第十三需求加個-pwa","第十三需求：加個 PWA",[10,2373,2374],{},"雖然現在沒什麼人在提這個詞了，但我就是想做，不為什麼，單純就是想要讓「加入主畫面」這件事以及 SEO，但這裡不知道為什麼 Gemini 和 Claude Code 都修到崩潰過，可能是我同時在修 RWD 版面問題，這裡我原本以為很簡單所以就順便版面。",[29,2376,1547],{"id":1547},[77,2378,2380],{"id":2379},"llm表現","LLM表現",[10,2382,2383],{},"從多國語言開始， Gemini 就已經明顯招架不住了，有很多次甚至卡住老半天，很明顯就是當機了。Claude Code 就是真的穩如老狗，雖然也有崩潰、撞牆幾次，但整體使用上產出的品質與量，都是最棒的！Codex 我倒是還沒試過，現在不想訂閱太多了，之前為了跟上最新的 Modal 到處訂閱，很傷荷包。",[10,2385,2386],{},"如果有機會，我會再想試試看從 Claude Design 到 Claude Code 的流程，因為我有一次工作上懶得畫兩版本 UI，直接把我做好的第一版 UI 丟到 Claude Design，請他幫我換風格跟排版，完美達成，還幫我腦補了一些東西(有好有壞)，但是這種爽感真的幫助我很多(有些業主就是要多種版讓他看)",[77,2388,2390],{"id":2389},"如果重來一次","如果重來一次？",[10,2392,2393],{},"後續跟 LLM 回顧時，LLM 問我：重做一次的話，會選擇「自己做 80%＋ AI 20%」還是又會選擇「完全不碰程式」？",[10,2395,2396],{},"如果是這種小型又複雜的事情，我的結論還是「完全不碰程式」",[10,2398,2399],{},"這次我選擇只碰觸「修改文案」和「prompt」，等於是把所有東西都交給 LLM 自己決定，如果之後的產品(應該說現在就有只是我不想搞到那麼複雜)讓我更能掌握細節控制，例如版片要怎麼排，那我的結論會更堅定站在「完全不碰程式」，因為時間真的是節省太多了，大概我切版的時間＝LLM 完成了這樣一個產品的時間，簡單說這次等於用「精準控制權」換取了「開發生命週期」的大幅縮短。",[77,2401,2403],{"id":2402},"這樣的產出是不是只能用在-prototype-不能真正上戰場","這樣的產出是不是只能用在 Prototype， 不能真正上戰場？",[10,2405,2406],{},"我個人認為，只要是對現在想改善的東西有幫助，不管醜或美，都能上戰場。",[10,2408,2409],{},"只用來做 Prototype 或 Demo 實在太可惜，這種做出來是真正可以發到市場直接驗證想法，然後快速更改成使用者真正想要的東西，等規模要擴大或是變現流程很穩定，再考慮重新做一個也不遲。",[77,2411,2412],{"id":2412},"職涯問題",[10,2414,2415],{},"我認為在面對職涯問題時，應該要先問現在的公司有沒有勇氣轉變，才需要談職涯問題。",[10,2417,2418],{},"如果公司有勇氣開始轉變，那麼員工的能力需求就會開始改變：",[37,2420,2421,2424,2427,2430],{},[40,2422,2423],{},"一人開發的小工具：\n基本UX 能力，能用白話文清楚表達給 LLM 知道要做什麼。",[40,2425,2426],{},"一人開發的小型服務：\n懂專案\u002F產品管理＋領域知識＋UX中等能力，能用專業知識、業界術語、經驗表達給 LLM 知道要做什麼，並且能做基本的管理。",[40,2428,2429],{},"一人開發的小型複雜服務：\n懂專案\u002F產品管理＋領域知識＋UX中等能力+程式\u002F版控基本能力，能用專業知識、業界術語、經驗、程式邏輯請 LLM 思考並知道要做什麼，做不好知道怎麼重做。",[40,2431,2432],{},"多人開發的中型服務以上：\n抱歉我真的不知道，這方面應該會涉及協作，目前的 LLM 協作工具我沒用過，但我想像可能會是有一個架構師寫完大準則，發下去給中間的架構師討論中小型準則，然後有人輔助檢驗，有點像 Large Scale Scrum (LeSS) 那種感覺，但是人數會少很多，因為一個人能扛的產能多太多了，不過前提是每個人在開發新功能時都有遵循準則。",[10,2434,2435],{},"簡單說，如果是在這種公司裡面，「廣度」類型的人會比較多、「深度」類型的人會比較少(也不用多)，學習程式邏輯不是為了親手打字，而是為了獲得與強大 AI 溝通的權杖。",[10,2437,2438],{},"不過終歸是要回到「公司」個案探討，畢竟行業不同、角色不同、業務方向不同，但如果是新創團隊，我還蠻建議使用新流程、新方法，開創出顛覆現有流程的「破壞式創新」！",[10,2440,2441],{},"牽扯到金流串接與帳務邏輯呢？我敢用這種方式開發嗎？\n我很膽小，現階段的我不太敢，但如果有一個懂的人跟我合作，我就敢！",[10,2443,2444],{},"這也就是我上面提到的「多人開發的中型服務以上」這件事，是不是也有人負責檢驗安全和輔助的職位呢？",[10,2446,2447],{},"最後的小知識\n你能猜到為什麼這個產品的名稱叫「dahtahdoc」嗎？",[10,2449,2450],{},"因為",[10,2452,2453],{},".",[10,2455,2453],{},[10,2457,2453],{},[10,2459,2453],{},[10,2461,2453],{},[10,2463,2453],{},[10,2465,2453],{},[10,2467,2453],{},[10,2469,2453],{},[10,2471,2453],{},[10,2473,2453],{},[10,2475,2453],{},[10,2477,2478],{},"在寫「文件」時，鍵盤的敲擊聲「噠踏噠」，",[10,2480,2481],{},"所以網站 dahtahdoc.com 也叫「噠踏噠答Come!」，",[10,2483,2484],{},"「打一打字就文件就完成！」的感覺",[10,2486,2487],{},"都讀到這邊了，別害羞了，免費來試試看嘛！",[10,2489,2490],{},[178,2491,2494],{"href":2492,"rel":2493,"target":183,"title":184},"https:\u002F\u002Fdahtahdoc.com",[182],"DahTahDoc",{"title":200,"searchDepth":201,"depth":201,"links":2496},[2497,2498,2499,2500],{"id":1626,"depth":204,"text":1626},{"id":1748,"depth":204,"text":1749},{"id":1796,"depth":204,"text":1796},{"id":1547,"depth":204,"text":1547},"2026-04-23","用最普通的 Prompt「Vibe coding」做出一個解決團隊規格書協作痛點的小產品，記錄從釐清真正需求到實際做出來的過程。",{},"\u002Fzh\u002Fblog\u002Fvibe-coding-product",{"title":1616,"description":2502},"zh\u002Fblog\u002Fvibe-coding-product",[2508,2509,2510,2511,2512,2513,2514,2515,2516,2517,2518,2519,2520,2521,2522,2523,2524],"文件","VibeCoding","文件管理","文件協作","ClaudeCode","Tiptap","Notion","規格書","需求","Spec","SA","系統分析師","產品經理","專案管理","AI工具","Antigravity","Gemini","xAn-UWGcXp0Iy2CAIp4ZH2hlOeZUVbAISoOKZdjfYYc",{"id":4,"title":5,"body":2527,"date":210,"description":211,"draft":212,"extension":213,"meta":2659,"navigation":215,"ogImage":216,"path":217,"seo":2660,"stem":219,"tags":2661,"translationKey":216,"updatedAt":226,"__hash__":227},{"type":7,"value":2528,"toc":2651},[2529,2531,2533,2535,2537,2539,2541,2543,2545,2555,2557,2567,2569,2571,2573,2575,2597,2599,2605,2607,2609,2611,2613,2615,2625,2627,2629,2631,2633,2635,2647,2649],[10,2530,12],{},[10,2532,15],{},[10,2534,18],{},[10,2536,21],{},[10,2538,24],{},[10,2540,27],{},[29,2542,32],{"id":31},[10,2544,35],{},[37,2546,2547,2549,2551,2553],{},[40,2548,42],{},[40,2550,45],{},[40,2552,48],{},[40,2554,51],{},[10,2556,54],{},[37,2558,2559,2561,2563,2565],{},[40,2560,59],{},[40,2562,62],{},[40,2564,65],{},[40,2566,68],{},[10,2568,71],{},[29,2570,75],{"id":74},[77,2572,80],{"id":79},[10,2574,83],{},[37,2576,2577,2579],{},[40,2578,88],{},[40,2580,91,2581],{},[37,2582,2583,2585,2587,2589,2591,2593,2595],{},[40,2584,96],{},[40,2586,99],{},[40,2588,102],{},[40,2590,105],{},[40,2592,108],{},[40,2594,111],{},[40,2596,114],{},[77,2598,118],{"id":117},[37,2600,2601,2603],{},[40,2602,123],{},[40,2604,126],{},[29,2606,129],{"id":129},[10,2608,132],{},[10,2610,135],{},[10,2612,138],{},[29,2614,141],{"id":141},[37,2616,2617,2619,2621,2623],{},[40,2618,146],{},[40,2620,149],{},[40,2622,152],{},[40,2624,155],{},[29,2626,159],{"id":158},[10,2628,162],{},[10,2630,165],{},[10,2632,168],{},[29,2634,172],{"id":171},[37,2636,2637,2642],{},[40,2638,2639],{},[178,2640,185],{"href":180,"rel":2641,"target":183,"title":184},[182],[40,2643,2644],{},[178,2645,192],{"href":190,"rel":2646,"target":183,"title":184},[182],[10,2648,195],{},[10,2650,198],{},{"title":200,"searchDepth":201,"depth":201,"links":2652},[2653,2654,2655,2656,2657,2658],{"id":31,"depth":204,"text":32},{"id":74,"depth":204,"text":75},{"id":129,"depth":204,"text":129},{"id":141,"depth":204,"text":141},{"id":158,"depth":204,"text":159},{"id":171,"depth":204,"text":172},{},{"title":5,"description":211},[221,222,223,224,225],{"id":2663,"title":2664,"body":2665,"date":2828,"description":2829,"draft":212,"extension":213,"meta":2830,"navigation":215,"ogImage":216,"path":2831,"seo":2832,"stem":2833,"tags":2834,"translationKey":216,"updatedAt":226,"__hash__":2835},"blog_zh\u002Fzh\u002Fblog\u002Fsearch-good-website.md","看不見的體驗差距：為什麼搜尋不到真正好用的網站？",{"type":7,"value":2666,"toc":2820},[2667,2670,2672,2676,2684,2688,2691,2694,2708,2711,2715,2718,2723,2726,2731,2734,2743,2747,2750,2758,2761,2764,2767,2771,2774,2777,2788,2791,2794,2797,2801,2804,2807,2810,2813],[10,2668,2669],{},"2026\u002F06\u002F22 更新：目前已經移除 Google Lighthouse 分數顯示，改成各國無障礙標章、無障礙聲明以及 Accesserty ALLY 積極維護網站盟友標誌，以下為原文不修正。",[10,2671,15],{},[29,2673,2675],{"id":2674},"一開場一個熟悉卻令人沮喪的場景","一、開場：一個熟悉卻令人沮喪的場景",[722,2677,2678],{},[10,2679,2680,2681,2683],{},"你打開 Google，輸入你要查的資料，結果跳出十個連結。你點了第一個、廣告一堆，關掉；點了第二個，圖片一大堆，但沒寫你要的內容；第三個，按了幾個 Tab 鍵，游標跑到不知道哪裡去⋯",[516,2682],{},"\n最後你開始懷疑，是不是自己太挑剔？",[29,2685,2687],{"id":2686},"二問題不只是資訊太多而是我們看不到體驗品質","二、問題不只是資訊太多，而是我們「看不到」體驗品質",[10,2689,2690],{},"我們現在的搜尋引擎，大多數是以 SEO、網站速度、內容量這些技術指標為主來排序。",[10,2692,2693],{},"但真正讓一個網站「好用」的條件，卻是極其主觀而實際的：",[37,2695,2696,2699,2702,2705],{},[40,2697,2698],{},"能不能鍵盤操作？",[40,2700,2701],{},"標題有沒有意義？",[40,2703,2704],{},"廣告會不會遮住主要內容？",[40,2706,2707],{},"色彩、對比是否足夠讓你看清楚？",[10,2709,2710],{},"這些，都是使用者自己在點進去之後，用時間、情緒與忍耐換來的資訊。",[29,2712,2714],{"id":2713},"三我想改變的是讓體驗被預先看見","三、我想改變的是：讓體驗被預先「看見」",[10,2716,2717],{},"在這個背景下，我開始思考：",[722,2719,2720],{},[10,2721,2722],{},"能不能在搜尋的那一刻，就知道某網站的無障礙狀況？",[10,2724,2725],{},"不是打分數、不是比賽排名、不是要把誰貼標籤，而是——",[722,2727,2728],{},[10,2729,2730],{},"「這個網站，有在努力讓人用得舒服嗎？」",[10,2732,2733],{},"我不是想創造一個新的搜尋引擎，我只是想讓「使用體驗」這件事變得可見。",[10,2735,2736,2737,2742],{},"這就是我設計出 ",[178,2738,2741],{"href":2739,"rel":2740,"target":183,"title":184},"https:\u002F\u002Faccesserty.com\u002Fsignal\u002F",[182],"Accesserty Signal"," 的起點。",[29,2744,2746],{"id":2745},"四signal-是什麼不是打分數是幫你選擇","四、Signal 是什麼？不是打分數，是「幫你選擇」",[10,2748,2749],{},"Accesserty Signal 是一個 Chrome Extension，它會在 Google 搜尋結果右側，顯示一個簡單的 badge：",[1366,2751,2752],{},[10,2753,2754],{},[1371,2755],{"alt":2756,"src":2757},"Google 搜尋列表下顯示 Lighthouse 分數","\u002Fimages\u002Fblog\u002F44.png",[10,2759,2760],{},"這個數字來自於 Lighthouse 無障礙檢測（可解釋、可比對、標準化）。",[10,2762,2763],{},"它不是打臉網站，也不是做名單化清單。",[10,2765,2766],{},"而是讓使用者在搜尋時，有一個簡單的線索去做選擇。",[29,2768,2770],{"id":2769},"五我為什麼堅持不是用評分系統","五、我為什麼堅持不是用評分系統？",[10,2772,2773],{},"因為我不想讓這變成另一次「灌分遊戲」。",[10,2775,2776],{},"過去太多平台都把使用者體驗簡化成「評分」，但這往往只會變成：",[37,2778,2779,2782,2785],{},[40,2780,2781],{},"被操弄（行銷灌水）",[40,2783,2784],{},"被曲解（一星來自情緒，不是事實）",[40,2786,2787],{},"被用來威脅廠商（評不好就曝光）",[10,2789,2790],{},"我想避免這一切。",[10,2792,2793],{},"Accesserty Signal 的分數只是參考性的測量，不是評價。",[10,2795,2796],{},"真正的改善，還是得靠網站自己有意願去做。",[29,2798,2800],{"id":2799},"六這只是開始但我希望打開那一點點透明感","六、這只是開始，但我希望打開那一點點「透明感」",[10,2802,2803],{},"我知道 Accesserty Signal 不會立刻改變世界，但它做的第一件事是：",[10,2805,2806],{},"讓體驗變得可見，不再只能靠使用者進網站後自己慢慢體會。",[10,2808,2809],{},"如果你也有過「不知道該點哪個網站」的焦慮，",[10,2811,2812],{},"或你曾經因為網頁看起來太煩而關掉它—— 那你其實已經體驗到「體驗的不可見性」了。",[10,2814,2815,2819],{},[178,2816,1583],{"href":2817,"rel":2818,"target":183,"title":184},"https:\u002F\u002Faccesserty.com\u002F",[182]," 是我嘗試在這之中，讓這個差距變得可見、可說明、可改善的一步。",{"title":200,"searchDepth":201,"depth":201,"links":2821},[2822,2823,2824,2825,2826,2827],{"id":2674,"depth":204,"text":2675},{"id":2686,"depth":204,"text":2687},{"id":2713,"depth":204,"text":2714},{"id":2745,"depth":204,"text":2746},{"id":2769,"depth":204,"text":2770},{"id":2799,"depth":204,"text":2800},"2025-05-29","現在的搜尋引擎以 SEO、速度、內容量排序，卻排不出「真正好用」的網站。談這個看不見的體驗差距，以及我為什麼決定在搜尋結果中顯示無障礙指標。",{},"\u002Fzh\u002Fblog\u002Fsearch-good-website",{"title":2664,"description":2829},"zh\u002Fblog\u002Fsearch-good-website",[221,222,223,224,225],"ZNVUBqG74Qn72o4eU4NY3edw17rIXgAMZNEDYwiu-R0",{"id":2837,"title":2838,"body":2839,"date":3103,"description":3104,"draft":212,"extension":213,"meta":3105,"navigation":215,"ogImage":216,"path":3106,"seo":3107,"stem":3108,"tags":3109,"translationKey":216,"updatedAt":3110,"__hash__":3111},"blog_zh\u002Fzh\u002Fblog\u002Faccesserty-eco.md","打造 Accesserty — 從搜尋到開發的無障礙網頁之體驗",{"type":7,"value":2840,"toc":3095},[2841,2844,2847,2851,2859,2862,2865,2869,2872,2875,2879,2882,2885,2888,2891,2894,2898,2901,2904,2907,2910,2913,2921,2939,2943,2946,2953,2956,2959,2963,2966,2979,2992,2995,3058,3061,3064,3067,3074,3080,3083,3086],[10,2842,2843],{},"今天想分享我花了一個月左右打造的新品牌：Accesserty",[10,2845,2846],{},"這是一個專注於提升無障礙網頁體驗的小型工具生態，從搜尋體驗到開發測試，試圖用一套溫和、理性的方式，讓這件事被看見、被理解、被改善。",[29,2848,2850],{"id":2849},"起點對於-chrome-extension-的好奇","起點：對於 Chrome Extension 的好奇",[10,2852,2853,2854,2858],{},"在 2023 年時，我出於對 Chrome Extension 的好奇，製作了名為 Report Website Issues 的擴充程式，並分享",[178,2855,2857],{"href":2856},"\u002Fblog\u002Freport-website-issue","開發過程","。",[10,2860,2861],{},"到了 2025 年，隨著大型語言模型（LLM）的普及，我開始思考能否用它來輔助開發更多可實際解決問題的工具，並設法用 LLM 拆分出角色，幫助我在短時間內建構出一個有邏輯又能運作的產品系統。",[29,2863,2864],{"id":2864},"發現問題與痛點",[77,2866,2868],{"id":2867},"_1-搜尋後使用者其實不知道該點哪個連結","1. 搜尋後，使用者其實不知道該點哪個連結",[10,2870,2871],{},"搜尋引擎雖然會綜合 SEO、速度、內容等因素排序網頁，但這些排序結果並不代表網站「好用」或「易於瀏覽」。\n許多網站看似在技術層面表現良好，實際上卻充斥著鍵盤操作困難、結構不明、廣告覆蓋等問題，特別是對使用輔助科技的使用者而言。",[10,2873,2874],{},"我開始思考：能不能在搜尋時就直接看到這個網站的可及性狀況？避免來回點選、浪費時間與耐心，讓瀏覽過程更順暢。",[77,2876,2878],{"id":2877},"_2-使用者想回報問題卻無門可報","2. 使用者想回報問題，卻「無門可報」",[10,2880,2881],{},"即使使用者發現網站有困難，也常因為找不到聯絡方式、或無法準確描述問題而選擇放棄。",[10,2883,2884],{},"更常見的是客服和使用者之間「認知不同」，像是這個我在之前文章中提到的例子：",[10,2886,2887],{},"例如使用者說「我的鍵盤沒辦法瀏覽你們的網頁」，但客服卻說「我的可以喔，麻煩您再試試」，然後差不多就鬼打牆，兩邊都覺得對方很爛，因為前者是談鍵盤焦點，後者可能只是按向下鍵捲動畫面。",[10,2889,2890],{},"因此我認為需要有一個「中介層」：讓使用者能輕鬆描述問題，讓開發者收到後是可解讀、可處理的資訊。",[10,2892,2893],{},"目前 LLM 雖然可以協助，但仍難以精確理解這類回報或是成本太高。",[77,2895,2897],{"id":2896},"_3-對開發者而言無障礙是高成本嗎","3. 對開發者而言，無障礙是高成本嗎？",[10,2899,2900],{},"近年因應歐盟無障礙相關法規，各大 UI 框架陸續強化了可及性元件，的確減少了開發成本。\n但僅靠機器掃描是否合規遠遠不夠 — — 因為「合規」≠「可用」。",[10,2902,2903],{},"舉例來說：一張圖片是否有 alt 屬性，機器可以檢查；但這個 alt 的內容是否正確傳達圖片意義？還是只有寫「圖片1」？這仍需要人來判斷。",[10,2905,2906],{},"目前即使 LLM 可以做初步描述，也需要 API 費用與極高 prompt 精度，而且幻覺仍是風險。",[10,2908,2909],{},"所以更務實的方式是 — — 在開發過程就提供人工判斷的機會與工具。",[10,2911,2912],{},"這就延伸出一個核心概念：",[722,2914,2915],{},[10,2916,2917,2918,2920],{},"越早期處理可及性問題，成本越低。",[516,2919],{},"\n從規劃階段讓分析師、設計師、工程師一起考慮無障礙，而不是事後補強。",[1366,2922,2923,2929],{},[10,2924,2925],{},[1371,2926],{"alt":2927,"src":2928},"67％的無障礙問題來自於設計階段","\u002Fimages\u002Fblog\u002F41.webp",[2930,2931,2932],"figcaption",{},[10,2933,2934],{},[178,2935,2938],{"href":2936,"rel":2937,"target":183,"title":184},"https:\u002F\u002Fwww.deque.com\u002Fblog\u002Fis-closing-the-web-accessibility-design-development-gap-a-bridge-too-far\u002F",[182],"參考來源：Is Closing the Web Accessibility Design\u002FDevelopment Gap a Bridge Too Far?",[29,2940,2942],{"id":2941},"解法開始成形模擬檢查回報","解法開始成形：模擬、檢查、回報",[10,2944,2945],{},"基於上述問題，我開始構思一個流程圖，來整理使用者、開發者、合作方之間的互動關係：",[2947,2948],"embed",{"height":2949,"src":2950,"type":2951,"width":2952},"480px","https:\u002F\u002Fwhimsical.com\u002Fembed\u002FNDhUK17ebjwRtaH4kLoMU4","application\u002Fpdf","100%",[10,2954,2955],{},"從網頁瀏覽者至網頁開發者流程與 Accesserty 產品關係。",[10,2957,2958],{},"我將整體劃分為「預防」與「治療」兩大塊，並嘗試建立一套工具組合，來落實這個想法，完成良好的循環過程達成 Win-Win 的結果。",[29,2960,2962],{"id":2961},"建立-accesserty-品牌與產品結構","建立 Accesserty 品牌與產品結構",[10,2964,2965],{},"很多 a11y 工具會在電子報宣傳「某公司被罰了多少錢」，我覺得那會讓開發者只想「應付一下」，而不是真的想理解與改善。\n所以我與「我的產品經理」（ChatGPT 😎）對話後，確立了品牌核心：",[1366,2967,2968,2974],{},[10,2969,2970],{},[1371,2971],{"alt":2972,"src":2973},"品牌語氣表","\u002Fimages\u002Fblog\u002F42.png",[2930,2975,2976],{},[10,2977,2978],{},"品牌語氣：冷靜、理性、透明、參與感強；不做的事：不標籤化、不威脅、不灌分、不做障礙者專屬版本；做的事：對齊通用設計、鼓勵主動改善、打造正向反饋機制",[1366,2980,2981,2987],{},[10,2982,2983],{},[1371,2984],{"alt":2985,"src":2986},"ChatGPT 專案","\u002Fimages\u002Fblog\u002F43.webp",[2930,2988,2989],{},[10,2990,2991],{},"我發現 ChatGPT 現在可以幫我建立「專案資料夾」的模式。  我可以先給它一份專案的背景說明，然後針對不同專業角色，分別開啟對話，例如設計師、工程師、開發者。  像我就會把流程圖截圖放進專案中，再從這個共同檔案延伸出多個角色視角。",[10,2993,2994],{},"等到跟「產品經理」確定各種細節之後，便開啟其他三個專家：AppSheet、Chrome Extension、Web Component，利用 Vibe Coding 的方式，將產品產生出來。架構如下：",[37,2996,2997,3013,3026,3049],{},[40,2998,2999,3000,3002,3006,3008],{},"Accesserty Signal — 讓 Google 搜尋結果顯示網頁可及性狀態",[516,3001],{},[178,3003,3005],{"href":2739,"rel":3004,"target":183,"title":184},[182],"簡介",[516,3007],{},[178,3009,3012],{"href":3010,"rel":3011,"target":183,"title":184},"https:\u002F\u002Fchromewebstore.google.com\u002Fdetail\u002Faccesserty-signal\u002Fjabgpbgdmhdmibhogmcjfinnkcngcelc",[182],"下載 Chrome 擴充程式",[40,3014,3015,3016,3018,3021,3023],{},"Accesserty DevCheck — 模擬無障礙情境與自動檢查問題（如色盲模擬、Axe-core devtool 等）",[516,3017],{},[178,3019,3005],{"href":1254,"rel":3020,"target":183,"title":184},[182],[516,3022],{},[178,3024,3012],{"href":190,"rel":3025,"target":183,"title":184},[182],[40,3027,3028,3029,3031,3035,3037,3042,3044],{},"Accesserty UI Kit — 提供通過可及性設計的 Web Component 元件",[516,3030],{},[178,3032,3005],{"href":3033,"rel":3034,"target":183,"title":184},"https:\u002F\u002Faccesserty.com\u002Fuikit",[182],[516,3036],{},[178,3038,3041],{"href":3039,"rel":3040,"target":183,"title":184},"https:\u002F\u002Fgithub.com\u002FAccesserty\u002FUI-Kit",[182],"Github",[516,3043],{},[178,3045,3048],{"href":3046,"rel":3047,"target":183,"title":184},"https:\u002F\u002Faccesserty.com\u002Fuikit\u002Fplayground",[182],"CSS 模擬器",[40,3050,3051,3052,3054],{},"Accesserty Pulse — 專注於捕捉使用者『操作挫折』的服務。",[516,3053],{},[178,3055,3005],{"href":3056,"rel":3057,"target":183,"title":184},"https:\u002F\u002Faccesserty.com\u002Fpulse",[182],[10,3059,3060],{},"整體系統皆由我一人開發，搭配 ChatGPT 輔助，以最低維運成本打造。",[29,3062,3063],{"id":3063},"發佈與展望",[10,3065,3066],{},"今年的 GAAD（Global Accessibility Awareness Day）這天(每年五月的第三個星期四)，在 Product Hunt 上發佈了：",[10,3068,3069],{},[178,3070,3073],{"href":3071,"rel":3072,"target":183,"title":184},"https:\u002F\u002Fwww.producthunt.com\u002Fposts\u002Faccesserty",[182],"Accesserty on Product Hunt",[10,3075,3076,3077,2858],{},"希望讓更多人知道，改善無障礙，不一定需要複雜的團隊與大量預算。\n只要設計得當、工具使用得當，從搜尋、開發到回報，其實都可以是透明且正向的。\n如果你也是在意這個議題，或者你在瀏覽網站時也曾有過「不知道要點哪個」的猶豫，歡迎看看 Accesserty ",[178,3078,482],{"href":1581,"rel":3079,"target":183,"title":184},[182],[10,3081,3082],{},"如果你也曾在使用網站時感到困擾，希望這套產品能帶來一些幫助。歡迎在 Accesserty 留言告訴我你的想法，也很期待未來合作或改進的可能！",[29,3084,3085],{"id":3085},"參考",[37,3087,3088],{},[40,3089,3090],{},[178,3091,3094],{"href":3092,"rel":3093,"target":183,"title":184},"https:\u002F\u002Faccessibility.day\u002F",[182],"GAAD",{"title":200,"searchDepth":201,"depth":201,"links":3096},[3097,3098,3099,3100,3101,3102],{"id":2849,"depth":204,"text":2850},{"id":2864,"depth":204,"text":2864},{"id":2941,"depth":204,"text":2942},{"id":2961,"depth":204,"text":2962},{"id":3063,"depth":204,"text":3063},{"id":3085,"depth":204,"text":3085},"2025-05-23","分享我花約一個月打造的品牌 Accesserty：一套從搜尋體驗到開發測試的無障礙工具生態，用溫和而理性的方式，讓無障礙網頁被看見、被理解、被改善。",{},"\u002Fzh\u002Fblog\u002Faccesserty-eco",{"title":2838,"description":3104},"zh\u002Fblog\u002Faccesserty-eco",[222,224,223,225,221],"2026-01-13","nvQILcgG8wNwJ32NLAssgqVZxirtPnashWx7NFYpKMM",{"id":3113,"title":3114,"body":3115,"date":3290,"description":3119,"draft":212,"extension":213,"meta":3291,"navigation":215,"ogImage":216,"path":3292,"seo":3293,"stem":3294,"tags":3295,"translationKey":216,"updatedAt":3296,"__hash__":3297},"blog_zh\u002Fzh\u002Fblog\u002Fllm-chat-a11y.md","LLM Chat Accessibility",{"type":7,"value":3116,"toc":3284},[3117,3120,3123,3126,3130,3139,3147,3151,3154,3162,3170,3177,3180,3184,3187,3198,3206,3213,3216,3219,3222,3225,3228,3259,3266,3269,3272,3275,3278,3281],[10,3118,3119],{},"因為很好奇，所以想檢測一下主流 LLM Chat 工具在無障礙上的支援程度",[10,3121,3122],{},"隨著歐盟的無障礙法規到來，我實在是很好奇最近幾年新出現的 LLM Chatbot 是否能通過無障礙，於是就隨意挑選三個 LLM 記錄一下 2025 目前的狀況。（如果過不了還能在歐盟的國家使用嗎？真是疑惑。）",[29,3124,3125],{"id":3125},"機器掃描",[77,3127,3129],{"id":3128},"_1-選擇當作基準的測試工具","1. 選擇當作基準的測試工具",[10,3131,3132,3133,3138],{},"本來是想簡單一點用 Chrome Devtool 的 Lighthouse ，但會被 Grok 一直擋在機器人檢測的頁面，所以本次選擇 ",[178,3134,3137],{"href":3135,"rel":3136,"target":183,"title":184},"https:\u002F\u002Fchromewebstore.google.com\u002Fdetail\u002Fibm-equal-access-accessib\u002Flkcagbfjnkomcinoddgooolagloogehp",[182],"IBM Equal Access Accessibility Checker"," 的 Chrome Extension 來測試，會選擇的原因是此款擴充程式一來持續在更新，再者可以根據需求選擇檢測規則。",[1366,3140,3141],{},[10,3142,3143],{},[1371,3144],{"alt":3145,"src":3146},"共有五種選擇，其中三種為 WCAG 2.0, 2.1, 2.2 的 A 與 AA 級，其他兩種為 2.1 和 2.2 各自加上IBM 的額外補充。","\u002Fimages\u002Fblog\u002F35.webp",[77,3148,3150],{"id":3149},"_2-在未登入的情況下進行測試","2. 在未登入的情況下進行測試",[10,3152,3153],{},"因為登入之後可能會因為資料的不同造成差異，所以要以未登入的狀態開始。",[1366,3155,3156],{},[10,3157,3158],{},[1371,3159],{"alt":3160,"src":3161},"Gork","\u002Fimages\u002Fblog\u002F36.png",[1366,3163,3164],{},[10,3165,3166],{},[1371,3167],{"alt":3168,"src":3169},"ChatGPT","\u002Fimages\u002Fblog\u002F37.png",[1366,3171,3172],{},[10,3173,3174],{},[1371,3175],{"alt":2524,"src":3176},"\u002Fimages\u002Fblog\u002F38.png",[10,3178,3179],{},"雖然三者首頁有不盡相同，但在聊天的主要視窗大致上是一樣的",[29,3181,3183],{"id":3182},"_3-機器檢測簡易結果","3. 機器檢測簡易結果",[10,3185,3186],{},"報告明細會區分三種等級，而每個等級又分成：",[37,3188,3189,3192,3195],{},[40,3190,3191],{},"Violation：明確的違規",[40,3193,3194],{},"Needs review：需要人工近一步檢視",[40,3196,3197],{},"Recommendation：工具建議的做法",[1366,3199,3200],{},[10,3201,3202],{},[1371,3203],{"alt":3204,"src":3205},"左起 ChatGPT、Gemini、Grok，以簡單的數字來看，Gemini 表現相較優異。","\u002Fimages\u002Fblog\u002F39.png",[10,3207,3208,3209,3212],{},"可以看到在總數上三者並無太大差別，但是在 Violation 方面，Gemini 就相較優異，至少有明顯在程式上處理無障礙，其中 Violation 的部分看起來都是 ",[1526,3210,3211],{},"\u003Csvg>"," 沒有標記描述之類的。",[10,3214,3215],{},"當然，這樣的機器檢測並不能代表什麼，因為在有些情況下，原本可以使用機器掃描辨別的，可能會因為使用的技術太新或其他原因，導致無法辨別。(例如背景與前景顏色的對比)",[10,3217,3218],{},"所以應該說，連這個都不能通過的話，那就也不需要進一步人工檢測了。",[10,3220,3221],{},"此階段個人認為 Gemini > ChatGPT = Grok",[29,3223,3224],{"id":3224},"人工檢測",[10,3226,3227],{},"開啟作業系統報讀軟體做看看人工檢測以下任務：",[37,3229,3230,3233,3236,3239,3242,3245,3248,3251,3256],{},[40,3231,3232],{},"在首頁輸入問題至聽到回覆結果，並觀察網頁回饋的行為",[40,3234,3235],{},"鍵盤遊走",[40,3237,3238],{},"accesskey",[40,3240,3241],{},"標題規則檢測",[40,3243,3244],{},"人工顏色檢測",[40,3246,3247],{},"Landmark",[40,3249,3250],{},"跳至主要內容按鈕",[40,3252,3253],{},[1526,3254,3255],{},"\u003Cnoscript>",[40,3257,3258],{},"其他問題",[1366,3260,3261],{},[10,3262,3263],{},[1371,3264],{"alt":3265,"src":3205},"三者人工檢測檢核表",[10,3267,3268],{},"在人工檢測的部分，三者在顏色方面都差不多，保持著簡單的黑色簡單的介面，可惜的是都沒有設定 accesskey，不確定是不需要還是沒有設定。Landmark 也因為是簡單的介面，所以基本都只有 main 而已，感覺應該可以再拆分得更細緻一點。",[10,3270,3271],{},"禁用 js 的情況下，只有 ChatGPT 有顯示畫面，其他兩者都是空白，但即便是有顯示畫面，但是沒有提示使用者可能無法操作，可能會造成更多困擾。",[10,3273,3274],{},"在實際操作 AI 對話的方面，我個人更喜歡 ChatGPT，雖然在鍵盤遊走的部分會有順序不一致的問題，但因為很多動作做完都是回去 Focus 在輸入框，所以倒還好。另外我覺得 Gemini 優於 Grok，因為畢竟是 chatbot ，個人覺得「回覆的狀態」還是最重要的，即便是沒有直接報讀回覆的內容。",[29,3276,3277],{"id":3277},"結論",[10,3279,3280],{},"三者在機器掃描的結果上，Gemini 勝出，但在人工檢測上， ChatGPT 勝出。如果硬要分勝負，我個人覺得 ChatGPT 整體是比較好的，畢竟在主要功能的操作上是非常順暢的，這才是最重要的。",[10,3282,3283],{},"但三者應該都達不到歐盟的標準，所以我很期待之後會有什麼樣的發展。",{"title":200,"searchDepth":201,"depth":201,"links":3285},[3286,3287,3288,3289],{"id":3125,"depth":204,"text":3125},{"id":3182,"depth":204,"text":3183},{"id":3224,"depth":204,"text":3224},{"id":3277,"depth":204,"text":3277},"2025-04-16",{},"\u002Fzh\u002Fblog\u002Fllm-chat-a11y",{"title":3114,"description":3119},"zh\u002Fblog\u002Fllm-chat-a11y",[222,224,223,225,1491],"2025-05-26","WihV-b_pSflOoUdosu9d1zufYrPa7YMub4Q2lo-Fdec",{"id":3299,"title":3300,"body":3301,"date":3479,"description":3480,"draft":212,"extension":213,"meta":3481,"navigation":215,"ogImage":216,"path":3482,"seo":3483,"stem":3484,"tags":3485,"translationKey":216,"updatedAt":3296,"__hash__":3487},"blog_zh\u002Fzh\u002Fblog\u002Ftinymce-custom-a11y-tool.md","建立所見即所得編輯器的無障礙檢測工具，以 TinyMCE 為例",{"type":7,"value":3302,"toc":3470},[3303,3306,3314,3317,3320,3323,3326,3329,3344,3347,3358,3361,3364,3384,3388],[10,3304,3305],{},"一個小程式，幫助撰文者製作符合無障礙網頁規範的文章",[1366,3307,3308],{},[10,3309,3310],{},[1371,3311],{"alt":3312,"src":3313},"彈出視窗內有一張圖片與無障礙檢測內容","\u002Fimages\u002Fblog\u002F34.webp",[29,3315,3316],{"id":3316},"情境",[10,3318,3319],{},"一間企業幫助政府單位架設內容管理系統網站，文章編輯需要使用所見即所得編輯器的高度自由，又要全網站符合無障礙網頁規範。",[29,3321,3322],{"id":3322},"痛點",[10,3324,3325],{},"即使有無障礙網頁知識，但只要碰到所見即所得(WYSIWYG)編輯器，網站建立後的文章內容便不再受控。",[77,3327,3328],{"id":3328},"企業",[37,3330,3331,3334,3341],{},[40,3332,3333],{},"每當網站被抽測時，就需要花費大量時間幫助業主修復。",[40,3335,3336,3337,3340],{},"程式需要特別限制必填欄位，但是有點填鴨式，例如 ",[1526,3338,3339],{},"\u003Ca>"," 在某些情況下，不需要有 title 屬性。",[40,3342,3343],{},"額外提供寫作的教育訓練。",[77,3345,3346],{"id":3346},"撰文者",[37,3348,3349,3352,3355],{},[40,3350,3351],{},"如果企業的編輯器有特別限制必填，則一定要填寫欄位，否則無法儲存。",[40,3353,3354],{},"不暸解該欄位意義，於是可能流於表象的填寫，對無障礙網頁沒有真正意義上的幫助，例如圖片 alt 的描述可能會比較模糊。",[40,3356,3357],{},"被抽測時，文章沒通過無障礙的機率非常高，就只能等待企業修復。",[29,3359,3360],{"id":3360},"解決方案",[10,3362,3363],{},"打造一個編輯器內工具",[37,3365,3366,3369,3372,3375,3378,3381],{},[40,3367,3368],{},"撰寫文章時可以即時檢測無障礙網頁規則。",[40,3370,3371],{},"提供該無障礙網頁錯誤的撰寫提示，每次錯誤時，撰文者可以學習一些無障礙網頁規範。",[40,3373,3374],{},"錯誤提示提供視覺化顯示，例如圖片錯誤的話，應顯示該圖片，並且點擊後可以將滑鼠鼠標移動到錯誤的位置。",[40,3376,3377],{},"使用者點擊檢測按鈕時觸發，或是自動即時檢測，但是不能直接跳出錯誤一直干擾撰文者編寫流程，只需要在按鈕文字後加上錯誤數量和改變顏色。例如，當錯誤在 5 個以下，按鈕文字顯示黃色，10 個以上就變成紅色，以提醒撰文者不要累積太多錯誤再更改，但也不打擾寫作。",[40,3379,3380],{},"建立指標，例如通過是 100 分，沒通過就按比例顯示分數。可利用遊戲化方式，鼓勵撰文者學習。",[40,3382,3383],{},"即使有錯誤，但仍然讓使用者可以儲存，儲存後在列表和檢測按鈕裡，有警告 icon 提示該文章尚未完成無障礙檢測。",[29,3385,3387],{"id":3386},"實作以-tinymce為例","實作：以 TinyMCE 為例",[3389,3390,3394,3397,3400,3414,3417,3420,3423,3427,3430,3433,3436,3440,3443,3446,3449,3452,3462,3465,3467],"code-pen-embed",{"default-tab":3391,"height":3392,"slug":3393},"result",600,"dPbVmPV",[2947,3395],{"height":2949,"src":3396,"type":2951,"width":2952},"https:\u002F\u002Fcodepen.io\u002Fneillin1023\u002Ffull\u002FdPbVmPV",[77,3398,3399],{"id":3399},"思路",[37,3401,3402,3405,3408,3411],{},[40,3403,3404],{},"制定格式、寫一次規則後，此格式的程式碼，可以輕易的在不同所見即所得編輯器中製作成外掛，才會更能推廣。",[40,3406,3407],{},"無障礙網頁規則通常只會新增的比較多，修正比較少，所以當規則第一次寫好後，維護不至於太困難，所以開發者負擔應該不會太多。",[40,3409,3410],{},"先以常見錯誤開發，先解決常見問題，再制定更細部規則。",[40,3412,3413],{},"要注意編輯器先天限制，假設編輯器本身圖片沒有給 alt 欄位，這時候即便您有檢查到沒寫 alt，也無濟於事。",[29,3415,3416],{"id":3416},"近期未來發展",[77,3418,3419],{"id":3419},"進階檢查",[10,3421,3422],{},"編輯器先天不足與客製化工具的搭配，成為獨家功能，進而開啟獲利模式。",[77,3424,3426],{"id":3425},"llm-自動修復","LLM 自動修復",[10,3428,3429],{},"若成本足夠低了，而且 AI 也能根據上下文給予圖片有意義的 alt 屬性或其他遵循規則，正確率也很高，就可加入自動修復。",[10,3431,3432],{},"在檢測分數後，有一顆按鈕點擊後，串 LLM 自動修復該欄位，並且給予適當的值。例如圖片的 alt，LLM OCR 後，自動判斷怎樣的描述會比較好。",[10,3434,3435],{},"但不要直接對內文馬上改，而是先提供預覽或是更動的地方，待點擊「同意變更」之類的按鈕後，再異動內文。",[77,3437,3439],{"id":3438},"llm-自動檢測","LLM 自動檢測",[10,3441,3442],{},"或者，乾脆也不用自己寫規則了。",[10,3444,3445],{},"如果未來 AI 夠強，只要編輯器工具列放一顆「一鍵自動檢測修復無障礙」就搞定了。",[29,3447,3448],{"id":3448},"額外要注意的地方",[10,3450,3451],{},"通常，網頁頁面的標題和副標題，不會在所見即所得的編輯器裡，這很大一部分是因為網頁排版問題。",[10,3453,3454,3455,3458,3459,3461],{},"所以，工程師最好在所見即所得的外層，包一層 ",[1526,3456,3457],{},"\u003Carticle>","，重置標籤 h 系列的順序(",[1526,3460,3457],{},"表示此內容足夠當作獨立一個頁面的內容)。這樣就不需要特別動到編輯器工具，否則，可能要根據網頁的排版，限制編輯器內建的標題從哪個開始。",[10,3463,3464],{},"另外，如果編輯器背景是透明，編輯器內的無障礙網頁檢查，可能沒辦法檢測到編輯器內外的問題。例如，編輯器內文字是白色，但編輯器外的背景也是白色，此狀況下，編輯器內的檢測工具，就沒辦法檢測顏色對比。",[29,3466,3277],{"id":3277},[10,3468,3469],{},"這樣的工具最主要是降低有關於達成無障礙網頁的成本，對開發商、撰文者、最終讀者都有利，並且技術難度不高，剩下的就是體驗問題和自動化成本問題。",{"title":200,"searchDepth":201,"depth":201,"links":3471},[3472,3473,3474,3475,3476,3477,3478],{"id":3316,"depth":204,"text":3316},{"id":3322,"depth":204,"text":3322},{"id":3360,"depth":204,"text":3360},{"id":3386,"depth":204,"text":3387},{"id":3416,"depth":204,"text":3416},{"id":3448,"depth":204,"text":3448},{"id":3277,"depth":204,"text":3277},"2025-01-01","以 TinyMCE 為例，為所見即所得（WYSIWYG）編輯器打造無障礙檢測工具，幫助撰稿者在自由編輯的同時，讓文章內容也符合無障礙網頁規範。",{},"\u002Fzh\u002Fblog\u002Ftinymce-custom-a11y-tool",{"title":3300,"description":3480},"zh\u002Fblog\u002Ftinymce-custom-a11y-tool",[222,224,223,225,3486],"TinyMCE","Pzf5MBBUcWQJT53-ZD8IVzyAFZ9dk-IelFCBSrUdu1A",{"id":3489,"title":3490,"body":3491,"date":3729,"description":3497,"draft":212,"extension":213,"meta":3730,"navigation":215,"ogImage":216,"path":3731,"seo":3732,"stem":3733,"tags":3734,"translationKey":216,"updatedAt":3296,"__hash__":3736},"blog_zh\u002Fzh\u002Fblog\u002Fcui-change-style.md","讓使用者透過 CUI 客製化網站風格",{"type":7,"value":3492,"toc":3718},[3493,3495,3498,3502,3505,3508,3516,3520,3523,3526,3529,3532,3535,3549,3557,3565,3573,3577,3586,3597,3601,3604,3607,3610,3613,3616,3619,3622,3626,3629,3632,3646,3649,3657,3660,3668,3671,3676,3680,3683,3691,3693,3696,3699,3702],[29,3494,474],{"id":474},[10,3496,3497],{},"本篇簡單探討如果使用者可以透過 CUI 改變網站排版與風格，進而打破目前由開發者規劃好的體驗，將有什麼好處和壞處",[29,3499,3501],{"id":3500},"什麼是-cui","什麼是 CUI",[10,3503,3504],{},"這裡指的 CUI，全名為 Conversational User Interface，中文並無統一的稱呼，通常以「對話式介面」、「交談式介面」常見之，也就是常常看到的「聊天機器人」、「Siri」的介面。",[10,3506,3507],{},"使用者可以透過這個介面，使用「自然語言」與「系統互動」達成目的。我沒有找到哪一個組織明定 CUI 這個詞到底定義是不是這樣，但應該是隨著技術發展而逐漸形成的概念。",[10,3509,3510,3511,3515],{},"例如，我曾經發想過的一篇文章「如果使用即時通訊 UI 來設計購物車結帳流程，會是什麼樣的感覺？」(",[178,3512,3514],{"href":3513},"\u002Fblog\u002Fshopping-in-chat-ui","文章連結",")，整個畫面雖然是「對話」，但其實並不屬於 CUI 的範疇裡，因為不符合「自然語言」這項條件。",[29,3517,3519],{"id":3518},"cui-起源","CUI 起源",[10,3521,3522],{},"即時通訊開始興起時，可以視為 CUI 的前身，其人與人「對話」的方式，為現今 CUI 的高接受度提供了使用前置習慣與經驗。",[10,3524,3525],{},"當自然語言處理(Natural Language Processing, NLP)技術的開始進步，結合對話的方式，造就各大社群、即時通訊軟體以及網站紛紛開始建立各式各樣的聊天機器人，人與系統間的互動達成資訊自動化處理、減少人工成本。",[10,3527,3528],{},"緊接著 Siri 的出現，開始提供文字以外的自然語言與系統互動，人們開始意識到自然語言交流的潛力，也就開始出現各式各樣的家庭控制中心、物聯網生態，例如 Google Nest，但大概也就僅止於此，普遍大家都還是會覺得「很笨」，或是局限在語言支援度不同。",[10,3530,3531],{},"如今，LLM 的爆炸性發展，讓人們對未來 AI 紀元的來臨，不再只是存在於小說裡的幻想，而是實質感受到「可能真的會實現」。",[10,3533,3534],{},"CUI 出現方式\n目前我們可以看到 CUI 有好幾種出現的方式：",[37,3536,3537,3540,3543,3546],{},[40,3538,3539],{},"獨立專屬的頁面：ChatGPT、Gemini、Perplexity、NotebookLM",[40,3541,3542],{},"依附在瀏覽器裡的功能：Edge Copilot、Monica Chrome Extension",[40,3544,3545],{},"出現在網站或 APP 隨時可展開式的：政府資料開放平臺的小幫手",[40,3547,3548],{},"依附在應用程式裡：Microsoft 365 Copilot",[1366,3550,3551],{},[10,3552,3553],{},[1371,3554],{"alt":3555,"src":3556},"Edge Copilot 的問答展示","\u002Fimages\u002Fblog\u002F30.png",[1366,3558,3559],{},[10,3560,3561],{},[1371,3562],{"alt":3563,"src":3564},"政府資料開放平臺的小幫手 TAIDE 的回答情形","\u002Fimages\u002Fblog\u002F31.webp",[1366,3566,3567],{},[10,3568,3569],{},[1371,3570],{"alt":3571,"src":3572},"Microsoft Office Excel 的 Copilot 使用情境","\u002Fimages\u002Fblog\u002F32.webp",[29,3574,3576],{"id":3575},"cui-分類","CUI 分類",[10,3578,3579,3580,3585],{},"根據「",[178,3581,3584],{"href":3582,"rel":3583,"target":183,"title":184},"https:\u002F\u002F53ai.com\u002Fnews\u002Fzhinengkefu\u002F2024063018930.html",[182],"談任務型智能客服","」此篇文章，CUI 可以以下三種分類",[37,3587,3588,3591,3594],{},[40,3589,3590],{},"依場景分類",[40,3592,3593],{},"依技術分類",[40,3595,3596],{},"依範圍分類",[29,3598,3600],{"id":3599},"我認為-cui的下一步","我認為 CUI 的下一步",[10,3602,3603],{},"我認為，CUI 要走的下一步，會是類似 Microsoft 365 Copilot 這種模式，但不僅是在辦公軟體提升生產力，而是一般網站也可以使用。",[10,3605,3606],{},"例如，現在我們可以利用 Edge Copilot 查詢目前頁面並問問題，但是問完問題後，答案或結論都是在對話內容裡面，還需要使用者自行點擊對話內容的連結，觸發事件或前往網頁，這裡就形成一個使用體驗的斷點，有一種把Copilot 和網頁切開成不同世界的感覺。",[10,3608,3609],{},"如果我能在網站的 CUI 可以問問題之外還能跟網頁互動，那將會再更提高體驗。例如，我在銀行網頁的 CUI，直接輸入，幫我找某張信用卡資訊，那麼網頁就會自動跳到該張信用卡介紹頁，對話內容可能就會是：已經幫您導至XX 信用卡頁面，這張主要是 blah blah blah…。如此，對話跟頁面就會對得起來，也不用一直懷疑對話內容是不是正確的，然後還要去查詢。因為網頁是不是正確的，一看就知道。",[10,3611,3612],{},"基於此原理，那麼要實現「透過 CUI 客製化網站風格」的話，首先就會排除瀏覽器擴充程式的方式建立，因為會有安全性問題，瀏覽器擴充程式要跟網頁進行深度的互動一定會遇到很多限制。",[10,3614,3615],{},"再來，因為是一般網站，所以排除放在專屬應用程式裡的方式，雖然某種程度很相像，但專屬應用和一般網站仍舊有所差異，因為一般網站改變排版和風格比較容易，您可以想想如果您改變了 Excel 的排版和風格。",[10,3617,3618],{},"第三，依定也是排除專屬網頁的形式，因為整個介面都是對話，結果也在對話裡，沒辦法跟網站互動。",[10,3620,3621],{},"也就是說，要完成「透過 CUI 客製化網站風格」這件事，使用常見的「點擊按鈕展開視窗」這種會比較適合，因為是網站開發者自行建立，應該可以針對 LLM 的回應，執行下一步的互動，並且要可以儲存狀態。",[29,3623,3625],{"id":3624},"透過-cui-客製化網站風格有什麼好處和壞處","透過 CUI 客製化網站風格有什麼好處和壞處",[10,3627,3628],{},"以下只是我大概腦海一閃的想法，應該會有很大的思考不周，就當作是發想筆記也好，會陸續補充。",[10,3630,3631],{},"對開發者可能的好處：",[37,3633,3634,3643],{},[40,3635,3636,3637,3642],{},"不再需要維護多種版面，什麼 dark mode、multi style mode、圖片模式、圖文模式等，都給使用者決定就好。也就是NN Group 在「",[178,3638,3641],{"href":3639,"rel":3640,"target":183,"title":184},"https:\u002F\u002Fwww.nngroup.com\u002Farticles\u002Fgenerative-ui\u002F",[182],"Generative UI and Outcome-Oriented Design","」提到的 Generative UI (GenUI) 概念",[40,3644,3645],{},"因為只做一種版面與風格，可以將重點放在資訊的傳遞、效能以及優化 CUI 有關於業務的對話邏輯和操作上。",[10,3647,3648],{},"對開發者可能的壞處：",[37,3650,3651,3654],{},[40,3652,3653],{},"品牌識別可能要想別的方法塑造，因為網站的排版、風格甚至網站體驗都交由使用者決定了。",[40,3655,3656],{},"安全性問題：也許有可能使用者透過漏洞，對網站造成了某種影響。",[10,3658,3659],{},"對使用者可能的好處：",[37,3661,3662,3665],{},[40,3663,3664],{},"依據自身狀況，調整喜歡的顏色、排版瀏覽網頁",[40,3666,3667],{},"補強無障礙網頁技術設定不足之處，例如：透過 LLM 的程式碼功能，將原本只通過 AA 等級的，改成可以通過 AAA 等級的。",[10,3669,3670],{},"對使用者可能的壞處：",[37,3672,3673],{},[40,3674,3675],{},"開發者可能會開始偷懶，變成什麼東西都要使用者自行設定，排版變得比現在的 LandingPage 更制式化",[29,3677,3679],{"id":3678},"demo","DEMO",[10,3681,3682],{},"這是一個很笨的程式也是本篇文章發想起源，我的目的是希望當網頁不符合無障礙 AA 時，使用者可以透過 CUI 補救網頁。但這個很笨的程式只能回答出 CSS ，並且被我特意放置在最後一個引入，才能覆蓋之前的 CSS。希望透過這樣一個小 Demo，能激發出大家的靈感。",[1366,3684,3685],{},[10,3686,3687],{},[1371,3688],{"alt":3689,"src":3690},"利用生程式 AI 對話直接改變網站風格","\u002Fimages\u002Fblog\u002F33.gif",[29,3692,3277],{"id":3277},[10,3694,3695],{},"我的理想上網站會有一個客服小幫手，這個小幫手除了可以諮詢網站內容，也會自動引導，也可以改變網站外觀，甚至是要填寫內容時，就直接生成在網頁裡而不是生成在對話視窗裡等等的「下一步」動作，對話視窗內只要留下「復原」或是其他動作快捷按鈕等附加功能。因為這個「下一步」，所以開發者勢必要把精力放在 CUI 的業務對話邏輯和操作上，更近一步把斷點消除，當然，這個「下一步」在什麼時間點要吐出什麼專業的內容跟網頁互動，應該又是另一個訓練的過程，這我就不清楚了。",[10,3697,3698],{},"總之一句話，CUI 會變成網站的「控制中心」。",[29,3700,3701],{"id":3701},"參考來源",[37,3703,3704,3711],{},[40,3705,3706],{},[178,3707,3710],{"href":3708,"rel":3709,"target":183,"title":184},"https:\u002F\u002Fen.wikipedia.org\u002Fwiki\u002FConversational_user_interface",[182],"Conversational user interface",[40,3712,3713],{},[178,3714,3717],{"href":3715,"rel":3716,"target":183,"title":184},"https:\u002F\u002Fmedium.com\u002Fuxeastmeetswest\u002F59aa90c4322c",[182],"新趨勢！對話式設計的八種原則！",{"title":200,"searchDepth":201,"depth":201,"links":3719},[3720,3721,3722,3723,3724,3725,3726,3727,3728],{"id":474,"depth":204,"text":474},{"id":3500,"depth":204,"text":3501},{"id":3518,"depth":204,"text":3519},{"id":3575,"depth":204,"text":3576},{"id":3599,"depth":204,"text":3600},{"id":3624,"depth":204,"text":3625},{"id":3678,"depth":204,"text":3679},{"id":3277,"depth":204,"text":3277},{"id":3701,"depth":204,"text":3701},"2024-12-23",{},"\u002Fzh\u002Fblog\u002Fcui-change-style",{"title":3490,"description":3497},"zh\u002Fblog\u002Fcui-change-style",[222,224,223,225,3735],"CUI","gjBvdV1WY1mRMI2s3767zOCUzk0zA6lwWtXvc3y1JsE",{"id":3738,"title":3739,"body":3740,"date":3822,"description":3823,"draft":212,"extension":213,"meta":3824,"navigation":215,"ogImage":216,"path":3825,"seo":3826,"stem":3827,"tags":3828,"translationKey":216,"updatedAt":216,"__hash__":3832},"blog_zh\u002Fzh\u002Fblog\u002Fdo-i-really-need-a-generative-ai-tool-to-generate-a-full-web-design-layout.md","我真的需要一個生成式 AI 工具來產生整份網頁設計稿嗎？",{"type":7,"value":3741,"toc":3819},[3742,3750,3757,3760,3763,3766,3769,3783,3787,3790,3793,3796,3799,3802,3805,3808,3811,3814,3816],[1366,3743,3744],{},[10,3745,3746],{},[1371,3747],{"alt":3748,"src":3749},"Framer AI Landing Page","\u002Fimages\u002Fblog\u002F25.webp",[10,3751,3752],{},[178,3753,3756],{"href":3754,"rel":3755,"target":183,"title":184},"https:\u002F\u002Fwww.framer.com\u002Fai",[182],"Framer AI 介紹頁",[10,3758,3759],{},"ChatGPT 問世後，AI 各領域引起了關注，在靈感、知識、素材方面我也都有使用，非常方便。",[10,3761,3762],{},"但如今我試用了 Framer AI 之後，我的心裡有這種念頭出現：",[10,3764,3765],{},"「我真的需要一個生成式 AI 工具來產生整份網頁設計稿嗎？」",[10,3767,3768],{},"這個議題很廣，而且目前各廠商都只是在試驗各種可能，但我用完之後是非常明確產生了這個疑惑。考量到的點有：",[37,3770,3771,3774,3777,3780],{},[40,3772,3773],{},"如何維護？\n先假設 AI 產出了一個符合我心中 100% 的 UI ，這種情況下如果我只是要修改某個頁面內容，但又不想要破壞整體性，該如何下 prompt？變成我的心思都在想怎麼 prompt，不是專注在設計修正。",[40,3775,3776],{},"複雜頁面給的 prompt 會不會太複雜？\n比方說我給了以下一段文字：\n「請使用極簡風格、溫暖色調製作網頁，網頁內容必須有頁首、主要內容、頁尾區塊，頁首要有 logo 、選單，選單內的選項要有網站導覽、常見問答、登入，頁尾要深色背景、有logo、隱私權政策連結、copyright 資訊。主要內容分為…」\n我打到這裡手就痠了，要產出一個我真正想要的內容，必須很深入的描述整個頁面結構，可能要寫出一篇作文了。這跟用 AI 生成照片的過程，CP 值差太多了，然後部分頁面是我要的、部分頁面不是，又回到如何維護問題。",[40,3778,3779],{},"電腦效能，設計資源落差將擴大！\n跑繪圖電腦本身就要有一點等級，再加上 AI ，效能當然要夠強，才能節省時間，然後每次提到這個我們都會想到「啊～以後的電腦運算能力會多強多強…以後就很快很輕鬆」，包含我自己也會這樣，但我們也常忽略軟體面也會更新，所以根本沒有所謂的「很快很輕鬆」這回事。\n另外，我們也常忽略的通用設計議題，當一個地區或某些人用的設備可能稍微老舊，就可能沒辦法用到新的技術，資源取用就產生落差。",[40,3781,3782],{},"生成出來的包含 RWD ，有必要一開始就生成這些？\n內容都還沒確定下來就在想 RWD 真的是太早了。",[29,3784,3786],{"id":3785},"快速心得是這樣子所以來下個結論","快速心得是這樣子，所以來下個結論",[10,3788,3789],{},"局部特殊鑽研的 AI 功能對於網頁設計來說可能才是好事，較具有靈活性，負擔也比較不會那麼重。",[10,3791,3792],{},"例如，我先使用專門研究設計系統的 AI ，產出一份我要的設計系統，包含規範、文件和元件庫，然後請 AI 記住以後都要遵循這個最高原則實行。",[10,3794,3795],{},"當我設計 Hero 區塊時，生成 Hero 區塊的幾個排版讓我選擇，其中細項修正例如照片去除物體、影片加聲音、插圖換姿勢、目標物視角修正等還可以用 AI 調整。",[10,3797,3798],{},"使用目前已經很流行的 ChatGPT，幫忙文案 SEO 最佳化。",[10,3800,3801],{},"將某個區域選取，請 AI 幫我根據設計系統重新修正，包含排版、文案、按鈕位置等。",[10,3803,3804],{},"這些都確定後，再用專門產出 RWD 的 AI，選擇參照哪個設計系統，幫我產出網頁 RWD 用、原生行動裝置使用的各項尺寸 UI 稿、原生行動裝置需要用的圖檔等。所以我只需要維護內容最主要、最多的畫面就好，其他用生成的。",[10,3806,3807],{},"而以上的這些功能，以 Figma 來說，都只是 plugin 而已，無用無損失，局部 AI 也降低電腦使用的負擔，也激發很多人開發更好用的 Plugin，即便之後 Plugin 沒有維護了，也很容易取得新的替代品，就算沒有替代品，也就是回歸到原本的狀態而已。而又因為我們使用了 AI 產出設計系統，除非 Figma 重大更新，例如命名規則功能產生變化，不然外掛不能用都是小事罷了。",[10,3809,3810],{},"也就是說，對於我而言，工具的靈活性才會是重點，因為設計師的腦不斷的在發想，隨時就需要快速修正與驗證。當然 Framer 也可能只是先推出這個 MVP ，再進行後續優化，到時當然樂見其成。",[10,3812,3813],{},"現在來正式回答一下問題：",[10,3815,3765],{},[10,3817,3818],{},"「我不需要，請讓我專注在需要解決的問題，而不是寫 prompt 作文。」",{"title":200,"searchDepth":201,"depth":201,"links":3820},[3821],{"id":3785,"depth":204,"text":3786},"2023-06-16","試用 Framer AI 產生整份網頁設計稿後的心得：生成式 AI 在靈感、知識與素材上很方便，但要它直接產出一整份設計稿，真的是我需要的嗎？",{},"\u002Fzh\u002Fblog\u002Fdo-i-really-need-a-generative-ai-tool-to-generate-a-full-web-design-layout",{"title":3739,"description":3823},"zh\u002Fblog\u002Fdo-i-really-need-a-generative-ai-tool-to-generate-a-full-web-design-layout",[3829,1491,3830,3831],"網頁設計","Generative AI","Framer","-nMRUNe5A6mDeaD93ypy-X586O64ZHS4hox9y84M1Jg",{"id":3834,"title":3835,"body":3836,"date":4639,"description":4640,"draft":212,"extension":213,"meta":4641,"navigation":215,"ogImage":216,"path":4642,"seo":4643,"stem":4644,"tags":4645,"translationKey":216,"updatedAt":216,"__hash__":4649},"blog_zh\u002Fzh\u002Fblog\u002Fwhy-i-love-emoji.md","為什麼我愛上了在設計與切版時使用 Emoji",{"type":7,"value":3837,"toc":4632},[3838,3841,3844,3848,3857,3871,3874,3878,3881,3884,3892,3900,3913,3916,3919,3922,3926,3929,4086,4089,4155,4161,4243,4246,4327,4330,4402,4405,4476,4484,4488,4496,4499,4503,4506,4514,4517,4524,4527,4530,4533,4536,4539,4542,4550,4593,4596,4622,4625,4628],[10,3839,3840],{},"越少依賴，就越不會出問題，且越貼心。",[10,3842,3843],{},"自從專注在無障礙網頁設計之後，始終有一個問題一直盤旋在我的腦海裡，那就是「要如何使用 icon 才能達成好的無障礙設計體驗？」，而在回答這個問題之前，則是要先理解什麼是 icon 以及 icon 會如何影響整個網站視覺。",[29,3845,3847],{"id":3846},"什麼是-icon","什麼是 icon ?",[10,3849,3850,3851,3856],{},"根據",[178,3852,3855],{"href":3853,"rel":3854,"target":183,"title":184},"https:\u002F\u002Fzh.wikipedia.org\u002Fzh-tw\u002F%E5%9C%96%E7%A4%BA",[182],"維基百科","定義：",[722,3858,3859],{},[10,3860,3861,3862,3864,3865,3867,3868,3870],{},"圖示（icon，中國大陸、香港作圖標）：",[516,3863],{},"\n廣義上指所有「有指示作用」的標誌，",[516,3866],{},"\n在中文中，一般指電腦螢幕的桌面上，",[516,3869],{},"\n用來「指示」使用者執行各種操作的圖像，作為字元顯示的「重要輔助」。",[10,3872,3873],{},"應該蠻好理解的，也就是「有指示、輔助作用的標誌」。但同時也點出了第一個問題：icon 很常被拿來純裝飾用，或單獨使用。",[29,3875,3877],{"id":3876},"icon-會如何影響整個網站視覺","icon 會如何影響整個網站視覺？",[10,3879,3880],{},"既然是輔助性質，那當然就是 icon 要去搭配主要視覺。",[10,3882,3883],{},"例如主視覺是可愛、活潑，通常都會搭配圓角、線條相較粗的 icon，如果主視覺偏向精明幹練、專業的話，通常會搭配直角、線條較細的 icon，來保持整個網站風格的一致性。",[1366,3885,3886],{},[10,3887,3888],{},[1371,3889],{"alt":3890,"src":3891},"icon 風格範例，線條外框類型，可愛圓潤","\u002Fimages\u002Fblog\u002F22.webp",[1366,3893,3894],{},[10,3895,3896],{},[1371,3897],{"alt":3898,"src":3899},"icon 風格範例，線條外框類型，銳利幹練","\u002Fimages\u002Fblog\u002F23.webp",[10,3901,3902,3903,3907,3908,3912],{},"一樣都是線條類型的icon，第一張圖呈現風格較為可愛圓潤(\n",[178,3904,482],{"href":3905,"rel":3906,"target":183,"title":184},"https:\u002F\u002Fdesignmodo.com\u002Flinecons-free\u002F",[182]," )、第二張圖則銳利幹練(\n",[178,3909,482],{"href":3910,"rel":3911,"target":183,"title":184},"https:\u002F\u002Fdocs.microsoft.com\u002Fen-us\u002Fwindows\u002Fapps\u002Fdesign\u002Fstyle\u002Ficons",[182],"\n)",[10,3914,3915],{},"所以通常不建議使用兩種以上的 icon 系統，因爲會讓視覺上有怪異的地方，即使是相同系列的 icon，只要粗細不同，體驗就會差異相當大。這裡引出了第二個問題點：切版維護時 icon 不夠用，就會自建或拿別套 icon 來使用。",[10,3917,3918],{},"理解了前兩個問題後，回到了我們的核心問題，因為設計跟切版都會影響到，考量切版層面會碰到比較多問題，所以先從切版的角度切入，最後回頭影響設計實務上會比較合理一點。",[10,3920,3921],{},"先整理一下剛剛碰到的問題：",[29,3923,3925],{"id":3924},"_1-icon-很常被拿來純裝飾用或單獨使用","1. icon 很常被拿來純裝飾用，或單獨使用：",[10,3927,3928],{},"如果只是被拿來用成背景裝飾，那不太會有問題，因為就只是個裝飾，不需要去解釋，有問題的會是在單獨使用，在做無障礙網頁設計時，一般建議 icon 與文字一起使用，或是文字在畫面上隱藏，但在報讀軟體中會讀出來。",[3930,3931,3935],"pre",{"className":3932,"code":3933,"language":3934,"meta":200,"style":200},"language-html shiki shiki-themes github-light github-dark","\u003C!-- icon 與 文字一起使用 -->\n\u003Cbutton>\n  \u003Cspan>訂閱電子郵件\u003C\u002Fspan>\n  \u003Ci class=\"xxx\">\u003C\u002Fi>\n\u003C\u002Fbutton>\n\n\u003C!-- 文字在畫面上隱藏，但在報讀軟體中會讀出來 -->\n\u003Cbutton>\n  \u003Cspan class=\"visually-hidden\">訂閱電子郵件\u003C\u002Fspan>\n  \u003Ci class=\"xxx\" aria-hidden=\"true\">\u003C\u002Fi>\n\u003C\u002Fbutton>\n","html",[1526,3936,3937,3946,3959,3973,3999,4009,4015,4021,4030,4050,4077],{"__ignoreMap":200},[3938,3939,3942],"span",{"class":3940,"line":3941},"line",1,[3938,3943,3945],{"class":3944},"sdCPZ","\u003C!-- icon 與 文字一起使用 -->\n",[3938,3947,3948,3952,3956],{"class":3940,"line":201},[3938,3949,3951],{"class":3950},"ssxIu","\u003C",[3938,3953,3955],{"class":3954},"sk71V","button",[3938,3957,3958],{"class":3950},">\n",[3938,3960,3961,3964,3966,3969,3971],{"class":3940,"line":204},[3938,3962,3963],{"class":3950},"  \u003C",[3938,3965,3938],{"class":3954},[3938,3967,3968],{"class":3950},">訂閱電子郵件\u003C\u002F",[3938,3970,3938],{"class":3954},[3938,3972,3958],{"class":3950},[3938,3974,3976,3978,3981,3985,3988,3992,3995,3997],{"class":3940,"line":3975},4,[3938,3977,3963],{"class":3950},[3938,3979,3980],{"class":3954},"i",[3938,3982,3984],{"class":3983},"sIsaT"," class",[3938,3986,3987],{"class":3950},"=",[3938,3989,3991],{"class":3990},"sJ6F3","\"xxx\"",[3938,3993,3994],{"class":3950},">\u003C\u002F",[3938,3996,3980],{"class":3954},[3938,3998,3958],{"class":3950},[3938,4000,4002,4005,4007],{"class":3940,"line":4001},5,[3938,4003,4004],{"class":3950},"\u003C\u002F",[3938,4006,3955],{"class":3954},[3938,4008,3958],{"class":3950},[3938,4010,4012],{"class":3940,"line":4011},6,[3938,4013,4014],{"emptyLinePlaceholder":215},"\n",[3938,4016,4018],{"class":3940,"line":4017},7,[3938,4019,4020],{"class":3944},"\u003C!-- 文字在畫面上隱藏，但在報讀軟體中會讀出來 -->\n",[3938,4022,4024,4026,4028],{"class":3940,"line":4023},8,[3938,4025,3951],{"class":3950},[3938,4027,3955],{"class":3954},[3938,4029,3958],{"class":3950},[3938,4031,4033,4035,4037,4039,4041,4044,4046,4048],{"class":3940,"line":4032},9,[3938,4034,3963],{"class":3950},[3938,4036,3938],{"class":3954},[3938,4038,3984],{"class":3983},[3938,4040,3987],{"class":3950},[3938,4042,4043],{"class":3990},"\"visually-hidden\"",[3938,4045,3968],{"class":3950},[3938,4047,3938],{"class":3954},[3938,4049,3958],{"class":3950},[3938,4051,4053,4055,4057,4059,4061,4063,4066,4068,4071,4073,4075],{"class":3940,"line":4052},10,[3938,4054,3963],{"class":3950},[3938,4056,3980],{"class":3954},[3938,4058,3984],{"class":3983},[3938,4060,3987],{"class":3950},[3938,4062,3991],{"class":3990},[3938,4064,4065],{"class":3983}," aria-hidden",[3938,4067,3987],{"class":3950},[3938,4069,4070],{"class":3990},"\"true\"",[3938,4072,3994],{"class":3950},[3938,4074,3980],{"class":3954},[3938,4076,3958],{"class":3950},[3938,4078,4080,4082,4084],{"class":3940,"line":4079},11,[3938,4081,4004],{"class":3950},[3938,4083,3955],{"class":3954},[3938,4085,3958],{"class":3950},[10,4087,4088],{},"但實務上也會碰到這樣的情況：",[3930,4090,4092],{"className":3932,"code":4091,"language":3934,"meta":200,"style":200},"\u003C!-- 文字在畫面上隱藏，但在報讀軟體中會讀出來 -->\n\u003Cbutton>\n  \u003Cspan class=\"visually-hidden\">訂閱電子郵件\u003C\u002Fspan>\n  \u003Csvg>\n    ...\n  \u003C\u002Fsvg>\n\u003C\u002Fbutton>\n",[1526,4093,4094,4098,4106,4124,4133,4138,4147],{"__ignoreMap":200},[3938,4095,4096],{"class":3940,"line":3941},[3938,4097,4020],{"class":3944},[3938,4099,4100,4102,4104],{"class":3940,"line":201},[3938,4101,3951],{"class":3950},[3938,4103,3955],{"class":3954},[3938,4105,3958],{"class":3950},[3938,4107,4108,4110,4112,4114,4116,4118,4120,4122],{"class":3940,"line":204},[3938,4109,3963],{"class":3950},[3938,4111,3938],{"class":3954},[3938,4113,3984],{"class":3983},[3938,4115,3987],{"class":3950},[3938,4117,4043],{"class":3990},[3938,4119,3968],{"class":3950},[3938,4121,3938],{"class":3954},[3938,4123,3958],{"class":3950},[3938,4125,4126,4128,4131],{"class":3940,"line":3975},[3938,4127,3963],{"class":3950},[3938,4129,4130],{"class":3954},"svg",[3938,4132,3958],{"class":3950},[3938,4134,4135],{"class":3940,"line":4001},[3938,4136,4137],{"class":3950},"    ...\n",[3938,4139,4140,4143,4145],{"class":3940,"line":4011},[3938,4141,4142],{"class":3950},"  \u003C\u002F",[3938,4144,4130],{"class":3954},[3938,4146,3958],{"class":3950},[3938,4148,4149,4151,4153],{"class":3940,"line":4017},[3938,4150,4004],{"class":3950},[3938,4152,3955],{"class":3954},[3938,4154,3958],{"class":3950},[10,4156,4157,4158,4160],{},"然後因為 freego 掃描時會去掃 ",[1526,4159,3211],{},"，會發現沒有 title，然後 svg 的 title 又要放在第一個子項目，所以又要改成：",[3930,4162,4164],{"className":3932,"code":4163,"language":3934,"meta":200,"style":200},"\u003C!-- 文字在畫面上隱藏，但在報讀軟體中會讀出來 -->\n\u003C!-- 文字在畫面上隱藏，但在報讀軟體中會讀出來 -->\n\u003Cbutton>\n  \u003Cspan class=\"visually-hidden\">訂閱電子郵件\u003C\u002Fspan>\n  \u003Csvg>\n    \u003Ctitle>email icon\u003C\u002Ftitle>\n    ...\n  \u003C\u002Fsvg>\n\u003C\u002Fbutton>\n",[1526,4165,4166,4170,4174,4182,4200,4208,4223,4227,4235],{"__ignoreMap":200},[3938,4167,4168],{"class":3940,"line":3941},[3938,4169,4020],{"class":3944},[3938,4171,4172],{"class":3940,"line":201},[3938,4173,4020],{"class":3944},[3938,4175,4176,4178,4180],{"class":3940,"line":204},[3938,4177,3951],{"class":3950},[3938,4179,3955],{"class":3954},[3938,4181,3958],{"class":3950},[3938,4183,4184,4186,4188,4190,4192,4194,4196,4198],{"class":3940,"line":3975},[3938,4185,3963],{"class":3950},[3938,4187,3938],{"class":3954},[3938,4189,3984],{"class":3983},[3938,4191,3987],{"class":3950},[3938,4193,4043],{"class":3990},[3938,4195,3968],{"class":3950},[3938,4197,3938],{"class":3954},[3938,4199,3958],{"class":3950},[3938,4201,4202,4204,4206],{"class":3940,"line":4001},[3938,4203,3963],{"class":3950},[3938,4205,4130],{"class":3954},[3938,4207,3958],{"class":3950},[3938,4209,4210,4213,4216,4219,4221],{"class":3940,"line":4011},[3938,4211,4212],{"class":3950},"    \u003C",[3938,4214,4215],{"class":3954},"title",[3938,4217,4218],{"class":3950},">email icon\u003C\u002F",[3938,4220,4215],{"class":3954},[3938,4222,3958],{"class":3950},[3938,4224,4225],{"class":3940,"line":4017},[3938,4226,4137],{"class":3950},[3938,4228,4229,4231,4233],{"class":3940,"line":4023},[3938,4230,4142],{"class":3950},[3938,4232,4130],{"class":3954},[3938,4234,3958],{"class":3950},[3938,4236,4237,4239,4241],{"class":3940,"line":4032},[3938,4238,4004],{"class":3950},[3938,4240,3955],{"class":3954},[3938,4242,3958],{"class":3950},[10,4244,4245],{},"然後 svg title 又不希望被報讀出來，所以再改一次：",[3930,4247,4249],{"className":3932,"code":4248,"language":3934,"meta":200,"style":200},"\u003C!-- 文字在畫面上隱藏，但在報讀軟體中會讀出來 -->\n\u003Cbutton>\n  \u003Cspan class=\"visually-hidden\">訂閱電子郵件\u003C\u002Fspan>\n  \u003Csvg aria-hidden=\"true\">\n    \u003Ctitle>email icon\u003C\u002Ftitle>\n    ...\n  \u003C\u002Fsvg>\n\u003C\u002Fbutton>\n",[1526,4250,4251,4255,4263,4281,4295,4307,4311,4319],{"__ignoreMap":200},[3938,4252,4253],{"class":3940,"line":3941},[3938,4254,4020],{"class":3944},[3938,4256,4257,4259,4261],{"class":3940,"line":201},[3938,4258,3951],{"class":3950},[3938,4260,3955],{"class":3954},[3938,4262,3958],{"class":3950},[3938,4264,4265,4267,4269,4271,4273,4275,4277,4279],{"class":3940,"line":204},[3938,4266,3963],{"class":3950},[3938,4268,3938],{"class":3954},[3938,4270,3984],{"class":3983},[3938,4272,3987],{"class":3950},[3938,4274,4043],{"class":3990},[3938,4276,3968],{"class":3950},[3938,4278,3938],{"class":3954},[3938,4280,3958],{"class":3950},[3938,4282,4283,4285,4287,4289,4291,4293],{"class":3940,"line":3975},[3938,4284,3963],{"class":3950},[3938,4286,4130],{"class":3954},[3938,4288,4065],{"class":3983},[3938,4290,3987],{"class":3950},[3938,4292,4070],{"class":3990},[3938,4294,3958],{"class":3950},[3938,4296,4297,4299,4301,4303,4305],{"class":3940,"line":4001},[3938,4298,4212],{"class":3950},[3938,4300,4215],{"class":3954},[3938,4302,4218],{"class":3950},[3938,4304,4215],{"class":3954},[3938,4306,3958],{"class":3950},[3938,4308,4309],{"class":3940,"line":4011},[3938,4310,4137],{"class":3950},[3938,4312,4313,4315,4317],{"class":3940,"line":4017},[3938,4314,4142],{"class":3950},[3938,4316,4130],{"class":3954},[3938,4318,3958],{"class":3950},[3938,4320,4321,4323,4325],{"class":3940,"line":4023},[3938,4322,4004],{"class":3950},[3938,4324,3955],{"class":3954},[3938,4326,3958],{"class":3950},[10,4328,4329],{},"或是乾脆直接在 svg 使用 aria-labelledby：",[3930,4331,4333],{"className":3932,"code":4332,"language":3934,"meta":200,"style":200},"\u003C!-- 文字在畫面上隱藏，但在報讀軟體中會讀出來 -->\n\u003Cbutton>\n  \u003Csvg aria-labelledby=\"abc\">\n    \u003Ctitle id=\"abc\">email icon\u003C\u002Ftitle>\n    ...\n  \u003C\u002Fsvg>\n\u003C\u002Fbutton>\n",[1526,4334,4335,4339,4347,4363,4382,4386,4394],{"__ignoreMap":200},[3938,4336,4337],{"class":3940,"line":3941},[3938,4338,4020],{"class":3944},[3938,4340,4341,4343,4345],{"class":3940,"line":201},[3938,4342,3951],{"class":3950},[3938,4344,3955],{"class":3954},[3938,4346,3958],{"class":3950},[3938,4348,4349,4351,4353,4356,4358,4361],{"class":3940,"line":204},[3938,4350,3963],{"class":3950},[3938,4352,4130],{"class":3954},[3938,4354,4355],{"class":3983}," aria-labelledby",[3938,4357,3987],{"class":3950},[3938,4359,4360],{"class":3990},"\"abc\"",[3938,4362,3958],{"class":3950},[3938,4364,4365,4367,4369,4372,4374,4376,4378,4380],{"class":3940,"line":3975},[3938,4366,4212],{"class":3950},[3938,4368,4215],{"class":3954},[3938,4370,4371],{"class":3983}," id",[3938,4373,3987],{"class":3950},[3938,4375,4360],{"class":3990},[3938,4377,4218],{"class":3950},[3938,4379,4215],{"class":3954},[3938,4381,3958],{"class":3950},[3938,4383,4384],{"class":3940,"line":4001},[3938,4385,4137],{"class":3950},[3938,4387,4388,4390,4392],{"class":3940,"line":4011},[3938,4389,4142],{"class":3950},[3938,4391,4130],{"class":3954},[3938,4393,3958],{"class":3950},[3938,4395,4396,4398,4400],{"class":3940,"line":4017},[3938,4397,4004],{"class":3950},[3938,4399,3955],{"class":3954},[3938,4401,3958],{"class":3950},[10,4403,4404],{},"或是直接放棄，就還是維持 icon 搭配文字：",[3930,4406,4408],{"className":3932,"code":4407,"language":3934,"meta":200,"style":200},"\u003Cbutton>\n  \u003Cspan>訂閱電子郵件\u003C\u002Fspan>\n  \u003Csvg aria-hidden=\"true\">\n    \u003Ctitle>email icon\u003C\u002Ftitle>\n    ...\n  \u003C\u002Fsvg>\n\u003C\u002Fbutton>\n",[1526,4409,4410,4418,4430,4444,4456,4460,4468],{"__ignoreMap":200},[3938,4411,4412,4414,4416],{"class":3940,"line":3941},[3938,4413,3951],{"class":3950},[3938,4415,3955],{"class":3954},[3938,4417,3958],{"class":3950},[3938,4419,4420,4422,4424,4426,4428],{"class":3940,"line":201},[3938,4421,3963],{"class":3950},[3938,4423,3938],{"class":3954},[3938,4425,3968],{"class":3950},[3938,4427,3938],{"class":3954},[3938,4429,3958],{"class":3950},[3938,4431,4432,4434,4436,4438,4440,4442],{"class":3940,"line":204},[3938,4433,3963],{"class":3950},[3938,4435,4130],{"class":3954},[3938,4437,4065],{"class":3983},[3938,4439,3987],{"class":3950},[3938,4441,4070],{"class":3990},[3938,4443,3958],{"class":3950},[3938,4445,4446,4448,4450,4452,4454],{"class":3940,"line":3975},[3938,4447,4212],{"class":3950},[3938,4449,4215],{"class":3954},[3938,4451,4218],{"class":3950},[3938,4453,4215],{"class":3954},[3938,4455,3958],{"class":3950},[3938,4457,4458],{"class":3940,"line":4001},[3938,4459,4137],{"class":3950},[3938,4461,4462,4464,4466],{"class":3940,"line":4011},[3938,4463,4142],{"class":3950},[3938,4465,4130],{"class":3954},[3938,4467,3958],{"class":3950},[3938,4469,4470,4472,4474],{"class":3940,"line":4017},[3938,4471,4004],{"class":3950},[3938,4473,3955],{"class":3954},[3938,4475,3958],{"class":3950},[10,4477,4478,4479],{},"相信到這裡你已經發現到，光是這樣一個簡單的情境，就可以使用很多種不同的方式寫出來，甚至還會被規則、掃描軟體所影響，逼得你不得不拐很多彎才能達成。可以參考一下光是無障礙設計，Font Awesome 就得花一大篇幅再寫注意事項。",[178,4480,4483],{"href":4481,"rel":4482,"target":183,"title":184},"https:\u002F\u002Ffontawesome.com\u002Fdocs\u002Fweb\u002Fdig-deeper\u002Faccessibility",[182],"Font Awesome文件",[29,4485,4487],{"id":4486},"_2-切版維護時-icon-不夠用就會自建或拿別套-icon來使用","2. 切版維護時 icon 不夠用，就會自建或拿別套 icon 來使用。",[10,4489,4490,4491,4495],{},"這是很難避免的一種情形，例如客製化的軟體、不講武德的客戶或是專有名詞但又想要有個 icon ，面臨到這種問題時，比較在乎的可能就會自己模擬 icon 風格，畫完送進去類似 icoMoon(",[178,4492,482],{"href":4493,"rel":4494,"target":183,"title":184},"https:\u002F\u002Ficomoon.io\u002F",[182],") 的工具產出 iconfont，再引入到檔案。\n而不在乎、趕時間、或是原本使用 fontawesome 但本身 UI Framework 也有提供 icon的情況，就會直接去拿另一套 icon 來引入，就會造成風格混亂。",[10,4497,4498],{},"以上兩個問題，還只是從最源頭的問題發現的，接下來還有實作上的問題，\n讓我們來一一釐清。",[29,4500,4502],{"id":4501},"_3-引入一套-iconfont就會耗損工時","3. 引入一套 iconFont ，就會耗損工時",[10,4504,4505],{},"就拿最常見的 Font Awesome，最新版本還要先到後台設定才能開始引入：",[1366,4507,4508],{},[10,4509,4510],{},[1371,4511],{"alt":4512,"src":4513},"Font Awesome 6 要先進到設定裡面","\u002Fimages\u002Fblog\u002F24.webp",[10,4515,4516],{},"要進到這裡來，你還得先經過註冊帳號的一系列流程，最後才能拿到手應用。再來，應用時，又有分 Html 、Vue 或是 React。",[10,4518,4519,4520,4523],{},"以 Vue 為例，可能還要先跟團隊決定是要用 component 形式的寫法，或是一樣使用平常比較習慣的寫法 ",[1526,4521,4522],{},"\u003Ci class=”xxx”>\u003C\u002Fi>","，然後寫程式的期間，後者還會碰到有時候沒轉成 svg 的情形（因為 watch 只有一開始偵測到才變成 svg）。",[10,4525,4526],{},"再來，import 的時候，可能還要專門弄一個 plugin 檔案（Nuxt 專案的話），接著，又可能會碰到 typescript 的問題跟其他問題，因為層層依賴，所以會有各式各樣的 bug 等著。",[10,4528,4529],{},"再再來，每次用的時候，都要把 Font Awesome官網開起來以便隨時查詢代碼、複製代碼或下載圖檔。",[10,4531,4532],{},"再再再來，如果客戶使用環境是不能對外連網，就得把整包載入。",[10,4534,4535],{},"再再再再來，客戶使用的是 IE 為大宗……….",[10,4537,4538],{},"以上這些，如果目前正在閱讀的你是前端設計師\u002F前端工程師，可以回想看看，這些時間是不是都浪費掉了。",[10,4540,4541],{},"我踩過了這些坑，痛到不行。",[10,4543,4544,4545,4549],{},"所以後來團隊在開發 Piman (",[178,4546,482],{"href":4547,"rel":4548,"target":183,"title":184},"https:\u002F\u002Fbpio.gitbook.io\u002Fpiman\u002F",[182],") 無障礙 UI 框架和延伸的專案時，我們盡量直接使用 Emoji，為什麼呢？",[37,4551,4552,4560,4563,4566,4569,4572,4575,4578,4586],{},[40,4553,4554,4555],{},"符合使用者當下使用的作業系統、服務：emoji 會隨著不同環境而改變，這是最自然的方式。",[178,4556,4559],{"href":4557,"rel":4558,"target":183,"title":184},"https:\u002F\u002Femojipedia.org\u002Fcaniemoji\u002F",[182],"查詢 emoji 是否可用",[40,4561,4562],{},"沒有依賴關係：因為是 Unicode。",[40,4564,4565],{},"不用需要前置作業：因為是 Unicode 。",[40,4567,4568],{},"不用考慮瀏覽器能不能用：因為是 Unicode。",[40,4570,4571],{},"不需要考量寫法或是怎麼通過無障礙設計規範：因為是 Unicode。",[40,4573,4574],{},"依然可以展現出想表達的意思：例如 page 404 就可以用個尷尬的笑臉，報讀軟體也會把這個「情緒」給表達出來。",[40,4576,4577],{},"現代人已經用的非常習慣，甚至取代貼圖了，辨識度佳。",[40,4579,4580,4581,4585],{},"可以無痛轉換風格，例如使用 Google Noto Emoji ",[178,4582,482],{"href":4583,"rel":4584,"target":183,"title":184},"https:\u002F\u002Ffonts.google.com\u002Fnoto\u002Fspecimen\u002FNoto+Emoji",[182],"，同樣的使用方式，轉換成不同的風格，不用改寫任何一個 html 內容，只需要引入 font 和寫 font-family。",[40,4587,4588,4589],{},"可使用快捷鍵快速尋找。",[178,4590,482],{"href":4591,"rel":4592,"target":183,"title":184},"https:\u002F\u002Fmrmad.com.tw\u002Fmac-emoji-shortcut",[182],[10,4594,4595],{},"當然，缺點也是有的：",[37,4597,4598,4601,4604,4607,4615],{},[40,4599,4600],{},"可能會喪失視覺風格一制性：雖然有這個疑慮，但我個人覺得還好，因為就是視為 emoji 就是個顏文字而已，不是「特別」使用的圖示，所以不太會破壞主視覺。",[40,4602,4603],{},"還是解決不了 icon 不夠用的情形，尤其是客製化的情形，而且 Emoji 會隨著環境變化，反而使這個問題更糟，例如在 IE 可能就是黑白，但客製化的 icon 卻是彩色的這種尷尬情況。",[40,4605,4606],{},"Noto Emoji 載入完畢前，呈現會是系統的 emoji 樣式。",[40,4608,4609,4610],{},"舊版本或不同服務可能會缺少某些 Emoji，所以不能挑太特別的使用。",[178,4611,4614],{"href":4612,"rel":4613,"target":183,"title":184},"https:\u002F\u002Fccc.technews.tw\u002F2018\u002F07\u002F10\u002Fwhy-emoji-look-different-on-every-platform\u002F",[182],"參考資料",[40,4616,4617,4618],{},"太多的表情符號會造成困擾，只能適時使用，必要時使用 aria-hidden。",[178,4619,4614],{"href":4620,"rel":4621,"target":183,"title":184},"https:\u002F\u002Fblog.easterseals.com\u002Femojis-and-accessibility-the-dos-and-donts-of-including-emojis-in-texts-and-emails\u002F",[182],[10,4623,4624],{},"結論\n我個人還是看好在無障礙網頁設計上使用 Emoji ，總體來說利大於弊，而且能有效降低工時、減少依賴，可以把時間、資源留給優先度更高的事。而在無障礙網頁設計、web3 必定是未來趨勢的前提下，相信 Emoji 的發展會更蓬勃、更多元！",[10,4626,4627],{},"UI 設計師\u002F前端設計師\u002F前端工程師的你會怎麼想這議題呢？歡迎一起討論！",[4629,4630,4631],"style",{},"html pre.shiki code .sdCPZ, html code.shiki .sdCPZ{--shiki-default:#6A737D;--shiki-github-dark:#6A737D}html pre.shiki code .ssxIu, html code.shiki .ssxIu{--shiki-default:#24292E;--shiki-github-dark:#E1E4E8}html pre.shiki code .sk71V, html code.shiki .sk71V{--shiki-default:#22863A;--shiki-github-dark:#85E89D}html pre.shiki code .sIsaT, html code.shiki .sIsaT{--shiki-default:#6F42C1;--shiki-github-dark:#B392F0}html pre.shiki code .sJ6F3, html code.shiki .sJ6F3{--shiki-default:#032F62;--shiki-github-dark:#9ECBFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .github-dark .shiki span {color: var(--shiki-github-dark);background: var(--shiki-github-dark-bg);font-style: var(--shiki-github-dark-font-style);font-weight: var(--shiki-github-dark-font-weight);text-decoration: var(--shiki-github-dark-text-decoration);}html.github-dark .shiki span {color: var(--shiki-github-dark);background: var(--shiki-github-dark-bg);font-style: var(--shiki-github-dark-font-style);font-weight: var(--shiki-github-dark-font-weight);text-decoration: var(--shiki-github-dark-text-decoration);}",{"title":200,"searchDepth":201,"depth":201,"links":4633},[4634,4635,4636,4637,4638],{"id":3846,"depth":204,"text":3847},{"id":3876,"depth":204,"text":3877},{"id":3924,"depth":204,"text":3925},{"id":4486,"depth":204,"text":4487},{"id":4501,"depth":204,"text":4502},"2022-07-02","從無障礙設計的角度探討 icon 對網站視覺與體驗的影響，以及為什麼我在設計與切版時改用 Emoji——越少依賴，越不容易出問題，也更貼心。",{},"\u002Fzh\u002Fblog\u002Fwhy-i-love-emoji",{"title":3835,"description":4640},"zh\u002Fblog\u002Fwhy-i-love-emoji",[222,224,4646,4647,4648],"icon","FontAwesome","Emoji","mm7x--Dn-_vZ2bu0Ud3kzzw41rxRATkLMkctudmD3rg",{"id":4651,"title":4652,"body":4653,"date":4937,"description":4659,"draft":212,"extension":213,"meta":4938,"navigation":215,"ogImage":216,"path":4939,"seo":4940,"stem":4941,"tags":4942,"translationKey":216,"updatedAt":216,"__hash__":4948},"blog_zh\u002Fzh\u002Fblog\u002Fballpark-intro.md","Ballpark — 適合線上驗證想法的問卷服務",{"type":7,"value":4654,"toc":4926},[4655,4657,4660,4667,4670,4673,4686,4689,4693,4700,4703,4706,4718,4722,4725,4728,4737,4740,4744,4747,4760,4763,4766,4779,4792,4805,4809,4812,4825,4828,4841,4844,4857,4860,4868,4871,4875,4888,4892,4895,4902,4910,4914,4917,4920,4923],[29,4656,474],{"id":474},[10,4658,4659],{},"前幾天收到 Prototypr.io 電子報，發表了一款線上問卷新服務。來寫寫快速使用後的心得。",[10,4661,4662],{},[178,4663,4666],{"href":4664,"rel":4665,"target":183,"title":184},"https:\u002F\u002Fballparkhq.com\u002F",[182],"Ballpark 官網",[10,4668,4669],{},"一看到這封電子報，還沒來得及看完內容我就迫不及待點 CTA 按鈕了！",[10,4671,4672],{},"內容如下：",[1366,4674,4675,4681],{},[10,4676,4677],{},[1371,4678],{"alt":4679,"src":4680},"Prototypr.io 介紹 Ballpark","\u002Fimages\u002Fblog\u002F11.webp",[2930,4682,4683],{},[10,4684,4685],{},"Prototypr.io 電子報，內容提及了 Ballpark 可以把問卷跟 Figma Prototypes 做結合。",[10,4687,4688],{},"嘿！這實在是太香了，以下娓娓道來有夠香的原因：",[29,4690,4692],{"id":4691},"beta-版","Beta 版",[10,4694,4695],{},[178,4696,4699],{"href":4697,"rel":4698,"target":183,"title":184},"https:\u002F\u002Fballparkhq.com\u002Fpricing",[182],"價格",[10,4701,4702],{},"有點養套殺節奏，但 Free 版本我覺得非常適合個人、小型工作室以及敏捷開發收集回饋使用。",[10,4704,4705],{},"雖然只能建立一個 Project 而且不能封存，但是 Responses 跟 Team members 都是 Unlimited，也就是說可以利用這個服務跟團隊一起快速驗證假設，之後要再開新專案，就先自己手動整理一下資料，或是申請新信箱。",[1366,4707,4708,4713],{},[10,4709,4710],{},[1371,4711],{"alt":4712,"src":4680},"Ballpark 免費版 0 元",[2930,4714,4715],{},[10,4716,4717],{},"免費版本雖然只能用一個專案，但其他優點覺得很可以！",[29,4719,4721],{"id":4720},"問卷與-prototype-自然的融入體驗無斷點","問卷與 Prototype 自然的融入，體驗無斷點",[10,4723,4724],{},"以往發線上問卷的時候，想要測試 Prototype 時還要另外發一個連結，點擊後就會跳離問卷，會使得一致性的體驗消失，甚至受測者玩完之後，再回到問卷已經不知道正在做什麼事了。",[10,4726,4727],{},"利用 ballpark ，問卷填一填，接續測試，測試還可以給予小提醒，之後趁著記憶猶新再繼續填問卷，體驗無斷點，試試就知道優點！",[10,4729,4730,4731,4736],{},"這是官網提供的 ",[178,4732,4735],{"href":4733,"rel":4734,"target":183,"title":184},"https:\u002F\u002Fapp.ballparkhq.com\u002Frecord\u002F8cc3ea0c-e380-4d5e-b842-6d6bbbb65b96",[182],"範例","，簡潔明瞭的設計風格、RWD 、QRCode 也都已產出方便分享。第五個步驟就會開始進入 Prototype 的測試，玩完結束後，趁著記憶猶新，直接追問想知道的答案，而且不能再回頭測試了！",[10,4738,4739],{},"目前 Prototype 可以接受 Figma 與 Marvel，除了 Prototype 之外，也可以加入影音。",[29,4741,4743],{"id":4742},"編輯簡單專注在思考如何發問","編輯簡單，專注在思考如何發問",[10,4745,4746],{},"也許是因為還在 Beta 版以及目前目標使用者很明確，所以沒有像其他發展已久的問卷系統有多樣化的功能，但我個人特別喜歡這種單純，可以讓我專注在思考問題、選擇適合的題型以及加強問卷與 Prototype 之間的聯繫。",[1366,4748,4749,4755],{},[10,4750,4751],{},[1371,4752],{"alt":4753,"src":4754},"Ballpark 目前提供的題型","\u002Fimages\u002Fblog\u002F12.webp",[2930,4756,4757],{},[10,4758,4759],{},"大致分為指引、問卷、易用性、市場調查",[29,4761,4762],{"id":4762},"答題前的設定",[10,4764,4765],{},"根據不同的題型，會有不同的設定，例如 Prototype 題型，會有是否使用攝影機、麥克風以及螢幕錄影。而每個題型都有的就會有增加影片導覽以及必填設定。如果是比較需要理解的題目，這個前置作業就會變得很重要，例如降低使用者焦躁的心情等等，非常實用的功能！",[1366,4767,4768,4774],{},[10,4769,4770],{},[1371,4771],{"alt":4772,"src":4773},"攝影機、麥克風以及螢幕錄影設定","\u002Fimages\u002Fblog\u002F13.webp",[2930,4775,4776],{},[10,4777,4778],{},"根據需求啟動各種隱私要求",[1366,4780,4781,4787],{},[10,4782,4783],{},[1371,4784],{"alt":4785,"src":4786},"影片指引範例","\u002Fimages\u002Fblog\u002F14.webp",[2930,4788,4789],{},[10,4790,4791],{},"視訊指導如何設定",[1366,4793,4794,4800],{},[10,4795,4796],{},[1371,4797],{"alt":4798,"src":4799},"強調步驟要完成","\u002Fimages\u002Fblog\u002F15.webp",[2930,4801,4802],{},[10,4803,4804],{},"可以設定使用者一定要做完指引",[29,4806,4808],{"id":4807},"summary-與-responses","Summary 與 Responses",[10,4810,4811],{},"問卷設計完後，下一個重點當然是收到回饋後的分析，畫面如下：",[1366,4813,4814,4820],{},[10,4815,4816],{},[1371,4817],{"alt":4818,"src":4819},"問券完成後的每題分析","\u002Fimages\u002Fblog\u002F16.png",[2930,4821,4822],{},[10,4823,4824],{},"分析統計資料",[10,4826,4827],{},"除了一般常見的統計之外，我比較想要知道 Prototype 他如何分析。",[1366,4829,4830,4836],{},[10,4831,4832],{},[1371,4833],{"alt":4834,"src":4835},"Prototype資訊","\u002Fimages\u002Fblog\u002F17.webp",[2930,4837,4838],{},[10,4839,4840],{},"Prototype 操作目標達成率、平均操作時間等資訊",[10,4842,4843],{},"點擊 Heatmap 後，會出現最常點擊、移動熱區以及兩者合併的圖，左下角還可以下載圖片。下方資料區還提供各種數據資訊。",[1366,4845,4846,4852],{},[10,4847,4848],{},[1371,4849],{"alt":4850,"src":4851},"Heatmap 儀表板","\u002Fimages\u002Fblog\u002F18.png",[2930,4853,4854],{},[10,4855,4856],{},"Heatmap 的操作資訊",[10,4858,4859],{},"點擊 All Responses 會跳到這頁，然後突出 Prototype task 的地方。",[1366,4861,4862],{},[10,4863,4864],{},[1371,4865],{"alt":4866,"src":4867},"問卷分析儀表板","\u002Fimages\u002Fblog\u002F19.webp",[10,4869,4870],{},"連 Prototype 常見的簡易分析都有做到了，這真是個殺手鐧！除了在前台的體驗一致，後台的體驗也是一致，真是近年來用過最棒的服務之一了。（螢幕錄影等特殊功能還沒測試他的分析會長什麼樣子，就留待大家試試看。）",[29,4872,4874],{"id":4873},"既然重視體驗當然也備好了-template","既然重視體驗，當然也備好了 Template",[1366,4876,4877,4883],{},[10,4878,4879],{},[1371,4880],{"alt":4881,"src":4882},"範本列表","\u002Fimages\u002Fblog\u002F20.png",[2930,4884,4885],{},[10,4886,4887],{},"ballpark 提供各式各樣的 template 供各種場景使用。",[29,4889,4891],{"id":4890},"roadmap","Roadmap",[10,4893,4894],{},"國外服務看了好幾個都會把 Roadmap 給展示出來讓大家知道，覺得真的是很棒的一件事，暸解他們未來的規劃方向，可以給使用者更多資訊來判斷自己需不需要這項服務，例如近期可能就會開發測試線上網站的功能。",[10,4896,4897],{},[178,4898,4901],{"href":4899,"rel":4900,"target":183,"title":184},"https:\u002F\u002Fportal.productboard.com\u002Fballpark\u002F1-ballpark\u002Ftabs\u002F1-short-term-1-6-months",[182],"產品路線圖",[1366,4903,4904],{},[10,4905,4906],{},[1371,4907],{"alt":4908,"src":4909},"ballpark 的路線圖","\u002Fimages\u002Fblog\u002F21.png",[29,4911,4913],{"id":4912},"那缺點呢","那…缺點呢？",[10,4915,4916],{},"價格可能還是第一優先考量，如果專案有封存的需求、分享時密碼保護、下載 CSV等，那就勢必一直升級方案。Starter 年付平約一個月 100 美金，一整年相當於台幣約 35000 左右，對於個人工作室或小型企業可能還是有一點負擔，需要評估使用 ballpark 的效益。",[10,4918,4919],{},"另外是目前沒有中文支援，因為CTA 按鈕是不給編輯文字的（呼應我前面講的單純），所以如果很介意一定都要中文的，可能就不適合，不過這項未來應該是會改善，畢竟站在 UX Writing 的角度來說，適合的文案才能更讓人理解如何操作。",[10,4921,4922],{},"而跳題等進階題型設定也還沒有出現，目前也沒有在路線圖看到，也許他們想先專注在某些功能上吧。",[10,4924,4925],{},"這次快速地熟悉了 ballpark 的核心，希望未來有機會能使用這樣服務，也是驗證這項產品適不適合用在自身的公司身上，但想像中應該是很多可以發揮的地方，拭目以待未來的發展！",{"title":200,"searchDepth":201,"depth":201,"links":4927},[4928,4929,4930,4931,4932,4933,4934,4935,4936],{"id":474,"depth":204,"text":474},{"id":4691,"depth":204,"text":4692},{"id":4720,"depth":204,"text":4721},{"id":4742,"depth":204,"text":4743},{"id":4762,"depth":204,"text":4762},{"id":4807,"depth":204,"text":4808},{"id":4873,"depth":204,"text":4874},{"id":4890,"depth":204,"text":4891},{"id":4912,"depth":204,"text":4913},"2022-06-29",{},"\u002Fzh\u002Fblog\u002Fballpark-intro",{"title":4652,"description":4659},"zh\u002Fblog\u002Fballpark-intro",[4943,4944,4945,4946,4947],"易用性測試","問卷","需求訪談","使用者體驗","UX","VpmOTlnqFU6oQSDcQ6TzUib6QdoA2fEeQfzLOp-ohvs",{"id":4950,"title":4951,"body":4952,"date":4937,"description":4963,"draft":212,"extension":213,"meta":5245,"navigation":215,"ogImage":216,"path":5246,"seo":5247,"stem":5248,"tags":5249,"translationKey":216,"updatedAt":5251,"__hash__":5252},"blog_zh\u002Fzh\u002Fblog\u002Freport-website-issue.md","我的第一個 Chrome 瀏覽器擴充程式：Report Website issues",{"type":7,"value":4953,"toc":5237},[4954,4957,4959,4961,4964,4967,4974,4982,4985,4988,5017,5020,5023,5025,5028,5031,5034,5037,5040,5066,5070,5078,5101,5104,5124,5127,5141,5149,5152,5155,5163,5166,5169,5184,5192,5195,5220,5223,5226,5228,5231,5234],[10,4955,4956],{},"2026\u002F06\u002F21 更新：已更名為 Accesserty Signal，所以更新連結，圖片不更新，以符合創建文章時的情境。",[10,4958,15],{},[29,4960,474],{"id":474},[10,4962,4963],{},"大概七年前看到同事有做了一個瀏覽器擴充程式，當時的我也是躍躍欲試，沒想到就這樣過了七年，直接變成大叔了。",[10,4965,4966],{},"這次在想 2023 鐵人賽的題目，突然想起了這件事，於是就快速地學習了一下，暸解從 0 到 1 的過程，打鐵趁熱寫篇文章記錄一下。",[10,4968,4969],{},[178,4970,4973],{"href":4971,"rel":4972,"target":183,"title":184},"https:\u002F\u002Fchromewebstore.google.com\u002Fdetail\u002Faccesserty-signal\u002Fjabgpbgdmhdmibhogmcjfinnkcngcelc?hl=zh-TW&pli=1",[182],"擴充程式連結",[1366,4975,4976],{},[10,4977,4978],{},[1371,4979],{"alt":4980,"src":4981},"Chrome 瀏覽器擴充程式：Report website issues","\u002Fimages\u002Fblog\u002F26.webp",[29,4983,4984],{"id":4984},"目標與需求",[10,4986,4987],{},"接觸無障礙網頁設計之後，都沈浸在開發無障礙 UI Framework。後來想想好像應該開發一些成本低、易用、立即有幫助的簡單功能，潛在幫助大家，讓上網的環境更好，於是就有了以下理想、目標、需求：",[37,4989,4990,4993,4996,4999,5002,5005,5008,5011,5014],{},[40,4991,4992],{},"使用者可以簡單回報目前瀏覽網頁的問題：",[40,4994,4995],{},"讓使用者輸入最少的情況，只收集「使用者發現的問題分類」、「目前網址」、「時間」、「作業系統\u002F瀏覽器資訊」以及「聯絡資訊（選填）」。",[40,4997,4998],{},"我透過收集到的資料，回傳給網站客服。",[40,5000,5001],{},"網站客服收到網站回饋。",[40,5003,5004],{},"網站工程師修正問題。",[40,5006,5007],{},"使用者下次再上網發現問題解決，開心了。",[40,5009,5010],{},"我透過收集資料間接幫助修網站，開心了。",[40,5012,5013],{},"網站客服發現使用者黏著度上升，開心了。",[40,5015,5016],{},"網站工程師修正程式碼提升技能，開心了。",[10,5018,5019],{},"可能會有人覺得使用者直接面對網站客服不就好了嗎？",[10,5021,5022],{},"我的想法是處於遇到障礙的情境下，使用者跟網站客服的溝通大部分都是雙輸的局面，尤其碰到其實是技術層面的問題。",[10,5024,2887],{},[10,5026,5027],{},"這是個簡單例子，主要描述認識的東西不同，解讀不同。但我也不想讓使用者看太多字或輸入太多東西提高回報障礙，所以中間墊一層可能是比較好的方式，等日後 AI 變很強，就可以幫忙通靈了。",[10,5029,5030],{},"那為什麼要用瀏覽器擴充程式？",[10,5032,5033],{},"因為這樣子就不需要讓使用者輸入作業系統\u002F瀏覽器版本、時間、網址了，只需要勾選分類，送出！比起前往表單，使用擴充程式的方便性更大。",[29,5035,5036],{"id":5036},"現實考量",[10,5038,5039],{},"因為個人開發、只會切版跟簡單 javascript，也不會寫後端，所以必須想一些簡易的方法，還有思考瀏覽器那麼多種要挑哪個來做？於是開始思考眾多限制下的實行方案：",[37,5041,5042,5045,5048,5051,5063],{},[40,5043,5044],{},"Chrome 市場占比高、安裝意願也高，所以只鎖定 Chrome。有需要之後再做 Safari、Firefox、Edge。Edge也可以裝 Chrome 的擴充程式，所以選 Chrome CP值很高啊～！",[40,5046,5047],{},"不會寫後端但需要將得到的資訊儲存，然後也因為只鎖定 Chrome，所以只想用 google 的產品：google sheet。",[40,5049,5050],{},"要將資料直接存到 google sheet 還是要寫很多程式，所以想到可以跟 google sheet 溝通的 google form，它可以跟 google sheet 連結。",[40,5052,5053,5054,5057,5058,5062],{},"實驗如果使用 html 的 ",[1526,5055,5056],{},"\u003Cform>"," ，能不能將資料塞進 google form，於是找到了這篇文章(",[178,5059,482],{"href":5060,"rel":5061,"target":183,"title":184},"https:\u002F\u002Fspreadsheet.dev\u002Fsubmit-responses-to-google-form-apps-script",[182],")",[40,5064,5065],{},"寫一點點 javascript 提升UX，應該不是難事，不知道就問 AI",[29,5067,5069],{"id":5068},"學習-chrome擴充程式","學習 Chrome 擴充程式",[10,5071,5072,5073,5077],{},"確定以上都能實作後，就開始學 Chrome 擴充程式要怎麼做，於是直接去翻最新的書(",[178,5074,482],{"href":5075,"rel":5076,"target":183,"title":184},"https:\u002F\u002Flearning.oreilly.com\u002Flibrary\u002Fview\u002Fbuilding-browser-extensions\u002F9781484287255\u002F",[182],")：，或是一些參考連結（以下連結請注意內文提到的開發版本）：",[37,5079,5080,5087,5094],{},[40,5081,5082],{},[178,5083,5086],{"href":5084,"rel":5085,"target":183,"title":184},"https:\u002F\u002Fithelp.ithome.com.tw\u002Fusers\u002F20139636\u002Fironman\u002F4982",[182],"你知道這是什麼嗎？ Chrome Extension MV3 With Vite",[40,5088,5089],{},[178,5090,5093],{"href":5091,"rel":5092,"target":183,"title":184},"https:\u002F\u002Fithelp.ithome.com.tw\u002Fusers\u002F20079450\u002Fironman\u002F1149",[182],"Chrome Extension 開發與實作",[40,5095,5096],{},[178,5097,5100],{"href":5098,"rel":5099,"target":183,"title":184},"https:\u002F\u002Fpjchender.dev\u002Fchrome-extension\u002Fchrome-extension-api\u002F",[182],"Chrome Extension API 筆記",[10,5102,5103],{},"簡單介紹一下開發 Chrome 瀏覽器擴充程式內容：",[37,5105,5106,5109,5112,5115,5118,5121],{},[40,5107,5108],{},"manifest.json：最重要，包含了擴充程式的所有設置、描述和功能概要，例如需要使用到的權限。如果有使用第 2 點到第 6 點，都要寫在 manifest.json，而這個檔案在最後上架的時候， google 會檢查。\n最新版本是 V3 ，所以在挑選線上參考連結閱讀時，要注意版本。",[40,5110,5111],{},"Background Script：背景中運行，通常用來監聽事件和處理請求。",[40,5113,5114],{},"popup.html：在擴充程式按一下跳出來的視窗畫面。",[40,5116,5117],{},"options.html：在擴充程式按右鍵，裡面一個叫「選項」的選單按鈕，點擊後會另開視窗，是一個獨立頁面，可以在這個頁面做更多的功能、描述與使用者互動，各位可以開開看自己常用的擴充程式在這一頁有什麼樣的互動。",[40,5119,5120],{},"Content Script：目前所在網頁與擴充程式的交流，例如用了擴充程式，就讓目前網頁有下雪效果。",[40,5122,5123],{},"devtools.html：可以建立一個檢查程式碼時的頁面",[10,5125,5126],{},"這次實際用到只有 1, 3, 4，實作完之後，如何測試 Chrome 擴充程式呢？其實很簡單：",[37,5128,5129,5132,5135,5138],{},[40,5130,5131],{},"在 Chrome 的右上角「…」> 擴充功能 > 管理擴充功能",[40,5133,5134],{},"打開「開發人員模式」，在左側會有三個按鈕",[40,5136,5137],{},"選擇「載入未封裝項目」",[40,5139,5140],{},"再選擇你的開發資料夾",[1366,5142,5143],{},[10,5144,5145],{},[1371,5146],{"alt":5147,"src":5148},"擴充功能裡載入未封裝項目的按鈕位置示意圖","\u002Fimages\u002Fblog\u002F27.png",[10,5150,5151],{},"「開發人員模式」按鈕與「載入未封裝項目」按鈕位置示意圖",[10,5153,5154],{},"然後每次修改後，都需要更新擴充程式，更新按鈕在卡片的右下角，點擊後再重新測試你的擴充程式。",[1366,5156,5157],{},[10,5158,5159],{},[1371,5160],{"alt":5161,"src":5162},"載入未封裝項目示意圖","\u002Fimages\u002Fblog\u002F28.png",[29,5164,5165],{"id":5165},"上架與發佈",[10,5167,5168],{},"確定都沒什麼問題之後，就要到 Chrome Web Store Developer 註冊與上架",[37,5170,5171,5178,5181],{},[40,5172,5173,5174,5062],{},"跟著文件指示註冊(",[178,5175,482],{"href":5176,"rel":5177,"target":183,"title":184},"https:\u002F\u002Fdeveloper.chrome.com\u002Fdocs\u002Fwebstore\u002Fregister\u002F",[182],[40,5179,5180],{},"註冊完後需要付款 5 美元開通",[40,5182,5183],{},"進到開發者 Dashboard 畫面",[1366,5185,5186],{},[10,5187,5188],{},[1371,5189],{"alt":5190,"src":5191},"開發者儀表板畫面示意，左側為選單，右側為列表","\u002Fimages\u002Fblog\u002F29.png",[10,5193,5194],{},"按新增商品跟著指示走，把資料填一填即可，大致如下：",[37,5196,5197,5200,5203,5211,5214,5217],{},[40,5198,5199],{},"套件壓縮檔",[40,5201,5202],{},"可以放 Youtube 連結、首頁連結等",[40,5204,5205,5206,5210],{},"可以放五張螢幕截圖，1280",[5207,5208,5209],"em",{},"800 或 640","400，JPEG 或 24 位元 PNG (無 alpha 透明層)，至少 1 張",[40,5212,5213],{},"小 icon：440*280",[40,5215,5216],{},"Banner：1400*560",[40,5218,5219],{},"可以創建 GA4 資源",[10,5221,5222],{},"但有一個重點是，如果你有需要用到使用者的權限，是需要描述清楚的，而且需要附帶一個隱私權政策的網址。如果你沒有，可以使用免費的線上服務，創建一個頁面，裡面寫好隱私權政策的內容，再把網址貼進去即可。",[10,5224,5225],{},"最後就是提交了，審核時間不一定，我等了三天，看 Google 心情，後續每次修改，都需要再提交一次，所以如果是要經營的話，要注意上架審核的時間，如果時間急迫又被退件，那就麻煩了。但應該會有不重新審核就可以更新內容的技巧，但那離我太遠了。",[29,5227,1547],{"id":1547},[10,5229,5230],{},"雖然只有用到簡單的 Html、CSS、Javascript 沒遇到什麼困難，但其實這樣就可以打造一個對人有用的產品了，覺得設計師\u002F工程師們都可以多嘗試一點，說不定一個爆紅的產品就又出現了。",[10,5232,5233],{},"而我也只想要用這樣可以快速、不複雜的方式打造產品，看能不能多幫助上網會遇到困難的人，能幫一個是一個，所以也用了 ChatGPT 幫我翻譯內容成英文，放到 Producthunt 上看有沒有人會看到而使用。",[10,5235,5236],{},"最後，邊練習擴充程式的同時，2023 鐵人賽的題目我也想出好了，希望可以順利完賽～！",{"title":200,"searchDepth":201,"depth":201,"links":5238},[5239,5240,5241,5242,5243,5244],{"id":474,"depth":204,"text":474},{"id":4984,"depth":204,"text":4984},{"id":5036,"depth":204,"text":5036},{"id":5068,"depth":204,"text":5069},{"id":5165,"depth":204,"text":5165},{"id":1547,"depth":204,"text":1547},{},"\u002Fzh\u002Fblog\u002Freport-website-issue",{"title":4951,"description":4963},"zh\u002Fblog\u002Freport-website-issue",[192,221,5250],"iThome 鐵人賽","2026-06-21","dpoRw_AFX99dkvUs40Wg3p38yuJpQlXgATirBBUrmi8",{"id":5254,"title":5255,"body":5256,"date":5443,"description":5444,"draft":212,"extension":213,"meta":5445,"navigation":215,"ogImage":216,"path":5446,"seo":5447,"stem":5448,"tags":5449,"translationKey":216,"updatedAt":5450,"__hash__":5451},"blog_zh\u002Fzh\u002Fblog\u002Ftaiwan-beauty-aa-website.md","通過臺灣 AA 級無障礙網頁標章且美觀的網站",{"type":7,"value":5257,"toc":5441},[5258,5261,5264],[10,5259,5260],{},"收集至啟用日期 2025–08–20。",[10,5262,5263],{},"大概每隔一段時間，就會去無障礙網頁設計規範網站，到啟用列表看看已經通過 AA 標章且 UI 也不錯的網站。",[37,5265,5266,5273,5280,5287,5294,5301,5308,5315,5322,5329,5336,5343,5350,5357,5364,5371,5378,5385,5392,5399,5406,5413,5420,5427,5434],{},[40,5267,5268],{},[178,5269,5272],{"href":5270,"rel":5271,"target":183,"title":184},"https:\u002F\u002Fwww.tcam.museum",[182],"臺中市立美術館",[40,5274,5275],{},[178,5276,5279],{"href":5277,"rel":5278,"target":183,"title":184},"https:\u002F\u002Fwoodcraftdaxi.tycg.gov.tw\u002F",[182],"桃園市立大溪木藝生態博物館大溪工藝之城",[40,5281,5282],{},[178,5283,5286],{"href":5284,"rel":5285,"target":183,"title":184},"https:\u002F\u002Foutdoor.moe.edu.tw\u002F",[182],"教育部國民及學前教育署戶外教育資源平臺",[40,5288,5289],{},[178,5290,5293],{"href":5291,"rel":5292,"target":183,"title":184},"https:\u002F\u002Fyouth.gov.taipei\u002F",[182],"臺北市政府青年局",[40,5295,5296],{},[178,5297,5300],{"href":5298,"rel":5299,"target":183,"title":184},"https:\u002F\u002Ftaiwanoverseas.nmth.gov.tw\u002F",[182],"國立臺灣歷史博物館海外史料看臺灣專題網站",[40,5302,5303],{},[178,5304,5307],{"href":5305,"rel":5306,"target":183,"title":184},"https:\u002F\u002Fkinmen.travel\u002F",[182],"金門觀光旅遊網",[40,5309,5310],{},[178,5311,5314],{"href":5312,"rel":5313,"target":183,"title":184},"https:\u002F\u002Fwww.filmassist.ntpc.gov.tw\u002F",[182],"新北協拍中心",[40,5316,5317],{},[178,5318,5321],{"href":5319,"rel":5320,"target":183,"title":184},"https:\u002F\u002Fmpa.afa.gov.tw\u002F",[182],"農產品初級加工場",[40,5323,5324],{},[178,5325,5328],{"href":5326,"rel":5327,"target":183,"title":184},"https:\u002F\u002Fexbook.ntl.edu.tw\u002F",[182],"臺灣人文學者珍藏圖書媒合平臺",[40,5330,5331],{},[178,5332,5335],{"href":5333,"rel":5334,"target":183,"title":184},"https:\u002F\u002Fkeid.nat.gov.tw\u002Fmittw\u002F",[182],"經濟部產業發展署臺灣製產品 MIT 微笑標章網站",[40,5337,5338],{},[178,5339,5342],{"href":5340,"rel":5341,"target":183,"title":184},"https:\u002F\u002Fksepb.kcg.gov.tw\u002F",[182],"高雄市政府環境保護局",[40,5344,5345],{},[178,5346,5349],{"href":5347,"rel":5348,"target":183,"title":184},"https:\u002F\u002Fbuskers.yunlin.gov.tw\u002F",[182],"雲林縣街頭藝人資訊平台",[40,5351,5352],{},[178,5353,5356],{"href":5354,"rel":5355,"target":183,"title":184},"https:\u002F\u002Ftpac.org.taipei\u002F",[182],"臺北表演藝術中心",[40,5358,5359],{},[178,5360,5363],{"href":5361,"rel":5362,"target":183,"title":184},"https:\u002F\u002Fopendata.taichung.gov.tw\u002F",[182],"臺中市政府資料開放平臺",[40,5365,5366],{},[178,5367,5370],{"href":5368,"rel":5369,"target":183,"title":184},"https:\u002F\u002Fopendata.tycg.gov.tw\u002F",[182],"桃園資料開放平台",[40,5372,5373],{},[178,5374,5377],{"href":5375,"rel":5376,"target":183,"title":184},"https:\u002F\u002Fdata.taipei\u002F",[182],"臺北市資料大平臺",[40,5379,5380],{},[178,5381,5384],{"href":5382,"rel":5383,"target":183,"title":184},"https:\u002F\u002Fwww.ttfi.com.tw\u002F",[182],"中央研究院社會學研究所包容為導向之科技計畫",[40,5386,5387],{},[178,5388,5391],{"href":5389,"rel":5390,"target":183,"title":184},"https:\u002F\u002Fwww.coapre.org.tw\u002F",[182],"財團法人職業災害預防及重建中心",[40,5393,5394],{},[178,5395,5398],{"href":5396,"rel":5397,"target":183,"title":184},"https:\u002F\u002Fsas.miaoli.gov.tw\u002F",[182],"苗栗縣人民團體全球資訊網",[40,5400,5401],{},[178,5402,5405],{"href":5403,"rel":5404,"target":183,"title":184},"https:\u002F\u002Fwww.foi.org.tw\u002FArticle.aspx?Arti=17&Lang=1",[182],"財團法人金融消費評議中心官方網站",[40,5407,5408],{},[178,5409,5412],{"href":5410,"rel":5411,"target":183,"title":184},"https:\u002F\u002Fdaxiculture.tycg.gov.tw\u002F",[182],"大溪學文化資源網",[40,5414,5415],{},[178,5416,5419],{"href":5417,"rel":5418,"target":183,"title":184},"https:\u002F\u002Fcultureexpress.taipei\u002F",[182],"臺北市政府文化局文化快遞",[40,5421,5422],{},[178,5423,5426],{"href":5424,"rel":5425,"target":183,"title":184},"https:\u002F\u002Fcbs.tw\u002F",[182],"國家災害防救科技中心災害告警細胞廣播訊息網",[40,5428,5429],{},[178,5430,5433],{"href":5431,"rel":5432,"target":183,"title":184},"https:\u002F\u002Fwww.twrr.ndc.gov.tw\u002F",[182],"國家發展委員會地方創生資訊共享交流平臺",[40,5435,5436],{},[178,5437,5440],{"href":5438,"rel":5439,"target":183,"title":184},"https:\u002F\u002Ftravel.tycg.gov.tw\u002Fzh-tw",[182],"桃園觀光導覽網",{"title":200,"searchDepth":201,"depth":201,"links":5442},[],"2022-06-10","定期整理通過臺灣 AA 級無障礙網頁標章、同時兼顧美觀與 UI 的網站清單，證明無障礙與設計美感可以並存。",{},"\u002Fzh\u002Fblog\u002Ftaiwan-beauty-aa-website",{"title":5255,"description":5444},"zh\u002Fblog\u002Ftaiwan-beauty-aa-website",[222,224,223,225],"2025-08-20","n5jKeNYuvuXK_tORtCeZ5bs1fGMeVnDntaskCcwqgXA",{"id":5453,"title":5454,"body":5455,"date":5925,"description":5926,"draft":212,"extension":213,"meta":5927,"navigation":215,"ogImage":216,"path":5928,"seo":5929,"stem":5930,"tags":5931,"translationKey":216,"updatedAt":5932,"__hash__":5933},"blog_zh\u002Fzh\u002Fblog\u002Fa11y-learning.md","無障礙網頁設計學習與簡易要點",{"type":7,"value":5456,"toc":5894},[5457,5469,5479,5482,5485,5488,5491,5495,5498,5505,5515,5553,5556,5577,5580,5583,5586,5589,5594,5604,5607,5621,5624,5636,5644,5682,5696,5700,5709,5716,5722,5725,5728,5733,5739,5751,5754,5760,5764,5767,5770,5773,5776,5779,5782,5785,5789,5796,5799,5803,5817,5820,5823,5826,5834,5850,5853,5856,5859,5862,5865,5868,5871,5874,5876,5879,5882,5885,5888,5891],[10,5458,5459,5460,5462,5463,5468],{},"2024\u002F07\u002F23：",[516,5461],{},"\n製作了公司內",[178,5464,5467],{"href":5465,"rel":5466,"target":183,"title":184},"https:\u002F\u002Fbpio.gitbook.io\u002Fdocs\u002Fedu-a11y",[182],"教育訓練文件","，覺得自己整理的蠻用心的，所以分享出來。",[10,5470,5471,5472,5474],{},"2023\u002F07\u002F01：完整系列：",[516,5473],{},[178,5475,5478],{"href":5476,"rel":5477,"target":183,"title":184},"https:\u002F\u002Fithelp.ithome.com.tw\u002Fusers\u002F20152260\u002Fironman\u002F5614",[182],"無障礙網頁設計大叔日記 :: 2022 iThome 鐵人賽",[29,5480,5481],{"id":5481},"顏色對比",[10,5483,5484],{},"AA：一般大小 4.5:1，大文字或圖 3:1\nAAA： 一般大小 7:1，大文字或圖 4.5:1 \n(大文字定義： 24px 或是 粗體 19px ）",[29,5486,5487],{"id":5487},"字級",[10,5489,5490],{},"請用相對單位，如 %、em、rem",[29,5492,5494],{"id":5493},"需要有定位點-和-accesskey","需要有定位點 ::: 和 accesskey",[10,5496,5497],{},"定位點不用太多，主要使用在版面各主要區塊即可。",[10,5499,5500,5501],{},"快捷鍵 accesskey ",[178,5502,482],{"href":5503,"rel":5504,"target":183,"title":184},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FHTML\u002FGlobal_attributes\u002Faccesskey",[182],[29,5506,5508,5511,5512],{"id":5507},"h1-到h6",[1526,5509,5510],{},"\u003Ch1>"," 到 ",[1526,5513,5514],{},"\u003Ch6>",[37,5516,5517,5523,5529,5537,5545],{},[40,5518,5519,5520,5522],{},"通常網站 Logo 會使用 ",[1526,5521,5510],{}," 包起來",[40,5524,5525,5526],{},"頁面標題使用 ",[1526,5527,5528],{},"\u003Ch2>",[40,5530,5531,5533,5534,5536],{},[1526,5532,5510],{}," 和 ",[1526,5535,5528],{}," 一個頁面只能出現一次",[40,5538,5539,5541,5542,5544],{},[1526,5540,5510],{}," 到 ",[1526,5543,5514],{}," 需要按順序使用",[40,5546,5547,5541,5550,5552],{},[1526,5548,5549],{},"\u003Ch3>",[1526,5551,5514],{}," 可以重複",[10,5554,5555],{},"每個網站的用法都不一樣，而我們的建議是：",[37,5557,5558,5564,5569],{},[40,5559,5560,5561,5563],{},"因為 ",[1526,5562,5510],{}," 只能出現一次，很適合用在網站 logo 上，輔以整個網站的名稱作為描述。",[40,5565,5525,5566,5568],{},[1526,5567,5528],{},"，整個頁面的重點，所以只出現一次就好。",[40,5570,5571,5572,5574,5575],{},"章節依序使用 ",[1526,5573,5549],{}," 至 ",[1526,5576,5514],{},[29,5578,5579],{"id":5579},"跳至主要區塊",[10,5581,5582],{},"需要製作「跳至主要區塊」 按鈕，方便跳過每頁都會重複出現的區域。",[29,5584,5585],{"id":5585},"回頂端",[10,5587,5588],{},"要注意焦點是否有跟著跳回去。",[29,5590,5592],{"id":5591},"noscript",[1526,5593,3255],{},[10,5595,5596,5597,5599,5600,5603],{},"如果瀏覽器關閉了 javascript，最好使用 ",[1526,5598,3255],{},"content",[1526,5601,5602],{},"\u003C\u002Fnoscript>"," 顯示內容。因為現代網站幾乎都有 javascript， 目前已經沒有此項規定，但建議還是可以順手做，至少真的關閉時，還有一些提示。",[29,5605,1730],{"id":5606},"seo",[37,5608,5609,5612,5615,5618],{},[40,5610,5611],{},"頁籤標題",[40,5613,5614],{},"頁面描述",[40,5616,5617],{},"favicon",[40,5619,5620],{},"社群分享圖片",[29,5622,5623],{"id":4215},"title=””",[10,5625,5626,5628,5629,5632,5633,5635],{},[1526,5627,3339],{}," ",[1526,5630,5631],{},"\u003Ciframe>"," 必要時需要有 title=”” ，如果 ",[1526,5634,3339],{}," 是另開視窗，則要使用\ntarget=”_blank” 並且加入 rel=”noreferrer noopener” 和 “另開視窗” 文字。",[10,5637,5638,5640,5641,5643],{},[1526,5639,3211],{}," 標題要寫在接續在",[1526,5642,3211],{},"之後，如：",[3930,5645,5647],{"className":3932,"code":5646,"language":3934,"meta":200,"style":200},"\u003Csvg>\n  \u003Ctitle>\u003C\u002Ftitle>\n  …\n\u003C\u002Fsvg>\n",[1526,5648,5649,5657,5669,5674],{"__ignoreMap":200},[3938,5650,5651,5653,5655],{"class":3940,"line":3941},[3938,5652,3951],{"class":3950},[3938,5654,4130],{"class":3954},[3938,5656,3958],{"class":3950},[3938,5658,5659,5661,5663,5665,5667],{"class":3940,"line":201},[3938,5660,3963],{"class":3950},[3938,5662,4215],{"class":3954},[3938,5664,3994],{"class":3950},[3938,5666,4215],{"class":3954},[3938,5668,3958],{"class":3950},[3938,5670,5671],{"class":3940,"line":204},[3938,5672,5673],{"class":3950},"  …\n",[3938,5675,5676,5678,5680],{"class":3940,"line":3975},[3938,5677,4004],{"class":3950},[3938,5679,4130],{"class":3954},[3938,5681,3958],{"class":3950},[10,5683,5684,5685,5628,5688,5691,5692,5695],{},"若 svg 僅僅是圖示，可以使用 ",[1526,5686,5687],{},"aria-hidden=”true”",[1526,5689,5690],{},"focusable=”false”"," 但因為還是要描述，所以可以再之後補上",[1526,5693,5694],{},"\u003Cspan class=”visually-hidden”>description\u003C\u002Fspan> ","補充。",[29,5697,5699],{"id":5698},"alt","alt=””",[10,5701,5702,5705,5706,2858],{},[1526,5703,5704],{},"\u003Cimg>"," 需要有 alt=”” 屬性。 如果是裝飾性質的圖片（沒有實質意義），還是要寫但沒有值， ",[1526,5707,5708],{},"alt=”” ",[10,5710,5711,5712],{},"alt 屬性文字內容主要可以根據圖片以及其上下文內容而決定，一般建議最多 150 個字以下，但這沒有任何根據。",[178,5713,4614],{"href":5714,"rel":5715,"target":183,"title":184},"https:\u002F\u002Fcss-tricks.com\u002Fjust-how-long-should-alt-text-be\u002F",[182],[29,5717,5719],{"id":5718},"label-forid",[1526,5720,5721],{},"\u003Clabel for=”id”>",[10,5723,5724],{},"在表單內，使用 label 時，for 屬性必須對應到內容的 id。",[29,5726,5727],{"id":5727},"visually-hidden",[10,5729,5730,5732],{},[1526,5731,1528],{}," 必須要有內容，設計時可善加利用 visually-hidden 以及 \naria-hidden。",[29,5734,5736],{"id":5735},"th",[1526,5737,5738],{},"\u003Cth>",[10,5740,5741,5744,5745,5747,5748,2858],{},[1526,5742,5743],{},"\u003Ctable>"," 的 ",[1526,5746,5738],{}," 需要標註是欄或列： ",[1526,5749,5750],{},"\u003Cth scope=”row\u002Fcol”>",[29,5752,5753],{"id":5753},"download",[10,5755,5756,5757],{},"下載的檔案不可依賴特定文書商用軟體，且在連結裡要使用 title 寫出完整檔名，例如：",[1526,5758,5759],{},"\u003Ca title=”操作手冊.pdf”>",[29,5761,5763],{"id":5762},"focus-狀態","focus 狀態",[10,5765,5766],{},"focus 狀態都要很明顯，焦點提示區域與其相鄰的顏色需具有 3：1 的對比度，且大於選單4.5:1，若無，另外還有至少 2px 厚。",[29,5768,5769],{"id":5769},"非文字圖示",[10,5771,5772],{},"非文字對比需大於 3:1",[29,5774,5775],{"id":5775},"網站導覽",[10,5777,5778],{},"若網站有「網站導覽」頁面連結，建議進入網站後，擺在 3 個步驟內就可以把注目焦點放在「網站導覽」頁面連結上。",[29,5780,5781],{"id":5781},"放大",[10,5783,5784],{},"確保畫面放大或「只放大文字」200% 畫面都不會破版（firefox 有此設定）",[29,5786,5788],{"id":5787},"font-awesome","Font Awesome",[10,5790,5791],{},[178,5792,5795],{"href":5793,"rel":5794,"target":183,"title":184},"https:\u002F\u002Ffontawesome.com\u002Fhow-to-use\u002Fon-the-web\u002Fother-topics\u002Faccessibility",[182],"使用說明",[10,5797,5798],{},"常用icon：Font Awesome 關於無障礙的使用方式 )",[29,5800,5802],{"id":5801},"這些文字設定之下仍保有外觀完整性","這些文字設定之下，仍保有外觀完整性",[37,5804,5805,5808,5811,5814],{},[40,5806,5807],{},"line-height 1.5 以上",[40,5809,5810],{},"letter-spacing 0.14rem 以上",[40,5812,5813],{},"word-spacing 0.16rem 以上",[40,5815,5816],{},"段落間距 font-size*2",[10,5818,5819],{},"以上 此為英文，中文也可先根據此距離斟酌使用。",[29,5821,5822],{"id":5822},"驗證機制",[10,5824,5825],{},"根據 W3C ，目前仍然沒有完美的方式，但有以下建議：",[10,5827,5828,5829,5833],{},"如果業主可以不用使用輸入框，推薦使用 google recaptcha v3\n若業主想要使用輸入框形式，則根據",[178,5830,4614],{"href":5831,"rel":5832,"target":183,"title":184},"https:\u002F\u002Faccessibility.ncc.gov.tw\u002FQuestions\u002FDetail\u002F100?Category=21",[182],"，有 3 種方式選擇：",[37,5835,5836,5839,5847],{},[40,5837,5838],{},"需要有驗證圖形與聲音提示",[40,5840,5841,5842],{},"寄送 email，如 ",[178,5843,5846],{"href":5844,"rel":5845,"target":183,"title":184},"https:\u002F\u002Fwww.hcaptcha.com\u002Faccessibility",[182],"hcaptcha",[40,5848,5849],{},"撥打客服電話取得驗證碼",[29,5851,5852],{"id":5852},"色盲",[10,5854,5855],{},"建議至少針對紅綠色盲做設計。",[29,5857,5858],{"id":5858},"行動裝置方向",[10,5860,5861],{},"除非是有其必要性，否則不可以鎖定行動裝置方向，例如學習鋼琴 app，就是有其橫向的必要性。",[29,5863,5864],{"id":5864},"autocomplete",[10,5866,5867],{},"善用 autocomplete 屬性，方便使用者快速填入過去常使用的值。\n密碼請使用 autocomplete=”new-password”，避免意外填寫現在的密碼。",[29,5869,5870],{"id":5870},"聲音",[10,5872,5873],{},"非語音的聲音 \u003C 語音音訊 20 分貝",[29,5875,482],{"id":482},[10,5877,5878],{},"非連結盡量不要用底線。",[29,5880,5881],{"id":5881},"影片",[10,5883,5884],{},"不要自動播放、可以加上字幕。",[29,5886,5887],{"id":5887},"必要時使用多種提示引導",[10,5889,5890],{},"避免只使用單一種方式，例如圖表除了顏色外，可以加上圖樣來區別。",[4629,5892,5893],{},"html pre.shiki code .ssxIu, html code.shiki .ssxIu{--shiki-default:#24292E;--shiki-github-dark:#E1E4E8}html pre.shiki code .sk71V, html code.shiki .sk71V{--shiki-default:#22863A;--shiki-github-dark:#85E89D}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .github-dark .shiki span {color: var(--shiki-github-dark);background: var(--shiki-github-dark-bg);font-style: var(--shiki-github-dark-font-style);font-weight: var(--shiki-github-dark-font-weight);text-decoration: var(--shiki-github-dark-text-decoration);}html.github-dark .shiki span {color: var(--shiki-github-dark);background: var(--shiki-github-dark-bg);font-style: var(--shiki-github-dark-font-style);font-weight: var(--shiki-github-dark-font-weight);text-decoration: var(--shiki-github-dark-text-decoration);}",{"title":200,"searchDepth":201,"depth":201,"links":5895},[5896,5897,5898,5899,5901,5902,5903,5904,5905,5906,5907,5908,5909,5910,5911,5912,5913,5914,5915,5916,5917,5918,5919,5920,5921,5922,5923,5924],{"id":5481,"depth":204,"text":5481},{"id":5487,"depth":204,"text":5487},{"id":5493,"depth":204,"text":5494},{"id":5507,"depth":204,"text":5900},"\u003Ch1> 到 \u003Ch6>",{"id":5579,"depth":204,"text":5579},{"id":5585,"depth":204,"text":5585},{"id":5591,"depth":204,"text":3255},{"id":5606,"depth":204,"text":1730},{"id":4215,"depth":204,"text":5623},{"id":5698,"depth":204,"text":5699},{"id":5718,"depth":204,"text":5721},{"id":5727,"depth":204,"text":5727},{"id":5735,"depth":204,"text":5738},{"id":5753,"depth":204,"text":5753},{"id":5762,"depth":204,"text":5763},{"id":5769,"depth":204,"text":5769},{"id":5775,"depth":204,"text":5775},{"id":5781,"depth":204,"text":5781},{"id":5787,"depth":204,"text":5788},{"id":5801,"depth":204,"text":5802},{"id":5822,"depth":204,"text":5822},{"id":5852,"depth":204,"text":5852},{"id":5858,"depth":204,"text":5858},{"id":5864,"depth":204,"text":5864},{"id":5870,"depth":204,"text":5870},{"id":482,"depth":204,"text":482},{"id":5881,"depth":204,"text":5881},{"id":5887,"depth":204,"text":5887},"2022-06-07","整理無障礙網頁設計的學習筆記與簡易要點，含公司內部教育訓練文件與完整系列文章，適合想入門數位無障礙的人參考。",{},"\u002Fzh\u002Fblog\u002Fa11y-learning",{"title":5454,"description":5926},"zh\u002Fblog\u002Fa11y-learning",[222,224,223,225],"2024-07-23","4xXOqCdCBRILedcYj_n1xdT_im03UvayZbaXk9EJu70",{"id":5935,"title":5936,"body":5937,"date":7930,"description":7931,"draft":212,"extension":213,"meta":7932,"navigation":215,"ogImage":216,"path":7933,"seo":7934,"stem":7935,"tags":7936,"translationKey":216,"updatedAt":216,"__hash__":7938},"blog_zh\u002Fzh\u002Fblog\u002Fseo.md","SEO 整理",{"type":7,"value":5938,"toc":7924},[5939,5941,5944,5947,5950,5954,5967,5970,5973,7296,7299,7329,7377,7382,7403,7407,7410,7452,7455,7506,7509,7532,7535,7557,7560,7563,7567,7639,7642,7668,7681,7684,7739,7752,7762,7765,7833,7835,7921],[29,5940,474],{"id":474},[10,5942,5943],{},"中英文全名: Search Engine Optimisation，搜尋引擎最佳化。是一種透過了解搜尋引擎的運作規則來調整網站， 提高在搜尋引擎內排名。搜尋引擎演算法時常在變，2020 google 切換為 Mobile First",[29,5945,5946],{"id":5946},"提高排名的好處",[10,5948,5949],{},"經過許多專業的 SEO 研究機構調查後發現， 當使用者利用搜尋引擎尋找資料、產品或服務時， 大部分人通常只會點擊搜尋結果當中，最前面出現的幾個連結。通常 4 ~ 6 個月才能看出明顯效益。",[29,5951,5953],{"id":5952},"近三年台灣主要搜尋引擎desktopgoogle-yahoobing","近三年台灣主要搜尋引擎(Desktop)：Google, Yahoo, Bing",[1366,5955,5956,5962],{},[10,5957,5958],{},[1371,5959],{"alt":5960,"src":5961},"搜尋引擎三年數據比較","\u002Fimages\u002Fblog\u002F8.png",[2930,5963,5964],{},[10,5965,5966],{},"Google Chrome 獨霸市場",[29,5968,5969],{"id":5969},"技術層面",[77,5971,5972],{"id":3934},"HTML",[3930,5974,5976],{"className":3932,"code":5975,"language":3934,"meta":200,"style":200},"\u003Cmeta charset=\"UTF-8\">\n\u003Cmeta name=\"description\" content=\"網頁簡短描述\">\n\u003Cmeta name=\"keywords\" content=\"網頁關鍵字\">\n\u003Cmeta name=\"author\" content=\"作者姓名\">\n\u003Cmeta name=\"generator\" content=\"編輯器名稱\">\n\u003Cmeta name=\"copyright\" content=\"網頁版權\">\n\u003Cmeta name=\"distribution\" content=\"網頁發佈地區\">\n\u003Cmeta name=\"robots\" content=\"index,follow\"\u002F>\n\u003Ctitle>頁面標題\u003C\u002Ftitle>\n\n\u003C!-- Open Graph -->\n\u003Cmeta property=\"og:url\" content=\"\" \u002F>\n\u003Cmeta property=\"og:title\" content=\"\" \u002F>\n\u003Cmeta property=\"og:description\" content=\"\" \u002F>\n\u003Cmeta property=\"og:image\" content=\"\" \u002F>\n\u003Cmeta property=\"og:type\" content=\"\" \u002F>\n\u003Cmeta property=\"og:locale\" content=\"\" \u002F>\n\u003Cmeta property=\"og:site_name\" content=\"\" \u002F>\n\u003Cmeta property=\"article:published_time\" content=\"\" \u002F>\n\u003Cmeta property=\"article:modified_time\" content=\"\" \u002F>\n\u003Cmeta property=\"article:section\" content=\"\" \u002F>\n\u003Cmeta property=\"article:tag\" content=\"\" \u002F>\n\u003Cmeta property=\"fb:admins\" content=\"\" \u002F>\n\u003Cmeta property=\"fb:app_id\" content=\"\" \u002F>\n\n\u003C!-- Twitter -->\n\u003Cmeta name=\"twitter:card\" content=\"\">\n\u003Cmeta name=\"twitter:site\" content=\"\">\n\u003Cmeta name=\"twitter:title\" content=\"\">\n\u003Cmeta name=\"twitter:description\" content=\"\">\n\u003Cmeta name=\"twitter:creator\" content=\"\">\n\u003Cmeta name=\"twitter:image:src\" content=\"\">\n\n\u003C!-- Favicon -->\n\u003Clink rel=\"shortcut icon\" href=\"XXXX.png\">\n\u003Clink rel=\"apple-touch-icon\" href=\"XXXX.png\">\n\u003Clink rel=\"apple-touch-icon-precomposed\" sizes=\"57x57\" href=\"XXXX.png\">\n\u003Clink rel=\"apple-touch-icon-precomposed\" sizes=\"72x72\" href=\"XXXX.png\">\n\u003Clink rel=\"apple-touch-icon-precomposed\" sizes=\"114x114\" href=\"XXXX.png\">\n\u003Clink rel=\"apple-touch-icon-precomposed\" sizes=\"144x144\" href=\"XXXX.png\">\n\n\u003C!-- 還可以加上 -->\nmedia=\"screen and (min-device-width:481px) and (max-device-width:1024px) and (orientation:landscape) and (-webkit-min-device-pixel-ratio: 2)\">\n\n\u003C!-- 關於行動裝置主畫面 -->\n\u003C!-- 添加到主畫面的標題（iOS 6 新增） -->\n\u003Cmeta name=\"apple-mobile-web-app-title\" content=\"標題\">\n\n\u003C!-- 是否啟用 WebApp 全螢幕模式，刪除蘋果默認的工具欄和選單 -->\n\u003Cmeta name=\"apple-mobile-web-app-capable\" content=\"yes\"\u002F>\n\n\u003C!-- 添加智能 App 廣告條（iOS 6+ Safari） -->\n\u003Cmeta name=\"apple-itunes-app\" content=\"app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL\">\n\n\u003C!-- 設置蘋果工具欄顏色 -->\n\u003Cmeta name=\"apple-mobile-web-app-status-bar-style\" content=\"black\"\u002F>\n\n\u003C!-- 忽略頁面中的數字識別為電話，忽略email識別 -->\n\u003Cmeta name=\"format-detection\" content=\"telphone=no, email=no\"\u002F>\n\n\u003C!-- iPad （直） 768 x 1004（標準解析度） -->\n\u003Clink rel=\"apple-touch-startup-image\" sizes=\"768x1004\" href=\"\u002Fsplash-screen-768x1004.png\"\u002F>\n\n\u003C!-- iPad （直） 1536x2008（Retina） -->\n\u003Clink rel=\"apple-touch-startup-image\" sizes=\"1536x2008\" href=\"\u002Fsplash-screen-1536x2008.png\"\u002F>\n\n\u003C!-- iPad (橫) 1024x748（標準解析度） -->\n\u003Clink rel=\"apple-touch-startup-image\" sizes=\"1024x748\" href=\"\u002FDefault-Portrait-1024x748.png\"\u002F>\n\n\u003C!-- iPad (橫) 2048x1496（Retina）-->\n\u003Clink rel=\"apple-touch-startup-image\" sizes=\"2048x1496\" href=\"\u002Fsplash-screen-2048x1496.png\"\u002F>\n\n\u003C!-- iPhone\u002FiPod Touch 豎屏 320x480 (標準解析度) -->\n\u003Clink rel=\"apple-touch-startup-image\" href=\"\u002Fsplash-screen-320x480.png\"\u002F>\n\n\u003C!-- iPhone\u002FiPod Touch 豎屏 640x960 (Retina) -->\n\u003Clink rel=\"apple-touch-startup-image\" sizes=\"640x960\" href=\"\u002Fsplash-screen-640x960.png\"\u002F>\n\n\u003C!-- iPhone 5\u002FiPod Touch 5 豎屏 640x1136 (Retina)-->\n\u003Clink rel=\"apple-touch-startup-image\" sizes=\"640x1136\" href=\"\u002Fsplash-screen-640x1136.png\"\u002F>\n\n\u003C!-- RSS -->\n\u003Clink rel=\"alternate\" type=\"application\u002Frss+xml\" title=\"RSS\" href=\"\u002Frss.xml\"\u002F>\n",[1526,5977,5978,5995,6019,6041,6063,6085,6107,6129,6152,6165,6169,6174,6199,6221,6243,6265,6287,6309,6331,6353,6375,6397,6419,6441,6463,6468,6474,6496,6518,6540,6562,6584,6606,6611,6617,6643,6665,6695,6723,6751,6779,6784,6790,6796,6801,6807,6813,6836,6841,6847,6870,6875,6881,6904,6909,6915,6938,6943,6949,6972,6977,6983,7013,7018,7024,7053,7058,7064,7093,7098,7104,7133,7138,7144,7166,7171,7177,7206,7211,7217,7246,7251,7257],{"__ignoreMap":200},[3938,5979,5980,5982,5985,5988,5990,5993],{"class":3940,"line":3941},[3938,5981,3951],{"class":3950},[3938,5983,5984],{"class":3954},"meta",[3938,5986,5987],{"class":3983}," charset",[3938,5989,3987],{"class":3950},[3938,5991,5992],{"class":3990},"\"UTF-8\"",[3938,5994,3958],{"class":3950},[3938,5996,5997,5999,6001,6004,6006,6009,6012,6014,6017],{"class":3940,"line":201},[3938,5998,3951],{"class":3950},[3938,6000,5984],{"class":3954},[3938,6002,6003],{"class":3983}," name",[3938,6005,3987],{"class":3950},[3938,6007,6008],{"class":3990},"\"description\"",[3938,6010,6011],{"class":3983}," content",[3938,6013,3987],{"class":3950},[3938,6015,6016],{"class":3990},"\"網頁簡短描述\"",[3938,6018,3958],{"class":3950},[3938,6020,6021,6023,6025,6027,6029,6032,6034,6036,6039],{"class":3940,"line":204},[3938,6022,3951],{"class":3950},[3938,6024,5984],{"class":3954},[3938,6026,6003],{"class":3983},[3938,6028,3987],{"class":3950},[3938,6030,6031],{"class":3990},"\"keywords\"",[3938,6033,6011],{"class":3983},[3938,6035,3987],{"class":3950},[3938,6037,6038],{"class":3990},"\"網頁關鍵字\"",[3938,6040,3958],{"class":3950},[3938,6042,6043,6045,6047,6049,6051,6054,6056,6058,6061],{"class":3940,"line":3975},[3938,6044,3951],{"class":3950},[3938,6046,5984],{"class":3954},[3938,6048,6003],{"class":3983},[3938,6050,3987],{"class":3950},[3938,6052,6053],{"class":3990},"\"author\"",[3938,6055,6011],{"class":3983},[3938,6057,3987],{"class":3950},[3938,6059,6060],{"class":3990},"\"作者姓名\"",[3938,6062,3958],{"class":3950},[3938,6064,6065,6067,6069,6071,6073,6076,6078,6080,6083],{"class":3940,"line":4001},[3938,6066,3951],{"class":3950},[3938,6068,5984],{"class":3954},[3938,6070,6003],{"class":3983},[3938,6072,3987],{"class":3950},[3938,6074,6075],{"class":3990},"\"generator\"",[3938,6077,6011],{"class":3983},[3938,6079,3987],{"class":3950},[3938,6081,6082],{"class":3990},"\"編輯器名稱\"",[3938,6084,3958],{"class":3950},[3938,6086,6087,6089,6091,6093,6095,6098,6100,6102,6105],{"class":3940,"line":4011},[3938,6088,3951],{"class":3950},[3938,6090,5984],{"class":3954},[3938,6092,6003],{"class":3983},[3938,6094,3987],{"class":3950},[3938,6096,6097],{"class":3990},"\"copyright\"",[3938,6099,6011],{"class":3983},[3938,6101,3987],{"class":3950},[3938,6103,6104],{"class":3990},"\"網頁版權\"",[3938,6106,3958],{"class":3950},[3938,6108,6109,6111,6113,6115,6117,6120,6122,6124,6127],{"class":3940,"line":4017},[3938,6110,3951],{"class":3950},[3938,6112,5984],{"class":3954},[3938,6114,6003],{"class":3983},[3938,6116,3987],{"class":3950},[3938,6118,6119],{"class":3990},"\"distribution\"",[3938,6121,6011],{"class":3983},[3938,6123,3987],{"class":3950},[3938,6125,6126],{"class":3990},"\"網頁發佈地區\"",[3938,6128,3958],{"class":3950},[3938,6130,6131,6133,6135,6137,6139,6142,6144,6146,6149],{"class":3940,"line":4023},[3938,6132,3951],{"class":3950},[3938,6134,5984],{"class":3954},[3938,6136,6003],{"class":3983},[3938,6138,3987],{"class":3950},[3938,6140,6141],{"class":3990},"\"robots\"",[3938,6143,6011],{"class":3983},[3938,6145,3987],{"class":3950},[3938,6147,6148],{"class":3990},"\"index,follow\"",[3938,6150,6151],{"class":3950},"\u002F>\n",[3938,6153,6154,6156,6158,6161,6163],{"class":3940,"line":4032},[3938,6155,3951],{"class":3950},[3938,6157,4215],{"class":3954},[3938,6159,6160],{"class":3950},">頁面標題\u003C\u002F",[3938,6162,4215],{"class":3954},[3938,6164,3958],{"class":3950},[3938,6166,6167],{"class":3940,"line":4052},[3938,6168,4014],{"emptyLinePlaceholder":215},[3938,6170,6171],{"class":3940,"line":4079},[3938,6172,6173],{"class":3944},"\u003C!-- Open Graph -->\n",[3938,6175,6177,6179,6181,6184,6186,6189,6191,6193,6196],{"class":3940,"line":6176},12,[3938,6178,3951],{"class":3950},[3938,6180,5984],{"class":3954},[3938,6182,6183],{"class":3983}," property",[3938,6185,3987],{"class":3950},[3938,6187,6188],{"class":3990},"\"og:url\"",[3938,6190,6011],{"class":3983},[3938,6192,3987],{"class":3950},[3938,6194,6195],{"class":3990},"\"\"",[3938,6197,6198],{"class":3950}," \u002F>\n",[3938,6200,6202,6204,6206,6208,6210,6213,6215,6217,6219],{"class":3940,"line":6201},13,[3938,6203,3951],{"class":3950},[3938,6205,5984],{"class":3954},[3938,6207,6183],{"class":3983},[3938,6209,3987],{"class":3950},[3938,6211,6212],{"class":3990},"\"og:title\"",[3938,6214,6011],{"class":3983},[3938,6216,3987],{"class":3950},[3938,6218,6195],{"class":3990},[3938,6220,6198],{"class":3950},[3938,6222,6224,6226,6228,6230,6232,6235,6237,6239,6241],{"class":3940,"line":6223},14,[3938,6225,3951],{"class":3950},[3938,6227,5984],{"class":3954},[3938,6229,6183],{"class":3983},[3938,6231,3987],{"class":3950},[3938,6233,6234],{"class":3990},"\"og:description\"",[3938,6236,6011],{"class":3983},[3938,6238,3987],{"class":3950},[3938,6240,6195],{"class":3990},[3938,6242,6198],{"class":3950},[3938,6244,6246,6248,6250,6252,6254,6257,6259,6261,6263],{"class":3940,"line":6245},15,[3938,6247,3951],{"class":3950},[3938,6249,5984],{"class":3954},[3938,6251,6183],{"class":3983},[3938,6253,3987],{"class":3950},[3938,6255,6256],{"class":3990},"\"og:image\"",[3938,6258,6011],{"class":3983},[3938,6260,3987],{"class":3950},[3938,6262,6195],{"class":3990},[3938,6264,6198],{"class":3950},[3938,6266,6268,6270,6272,6274,6276,6279,6281,6283,6285],{"class":3940,"line":6267},16,[3938,6269,3951],{"class":3950},[3938,6271,5984],{"class":3954},[3938,6273,6183],{"class":3983},[3938,6275,3987],{"class":3950},[3938,6277,6278],{"class":3990},"\"og:type\"",[3938,6280,6011],{"class":3983},[3938,6282,3987],{"class":3950},[3938,6284,6195],{"class":3990},[3938,6286,6198],{"class":3950},[3938,6288,6290,6292,6294,6296,6298,6301,6303,6305,6307],{"class":3940,"line":6289},17,[3938,6291,3951],{"class":3950},[3938,6293,5984],{"class":3954},[3938,6295,6183],{"class":3983},[3938,6297,3987],{"class":3950},[3938,6299,6300],{"class":3990},"\"og:locale\"",[3938,6302,6011],{"class":3983},[3938,6304,3987],{"class":3950},[3938,6306,6195],{"class":3990},[3938,6308,6198],{"class":3950},[3938,6310,6312,6314,6316,6318,6320,6323,6325,6327,6329],{"class":3940,"line":6311},18,[3938,6313,3951],{"class":3950},[3938,6315,5984],{"class":3954},[3938,6317,6183],{"class":3983},[3938,6319,3987],{"class":3950},[3938,6321,6322],{"class":3990},"\"og:site_name\"",[3938,6324,6011],{"class":3983},[3938,6326,3987],{"class":3950},[3938,6328,6195],{"class":3990},[3938,6330,6198],{"class":3950},[3938,6332,6334,6336,6338,6340,6342,6345,6347,6349,6351],{"class":3940,"line":6333},19,[3938,6335,3951],{"class":3950},[3938,6337,5984],{"class":3954},[3938,6339,6183],{"class":3983},[3938,6341,3987],{"class":3950},[3938,6343,6344],{"class":3990},"\"article:published_time\"",[3938,6346,6011],{"class":3983},[3938,6348,3987],{"class":3950},[3938,6350,6195],{"class":3990},[3938,6352,6198],{"class":3950},[3938,6354,6356,6358,6360,6362,6364,6367,6369,6371,6373],{"class":3940,"line":6355},20,[3938,6357,3951],{"class":3950},[3938,6359,5984],{"class":3954},[3938,6361,6183],{"class":3983},[3938,6363,3987],{"class":3950},[3938,6365,6366],{"class":3990},"\"article:modified_time\"",[3938,6368,6011],{"class":3983},[3938,6370,3987],{"class":3950},[3938,6372,6195],{"class":3990},[3938,6374,6198],{"class":3950},[3938,6376,6378,6380,6382,6384,6386,6389,6391,6393,6395],{"class":3940,"line":6377},21,[3938,6379,3951],{"class":3950},[3938,6381,5984],{"class":3954},[3938,6383,6183],{"class":3983},[3938,6385,3987],{"class":3950},[3938,6387,6388],{"class":3990},"\"article:section\"",[3938,6390,6011],{"class":3983},[3938,6392,3987],{"class":3950},[3938,6394,6195],{"class":3990},[3938,6396,6198],{"class":3950},[3938,6398,6400,6402,6404,6406,6408,6411,6413,6415,6417],{"class":3940,"line":6399},22,[3938,6401,3951],{"class":3950},[3938,6403,5984],{"class":3954},[3938,6405,6183],{"class":3983},[3938,6407,3987],{"class":3950},[3938,6409,6410],{"class":3990},"\"article:tag\"",[3938,6412,6011],{"class":3983},[3938,6414,3987],{"class":3950},[3938,6416,6195],{"class":3990},[3938,6418,6198],{"class":3950},[3938,6420,6422,6424,6426,6428,6430,6433,6435,6437,6439],{"class":3940,"line":6421},23,[3938,6423,3951],{"class":3950},[3938,6425,5984],{"class":3954},[3938,6427,6183],{"class":3983},[3938,6429,3987],{"class":3950},[3938,6431,6432],{"class":3990},"\"fb:admins\"",[3938,6434,6011],{"class":3983},[3938,6436,3987],{"class":3950},[3938,6438,6195],{"class":3990},[3938,6440,6198],{"class":3950},[3938,6442,6444,6446,6448,6450,6452,6455,6457,6459,6461],{"class":3940,"line":6443},24,[3938,6445,3951],{"class":3950},[3938,6447,5984],{"class":3954},[3938,6449,6183],{"class":3983},[3938,6451,3987],{"class":3950},[3938,6453,6454],{"class":3990},"\"fb:app_id\"",[3938,6456,6011],{"class":3983},[3938,6458,3987],{"class":3950},[3938,6460,6195],{"class":3990},[3938,6462,6198],{"class":3950},[3938,6464,6466],{"class":3940,"line":6465},25,[3938,6467,4014],{"emptyLinePlaceholder":215},[3938,6469,6471],{"class":3940,"line":6470},26,[3938,6472,6473],{"class":3944},"\u003C!-- Twitter -->\n",[3938,6475,6477,6479,6481,6483,6485,6488,6490,6492,6494],{"class":3940,"line":6476},27,[3938,6478,3951],{"class":3950},[3938,6480,5984],{"class":3954},[3938,6482,6003],{"class":3983},[3938,6484,3987],{"class":3950},[3938,6486,6487],{"class":3990},"\"twitter:card\"",[3938,6489,6011],{"class":3983},[3938,6491,3987],{"class":3950},[3938,6493,6195],{"class":3990},[3938,6495,3958],{"class":3950},[3938,6497,6499,6501,6503,6505,6507,6510,6512,6514,6516],{"class":3940,"line":6498},28,[3938,6500,3951],{"class":3950},[3938,6502,5984],{"class":3954},[3938,6504,6003],{"class":3983},[3938,6506,3987],{"class":3950},[3938,6508,6509],{"class":3990},"\"twitter:site\"",[3938,6511,6011],{"class":3983},[3938,6513,3987],{"class":3950},[3938,6515,6195],{"class":3990},[3938,6517,3958],{"class":3950},[3938,6519,6521,6523,6525,6527,6529,6532,6534,6536,6538],{"class":3940,"line":6520},29,[3938,6522,3951],{"class":3950},[3938,6524,5984],{"class":3954},[3938,6526,6003],{"class":3983},[3938,6528,3987],{"class":3950},[3938,6530,6531],{"class":3990},"\"twitter:title\"",[3938,6533,6011],{"class":3983},[3938,6535,3987],{"class":3950},[3938,6537,6195],{"class":3990},[3938,6539,3958],{"class":3950},[3938,6541,6543,6545,6547,6549,6551,6554,6556,6558,6560],{"class":3940,"line":6542},30,[3938,6544,3951],{"class":3950},[3938,6546,5984],{"class":3954},[3938,6548,6003],{"class":3983},[3938,6550,3987],{"class":3950},[3938,6552,6553],{"class":3990},"\"twitter:description\"",[3938,6555,6011],{"class":3983},[3938,6557,3987],{"class":3950},[3938,6559,6195],{"class":3990},[3938,6561,3958],{"class":3950},[3938,6563,6565,6567,6569,6571,6573,6576,6578,6580,6582],{"class":3940,"line":6564},31,[3938,6566,3951],{"class":3950},[3938,6568,5984],{"class":3954},[3938,6570,6003],{"class":3983},[3938,6572,3987],{"class":3950},[3938,6574,6575],{"class":3990},"\"twitter:creator\"",[3938,6577,6011],{"class":3983},[3938,6579,3987],{"class":3950},[3938,6581,6195],{"class":3990},[3938,6583,3958],{"class":3950},[3938,6585,6587,6589,6591,6593,6595,6598,6600,6602,6604],{"class":3940,"line":6586},32,[3938,6588,3951],{"class":3950},[3938,6590,5984],{"class":3954},[3938,6592,6003],{"class":3983},[3938,6594,3987],{"class":3950},[3938,6596,6597],{"class":3990},"\"twitter:image:src\"",[3938,6599,6011],{"class":3983},[3938,6601,3987],{"class":3950},[3938,6603,6195],{"class":3990},[3938,6605,3958],{"class":3950},[3938,6607,6609],{"class":3940,"line":6608},33,[3938,6610,4014],{"emptyLinePlaceholder":215},[3938,6612,6614],{"class":3940,"line":6613},34,[3938,6615,6616],{"class":3944},"\u003C!-- Favicon -->\n",[3938,6618,6620,6622,6625,6628,6630,6633,6636,6638,6641],{"class":3940,"line":6619},35,[3938,6621,3951],{"class":3950},[3938,6623,6624],{"class":3954},"link",[3938,6626,6627],{"class":3983}," rel",[3938,6629,3987],{"class":3950},[3938,6631,6632],{"class":3990},"\"shortcut icon\"",[3938,6634,6635],{"class":3983}," href",[3938,6637,3987],{"class":3950},[3938,6639,6640],{"class":3990},"\"XXXX.png\"",[3938,6642,3958],{"class":3950},[3938,6644,6646,6648,6650,6652,6654,6657,6659,6661,6663],{"class":3940,"line":6645},36,[3938,6647,3951],{"class":3950},[3938,6649,6624],{"class":3954},[3938,6651,6627],{"class":3983},[3938,6653,3987],{"class":3950},[3938,6655,6656],{"class":3990},"\"apple-touch-icon\"",[3938,6658,6635],{"class":3983},[3938,6660,3987],{"class":3950},[3938,6662,6640],{"class":3990},[3938,6664,3958],{"class":3950},[3938,6666,6668,6670,6672,6674,6676,6679,6682,6684,6687,6689,6691,6693],{"class":3940,"line":6667},37,[3938,6669,3951],{"class":3950},[3938,6671,6624],{"class":3954},[3938,6673,6627],{"class":3983},[3938,6675,3987],{"class":3950},[3938,6677,6678],{"class":3990},"\"apple-touch-icon-precomposed\"",[3938,6680,6681],{"class":3983}," sizes",[3938,6683,3987],{"class":3950},[3938,6685,6686],{"class":3990},"\"57x57\"",[3938,6688,6635],{"class":3983},[3938,6690,3987],{"class":3950},[3938,6692,6640],{"class":3990},[3938,6694,3958],{"class":3950},[3938,6696,6698,6700,6702,6704,6706,6708,6710,6712,6715,6717,6719,6721],{"class":3940,"line":6697},38,[3938,6699,3951],{"class":3950},[3938,6701,6624],{"class":3954},[3938,6703,6627],{"class":3983},[3938,6705,3987],{"class":3950},[3938,6707,6678],{"class":3990},[3938,6709,6681],{"class":3983},[3938,6711,3987],{"class":3950},[3938,6713,6714],{"class":3990},"\"72x72\"",[3938,6716,6635],{"class":3983},[3938,6718,3987],{"class":3950},[3938,6720,6640],{"class":3990},[3938,6722,3958],{"class":3950},[3938,6724,6726,6728,6730,6732,6734,6736,6738,6740,6743,6745,6747,6749],{"class":3940,"line":6725},39,[3938,6727,3951],{"class":3950},[3938,6729,6624],{"class":3954},[3938,6731,6627],{"class":3983},[3938,6733,3987],{"class":3950},[3938,6735,6678],{"class":3990},[3938,6737,6681],{"class":3983},[3938,6739,3987],{"class":3950},[3938,6741,6742],{"class":3990},"\"114x114\"",[3938,6744,6635],{"class":3983},[3938,6746,3987],{"class":3950},[3938,6748,6640],{"class":3990},[3938,6750,3958],{"class":3950},[3938,6752,6754,6756,6758,6760,6762,6764,6766,6768,6771,6773,6775,6777],{"class":3940,"line":6753},40,[3938,6755,3951],{"class":3950},[3938,6757,6624],{"class":3954},[3938,6759,6627],{"class":3983},[3938,6761,3987],{"class":3950},[3938,6763,6678],{"class":3990},[3938,6765,6681],{"class":3983},[3938,6767,3987],{"class":3950},[3938,6769,6770],{"class":3990},"\"144x144\"",[3938,6772,6635],{"class":3983},[3938,6774,3987],{"class":3950},[3938,6776,6640],{"class":3990},[3938,6778,3958],{"class":3950},[3938,6780,6782],{"class":3940,"line":6781},41,[3938,6783,4014],{"emptyLinePlaceholder":215},[3938,6785,6787],{"class":3940,"line":6786},42,[3938,6788,6789],{"class":3944},"\u003C!-- 還可以加上 -->\n",[3938,6791,6793],{"class":3940,"line":6792},43,[3938,6794,6795],{"class":3950},"media=\"screen and (min-device-width:481px) and (max-device-width:1024px) and (orientation:landscape) and (-webkit-min-device-pixel-ratio: 2)\">\n",[3938,6797,6799],{"class":3940,"line":6798},44,[3938,6800,4014],{"emptyLinePlaceholder":215},[3938,6802,6804],{"class":3940,"line":6803},45,[3938,6805,6806],{"class":3944},"\u003C!-- 關於行動裝置主畫面 -->\n",[3938,6808,6810],{"class":3940,"line":6809},46,[3938,6811,6812],{"class":3944},"\u003C!-- 添加到主畫面的標題（iOS 6 新增） -->\n",[3938,6814,6816,6818,6820,6822,6824,6827,6829,6831,6834],{"class":3940,"line":6815},47,[3938,6817,3951],{"class":3950},[3938,6819,5984],{"class":3954},[3938,6821,6003],{"class":3983},[3938,6823,3987],{"class":3950},[3938,6825,6826],{"class":3990},"\"apple-mobile-web-app-title\"",[3938,6828,6011],{"class":3983},[3938,6830,3987],{"class":3950},[3938,6832,6833],{"class":3990},"\"標題\"",[3938,6835,3958],{"class":3950},[3938,6837,6839],{"class":3940,"line":6838},48,[3938,6840,4014],{"emptyLinePlaceholder":215},[3938,6842,6844],{"class":3940,"line":6843},49,[3938,6845,6846],{"class":3944},"\u003C!-- 是否啟用 WebApp 全螢幕模式，刪除蘋果默認的工具欄和選單 -->\n",[3938,6848,6850,6852,6854,6856,6858,6861,6863,6865,6868],{"class":3940,"line":6849},50,[3938,6851,3951],{"class":3950},[3938,6853,5984],{"class":3954},[3938,6855,6003],{"class":3983},[3938,6857,3987],{"class":3950},[3938,6859,6860],{"class":3990},"\"apple-mobile-web-app-capable\"",[3938,6862,6011],{"class":3983},[3938,6864,3987],{"class":3950},[3938,6866,6867],{"class":3990},"\"yes\"",[3938,6869,6151],{"class":3950},[3938,6871,6873],{"class":3940,"line":6872},51,[3938,6874,4014],{"emptyLinePlaceholder":215},[3938,6876,6878],{"class":3940,"line":6877},52,[3938,6879,6880],{"class":3944},"\u003C!-- 添加智能 App 廣告條（iOS 6+ Safari） -->\n",[3938,6882,6884,6886,6888,6890,6892,6895,6897,6899,6902],{"class":3940,"line":6883},53,[3938,6885,3951],{"class":3950},[3938,6887,5984],{"class":3954},[3938,6889,6003],{"class":3983},[3938,6891,3987],{"class":3950},[3938,6893,6894],{"class":3990},"\"apple-itunes-app\"",[3938,6896,6011],{"class":3983},[3938,6898,3987],{"class":3950},[3938,6900,6901],{"class":3990},"\"app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL\"",[3938,6903,3958],{"class":3950},[3938,6905,6907],{"class":3940,"line":6906},54,[3938,6908,4014],{"emptyLinePlaceholder":215},[3938,6910,6912],{"class":3940,"line":6911},55,[3938,6913,6914],{"class":3944},"\u003C!-- 設置蘋果工具欄顏色 -->\n",[3938,6916,6918,6920,6922,6924,6926,6929,6931,6933,6936],{"class":3940,"line":6917},56,[3938,6919,3951],{"class":3950},[3938,6921,5984],{"class":3954},[3938,6923,6003],{"class":3983},[3938,6925,3987],{"class":3950},[3938,6927,6928],{"class":3990},"\"apple-mobile-web-app-status-bar-style\"",[3938,6930,6011],{"class":3983},[3938,6932,3987],{"class":3950},[3938,6934,6935],{"class":3990},"\"black\"",[3938,6937,6151],{"class":3950},[3938,6939,6941],{"class":3940,"line":6940},57,[3938,6942,4014],{"emptyLinePlaceholder":215},[3938,6944,6946],{"class":3940,"line":6945},58,[3938,6947,6948],{"class":3944},"\u003C!-- 忽略頁面中的數字識別為電話，忽略email識別 -->\n",[3938,6950,6952,6954,6956,6958,6960,6963,6965,6967,6970],{"class":3940,"line":6951},59,[3938,6953,3951],{"class":3950},[3938,6955,5984],{"class":3954},[3938,6957,6003],{"class":3983},[3938,6959,3987],{"class":3950},[3938,6961,6962],{"class":3990},"\"format-detection\"",[3938,6964,6011],{"class":3983},[3938,6966,3987],{"class":3950},[3938,6968,6969],{"class":3990},"\"telphone=no, email=no\"",[3938,6971,6151],{"class":3950},[3938,6973,6975],{"class":3940,"line":6974},60,[3938,6976,4014],{"emptyLinePlaceholder":215},[3938,6978,6980],{"class":3940,"line":6979},61,[3938,6981,6982],{"class":3944},"\u003C!-- iPad （直） 768 x 1004（標準解析度） -->\n",[3938,6984,6986,6988,6990,6992,6994,6997,6999,7001,7004,7006,7008,7011],{"class":3940,"line":6985},62,[3938,6987,3951],{"class":3950},[3938,6989,6624],{"class":3954},[3938,6991,6627],{"class":3983},[3938,6993,3987],{"class":3950},[3938,6995,6996],{"class":3990},"\"apple-touch-startup-image\"",[3938,6998,6681],{"class":3983},[3938,7000,3987],{"class":3950},[3938,7002,7003],{"class":3990},"\"768x1004\"",[3938,7005,6635],{"class":3983},[3938,7007,3987],{"class":3950},[3938,7009,7010],{"class":3990},"\"\u002Fsplash-screen-768x1004.png\"",[3938,7012,6151],{"class":3950},[3938,7014,7016],{"class":3940,"line":7015},63,[3938,7017,4014],{"emptyLinePlaceholder":215},[3938,7019,7021],{"class":3940,"line":7020},64,[3938,7022,7023],{"class":3944},"\u003C!-- iPad （直） 1536x2008（Retina） -->\n",[3938,7025,7027,7029,7031,7033,7035,7037,7039,7041,7044,7046,7048,7051],{"class":3940,"line":7026},65,[3938,7028,3951],{"class":3950},[3938,7030,6624],{"class":3954},[3938,7032,6627],{"class":3983},[3938,7034,3987],{"class":3950},[3938,7036,6996],{"class":3990},[3938,7038,6681],{"class":3983},[3938,7040,3987],{"class":3950},[3938,7042,7043],{"class":3990},"\"1536x2008\"",[3938,7045,6635],{"class":3983},[3938,7047,3987],{"class":3950},[3938,7049,7050],{"class":3990},"\"\u002Fsplash-screen-1536x2008.png\"",[3938,7052,6151],{"class":3950},[3938,7054,7056],{"class":3940,"line":7055},66,[3938,7057,4014],{"emptyLinePlaceholder":215},[3938,7059,7061],{"class":3940,"line":7060},67,[3938,7062,7063],{"class":3944},"\u003C!-- iPad (橫) 1024x748（標準解析度） -->\n",[3938,7065,7067,7069,7071,7073,7075,7077,7079,7081,7084,7086,7088,7091],{"class":3940,"line":7066},68,[3938,7068,3951],{"class":3950},[3938,7070,6624],{"class":3954},[3938,7072,6627],{"class":3983},[3938,7074,3987],{"class":3950},[3938,7076,6996],{"class":3990},[3938,7078,6681],{"class":3983},[3938,7080,3987],{"class":3950},[3938,7082,7083],{"class":3990},"\"1024x748\"",[3938,7085,6635],{"class":3983},[3938,7087,3987],{"class":3950},[3938,7089,7090],{"class":3990},"\"\u002FDefault-Portrait-1024x748.png\"",[3938,7092,6151],{"class":3950},[3938,7094,7096],{"class":3940,"line":7095},69,[3938,7097,4014],{"emptyLinePlaceholder":215},[3938,7099,7101],{"class":3940,"line":7100},70,[3938,7102,7103],{"class":3944},"\u003C!-- iPad (橫) 2048x1496（Retina）-->\n",[3938,7105,7107,7109,7111,7113,7115,7117,7119,7121,7124,7126,7128,7131],{"class":3940,"line":7106},71,[3938,7108,3951],{"class":3950},[3938,7110,6624],{"class":3954},[3938,7112,6627],{"class":3983},[3938,7114,3987],{"class":3950},[3938,7116,6996],{"class":3990},[3938,7118,6681],{"class":3983},[3938,7120,3987],{"class":3950},[3938,7122,7123],{"class":3990},"\"2048x1496\"",[3938,7125,6635],{"class":3983},[3938,7127,3987],{"class":3950},[3938,7129,7130],{"class":3990},"\"\u002Fsplash-screen-2048x1496.png\"",[3938,7132,6151],{"class":3950},[3938,7134,7136],{"class":3940,"line":7135},72,[3938,7137,4014],{"emptyLinePlaceholder":215},[3938,7139,7141],{"class":3940,"line":7140},73,[3938,7142,7143],{"class":3944},"\u003C!-- iPhone\u002FiPod Touch 豎屏 320x480 (標準解析度) -->\n",[3938,7145,7147,7149,7151,7153,7155,7157,7159,7161,7164],{"class":3940,"line":7146},74,[3938,7148,3951],{"class":3950},[3938,7150,6624],{"class":3954},[3938,7152,6627],{"class":3983},[3938,7154,3987],{"class":3950},[3938,7156,6996],{"class":3990},[3938,7158,6635],{"class":3983},[3938,7160,3987],{"class":3950},[3938,7162,7163],{"class":3990},"\"\u002Fsplash-screen-320x480.png\"",[3938,7165,6151],{"class":3950},[3938,7167,7169],{"class":3940,"line":7168},75,[3938,7170,4014],{"emptyLinePlaceholder":215},[3938,7172,7174],{"class":3940,"line":7173},76,[3938,7175,7176],{"class":3944},"\u003C!-- iPhone\u002FiPod Touch 豎屏 640x960 (Retina) -->\n",[3938,7178,7180,7182,7184,7186,7188,7190,7192,7194,7197,7199,7201,7204],{"class":3940,"line":7179},77,[3938,7181,3951],{"class":3950},[3938,7183,6624],{"class":3954},[3938,7185,6627],{"class":3983},[3938,7187,3987],{"class":3950},[3938,7189,6996],{"class":3990},[3938,7191,6681],{"class":3983},[3938,7193,3987],{"class":3950},[3938,7195,7196],{"class":3990},"\"640x960\"",[3938,7198,6635],{"class":3983},[3938,7200,3987],{"class":3950},[3938,7202,7203],{"class":3990},"\"\u002Fsplash-screen-640x960.png\"",[3938,7205,6151],{"class":3950},[3938,7207,7209],{"class":3940,"line":7208},78,[3938,7210,4014],{"emptyLinePlaceholder":215},[3938,7212,7214],{"class":3940,"line":7213},79,[3938,7215,7216],{"class":3944},"\u003C!-- iPhone 5\u002FiPod Touch 5 豎屏 640x1136 (Retina)-->\n",[3938,7218,7220,7222,7224,7226,7228,7230,7232,7234,7237,7239,7241,7244],{"class":3940,"line":7219},80,[3938,7221,3951],{"class":3950},[3938,7223,6624],{"class":3954},[3938,7225,6627],{"class":3983},[3938,7227,3987],{"class":3950},[3938,7229,6996],{"class":3990},[3938,7231,6681],{"class":3983},[3938,7233,3987],{"class":3950},[3938,7235,7236],{"class":3990},"\"640x1136\"",[3938,7238,6635],{"class":3983},[3938,7240,3987],{"class":3950},[3938,7242,7243],{"class":3990},"\"\u002Fsplash-screen-640x1136.png\"",[3938,7245,6151],{"class":3950},[3938,7247,7249],{"class":3940,"line":7248},81,[3938,7250,4014],{"emptyLinePlaceholder":215},[3938,7252,7254],{"class":3940,"line":7253},82,[3938,7255,7256],{"class":3944},"\u003C!-- RSS -->\n",[3938,7258,7260,7262,7264,7266,7268,7271,7274,7276,7279,7282,7284,7287,7289,7291,7294],{"class":3940,"line":7259},83,[3938,7261,3951],{"class":3950},[3938,7263,6624],{"class":3954},[3938,7265,6627],{"class":3983},[3938,7267,3987],{"class":3950},[3938,7269,7270],{"class":3990},"\"alternate\"",[3938,7272,7273],{"class":3983}," type",[3938,7275,3987],{"class":3950},[3938,7277,7278],{"class":3990},"\"application\u002Frss+xml\"",[3938,7280,7281],{"class":3983}," title",[3938,7283,3987],{"class":3950},[3938,7285,7286],{"class":3990},"\"RSS\"",[3938,7288,6635],{"class":3983},[3938,7290,3987],{"class":3950},[3938,7292,7293],{"class":3990},"\"\u002Frss.xml\"",[3938,7295,6151],{"class":3950},[10,7297,7298],{},"除此之外：",[37,7300,7301,7304,7307,7314,7323,7326],{},[40,7302,7303],{},"H1 — H5 至少要有一個，且按照層級出現，不可跳過。",[40,7305,7306],{},"資料類型請使用 table, 列表類型請使用 ol, ul。",[40,7308,7309,7310,7313],{},"內容太長可以使用錨點，例如 ",[1526,7311,7312],{},"\u003Ca href=\"#id\">\u003C\u002Fa>","，增加關聯性。",[40,7315,7316,7317,7319,7320,2858],{},"Html盡量符合語意，例如文章使用",[1526,7318,3457],{},"，章節使用",[1526,7321,7322],{},"\u003Csection>",[40,7324,7325],{},"如果可以，可增加影音類型有助提升 SEO。",[40,7327,7328],{},"可以增加輔助標示的要加上去。例如：",[3930,7330,7332],{"className":3932,"code":7331,"language":3934,"meta":200,"style":200},"\u003Cimg alt=\"測試圖\"\u002F>\n\u003Ca href=\"#\" title=\"連結\">連結文字\u003C\u002Fa>\n",[1526,7333,7334,7350],{"__ignoreMap":200},[3938,7335,7336,7338,7340,7343,7345,7348],{"class":3940,"line":3941},[3938,7337,3951],{"class":3950},[3938,7339,1371],{"class":3954},[3938,7341,7342],{"class":3983}," alt",[3938,7344,3987],{"class":3950},[3938,7346,7347],{"class":3990},"\"測試圖\"",[3938,7349,6151],{"class":3950},[3938,7351,7352,7354,7356,7358,7360,7363,7365,7367,7370,7373,7375],{"class":3940,"line":201},[3938,7353,3951],{"class":3950},[3938,7355,178],{"class":3954},[3938,7357,6635],{"class":3983},[3938,7359,3987],{"class":3950},[3938,7361,7362],{"class":3990},"\"#\"",[3938,7364,7281],{"class":3983},[3938,7366,3987],{"class":3950},[3938,7368,7369],{"class":3990},"\"連結\"",[3938,7371,7372],{"class":3950},">連結文字\u003C\u002F",[3938,7374,178],{"class":3954},[3938,7376,3958],{"class":3950},[37,7378,7379],{},[40,7380,7381],{},"語言",[3930,7383,7385],{"className":3932,"code":7384,"language":3934,"meta":200,"style":200},"\u003Chtml lang=\"en\">\n",[1526,7386,7387],{"__ignoreMap":200},[3938,7388,7389,7391,7393,7396,7398,7401],{"class":3940,"line":3941},[3938,7390,3951],{"class":3950},[3938,7392,3934],{"class":3954},[3938,7394,7395],{"class":3983}," lang",[3938,7397,3987],{"class":3950},[3938,7399,7400],{"class":3990},"\"en\"",[3938,7402,3958],{"class":3950},[77,7404,7406],{"id":7405},"vue","Vue",[10,7408,7409],{},"因為目前專案大部分都使用 Vue ，但 Vue 要做每頁都不一樣的 meta 資訊比較麻煩，所以直接使用 Nuxt。\n全域: 整個網站，寫在全域設定檔 nuxt.config.js\n單頁: 套用單頁，寫在該頁面的 head 設定，例如：",[3930,7411,7415],{"className":7412,"code":7413,"language":7414,"meta":200,"style":200},"language-ts shiki shiki-themes github-light github-dark","export default {\n  head: {\n    title: ''\n }\n}\n","ts",[1526,7416,7417,7429,7434,7442,7447],{"__ignoreMap":200},[3938,7418,7419,7423,7426],{"class":3940,"line":3941},[3938,7420,7422],{"class":7421},"svdQ7","export",[3938,7424,7425],{"class":7421}," default",[3938,7427,7428],{"class":3950}," {\n",[3938,7430,7431],{"class":3940,"line":201},[3938,7432,7433],{"class":3950},"  head: {\n",[3938,7435,7436,7439],{"class":3940,"line":204},[3938,7437,7438],{"class":3950},"    title: ",[3938,7440,7441],{"class":3990},"''\n",[3938,7443,7444],{"class":3940,"line":3975},[3938,7445,7446],{"class":3950}," }\n",[3938,7448,7449],{"class":3940,"line":4001},[3938,7450,7451],{"class":3950},"}\n",[77,7453,7454],{"id":7454},"網頁載入速度",[37,7456,7457,7460,7466,7476,7482,7485,7488,7491,7494,7497,7500,7503],{},[40,7458,7459],{},"基本先依據 Google PageSpeed Insights改善。至少半秒載完畫面。",[40,7461,7462,7463,7465],{},"提供 next-gen 格式的圖片",[516,7464],{},"\nJPEG 2000、JPEG XR 和 WebP 等圖片格式的壓縮效果通常優於 PNG 或 JPEG，因此能提高下載速度並節省使用者的數據用量。",[40,7467,7468,7469,7471,7472,7475],{},"使用大小合適的圖片有助於節省行動數據用量並縮短載入時間。",[516,7470],{},"\n視瀏覽器支援狀況採用不同技術，若可支援最新，圖片可使用 ",[1526,7473,7474],{},"\u003Cpicture>"," 相關 RWD 方式。若不支援最新，使用 css media方式。\n另外情境如果可以，使用 lazy loading。",[40,7477,7478,7479,7481],{},"排除禁止轉譯的資源。",[516,7480],{},"\n先載入必要之 js\u002Fcss ，其他不重要的使用 lazy loading",[40,7483,7484],{},"視情況使用 Cache",[40,7486,7487],{},"將主要執行緒的工作降到最低 。",[40,7489,7490],{},"文字壓縮",[40,7492,7493],{},"避免耗用大量網路資源。",[40,7495,7496],{},"減少 JavaScript 執行時間",[40,7498,7499],{},"將關鍵要求層級降至最低 。優先載入必要資源",[40,7501,7502],{},"降低要求數量並減少傳輸大小",[40,7504,7505],{},"手機版跟桌機版",[77,7507,7508],{"id":7508},"網站安全性",[37,7510,7511,7514,7517,7520,7523,7526,7529],{},[40,7512,7513],{},"Https (申請 SSL)，Chrome79將逐步封鎖網頁中未SSL加密之內容",[40,7515,7516],{},"如果使用者輸入http，也要轉到 Https",[40,7518,7519],{},"監控流量、伺服器錯誤、駭客入侵等可使用 Google Search Console幫助",[40,7521,7522],{},"備份",[40,7524,7525],{},"防火牆與弱掃",[40,7527,7528],{},"軟體更新",[40,7530,7531],{},"其他，sesstion 存活時間、不連外網、blahblah…",[77,7533,7534],{"id":7534},"提交索引",[37,7536,7537,7540,7543,7550],{},[40,7538,7539],{},"Google 在 2018\u002F7\u002F25 星期三宣布停止公開提交網址索引的服務。",[40,7541,7542],{},"Bing 於 2018\u002F9\u002F18 公告停止公開提交網址索引服務",[40,7544,7545],{},[178,7546,7549],{"href":7547,"rel":7548,"target":183,"title":184},"https:\u002F\u002Fsearch.google.com\u002Fsearch-console\u002Fabout",[182],"Google Search Console",[40,7551,7552],{},[178,7553,7556],{"href":7554,"rel":7555,"target":183,"title":184},"https:\u002F\u002Fwww.bing.com\u002Ftoolbox\u002Fwebmaster",[182],"Bing網站管理工具",[77,7558,7559],{"id":7559},"域名",[10,7561,7562],{},"域名最好可以包含關鍵字或相關。\n使用者不管有沒有打 www ，也要可以連線。\n域名最好是符合性質。例如台灣使用.tw，開發使用.dev",[77,7564,7566],{"id":7565},"robottxt","Robot.txt",[37,7568,7569,7578,7586,7594,7603,7611,7623,7630,7633,7636],{},[40,7570,7571,7572,7574,7575,7577],{},"允許所有搜尋引擎檢索所有內容(通常建議使用)",[516,7573],{},"\n User-agent: *",[516,7576],{},"\n Disallow:",[40,7579,7580,7581,7574,7583,7585],{},"拒絕所有搜尋引擎檢索所有內容(正式環境請避免使用)",[516,7582],{},[516,7584],{},"\n Disallow: \u002F",[40,7587,7588,7589,7574,7591,7593],{},"拒絕所有搜尋引擎檢索\u002Fmembers\u002F底下所有內容。",[516,7590],{},[516,7592],{},"\n Disallow: \u002Fmembers\u002F",[40,7595,7596,7597,7599,7600,7602],{},"拒絕Google搜圖的爬蟲檢索\u002Fimages\u002F底下所有內容。",[516,7598],{},"\n User-agent: Googlebot-image",[516,7601],{},"\n Disallow:\u002Fimages\u002F",[40,7604,7605,7606,7574,7608,7610],{},"萬用字元：拒絕所有搜尋引擎檢索網站內png為副檔名的圖檔。",[516,7607],{},[516,7609],{},"\n Disallow: *.png$",[40,7612,7613,7614,7616,7617,7619,7620,7622],{},"萬用字元：拒絕Bing搜尋引擎檢索網站內\u002Fwp-admin目錄底下所有內容及網站內開頭為test的所有檔名。",[516,7615],{},"\n User-agent: bingbot",[516,7618],{},"\n Disallow: \u002Fwp-admin\u002F",[516,7621],{},"\n Disallow: ^test*",[40,7624,7625,7626],{},"sitemap: ",[178,7627,7628],{"href":7628,"rel":7629},"http:\u002F\u002Fwww.XXXXXXXX.com\u002Fsitemap.xml",[182],[40,7631,7632],{},"Crawl-deslay: XX — 告訴爬蟲，再次來訪的最短時間間隔為20秒。(百度公開表示不支援此語法)",[40,7634,7635],{},"Robot.txt檔案只能放在網站的根目錄底下",[40,7637,7638],{},"有些東西要擋掉比較好",[77,7640,7641],{"id":7641},"其他",[37,7643,7644,7647,7662],{},[40,7645,7646],{},"XML",[40,7648,7649,7650,7652,7653,7655,7656,7658,7659,7661],{},"可使用工具產生：XML-Sitemaps",[516,7651],{},"\n網址數量往往超過一個Sitemap檔案可以乘載的大小？",[516,7654],{},"\n單靠Sitemap製作工具依然會有許多網頁沒辦法被找到？",[516,7657],{},"\n每天都有大量新頁面產生，需要時時更新Sitemap內的內容？",[516,7660],{},"\n解決辦法：套件、模組、自行開發程式自行產生sitemap",[40,7663,7664,7665,7667],{},"Subdomain or SubFolder？",[516,7666],{},"\n建議 SubFolder",[1366,7669,7670,7676],{},[10,7671,7672],{},[1371,7673],{"alt":7674,"src":7675},"Subdomain 與 SubFolder 比較圖表","\u002Fimages\u002Fblog\u002F9.png",[2930,7677,7678],{},[10,7679,7680],{},"SubFolder 表現較佳",[77,7682,4947],{"id":7683},"ux",[37,7685,7686,7689,7692,7695,7698,7701,7704,7707,7710,7716,7719,7722,7725,7728,7731],{},[40,7687,7688],{},"每頁至少要顯示關鍵字一次。",[40,7690,7691],{},"避免無意義的用關鍵字填滿內容，可使用同義詞 確保內容是高品質的。",[40,7693,7694],{},"內容定期更新，透露更新時間。",[40,7696,7697],{},"廣告不能影響主要內容閱讀，且可以是被辨別的。 提供外部連結與內部連結。",[40,7699,7700],{},"supplementary content。例如:導航選單。",[40,7702,7703],{},"舊的 SEO 資訊要清理乾淨 。",[40,7705,7706],{},"Copyright, Contact。",[40,7708,7709],{},"主要內容前 150 個字要有關鍵字。",[40,7711,7712,7715],{},[1526,7713,7714],{},"\u003Ctitle>","少於64個字符, 您最多可以包含12個單詞，這些單詞將被算作頁 面標題的一部分，並考慮在前8個單詞中使用重要的關鍵字。頁面標題 的其餘部分將被視為頁面上的普通文本。",[40,7717,7718],{},"別亂轉址。",[40,7720,7721],{},"太多 Landing Page 導到同一頁面。",[40,7723,7724],{},"頁面只以賺錢為目的，google 會視為垃圾。 廣告別亂放，蓋全頁面會被降低排名。",[40,7726,7727],{},"自動播放的影音廣告會降低排名 固定位置的大型廣告會降低排名 廣告在行動裝置大於30%高度會降低排名",[40,7729,7730],{},"全螢幕的廣告 動畫廣告",[40,7732,7733,7738],{},[178,7734,7737],{"href":7735,"rel":7736,"target":183,"title":184},"https:\u002F\u002Fwww.searchenginewatch.com\u002F2017\u002F11\u002F30\u002Fwhat-are-sitelinks-and-how-can-i-get-them\u002F",[182],"Sitelinks"," and search box internal 語言沒設定好，也會影響。",[1366,7740,7741,7747],{},[10,7742,7743],{},[1371,7744],{"alt":7745,"src":7746},"在搜尋結果出現站內搜尋框","\u002Fimages\u002Fblog\u002F10.webp",[2930,7748,7749],{},[10,7750,7751],{},"站內搜尋",[37,7753,7754,7756,7759],{},[40,7755,7381],{},[40,7757,7758],{},"301 Redirects Are POWERFUL & WHITE HAT",[40,7760,7761],{},"注意使用者在你的網站上的發言內容",[77,7763,7764],{"id":7764},"工具整理",[37,7766,7767,7772,7779,7786,7793,7800,7805,7812,7819,7826],{},[40,7768,7769],{},[178,7770,7549],{"href":7547,"rel":7771,"target":183,"title":184},[182],[40,7773,7774],{},[178,7775,7778],{"href":7776,"rel":7777,"target":183,"title":184},"https:\u002F\u002Fdevelopers.google.com\u002Fspeed\u002Fpagespeed\u002Finsights\u002F?hl=zh-TW",[182],"Google PageSpeed Insights",[40,7780,7781],{},[178,7782,7785],{"href":7783,"rel":7784,"target":183,"title":184},"https:\u002F\u002Fads.google.com\u002Fhome\u002Ftools\u002Fkeyword-planner\u002F",[182],"Google Ads 關鍵字研究",[40,7787,7788],{},[178,7789,7792],{"href":7790,"rel":7791,"target":183,"title":184},"https:\u002F\u002Fsearch.google.com\u002Fstructured-data\u002Ftesting-tool\u002F",[182],"Google結構化資料測試工具",[40,7794,7795],{},[178,7796,7799],{"href":7797,"rel":7798,"target":183,"title":184},"https:\u002F\u002Fmarketingplatform.google.com\u002Fabout\u002Fanalytics\u002F",[182],"Google Analytics",[40,7801,7802],{},[178,7803,7556],{"href":7554,"rel":7804,"target":183,"title":184},[182],[40,7806,7807],{},[178,7808,7811],{"href":7809,"rel":7810,"target":183,"title":184},"https:\u002F\u002Fkeywordtool.io\u002F",[182],"相關關鍵字檢索",[40,7813,7814],{},[178,7815,7818],{"href":7816,"rel":7817,"target":183,"title":184},"https:\u002F\u002Fapp.kwfinder.com\u002F",[182],"相關關鍵字檢索＋查看其他有關的網站",[40,7820,7821],{},[178,7822,7825],{"href":7823,"rel":7824,"target":183,"title":184},"https:\u002F\u002Fwww.xml-sitemaps.com\u002F",[182],"XML-Sitemaps",[40,7827,7828],{},[178,7829,7832],{"href":7830,"rel":7831,"target":183,"title":184},"https:\u002F\u002Fseositecheckup.com\u002F",[182],"SEO Reporter",[77,7834,3085],{"id":3085},[37,7836,7837,7844,7851,7858,7865,7872,7879,7886,7893,7900,7907,7914],{},[40,7838,7839],{},[178,7840,7843],{"href":7841,"rel":7842,"target":183,"title":184},"https:\u002F\u002Fzh.wikipedia.org\u002Fwiki\u002F%E6%90%9C%E5%B0%8B%E5%BC%95%E6%93%8E%E6%9C%80%E4%BD%B3%E5%8C%96#%E5%BD%93%E4%BB%A3%E6%90%9C%E5%B0%8B%E5%BC%95%E6%93%8E",[182],"搜尋引擎最佳化",[40,7845,7846],{},[178,7847,7850],{"href":7848,"rel":7849,"target":183,"title":184},"https:\u002F\u002Fwww.hobo-web.co.uk\u002Fseo-tutorial\u002F?fbclid=IwAR0QKuD_RBGD-DdRr2vbj3brSjJ9H_50hqtLKE98_C4BfRvufcW0F0IvnJI#an-introduction-to-seo",[182],"Google SEO Tutorial for Beginners | How To SEO A Website Step By Step (2020)",[40,7852,7853],{},[178,7854,7857],{"href":7855,"rel":7856,"target":183,"title":184},"https:\u002F\u002Fbacklinko.com\u002Fon-page-seo",[182],"On-Page SEO: Anatomy of a Perfectly Optimized Page (2019 Update)",[40,7859,7860],{},[178,7861,7864],{"href":7862,"rel":7863,"target":183,"title":184},"https:\u002F\u002Fwww.oxxostudio.tw\u002Farticles\u002F201406\u002Fsocial-meta.html",[182],"結構化資料 SEO 與 meta 標籤",[40,7866,7867],{},[178,7868,7871],{"href":7869,"rel":7870,"target":183,"title":184},"https:\u002F\u002Fithelp.ithome.com.tw\u002Farticles\u002F10201762",[182],"01. Nuxt.js 小跑起步 - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天",[40,7873,7874],{},[178,7875,7878],{"href":7876,"rel":7877,"target":183,"title":184},"https:\u002F\u002Fithelp.ithome.com.tw\u002Farticles\u002F10204248",[182],"08. Nuxt 客製《甜點電商》SEO 基本資訊 - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天",[40,7880,7881],{},[178,7882,7885],{"href":7883,"rel":7884,"target":183,"title":184},"http:\u002F\u002Fwww.ank.co.jp\u002Fworks\u002Fproducts\u002Fcopypelna\u002F",[182],"株式会社アンク：コピペ判定判定ソフト「コピペルナー」",[40,7887,7888],{},[178,7889,7892],{"href":7890,"rel":7891,"target":183,"title":184},"http:\u002F\u002Fsujiko.jp\u002F",[182],"重複コンテンツ・ミラーサイト・類似ページ判定ツール",[40,7894,7895],{},[178,7896,7899],{"href":7897,"rel":7898,"target":183,"title":184},"https:\u002F\u002Fsearch.google.com\u002Ftest\u002Fmobile-friendly",[182],"Mobile-Friendly Test - Google Search Console",[40,7901,7902],{},[178,7903,7906],{"href":7904,"rel":7905,"target":183,"title":184},"http:\u002F\u002Fseocheki.net\u002F",[182],"SEOチェキ！無料で使えるSEOツール",[40,7908,7909],{},[178,7910,7913],{"href":7911,"rel":7912,"target":183,"title":184},"https:\u002F\u002Fthe-allstars.com\u002Ftools\u002Fkeyword\u002Fsearch",[182],"Google \u002F Yahoo 關鍵字排名查詢 | 陪您航向未來的好夥伴 - Allstars 星辰網站建置與網頁設計",[40,7915,7916],{},[178,7917,7920],{"href":7918,"rel":7919,"target":183,"title":184},"https:\u002F\u002Fmyrankaware.com\u002F",[182],"Free Keyword Rank Checker Tool Online for Google, Yahoo, Bing",[4629,7922,7923],{},"html pre.shiki code .ssxIu, html code.shiki .ssxIu{--shiki-default:#24292E;--shiki-github-dark:#E1E4E8}html pre.shiki code .sk71V, html code.shiki .sk71V{--shiki-default:#22863A;--shiki-github-dark:#85E89D}html pre.shiki code .sIsaT, html code.shiki .sIsaT{--shiki-default:#6F42C1;--shiki-github-dark:#B392F0}html pre.shiki code .sJ6F3, html code.shiki .sJ6F3{--shiki-default:#032F62;--shiki-github-dark:#9ECBFF}html pre.shiki code .sdCPZ, html code.shiki .sdCPZ{--shiki-default:#6A737D;--shiki-github-dark:#6A737D}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .github-dark .shiki span {color: var(--shiki-github-dark);background: var(--shiki-github-dark-bg);font-style: var(--shiki-github-dark-font-style);font-weight: var(--shiki-github-dark-font-weight);text-decoration: var(--shiki-github-dark-text-decoration);}html.github-dark .shiki span {color: var(--shiki-github-dark);background: var(--shiki-github-dark-bg);font-style: var(--shiki-github-dark-font-style);font-weight: var(--shiki-github-dark-font-weight);text-decoration: var(--shiki-github-dark-text-decoration);}html pre.shiki code .svdQ7, html code.shiki .svdQ7{--shiki-default:#D73A49;--shiki-github-dark:#F97583}",{"title":200,"searchDepth":201,"depth":201,"links":7925},[7926,7927,7928,7929],{"id":474,"depth":204,"text":474},{"id":5946,"depth":204,"text":5946},{"id":5952,"depth":204,"text":5953},{"id":5969,"depth":204,"text":5969},"2020-01-16","SEO（搜尋引擎最佳化）學習筆記總整理：從 HTML meta、載入速度、網站安全、提交索引、robots.txt 到 UX 與實用工具的完整重點。",{},"\u002Fzh\u002Fblog\u002Fseo",{"title":5936,"description":7931},"zh\u002Fblog\u002Fseo",[1730,7937],"搜尋引擎","ggAaIsDqD0uhYM2nK6OPWCxVC48u0M0xplFrQVb-xqI",{"id":7940,"title":7941,"body":7942,"date":8119,"description":7948,"draft":212,"extension":213,"meta":8120,"navigation":215,"ogImage":216,"path":8121,"seo":8122,"stem":8123,"tags":8124,"translationKey":216,"updatedAt":216,"__hash__":8127},"blog_zh\u002Fzh\u002Fblog\u002Fshopping-in-chat-ui.md","如果使用即時通訊 UI 來設計購物車結帳流程，會是什麼樣的感覺？",{"type":7,"value":7943,"toc":8111},[7944,7946,7949,7952,7955,7958,7962,7975,7978,7981,7984,7987,7990,8003,8006,8009,8012,8015,8018,8022,8035,8038,8041,8054,8057,8070,8073,8076,8079,8082,8085,8088,8091,8094,8097,8100,8103],[29,7945,474],{"id":474},[10,7947,7948],{},"昨晚在填寫一些網路表單覺得好枯燥乏味時，突然標題靈光一閃，於是決定在放國慶連假前，好好的集中精神來實做、初探一下，否則放完了假可能會是一條活屍行走於人間…",[10,7950,7951],{},"而因為是一時興起，所以決定能不動流程就不動的前提之下來進行，流程參考為 P 家 APP 從檢視購物車到結帳的流程：",[10,7953,7954],{},"購物車清單(可調整商品數量)\n付款方式選擇(可調整付款方式細項)\n購買人、發票與收貨人資料(可編輯)\n送出訂單。\n當然，我不精於做購物網站，這個流程中一定還有很多特殊的「眉角」我沒注意到和不知道的，正在閱讀此篇文章的你，不管你是在這方面領域的高高手或是喜愛購物的捧油們，只要認為有問題或值得討論的地方就可以框起來留言或是在最底下留言，大家一起研究研究。",[10,7956,7957],{},"如果你準備好了就可以隨時開始閱讀，希望讀完後你會覺得我可以。",[29,7959,7961],{"id":7960},"購物車清單-與調整商品數量","購物車清單 與 調整商品數量",[1366,7963,7964,7970],{},[10,7965,7966],{},[1371,7967],{"alt":7968,"src":7969},"聊天訊息框裡顯示購物車商品以及商品總額計算","\u002Fimages\u002Fblog\u002F2.png",[2930,7971,7972],{},[10,7973,7974],{},"左圖：購物車清單 ; 右圖：編輯購物車",[10,7976,7977],{},"開始總是美好的，畫完之後完全覺得沒問題…",[10,7979,7980],{},"清單中拋棄直接在裡面編輯數量的做法，因為版面會不夠用，所以乾脆直接用一顆修改按鈕。模糊背景後利用卡片式手法顯示編輯頁，單項數量增減使用大顆按鈕點擊，數字則不能歸 0 ，有看過一種方式是歸 0 後，會跳出警告視窗說明歸 0 會從購物車刪除，但我想讓這個品項必須按刪除才能刪除，讓商品盡可能留在畫面上，也許還有從 0 到 1 的機會(風險則是使用者會不會很想直接按刪除…)。",[10,7982,7983],{},"調整後回到左圖清單中，清單立即刷新，總額數字擺在結帳按鈕左邊，利用簡單的設計手法讓他看得清，但又不要一直注意總金額，畢竟，買到自己想要跟需要的產品，不管花多少應該都值得 😂 。",[10,7985,7986],{},"右圖上方的總額捲動時會縮小並固定於最上方。另外卡片以垂直滑動，因為使用左右滑動可能會誤觸數量+- 按鈕，而且比起橫向滑動，我覺得垂直滑動更得心應手，而且不會有左右手問題。",[29,7988,7989],{"id":7989},"付款方式選擇",[1366,7991,7992,7998],{},[10,7993,7994],{},[1371,7995],{"alt":7996,"src":7997},"結帳流程","\u002Fimages\u002Fblog\u002F3.png",[2930,7999,8000],{},[10,8001,8002],{},"左圖：選擇付款方式 ; 右圖：選擇信用卡分期付款。",[10,8004,8005],{},"畫到這裡其實已經開始覺得我幹嘛自己踩這個坑，這裡超煩躁的。",[10,8007,8008],{},"當上一步按結帳之後，訊息欄先跳出總金額，接著詢問付款方式，因為我們是用即時通訊的設計方法，所以詢問的語氣可以展現親和力。",[10,8010,8011],{},"因為規定自己在一天內完成這個實驗，所以直接挑信用卡實作，先不考量其他付款方式，但不管如何，這裏我想來想去都需要用第二畫面來實作，否則一問一答之下很容易讓訊息過多，也就分散購物的注意力了。另外則是用第二畫面之後，可以保留日後的擴充性。",[10,8013,8014],{},"接著是最底下「稍等再…要買」那個位置，我一直在思考什麼時候要讓使用者說話，如果有 AI 的介入，我可能就會把使用者文字輸入框永遠顯示。如果沒有，基於循循善誘的原則，放顆按鈕讓他可以隨時離開結帳流程，但導引他到可以買更多東西的地方去，比如可以引導去熱門商品逛逛看。",[10,8016,8017],{},"右圖左下角則提供更換付款方式。右下角按下確定後，則進入下一個對話。",[29,8019,8021],{"id":8020},"購買人發票方式與收貨人資料及其資料編輯","購買人、發票方式與收貨人資料及其資料編輯",[1366,8023,8024,8030],{},[10,8025,8026],{},[1371,8027],{"alt":8028,"src":8029},"修改信用卡資料","\u002Fimages\u002Fblog\u002F4.png",[2930,8031,8032],{},[10,8033,8034],{},"左圖：購買人資料 ; 右圖：購買人資料編輯。",[10,8036,8037],{},"如果先前已經購物過，則直接顯示購買人資訊，確定無誤則直接輸入信用卡背後 3 碼。若先前沒有購買過或是想修改資料，則使用第二畫面填寫，底下仍舊保留兩顆按鈕，可以取消修改或是按確定直接進到下一步。",[10,8039,8040],{},"這裡思考很久的地方是背面 3 碼要不要統一輸入形式的問題，但最後還是決定在修改時可以直接輸入，就不需要剛從傳統表單填完又要以即時通訊的輸入方式填那 3 碼，雖然分兩種輸入方式，但我覺得這樣會是比較好的。",[1366,8042,8043,8049],{},[10,8044,8045],{},[1371,8046],{"alt":8047,"src":8048},"發票處理方式","\u002Fimages\u002Fblog\u002F5.png",[2930,8050,8051],{},[10,8052,8053],{},"左圖：發票處理方式 ; 右圖：使用者輸入統一發票",[10,8055,8056],{},"發票則因為相對簡單，捐贈可以使用第二畫面來挑選與輸入愛心碼，統一發票則是直接使用輸入框(右圖)，並提供一個取消按鈕，讓他可以返回。如果已經輸入了統一發票(下方左圖)，則取消會變成修改按鈕，提供修改機會。",[1366,8058,8059,8065],{},[10,8060,8061],{},[1371,8062],{"alt":8063,"src":8064},"收件資料修改","\u002Fimages\u002Fblog\u002F6.png",[2930,8066,8067],{},[10,8068,8069],{},"左圖：收貨人資料 ; 右圖：收貨人資料編輯。",[10,8071,8072],{},"終於來到最後一個步驟，如果已經有資料則直接顯示，若沒有則有兩種方式：通訊錄快速選單 與 直接修改。 快速選單只顯示名稱與地址部分資料，因為這裡不會有數字增減按鈕，所以使用了左右滑動概念，點擊後直接更新收貨人資料。直接修改則是使用第二畫面，只顯示必要的欄位。",[10,8074,8075],{},"到了這個節骨眼，左下角仍舊保持著稍待結帳你可能覺得奇怪，而我的目的是為了讓使用者臨時想起或是親友突然要他加買個東西，可以再跳出去，等待下次進來(但仍舊是本次操作沒離開 APP)，就直接進到這個最後畫面，點擊完成終結這趟旅程，也就是說，整個旅程都是隨時可以跳出去的，即便這樣有風險，但也許會得到更多。",[29,8077,8078],{"id":8078},"感想",[10,8080,8081],{},"優點：",[10,8083,8084],{},"只要畫面捲回去看就一目瞭然各種資訊，畫面上不需要有重複提示(例如總金額，數量…等)。\n循序漸進的誘導，避免使用者以往在填寫表單時會不照順序填，出錯機率較小，一次只專注一種題目。\n視覺與心理較為輕鬆，不若以往心態上很謹慎的填寫(容易手滑？)。",[10,8086,8087],{},"缺點：",[10,8089,8090],{},"仍在某些時刻，需要填寫傳統表單，若全用訊息方式訊息會過長。\n對於進階高手，有可能反而造成結帳速度過慢。\n沒有 AI 介入，為了防呆，使用者文字輸入框會極少出現，有點失去用此設計的意義。如果能直接輸入「信用卡分3期0利率，開統一發票：12345678」，一瞬之間就可以忽略兩個步驟，而且自動判斷流程哪個還沒填到就最棒了。\n可能需要的互動技巧：",[10,8092,8093],{},"任何經過修正的資料，都要在原來的對話方塊內做即時更新，讓未來畫面回卷時都能夠再做修正，避免使用者不知道之前的對話方塊內的按鈕是否能再點擊，而且有更動過的資料要重新顯示在最新訊息位置。另外置底的按鈕也要判斷是否已經填完全部所需資料，才出現「完成」按鈕。",[29,8095,8096],{"id":8096},"結語",[10,8098,8099],{},"此篇幾乎都是基於我平時當一個正常使用者時的情況來做一個設想，初步探討用這樣的方式來設計購物車可能會遇到什麼樣的麻煩，然後如何解決遇到的問題。雖然沒有什麼數據可以支持我的這些構想，但如果有些許地方能幫上你的忙的話那就太棒了！",[10,8101,8102],{},"最後，獻上初淺的流程圖，祝大家民國 106 年國慶愉快！",[1366,8104,8105],{},[10,8106,8107],{},[1371,8108],{"alt":8109,"src":8110},"聊天訊息框購物流程圖","\u002Fimages\u002Fblog\u002F7.png",{"title":200,"searchDepth":201,"depth":201,"links":8112},[8113,8114,8115,8116,8117,8118],{"id":474,"depth":204,"text":474},{"id":7960,"depth":204,"text":7961},{"id":7989,"depth":204,"text":7989},{"id":8020,"depth":204,"text":8021},{"id":8078,"depth":204,"text":8078},{"id":8096,"depth":204,"text":8096},"2017-10-06",{},"\u002Fzh\u002Fblog\u002Fshopping-in-chat-ui",{"title":7941,"description":7948},"zh\u002Fblog\u002Fshopping-in-chat-ui",[3829,8125,8126],"即時通訊","線上購物","Pxs184xQ4v5UmNuMR0zlytBTcYr0CYGvNoysCtb50tE",1782154043399]