2017-08-30 12 views
0

私はアクセシビリティ作業とテストタブのフォーカスを行っています。Chromeで特定の要素をフォーカスするにはどうすればよいですか?

クロムや他のブラウザの特定の要素にフォーカスを移動する簡単な方法はありますか?たとえば、ページの中央にボタンがあります。どのように素早くその要素のフォーカスを合わせることができますか?フォーカス方式は、(ボタン、リンク、フォーム要素のような)自然にフォーカス可能なすべての要素上に存在する、またはでフォーカス可能行われていること

js document.getElementById('myButton') .focus();

+1

あなたの質問は多少あいまいです。ユーザーやテスト担当者がページの特定の部分にどのように素早くアクセスできるか、または開発者がユーザー/テスト担当者が特定の部分にすばやく到達できるようにする方法についてですページ?また、そのボタンはIDを持っていますか、それはフォームの一部ですか、それとも単独で存在していますか? –

答えて

2

ただ、JavaScriptでフォーカス方式を使用tabindex属性。

入力要素の場合、ページがロードされるとすぐにブラウザにフォーカスを合わせるようにautofocus属性を使用することもできます。

+0

テストの目的以外では絶対に行わないでください。あるいは、一般ユーザー向けにこれを展開しないでください。 – aardrian

1

多くのウェブサイトでは、長いナビゲーションメニューをバイパスして、ページの特定の領域にすばやくアクセスできるようにするために「スキップリンク」を使用しています。これは、エンドユーザーだけでなく、Webページをテストしている開発者にとっても便利です。

基本的な原則は、アンカー要素とID(ページはめ込みリンクと同様)を使用するページの冒頭に目に見えないリンクがあることです。例えば

<body> 
<a href="#maincontent">Skip to main content</a> 
... 
<main id="maincontent"> 
<h1>Heading</h1> 
<p>This is the first paragraph</p> 

WebAIMは、この上に非常に良いチュートリアルを持っています。 http://webaim.org/techniques/skipnav/

他の作業をする前にTABキーを押すと、その動作の例が表示されます。

この方法は、JavaScriptを使用するよりも信頼性が高く、HTMLがより広くサポートされていると考えています。コンソール内

1
  • オープンクローム開発者に対しツール

は、次の手順を使用して任意の要素を集中することができます:

document.querySelector(selector).focus(); 
  • セレクタは、右のコード内の要素をクリックすることができますの開発者ツールの選択と選択copy/copy selector

要素にid属性を持つ必要はありませんが、それでも使用できます。

関連する問題