コンテンツにスキップ

利用者:Suisui/ユニバーサルデザイン

I型色盲用スタイルシート

[編集]
このスクリプトを下記の方法で使用した場合、使用していることは公開されます。使用していることを公開したくない方は保存しないでください。

赤リンクと青リンクの見分けがつきにくい方は、ログインした状態でこちらのページ(User:<username>/common.css)

importStylesheet( 'User:Suisui/UniversalLink.css' );

と書いて保存してください。青リンクを[]で囲い、赤リンクを[[]]で囲って表示するようにするものです。

非常に単純なスタイルシートですので、User:Suisui/UniversalLink.cssの内容を丸ごとコピーして編集して使っていただいても構いません。 上記のページは個人設定->表示のすべての外装に共通のCSSとJSONとJavaScript にあるカスタムCSSからもアクセスできます。

このスクリプトについて

[編集]

Wikipediaの赤リンク、青リンクが見えない、あるいは見えにくいという方がいらっしゃるお話を伺って、cssで赤リンクと青リンクを見分けられるようにしたところ、便利に使っていただいてるようなので、少し使いやすいようにしたものです。英語版を探し回ってはみたのですが、en:Wikipedia:Manual_of_Style/Accessibility#ColorにLinks should clearly be identifiable as a link to our readers.とはっきり記載しており、実際に不便を被っている方々がそこそこの数いらっしゃる(色盲参照)にもかかわらず、具体的に使いやすいようにするものがみつからなかったため試験的に作成しました。

目下このスクリプトの抱えている問題は、誰が使っているかわかってしまうことにあると考えています。Gadgetの形で提供するのが良いと思うものの、Gadgetへの採用には割と高いハードルがあり、内容的にもできれば専門的な知識を持ったチームの方にやっていただきたいとは思ったまま1年ほど過ぎてしまったので、アイデアの状態で公開します。

より多くの方が不便なくWikipediaを使用できるよう、技術的に解決できる部分を解決するための一歩になればと考えています。

JavaScript版

[編集]

Gadgetにするのを目指して作成していたJavaScritp版を掲載しておきます。

/* UniversalLink.js
 * Script for Universal Link display
 * 
 * These codes are licensed under CC0.
 * http://creativecommons.org/publicdomain/zero/1.0/deed.ja
 */
$( document ).ready( function () {
	function addStyle(selector, declaration) {
		var isMSIE = /*@cc_on!@*/false;
		var css;
	
		if (document.styleSheets.length) {
			css = document.styleSheets[document.styleSheets.length - 1];
		} else {
			return;
		}
	
		if (isMSIE) {
			css.addRule(selector, declaration);
		} else {
			css.insertRule(selector + '{' + declaration + '}', css.cssRules.length);
		}
	}
	function addBrace() {
		//通常の内部リンクを[]でくくる
		addStyle('.mw-body-content a:link:before','content: "["')
		addStyle('.mw-body-content a:link:after','content: "]"')
		//赤リンクは[[]]でくくる
		addStyle('.mw-body-content a:link.new:before','content: "[["')
		addStyle('.mw-body-content a:link.new:after','content: "]]"')
		//外部リンクリンクは[]をつけない
		addStyle('.mw-body-content a:link.external:before','content: ""')
		addStyle('.mw-body-content a:link.external:after','content: ""')
	}
	$( document ).ready( addBrace );
});