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

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

A+
上一篇「有助於色盲使用者的友善體驗 (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) 文章及留言區塊的程式碼」系列文。

想要先看效果的話,可前往範例網頁:



更多實用工具:

沒有留言:

張貼留言注意事項:

◎ 勾選「通知我」可收到後續回覆的mail!
◎ 請在相關文章留言,與文章無關的主題請至「Blogger 中文論壇」。
◎ 提問若無法提供足夠的資訊供判斷,可能會被無視。建議先參考這篇「Blogger 提問技巧及注意事項」。
◎ CSS 相關問題非免費諮詢,建議使用「Chrome 開發人員工具」尋找答案。
◎ 手機版相關問題請參考「Blogger 行動版範本的特質」→「三、行動版範本不一定能執行網頁版工具」。
◎ 非官方範本問題、或貴站為商業網站 ,請參考「本站諮詢頁面」→「1. 諮詢服務」
◎ 若留言要輸入語法,"<"、">"這兩個符號請用其他符號代替,否則語法會消失!
◎ 為了過濾垃圾留言,所有留言不會即時發佈,請稍待片刻。
◎ 本站「已關閉自刪留言功能」。

TOP