0

私は自分のWebページにより良いセマンティクスとアクセシビリティを適用しようとしています。

最近、Firefox用のFangsアドオンをインストールして、スクリーンリーダーでどのように表示されるかを確認しました。サイドバーとフッターのすべての情報が、最後のコンテンツ見出しの下に詰め込まれているように見えるのではないかと心配しています。

問題＃1

<h1>ヘッダータグ（ 、<h2>など）を使用して「サイドバー」セクションと「フッター」セクションを指定することで、分割できるようにしたいと思います。これがヘッダータグの適切な使用法であるかどうかはわかりません。これらのセクションは技術的には満足のいくものですが、記事のタイトルと同じ階層レベルで表示されるのは少し奇妙に感じます。

問題＃2

また、レイアウト構造要素を識別するためのこれらのヘッダータグは非表示のままにしておきますが、それを必要とするユーザーは引き続き使用できます。「visibility：hidden」を使用すると、望ましくないプレースホルダーが残ります。「display：none」を使用すると、目的の効果が得られるように見えますが、実際のスクリーンリーダーでは機能しない可能性があることを示唆する投稿を見てきました。私は今、「position：absolute」とネガティブな「text-indent」トリックを使用して、要素を通常のフローから切り離し、画面外にプッシュしたいと思っています。

4

3 に答える 3

1

<h3>サイドバーやフッターで使用されているタグを使用しているサイトをたくさん見ました。だから、あなたも同じことに従うことができます。<h1>andタグは、<h2>通常、Webページで1回だけ使用されます。<h1>タイトルと<h2>タグラインに。

2番目の問題については、JavaScriptを使用してdisplayプロパティを切り替えることができます。

于 2009-02-21T14:14:38.403 に答える
1

これらはこれまでの私のメモです。

いくつかのリソース:

実際の例:

w3.org/WAI/ (h3.no-display)

position: absolute;
left: -999px;
width: 990px;

http://www.diveintoaccessibility.org ( h2.invisibletitle )

display: none;

standard-schmandards.com (h1)

position: absolute;
left: -1000em;
margin-left: -1000em;
display: block;
height: 0;
overflow: hidden;

yahoo.com (h3.a11y)

position: absolute;
left: -5000px;
width: 100px;

my.yahoo.com (h3.a11y)

position: absolute;
height: 0;
overflow: hidden;

gmail.com (h2.u4w5cc)

position: absolute;
height: 9px;
left: 0;
top: -10000px;

target.com (h1.offscreen)

position: absolute;
left: -99em;
width: 90em;
overflow: hidden;
于 2009-02-22T17:01:43.780 に答える
0

hr要素を使用してセクションを区切ることができます。次に例を示します。

<div id="header"></div>
<hr />
<div id="content"></div>
<hr />
<div id="sidebar"></div>
<hr />
<div id="footer"></div>

さらに、要素のtitle属性を使用して、次のセクションを説明できます。hrしかし、これがどのようにサポートされているかはわかりません。

于 2009-02-22T17:07:00.133 に答える