[網頁設計] 有助於色盲使用者的友善體驗 (2)實作範例

上一篇「有助於色盲使用者的友善體驗 (1)設計構思」，提出本站的設計方針為：

• 原本文章區塊為黃底黑字，另一套 CSS 將會使用白底黑字，用來增加對比。
• 原本文章區塊的連結無底線，另一套 CSS 將會使用底線。
• 本站文章常用紅字標示重點，同時教學程式碼中包含了大量的紅、藍、綠字串，為了幫助辨識，另一套 CSS 會將常用顏色特別標示出來。

本篇會將這樣的概念實作出來。不過，我的設計方法不見得適合套用到每個網站，多少都需要調整，畢竟每個網站的配色、功能都不太一樣。

那麼要拿我的範例來修改的話，建議有足夠的 HTML / CSS / JS 基礎，比較適合閱讀這一篇。



(圖片出處: commons.wikimedia.org)

一、設計方法

我的設計方針中，前面 2 點算是比較簡單，稍微瞭解 CSS 語法的站長都知道怎麼做。而第 3 點的設計方法，至少可以有兩種方向，大概簡單說明一下。

1. 使用偽類直接標示

對於文章中使用紅字、綠字來強調重點的文字，要如何讓色盲使用者分辨出來，我採用的方式除了加底線，還另外在該段文字的開頭，註明使用的顏色。

我使用的技巧是 "偽類" :before語法，設定顯示字串例如 "紅字"，將字體縮小、位置調高，這樣看起來就一清二楚。

同時偽類還有很棒的一點，雖然會顯示字串 "紅字"，但卻不會被選取，訪客複製整段時不會將這兩個字包含進去，因此不會造成操作上的不便。


2. Tooltip 提示訊息

另外一個提示色盲使用者，該段文字是紅色的技巧是，使用 "Tooltip 提示訊息"，也就是滑鼠經過時，立即出現提示文字。

這個技巧完全可以使用 CSS 來實現，不需要另外寫 JS 程式來控制，可參考「簡單漂亮的 CSS 提示框(tooltip)懶人包實作」系列文。

二、安裝程式碼

在修改範本之前，如果第一次安裝本站工具的讀者，建議先閱讀「備份範本的訣竅」系列文章。

安裝方式以 Blogger 為例，請到後台「範本」→「編輯 HTML」，游標點進範本區塊，按 Ctrl-F 搜尋 </head>這個字串，找到後在此字串的前一行，插入以下程式碼：

<script src='//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'></script>
<!--色盲模式切換-->
<script>
//<![CDATA[
$(function() {
var mode = localStorage.colorBlindMode || "no",
$color_blind_span = $("#color_blind_span"),
$color_blind_style = $("#color_blind_style"),
switch_color_blink = function() {
if (!$color_blind_style.html()) {
$color_blind_style.html($color_blind_span.html());
} else {
$color_blind_style.html("");
}
};

if (mode == "yes") {
$("#color_blind_btn").addClass("turn_on");
$color_blind_style.html($color_blind_span.html());
} else {
$("#color_blind_btn").removeClass("turn_on");
$color_blind_style.html("");
}

$("#color_blind_btn").click(function() {
$("#color_blind_btn").toggleClass("turn_on");
switch_color_blink();
localStorage.colorBlindMode = mode == "no" ? "yes" : "no";
});
});
//]]>
</script>
<!-- Designed by WFU BLOG-->

<style>
/*色盲模式按鈕*/
#color_blind_btn {
display: inline-block;
width: 30px;
height: 30px;
line-height: 30px;
color: #777;
font-size: 16px;
text-align: center;
background: #ddd;
border: 1px solid #bebebb;
border-radius: 15%;
cursor: pointer;
}
#color_blind_btn:active {
position: relative;
top: 1px
}
#color_blind_btn:hover {
box-shadow: 0 0 10px #546893
}
.turn_on {
box-shadow: 0 0 10px #546893
}
</style>
第一行綠字可參考「引用 jQuery 的注意事項」，檢查範本是否已安裝過 jQuery，如果已經安裝過請刪除此行，以免重複安裝。

三、提供給色盲使用者看的 CSS

接著請搜尋 <body這個字串，找到後在此字串的下一行，插入以下程式碼：

<!--色盲模式 CSS-->
<style id="color_blind_style"></style>
<span id="color_blind_span" style="display: none;">
a:link {
text-decoration: underline;
}
.post {
background: #fff;
color: #222;
}

*[style*='990000'], *[style*='cc0000'] {
border-bottom: 2px dashed #ccc;
}

*[style*='990000']:before, *[style*='cc0000']:before {
content: " 紅字 ";
font-size: 70%;
font-weight: bold;
vertical-align: top;
}

*[style*='6aa84f'] {
border-bottom: 2px dashed #ccc;
}

*[style*='6aa84f']:before {
content: " 綠字 ";
font-size: 70%;
font-weight: bold;
vertical-align: top;
}

*[style*='3d85c6'] {
border-bottom: 2px dashed #ccc;
}

*[style*='3d85c6']:before {
content: " 藍字 ";
font-size: 70%;
font-weight: bold;
vertical-align: top;
}
</span>
<!-- -->
以上 span標籤中，放的就是提供給色盲使用者的 CSS。這裡的內容不一定適合你的網站，請將這一大段 CSS 改為你的設計內容。

這一大段的運作原理為，span標籤的 CSS 內容是沒有意義的，平常不會有作用。而當色盲使用者按下按鈕後，JS 程式會將 span標籤的內容複製到 style標籤，讓這一套 CSS 產生作用。當再次按下按鈕後，則會刪除 style標籤內的 CSS，如此反覆循環。

因為 WFU 都使用 Blogger 後台文章編輯器來設定文字顏色，上面這些用到的紅、綠、藍色碼，都是官方編輯器使用的顏色。如果你用的色碼是不一樣的，請自行修改對應的色碼。

四、擺放位置

最後在範本中，將以下「色盲模式切換按鈕」的 HTML 碼放到任何你想擺放的位置：

<span id="color_blind_btn" title="色盲模式切換">色</span>
然後儲存範本即可。

如果不清楚要放在哪裡的話，可參考「Blogger 範本﹍(3) 文章及留言區塊的程式碼」系列文。

想要先看效果的話，可前往範例網頁：



更多實用工具：

• 本站使用的 Blogger hack 及工具整理