カーソルキーを含むキーボードショートカットを示すツールチップ
（Web）アプリケーションでは、ボタンのショートカットも示すツールチップ（読み取り：タイトル属性）が必要です。カーソル（「矢印」）キーを含むボタンがあります。
⬅や←などの文字を使用してみましたが、正しく表示されません。また、スペルを試してみました。 「左矢印キー」ですが、少し冗長です。
これを行うための良い方法は何ですか？
たぶん、実際のキーボードのキーでDingbatフォントを試すことができますか？このようなもの：
基本的な 'title'属性のツールチップは非常に制限されており、最良のオプションではありません。ブラウザは、期待どおりにポップアップ表示する場合としない場合があります。
@Rahulコメントは、この点で非常に良いと思います。より完全なツールチップソリューションを確認することをお勧めします。基本的な「title」属性よりも柔軟で堅固で魅力的なツールチップを提供するために、事前に作成されたライブラリがたくさんあります。
（より複雑なツールチップソリューションからのフォールバックオプションとして）アクセシビリティの理由でタイトル属性を表示している場合は、詳細オプション（ 'Press Left Arrow Key to ...'）が最良のオプションだと思います。スクリーンリーダーはそれはうまくいきます。
最初のアイコンの何が問題になっていますか？私には、それはほぼ完璧に見えます。もちろん、他の「キーショートカット」アイコンのコンテキストで見た方がよいでしょうが、重要な情報、つまり「これは左カーソルキーです」を伝えるように見えます。
より明確にしたい場合は、ユーザーが押すキーの最もありそうな色であるという事実に基づいて、ベージュに色を付けることができます。おそらく、アイコンのシェーディングと再形成は、その「キーネス」を強調するのに役立ちます。
Title属性の使用にとどまらず、代わりにCSSソリューションを利用する場合、キーボードキーの小さな画像とその下の短い説明の両方を実際に提供できます。非常に興味深いWebページと「CSSキーボードのキー画像」のサンプル画像の膨大なコレクションがあり、Googleの画像検索でそのフレーズを使用しています。ここでは、最初にスターターを検索しています。スタックオーバーフローページでの実行方法をクラックした人によるエルディテページです。 -