web-dev-qa-db-ja.com

カーソルキーを含むキーボードショートカットを示すツールチップ

(Web)アプリケーションでは、ボタンのショートカットも示すツールチップ(読み取り:タイトル属性)が必要です。カーソル(「矢印」)キーを含むボタンがあります。

⬅や←などの文字を使用してみましたが、正しく表示されません。また、スペルを試してみました。 「左矢印キー」ですが、少し冗長です。

これを行うための良い方法は何ですか?

2
Sietse

たぶん、実際のキーボードのキーでDingbatフォントを試すことができますか?このようなもの:

alt text

1
fluxd

基本的な 'title'属性のツールチップは非常に制限されており、最良のオプションではありません。ブラウザは、期待どおりにポップアップ表示する場合としない場合があります。

@Rahulコメントは、この点で非常に良いと思います。より完全なツールチップソリューションを確認することをお勧めします。基本的な「title」属性よりも柔軟で堅固で魅力的なツールチップを提供するために、事前に作成されたライブラリがたくさんあります。

(より複雑なツールチップソリューションからのフォールバックオプションとして)アクセシビリティの理由でタイトル属性を表示している場合は、詳細オプション( 'Press Left Arrow Key to ...')が最良のオプションだと思います。スクリーンリーダーはそれはうまくいきます。

1
FOR

最初のアイコンの何が問題になっていますか?私には、それはほぼ完璧に見えます。もちろん、他の「キーショートカット」アイコンのコンテキストで見た方がよいでしょうが、重要な情報、つまり「これは左カーソルキーです」を伝えるように見えます。

より明確にしたい場合は、ユーザーが押すキーの最もありそうな色であるという事実に基づいて、ベージュに色を付けることができます。おそらく、アイコンのシェーディングと再形成は、その「キーネス」を強調するのに役立ちます。

0
Bobby Jack

Title属性の使用にとどまらず、代わりにCSSソリューションを利用する場合、キーボードキーの小さな画像とその下の短い説明の両方を実際に提供できます。非常に興味深いWebページと「CSSキーボードのキー画像」のサンプル画像の膨大なコレクションがあり、Googleの画像検索でそのフレーズを使用しています。ここでは、最初にスターターを検索しています。スタックオーバーフローページでの実行方法をクラックした人によるエルディテページです。 -

http://www.jimmyscode.com/css-styling-for-kbd-tags/

0
bobbyg