URLリンクの遷移先のドメインをルビで表示する実験

人の日記を読むのが好きで、色んな人の日記を読んでいる。

以前にr7kamuraさんが日記でこういうことを書かれていた。

https://r7kamura.com/articles/2022-02-20-diary

記事にリンクを埋め込むときの形式として、URLを見せるべきか、見せないべきかというのを数年単位でずっと悩んでいて

悩ましいのわかる。スマホだとほぼ確実にリンクを踏んでからじゃないとどこのサイトへ飛ぶのかわからないし、PCブラウザだとマウスホバーして左下の表示を見るということをしないといけない。

どっちにしろ不便。

ふと思いついたソリューション

ふと、「ルビでドメインを表示するのは面白いのではないか？」と思ったのでちょっと書いてみた。

codesandboxが死んだとき用にスクショも貼っておこう。

なんとなく悪くない気がしている。ちゃんとどこのサイトのURLなのかわかる。

コード

Reactの場合、なんかこういう感じに素朴なコンポーネントを書けばできあがる。

type Props = {
  text: string;
  url: URL;
};

export function LinkText(props: Props) {
  const { text, url } = props;
  const href = url.href;
  const hostName = url.hostname;

  return (
    <a href={href}>
      <ruby>
        {text}
        <rp>(</rp>
        <rt>{hostName}</rt>
        <rp>)</rp>
      </ruby>
    </a>
  );
}

懸念

htmlの <ruby> タグまわりのアクセシビリティが悪いという話はちょっとググるとすぐ出てくるくらいには問題児らしくて、ルビタグを濫用するのはまずいかも、という気はしている。有識者に意見を聞きたい。

あとルビが「リンクテキストのふりがなとかではなくURLドメインを表している」というのがいいのかもわからない。普通に怒られそうな気もするし、別に大丈夫そうな気もしている。