上一篇「有助於色盲使用者的友善體驗 (1)設計構思」，提出本站的設計方針為：- 原本文章區塊為黃底黑字，另一套 CSS 將會使用白底黑字，用來增加對比。
- 原本文章區塊的連結無底線，另一套 CSS 將會使用底線。
- 本站文章常用紅字標示重點，同時教學程式碼中包含了大量的紅、藍、綠字串，為了幫助辨識，另一套 CSS 會將常用顏色特別標示出來。
本篇會將這樣的概念實作出來。不過，我的設計方法不見得適合套用到每個網站，多少都需要調整，畢竟每個網站的配色、功能都不太一樣。
那麼要拿我的範例來修改的話，建議有足夠的 HTML / CSS / JS 基礎，比較適合閱讀這一篇。
(圖片出處: commons.wikimedia.org)
一、設計方法
我的設計方針中，前面 2 點算是比較簡單，稍微瞭解 CSS 語法的站長都知道怎麼做。而第 3 點的設計方法，至少可以有兩種方向，大概簡單說明一下。
1. 使用偽類直接標示
對於文章中使用紅字、綠字來強調重點的文字，要如何讓色盲使用者分辨出來，我採用的方式除了加底線，還另外在該段文字的開頭，註明使用的顏色。
我使用的技巧是 "偽類"
同時偽類還有很棒的一點，雖然會顯示字串 "紅字"，但卻不會被選取，訪客複製整段時不會將這兩個字包含進去，因此不會造成操作上的不便。
2. Tooltip 提示訊息
另外一個提示色盲使用者，該段文字是紅色的技巧是，使用 "Tooltip 提示訊息"，也就是滑鼠經過時，立即出現提示文字。
這個技巧完全可以使用 CSS 來實現，不需要另外寫 JS 程式來控制，可參考「簡單漂亮的 CSS 提示框(tooltip)懶人包實作」系列文。
二、安裝程式碼
在修改範本之前，如果第一次安裝本站工具的讀者，建議先閱讀「備份範本的訣竅」系列文章。
安裝方式以 Blogger 為例，請到後台「範本」→「編輯 HTML」，游標點進範本區塊，按 Ctrl-F 搜尋
<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
接著請搜尋
<!--色盲模式 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>
<!-- -->以上
這一大段的運作原理為，
因為 WFU 都使用 Blogger 後台文章編輯器來設定文字顏色，上面這些用到的紅、綠、藍色碼，都是官方編輯器使用的顏色。如果你用的色碼是不一樣的，請自行修改對應的色碼。
四、擺放位置
最後在範本中，將以下「色盲模式切換按鈕」的 HTML 碼放到任何你想擺放的位置：
<span id="color_blind_btn" title="色盲模式切換">色</span>然後儲存範本即可。
如果不清楚要放在哪裡的話，可參考「Blogger 範本﹍(3) 文章及留言區塊的程式碼」系列文。
想要先看效果的話，可前往範例網頁：
更多實用工具：
沒有留言:
張貼留言注意事項：
◎ 勾選「通知我」可收到後續回覆的mail！
◎ 請在相關文章留言，與文章無關的主題可至「Blogger 社團」提問。
◎ 請避免使用 Safari 瀏覽器，否則無法登入 Google 帳號留言(只能匿名留言)！
◎ 提問若無法提供足夠的資訊供判斷，可能會被無視。建議先參考這篇「Blogger 提問技巧及注意事項」。
◎ CSS 相關問題非免費諮詢，建議使用「Chrome 開發人員工具」尋找答案。
◎ 手機版相關問題請參考「Blogger 行動版範本的特質」→「三、行動版範本不一定能執行網頁版工具」；或參考「Blogger 行動版範本修改技巧 」，或本站 Blogger 行動版標籤相關文章。
◎ 非官方範本問題、或貴站為商業網站，請參考「Blogger 免費諮詢 + 付費諮詢」
◎ 若是使用官方 RWD 範本，請參考「Blogger 推出全新自適應 RWD 官方範本及佈景主題」→ 不建議對範本進行修改！
◎ 若留言要輸入語法，"<"、">"這兩個符號請用其他符號代替，否則語法會消失！
◎ 為了過濾垃圾留言，所有留言不會即時發佈，請稍待片刻。
◎ 本站「已關閉自刪留言功能」。