PHP 與 CSS 實現網頁字體大小切換：無障礙設計實戰

為什麼需要文字大小切換？

並非所有訪問者都是視力完好的年輕人，也未必熟悉瀏覽器內建的縮放功能。提供直觀的「大/中/小」按鈕，能顯著提升網站的無障礙體驗，尤其對長者與視障用戶友好。

核心原理

1. 準備三套 CSS：small.css（10px）、medium.css（17px）、large.css（25px），僅設定 body { font-size: ... }。
2. 頁面頂部放置三個連結，分別指向 resize.php?s=small|medium|large。
3. resize.php 將選擇的尺寸存入 $_SESSION['textsize']，並重定向回原頁（$_SERVER['HTTP_REFERER']）。
4. 頁面載入時讀取 Session，動態引入對應 CSS：
   <link rel="stylesheet" href="<?php echo $_SESSION['textsize']; ?>.css">

關鍵代碼片段

resize.php

<?php
session_start();
$_SESSION['textsize'] = $_GET['s'];
header("Location: " . $_SERVER['HTTP_REFERER']);
?>

頁面模板

<?php session_start(); ?>
<link rel="stylesheet" href="<?php echo isset($_SESSION['textsize']) ? $_SESSION['textsize'] : 'medium'; ?>.css">
<a href="resize.php?s=small">小</a> |
<a href="resize.php?s=medium">中</a> |
<a href="resize.php?s=large">大</a>

進階建議

• 使用 Cookie 替代 Session，實現跨會話記憶用戶偏好。
• 結合 CSS rem 單位，實現整站比例縮放而非僅調整字號。
• 按鈕應具備可聚焦狀態，支援鍵盤操作與螢幕閱讀器。