iifun.com.tw

无障碍网站（无碍障网站）是指让身心障碍者——包括视障、听障、肢体障碍与认知障碍者——能够顺利取得网站资讯与完成操作的设计方式。在台湾，若网站属于各级政府机关或学校，且为新设或改版，依立法院2017年（民国106年）8月决议，须依据「网站无障碍规范2.0版」检测等级AA以上进行设计；一般企业网站目前没有同等强制要求，但采用无障碍设计能扩大可触及的用户群，也是常见的品质指标。以下说明规范背景、适用差异、实作要点与验收方式。

规范背景与适用对象

规范的核心目的是保障身心障碍者的资讯取得权利。对承接政府专案的单位而言，无障碍等级往往是验收条件之一；对一般企业而言，它更接近一种服务覆盖面的选择——网站能被更多人使用，也减少因操作障碍流失的访客。

常见无障碍设计要点

无障碍不是单一功能，而是一组互相配合的做法。建置时通常需要覆盖以下几个面向：

• 键盘可操作：所有功能（选单、表单、按钮、弹窗）都能只用键盘完成，不依赖鼠标。焦点顺序需符合阅读逻辑，且当前焦点位置要可见。
• 图片替代文字（alt）：有意义的图片需提供描述性替代文字；纯装饰性图片则应留空，避免屏幕阅读器读出无意义内容。
• 色彩对比度：文字与背景的对比需达到规范要求，确保低视力用户可辨识；同时避免只用颜色传递资讯（例如只用红绿区分状态）。
• 语义化标签与结构：正确使用标题层级（h1–h6）、列表、表格标题、表单标签等，让辅助技术能理解页面结构。
• 影片与多媒体：预录影片提供字幕，纯音频内容提供文字稿。
• 表单可及性：每个输入栏位有对应的标签，错误提示明确且可被辅助技术读取。

这些要点彼此关联：只做替代文字却无法键盘操作，或对比度足够但结构混乱，都难以通过检测。

如何检测与验收

无障碍网站的验收通常分两个层次：

1. 自动化检测：使用无障碍检测工具扫描页面，可快速找出缺少替代文字、对比度不足、标签缺失等机器可判断的问题。自动化工具能覆盖一部分检查项，但无法判断替代文字是否「有意义」、焦点顺序是否合理。
2. 人工检测：由人工实际以键盘操作、搭配屏幕阅读器浏览，确认操作流程顺畅、资讯可理解。这是验收中不可省略的部分。

常见未通过的原因包括：图片缺少替代文字或替代文字无意义、表单栏位没有对应标签、键盘无法操作下拉选单或弹窗、焦点顺序错乱、对比度不足，以及标题层级跳级导致结构不清。这些问题在自动化扫描中往往能被部分检出，但最终仍需人工确认。

建置时的实务考量

若网站需要符合无障碍规范，建议在设计阶段就纳入，而不是等网站完成后再补。事后修改往往涉及版面调整、元件重写，成本高于一开始就采用无障碍友好的结构与元件。选择建置系统或委外团队时，可确认对方是否具备无障碍网站的制作经验，以及是否能在交付前提供检测报告。

以魁亨科技（IIFun）为例，其网站载明提供无障碍网页设计服务，并称有多年无障碍网站制作经验，曾协助政府机关与财团法人建置兼具视觉与无障碍规范的网站。这类经验可作为评估委外对象的参考条件之一，但实际是否符合规范，仍应以检测结果为准。

网页设计不只是把页面画得好看，它至少包含四层工作：视觉与版式、前端适配（如RWD响应式）、后台内容管理（CMS），以及主机、资安与后续维运。选择方案时，先确认你的网站属于哪一类——政府/学校类通常要满足无障碍规范，企业形象站重视响应式与好维护，电商和数据库型网站则要看功能模块与系统整合能力。以下按类型拆解差异与选择条件。

网页设计实际包含哪些工作

一个可上线的网站，通常要完成这些环节：

• 视觉与信息架构：页面风格、导航结构、栏目规划，决定用户能否快速找到内容。
• 前端适配：让同一套内容在桌机、平板、手机上都能正常阅读和操作，即RWD响应式设计。
• 后台管理系统（CMS）：让非技术人员能自行上架文章、换图、改栏目，不必每次找工程师。
• 功能模块：表单、搜索、会员、金流、数据库查询等，按需求增减。
• 主机、网域与资安：网站放在哪、SSL凭证、弱点扫描、备份与更新机制。
• 后续维运：版本更新、故障处理、内容协助，这部分常被低估。

只比“设计费”容易漏掉后三项，而它们往往决定网站两年后还能不能用。

RWD响应式设计：为什么现在几乎是基本要求

RWD（Responsive Web Design，响应式网页设计）指同一份网页内容，依屏幕宽度自动调整排版，在桌机、平板、手机上呈现合适的阅读体验。

它的意义不只是好看：

• 行动装置已成为搜索主流，用户多半先用手机打开你的网站。
• 搜索引擎以行动版内容决定排名，没有RWD可能直接影响曝光。
• 维护一套内容比另做手机版网站更省成本。

适用判断：只要你的访客可能用手机访问（几乎涵盖所有对外网站），RWD就应列为必要项，而不是加购选项。

无障碍网站：谁需要、依据什么规范

无障碍网站是让身心障碍者也能顺利取得网站信息，例如图片有替代文字、键盘可操作、对比度足够、结构语义清楚。

资料中提到一个明确的适用条件：立法院于106年（2017年）8月决议，要求各政府机关与学校在建置网站新设或改版时，应依据“网站无障碍规范2.0版”，以检测等级AA以上进行设计。

选择条件：

• 属于政府机关、学校、公法人或承接政府标案者，无障碍通常不是可选项，需按规范检测。
• 一般企业网站若重视品牌形象与可达性，也可导入无障碍设计，但规范等级要求视自身定位而定。
• 无障碍与视觉美观并不冲突，有经验的团队可同时兼顾。

CMS与共构平台：让内容维护变简单

CMS（内容管理系统）解决的是“网站上线后谁来更新”的问题。以资料中的RWES网站建置系统为例，其定位是把复杂功能开发交给服务商，用户通过直觉式后台界面自行管理内容，并搭配多样化模组功能。

共构平台/无限架站则适合需要同时管理多个站点、或想用一套系统快速开出多个网站的机构，例如政府单位的多子站架构。

选择条件：

• 内容更新频繁、但没有专职工程师 → 优先考虑CMS。
• 需要多站点统一管理 → 看共构平台是否支持。
• 功能高度特殊、现有模组无法满足 → 才考虑客制化开发，成本与工期通常更高。

不同功能型网站的适用场景

选服务商前应确认的资安与维运事项

网站被入侵、资料外泄的代价往往远高于建置费，签约前建议确认：

• 资安认证：例如是否通过ISO27001资讯安全管理验证。资料中魁亨科技即通过全组织验证，并说明其管理涵盖开发、成品到客户应用各环节。
• 主机环境：使用何种云端机房或服务，是否含备份与备援。
• SSL凭证与扫描：是否提供SSL数位凭证、网站弱点扫描等周边服务。
• 后续维运：更新、故障处理的响应方式与范围。
• 周边整合：邮件、防毒、站内搜索等是否可一并整合，减少多头对接。

怎么选：按需求对号入座

• 要快速上线、内容自己维护 → 选CMS或快速架站系统。
• 受法规约束的机关学校 → 无障碍规范AA以上 + 资安认证是硬条件。
• 要卖东西 → 电子商务网站，重点看金流与订单管理。
• 要查询与登录功能 → 数据库网站，重点看系统开发能力。
• 有多个站点 → 共构平台，重点看统一管理与扩充性。

网页设计的核心不是选最贵的方案，而是先厘清“网站要做什么、谁来维护、受什么规范约束”，再对应到响应式、无障碍、CMS或电商等功能组合。把这三点写进需求清单，比只比较报价更能避免后续返工。

RWD（Responsive Web Design，响应式网页设计）指的是用同一套网页内容，通过弹性网格、图片与 CSS 媒体查询，让版面自动适配桌机、平板、手机的屏幕宽度，而不是为每种设备各做一套网站。它适合绝大多数需要被手机用户访问的网站；但如果你的网站只是内部使用、访问设备单一，改版的优先级就可以往后放。

RWD 的核心机制：一套内容，多种版面

RWD 不是"把网页缩小"，而是让版面结构随屏幕宽度重新排列。关键在三件事：

• 弹性网格：栏宽用百分比等相对单位，而非固定像素，容器能随屏幕伸缩。
• 弹性图片与媒体：图片、视频最大宽度不超过容器，避免撑破版面。
• 媒体查询（Media Query）：在设定的断点（breakpoint）上切换样式，例如窄屏时把三栏改为单栏、把横向导航收成汉堡菜单。

预期结果是：同一个网址，桌机看到多栏布局，手机看到单栏堆叠，内容一致、无需另建 m.url 手机版。

为什么现在不做 RWD 会吃亏

IIFun 魁亨科技在其 RWD 响应式网页设计页面中直接点出两个现实：行动装置已取代电脑成为搜寻主流，Google 也宣布将以行动版内容决定网站搜寻排名。这意味着：

• 流量层面：手机用户打开你的站，如果字太小、要左右拖动、按钮点不到，多数人会直接离开。
• 排名层面：搜索引擎以行动版内容作为判断依据，没有适配行动装置的页面在曝光上处于劣势。
• 维护层面：桌机版与手机版分开维护，内容要改两次，长期成本更高。

所以"要不要做 RWD"对多数对外经营的网站来说，已经不是选择题，而是时间问题。

RWD、无障碍网页、CMS 建站是什么关系

这三者常被混在一起问，其实解决的是不同问题，可以叠加：

关于无障碍，IIFun 的资料提到：立法院于 106 年 8 月决议要求各机关与学校在网站新设或改版时，应依「网站无障碍规范 2.0 版」检测等级 AA 以上进行设计。也就是说，政府机关与学校的网站改版，无障碍不是加分项而是要求，且通常与 RWD 改版一起规划更省事。

CMS 方面，IIFun 提供自研的 RWES 网站建置系统，主打模块化功能与直觉式后台，让非技术人员也能更新内容。选 CMS 时要留意：它是否支持你在 RWD 版面上自由调整内容区块，否则前台再漂亮，后台难用一样会拖垮维护效率。

判断你的网站该不该改版为 RWD

出现以下任一信号，就值得认真评估改版：

• 用手机打开自己的网站，需要放大、左右滑动才能读完。
• 后台流量数据显示手机访客占比高，但手机端跳出率明显偏高。
• 网站是政府机关或学校，且面临新设或改版，需符合无障碍规范 AA 等级。
• 现有网站是旧式固定宽度版面，或另有独立的手机版网址需要同步维护。
• 搜索引擎带来的流量持续下滑，而竞争对手的手机体验明显更好。

找外包做 RWD 网站，该问清楚这几件事

同样是"做 RWD"，交付品质差别很大。签约前建议确认：

1. 断点怎么定：是套用通用断点，还是按你的实际内容与用户设备分布调整。
2. 测试覆盖哪些装置：是否在主流手机、平板、桌机尺寸上实测，而不只是浏览器缩放预览。
3. 后台好不好维护：内容编辑能否在不动代码的情况下调整版面，这是长期成本的关键。
4. 是否一并考虑无障碍：若你是机关或学校，无障碍规范 2.0 AA 等级应写进需求。
5. 资安与稳定性：网站涉及表单、会员或个资时，供应商的资安管理能力值得纳入评估。IIFun 的资料显示其已通过 ISO27001 资讯安全管理全组织验证，可作为评估供应商时的参考维度之一。

RWD 是地基，无障碍是合规与亲和力，CMS 是长期维护的抓手。三者一起规划，比事后逐个补做更省成本。

共構平台是指多個單位共用同一套系統架構與後台，但各自擁有獨立網站與內容的建置模式。它適合政府機關、學校、多子站體系，或需要在統一資安與無障礙規範下快速開站的組織。若你只需要單一網站、且功能高度特殊，一般CMS或完全客製化會更合適。

共構平台的核心概念

共構平台把「系統」與「網站」分開：底層的程式架構、資安機制、無障礙規範由平台統一維護，上層則開放多個單位各自建立網站、管理自己的內容。

以IIFun魁亨科技提供的「共構平台／無限架站」為例，其定位是讓多個站台共用同一套建置系統，各單位擁有獨立的前台與後台，但底層維運與安全由平台方集中處理。這與「一個網站一套CMS」的思維不同，重點在於共用架構、各自營運。

共用什麼、不共用什麼

和一般CMS、客製化網站的差異

三者在成本、建置時間、維護與擴充性上的取捨不同：

一般CMS（單站）

• 成本：單站授權或建置費，較低
• 建置時間：短，套版即可上線
• 維護：由使用單位自行或委外維護單一系統
• 擴充：新增子站需另建一套，難以統一管理

共構平台

• 成本：多站分攤同一套系統，站數越多、單站成本越低
• 建置時間：開新站快，因為架構已存在
• 維護：系統層由平台方集中維護，內容由各單位負責
• 擴充：新增子站容易，且能維持一致的資安與規範

完全客製化網站

• 成本：最高，需從零開發
• 建置時間：最長
• 維護：客製功能越多，後續維護越複雜
• 擴充：彈性最大，但每次擴充都是新的開發案

適合採用共構平台的典型場景

• 政府機關與學校：需符合無障礙規範與資安要求，且常有多個科室或系所各自需要網站
• 多子站體系：總部與分支、多品牌、多專案需要獨立前台但統一管理
• 需統一資安規範的組織：不希望在每個站台各自處理資安與更新

IIFun魁亨科技通過ISO27001資訊安全管理全組織驗證，並有政府機關與財團法人的無障礙網站製作經驗，這類背景正是共構平台常見的採用條件。

常見功能模組與後台管理

共構平台通常提供多樣化模組與直覺式後台，讓非技術人員也能管理內容。以IIFun的RWES網站建置系統為例，其訴求是「複雜的功能開發交給平台，使用者只需輕鬆管理內容」。

上線後，內容維運由各單位自行負責，平台方負責系統層的維護、資安更新與功能擴充。這是採用前必須確認的責任分工。

選擇共構平台方案時應確認的事項

• 資安規範：平台是否通過ISO27001等驗證，弱點掃描與更新機制如何運作
• 無障礙規範：是否符合「網站無障礙規範2.0版」檢測等級AA以上，這對政府與學校單位是硬性要求
• 擴充限制：站數上限、模組能否客製、未來新增功能是否需額外開發
• 資料歸屬與移轉：若日後要離開平台，內容與資料能否完整匯出
• 維運責任：系統層與內容層的責任界線，以及服務時間與支援方式

共構平台的價值在於「一次建好架構，多站快速啟用並統一管理」。若你的組織有多個網站需求、且重視一致的資安與無障礙規範，它通常比逐站建置更有效率；若只有單一網站且功能特殊，直接選CMS或客製化反而更單純。