盲人の目を通して見た現代のインターネット-見出し（補足）

まえがき

この記事では、視覚障害を持つ人々がHTMLヘッダーを使用してサイトのアクセシビリティを向上させることについて説明しました 。 私が理解しているように、この記事は特定のカテゴリーの読者に関心を呼び起こしたので、この点に関して、そのような主題の記事を書き続け、トピック「見出し」を少し深めることにしました。 この記事では、読者がWebページでヘッダーを使用する、成功したがあまり良くない例に慣れることをお勧めします。

ソフトウェアについて少し

前の記事のコメントのある人は、私が使用しているソフトウェアに興味がありました。 Win 7 64ビット、Firefox 39 32ビット、およびJaws 16 64ビットを使用します。

ご注意

この記事では、私が訪れた、または訪れている商用リソースへのリンクを使用します。 これらのリンクは、これらのリソースのページに掲載されている広告サービスや製品ではありません。 良い例としても悪い例としても必要です。

また、これらのリソースについてこの記事で述べた意見は、私の個人的な意見であり、それ以上のものではありません。

最も人気のあるWebページの一部

ご存知のように、最も訪問されたページは検索エンジン、YandexおよびGoogleのページです。 国内の検索エンジンの研究を始めましょう。



Yandexにメールボックスがあり、長い間使用していますが、許可されていないユーザーのページを検討します。 許可されていないページは非常にシンプルであり、視覚障害者の観点から非常に便利です。 そのすべてのセクションは、2番目のレベルの見出しの下に配置されます。これは非常に便利で、ページの目的の部分に到達する最速の方法の1つになります。 ページの最初から最後までの見出しを次に示します。ニュース->中央銀行の料金->ここでYandex Musicサービスの広告->私の都市の地図->天気（どうやら私の都市でも）->ポスター->サービス->テレビ番組->メール。 メールヘッダーが最も訪問されたサービスの1つであるため、メールヘッダーがこのチェーンの最後にある理由は明らかではありません。 見出しにすばやく到達できないページの唯一の主要な部分は、検索フィールドです。 承認されたユーザーページにナビゲーションの違いはありません。



検索結果のあるページでは、10個すべて（許可されている場合は1ページで番号を増やすことができます）のリンクが第2レベルの見出しであり、非常に便利です。 ページには見出しがありません。つまり、ジャングルに迷い込むことを恐れずに、検索結果を安全にナビゲートできます。 悲しいのは、「ページ」という言葉がまったく目立たないことです。つまり、クイックナビゲーションを使用してアクセスすることはできませんが、ページ番号自体はボタンであり、同じページに約12個のボタンがあります。



Googleのメインページでは、すべてがはるかに控えめです。承認されたユーザーでない場合、検索にアクセスすることは難しくありません。 そして、承認された場合、このタスクはいくつかのリンクでより困難になります。 このページには見出しはありません。 検索結果ページでは、すべてがYandexほど良くありません。 結果の10個のリンクに加えて、これもまた便利ですが、何らかの理由でそれがGoogleチャートの見出しになります。 また、絶対に意味のない見出し「検索結果」と、より便利な見出し「それと一緒に検索」もあります。 そしてここに悲しみがあります。ページ番号は最も一般的なリンクです。 リンクにアクセスできますが、ページ上には非常に多くのリンクがありますので、これは簡単なナビゲーションではありません。



この記事で最も人気のある2つの検索エンジンのページのナビゲーションは、一方的なものと見なされます.Webページにある他の要素については考慮していないため、見出しの有能であまり使用されていないことと、その使用の利便性のみを考慮しています。



毎日何百万人もの人々がYouTubeを訪れています。 それでは、音楽を聴いてビデオを「見て」みませんか？ 実際、このサイトは非常に便利に構築されています。 メインページ（私は承認されたユーザーです）では、第2レベルの「ホーム」の見出しに出会い、その後に「サブスクリプション」、第3レベルの見出しが表示されます。 サブスクリプションをクリックすると、そこに正確に移動することは注目に値しますが、第2レベルの見出し「ホーム」が存在しなくなったため、「ホーム」見出しに戻ることができず、代わりにリンクがあります。 仲間はそんなに不注意になれない！ さらに続きます。 左側のメニューをまだ通過していないことに注意してください。これにより、サイトの上部全体をすばやくバイパスし、見出しから矢印を使用してこのメ​​ニューにアクセスできます。より速くアクセスする方法がありますが、それについては別の記事で...ホームページには、新しいサブスクリプションと人気のあるビデオが付属しています。 チャンネル登録の各チャンネル名と人気のある動画カテゴリの名前はすべて第2レベルの見出しです。 忘れてしまったが、まだ推奨チャンネルはあるが、それらの名前は同じレベルの見出しであり、「推奨チャンネル」というフレーズもある。 これらの第2レベルの各見出しの下には、ビデオのサムネイル、その名前、および追加日があります。 同様に、各ビデオタイトルは第3レベルのタイトルです。



ここで、Jawsを使用すると、ページ上のすべての見出しだけでなく、1番目から6番目までの目的のレベルの見出しをクリックすることができることを明確にする必要があります（この機能の利用可能性は、NVDAで確認していません）。 したがって、ページ上のすべてのビデオを超高速でナビゲーションできる可能性があります！ すぐに2番目のレベルのヘッダーをステップスルーしてチャンネルを選択し、すぐに3番目のレベルをステップスルーするチャンネルの名前からビデオの名前を表示します。 残念ながら、第3レベルの見出しをめくると、どのチャンネルに属しているかを理解することはできません。 YouTubeについては十分だと思います。

叙情的な余談

今日、World Wide Webでの商業活動はますます成長しています。 数千のオンラインストアサイトがサービスや商品を販売しています。 これらの電気店では、隣の通りの小さな店で売られているものを見つけることができます。または、街全体にないものを見つけることができます。 これは、通常の店で購入できない商品を注文し、郵便で配達するときに非常に便利です。 視覚障害者もこの種の店を使い始めました。店（私たちはほとんど持っていません）は専門商品で特に人気があります。 これらの店では、さまざまな家庭用品を購入できるだけでなく、アクセサリーや紙を書くこともできます（私の意見では、学生としては非常に重要です）。

インターネット取引とその可用性

記事のこの部分では、すべてが明確であり、可用性が比較的高く、最小限のグラフィック要素と最大限のテキスト情報を使用しているため、専門の商品店は考慮しません。 ここに私たちが興味を持っている（または不注意な）人たちがいます。彼らは誰のためにサイトを作ったかは知っていましたが、aria要素を使用していませんでした。 興味深い2つの例を簡単に説明しますが、奇妙な例が​​ないわけではありません。



ロシア全土で営業している非常に良い店があります。 ほとんどのシステム管理者と金属細工師はそれについて知っています-これはNYXです。 このストアのサイトは、コンポーネントと電子機器に関する非常に高品質で詳細なリファレンスです。 膨大な価格表とフィルターと検索システムの詳細な調査-これらすべてにより、必要なコンポーネントの検索が非常に容易になります。 この例は最も重要な例の1つです。このような価格表のサイズでは、見出しが必要なだけだからです。 このページでは、スクリーンリーダーは、 175の見出しと900のリンクをカウントしました。 リンクの数はわずかに異なりますが、800より少なくなることはありません。 ご覧のとおり、商品には膨大な数のカテゴリがあります。急いでいる場合、急いでいない場合は最大20の場合、このページを直線的にスクロールするには最大10分かかります。 ご覧のとおり、リンクと見出しの数には大きな違いがあり、この違いはクイックナビゲーションツールを使用する際に適切な製品カテゴリの検索にかかる時間に影響します。 しかし、同じ店舗でも利便性の面で大きな見落としがあります。 モスクワの価格表ではすべて順調ですが、地域の待ち伏せは本格的です！ たとえば、ここに私の市のNYX Webサイトがあります。 現地の価格ですぐに価格表に表示されますが、ここでは見出しは完全にありません！ むしろ、2つの部分があります。「認定Apple製品スペシャリストはこの店で働いています」。私はこの見出しから冷たくも暑くもありませんが、2番目は市内の店の住所です。 また、ページには700のリンクがあります。 別の問題は、製品のすべてのサブカテゴリが直面するハイフンです。 ざっくりと数えましょう。 価格リストにはこれらのハイフンを含むリンクが500個しかないが、各ハイフンにはキーストロークが1つあるとします。 したがって、500（リンク）+ 500（ハイフン）= 1000（キーストローク）。 楽しい算術ではありません。 私はそのような一見非常に有益で便利なサイトから逃げたいです。



2番目の例。 DNSストアはかなり新しいネットワークで、私にとっては2012年になって初めて知られるようになりました。 私はすぐにここの価格表にも見出しがないことを言わなければなりませんが、ここではいくつかの製品のページを見てください。 製品は偶然に選択されたもので、メインページにあり、製品の説明ページに移動しました。 まさに製品の説明ページに興味があり、それらはすべて同じタイプです。 このページを例として挙げます。 製品の名前と簡単な説明が付いた見出しは非常に便利で、価格と写真の上にあります。この見出しを使用すると、サイトのすべてのトップをすばやく渡すことができますが、この場合は役に立ちません。 次の見出し（非常に良い広告の動き）の「関連製品」では、カバー、フラッシュドライブ、およびこの装置を使用するときに必要になる可能性のあるその他のゴミにすばやく移動できます。 さらに、「レビュー」とレビューの数。これにより、ジェスチャーなしですぐにその存在を知ることができます。 別の有用な見出しは「質問-回答」です。 すぐに仕様に切り替えることができないのは残念ですが、「説明」および「レビュー」リンクの横にある「機能」リンクをクリックすると、仕様のあるページが開き、ページ全体がリロードされません。 製品のテキストによる説明が増加する場合があります。そのリンクから直接製品をバイパスするには、「特性」の見出しに移動できます。 これらは、このページの非常に便利なナビゲーションチェーンです。

結論として

この記事が、ウェブデザイン、レイアウト、ウェブサイトの開発、ウェブインターフェースの開発に携わっている皆さんに、視覚障害のあるユーザーとさまざまなページやネットワーク上のページとの相互作用の原理の一部を理解するのに役立つことを本当に願っています 視力のあるユーザーだけでなく、視覚障害者などの対話シナリオについても考えてください。



Tseikovetsに有益なコメントをありがとう。 確かに、この記事を書いているとき、スクリーンリーダーを使用してWebページとやり取りするための十分に多数の他のシナリオの存在を適切に言及しませんでした。 私のこの不注意により、上記で説明したWebページの適応方法を唯一の既存のものとして解釈することができますが、これは完全に真実ではありません。 クイックナビゲーションには、他の要素、ariaタグを使用してマークできるエリア、Webページと対話する他の方法があります。 この記事では、可能なページナビゲーションシナリオの1つのみについて説明します。 この記事はガイドや推奨事項ではなく、特定のトピック「HTML見出しと、Webページで視覚障害のあるユーザーをナビゲートするための有用性」に関する私の個人的な意見のみを反映しています。 記事を読む各人は、記事が自分にとって有用かどうか、この記事から学んだ知識を適用するかどうかを自分で決めます。

ご注意

「ナビゲーションチェーン」という用語は、「Total Commander」プログラムから取られています。 この用語は、ナレーターとWebページを使用するユーザー間の相互作用を最も正確に表します。