(X)HTML

そろそろ「こちら」や「ここ」にだけリンクさせるのを絶滅させたいんです。

ブログを書けって大先生に怒られたので、仕事も落ち着いてきたんで以前から書きたかった事でも。

今更なネタなんですけど、「Sassの教科書で一番読んで欲しいところ。はこちら」みたいな感じで、「こちら」にだけリンクになってるケースがいまだに結構多くて、色々な面でよろしくないので、そろそろやめません?と。

普段から使っていると、「こちら」以外の文言がパッと浮かばない場合なんかも有りますし、コーダー的には下手に文言を変更して色々言われるのが面倒的な理由も有るので、その場合は、こちらも含めてリンクにするのがよろしいかと。

例えば、

製品の詳細はこちら製品の詳細はこちら

って感じですね。 んでは、「何で、こちらにだけリンクするのは良くないの?」的な部分を色んな視点から書きたいと思います。

アクセシビリティ的な理由から

これが一番な理由になるかもですが、前後の文脈から読み取らないとリンク先が分からないので、音声ブラウザでリンクだけ読み上げたら、意味不明な感じになります。 この辺りは、「ウェブコンテンツ・アクセシビリティ・ガイドライン (WCAG) 2.0」とかに書いてありますけど、仕様書関連は理解するのが大変なので、以下の記事が読みやすくてオススメです。

アクセシビリティって言うと富士通さんとか有名なんで、参考までに。

ここに書かれてる良い例は、「ここ」とか「こちら」自体にはリンクが無いから、なんていうかアクセシビリティガイドラインをクリアするためだけの例って感じなので、「ここ」とか「こちら」も含めてリンクさせないと、「こちらがクリック出来ない!」って言う人が多いと思うです。 アクセシビリティガイドラインに準拠するのも大事かもですけど、ずっと使われててそれに慣れてるユーザーのことも考慮して設計しないとっすね。

SEO的な理由から

個人的に、SEO云々って話はキライですけど、「アクセシビリティ?なにそれおいしいの?」って人も多いので、SEO的な部分でも適切なラベルにすることは重要です。 この辺詳しく書くと長いので、以下の記事とかを参考にしてもらえると助かります。

これで、「SEO!SEO!」うるさい割に、こちらとか平気でやる方への説得になりますね。

ユーザビリティ的な理由から

「ここ」とか「こちら」にだけリンクしてても、スマホで見たらタップしにくいですし、リンクカラーに寄っては本文の一部がリンクしてても気づきにくいので、その辺も考慮したい感じですね。 この辺に関しては、以下の記事が参考になるかな、と。

lint の点数的な理由から

「こちら」にだけリンクすると、減点の対象になります。 また、ページ内で同一のアンカーテキストが複数あり、リンク先が異なる場合も減点の対象になります。 コーディング覚え始めの頃とかは、lintの点数ばかり気にしてたのが懐かしい... 点数にだけ目が行ってしまうのはよろしくないと思いますが、何で減点の対象となっているかをちゃんと理解しておいた方がよろしいかなーと思います。

と言う感じで。

ホント今更って感じの内容ですけど、現在でも普通に使われるケースが多いので、多少なりとも減ったら良いなぁと思って書いてみました。 コーダーな人は、(説明とか面倒な場合)気付いたらこっそり直しちゃうのも良いかなと思います。 勝手に直しても「こちらにだけ、リンクしてくれ!」って言われるケースは稀でしょうし。

そろそろ「こちら」や「ここ」にだけリンクさせるのを絶滅させたいんです。

ブログを書けって大先生に怒られたので、仕事も落ち着いてきたんで以前から書きたかった事でも。

今更なネタなんですけど、「Sassの教科書で一番読んで欲しいところ。はこちら」みたいな感じで、「こちら」にだけリンクになってるケースがいまだに結構多くて、色々な面でよろしくないので、そろそろやめません?と。

普段から使っていると、「こちら」以外の文言がパッと浮かばない場合なんかも有りますし、コーダー的には下手に文言を変更して色々言われるのが面倒的な理由も有るので、その場合は、こちらも含めてリンクにするのがよろしいかと。

例えば、

製品の詳細はこちら製品の詳細はこちら

って感じですね。 んでは、「何で、こちらにだけリンクするのは良くないの?」的な部分を色んな視点から書きたいと思います。

アクセシビリティ的な理由から

これが一番な理由になるかもですが、前後の文脈から読み取らないとリンク先が分からないので、音声ブラウザでリンクだけ読み上げたら、意味不明な感じになります。 この辺りは、「ウェブコンテンツ・アクセシビリティ・ガイドライン (WCAG) 2.0」とかに書いてありますけど、仕様書関連は理解するのが大変なので、以下の記事が読みやすくてオススメです。

アクセシビリティって言うと富士通さんとか有名なんで、参考までに。

ここに書かれてる良い例は、「ここ」とか「こちら」自体にはリンクが無いから、なんていうかアクセシビリティガイドラインをクリアするためだけの例って感じなので、「ここ」とか「こちら」も含めてリンクさせないと、「こちらがクリック出来ない!」って言う人が多いと思うです。 アクセシビリティガイドラインに準拠するのも大事かもですけど、ずっと使われててそれに慣れてるユーザーのことも考慮して設計しないとっすね。

SEO的な理由から

個人的に、SEO云々って話はキライですけど、「アクセシビリティ?なにそれおいしいの?」って人も多いので、SEO的な部分でも適切なラベルにすることは重要です。 この辺詳しく書くと長いので、以下の記事とかを参考にしてもらえると助かります。

これで、「SEO!SEO!」うるさい割に、こちらとか平気でやる方への説得になりますね。

ユーザビリティ的な理由から

「ここ」とか「こちら」にだけリンクしてても、スマホで見たらタップしにくいですし、リンクカラーに寄っては本文の一部がリンクしてても気づきにくいので、その辺も考慮したい感じですね。 この辺に関しては、以下の記事が参考になるかな、と。

lint の点数的な理由から

「こちら」にだけリンクすると、減点の対象になります。 また、ページ内で同一のアンカーテキストが複数あり、リンク先が異なる場合も減点の対象になります。 コーディング覚え始めの頃とかは、lintの点数ばかり気にしてたのが懐かしい... 点数にだけ目が行ってしまうのはよろしくないと思いますが、何で減点の対象となっているかをちゃんと理解しておいた方がよろしいかなーと思います。

と言う感じで。

ホント今更って感じの内容ですけど、現在でも普通に使われるケースが多いので、多少なりとも減ったら良いなぁと思って書いてみました。 コーダーな人は、(説明とか面倒な場合)気付いたらこっそり直しちゃうのも良いかなと思います。 勝手に直しても「こちらにだけ、リンクしてくれ!」って言われるケースは稀でしょうし。