検索

セクション要素との取引

2つの記事がまったく同じ日に公開されました。

  1. Smashing MagazineのBruce Lawson:html5 over
    を選択する理由
  2. 松のアダム・ラキ:
    要素の違い

    彼らはわずかに異なるものを比較していますが、どちらも

    要素に関係しています。

    あなたが

    に手を伸ばすとき、私はそれがかなり明確だと思います:あなたがその要素を本質的に意味のないものにしたいとき。スタイリングの目的でのみ使用しています。

    について考えるとき、私はいつもRSSを考えています。はいの場合は、を使用してください。そうでない場合は、しないでください。

    ブルースには頼りになる答えがあります:

    […] は、新聞記事やブログ投稿としてだけでなく、衣料品の記事として考えてください。別の文脈で再利用できる個別のエンティティです。したがって、あなたのズボンは記事であり、別の服装でそれらを着ることができます。あなたのシャツは記事であり、異なるズボンで着用することができます。あなたの膝の長さの特許革のスティレット・ブーツは記事です。

    さらに重要なことは、実際の機能があることです。ブルースは、Apple Watchosがそれを特別に使用してページにコンテンツを見つけると述べています。

    しかし、

    はより曖昧です。ある時点で、セクションは

    -

    見出しがリセットされる場所と考えるはずでしたが、ブラウザをサポートする「html5アウトライン」と呼ばれるものが必要だったので、それは決して実現しませんでした。

    それで、

    それを使用する必要がありますか?ブルースによると、時々! Smashing Magazineの記事のデザインには、記事の冒頭に要約があります。視覚的には、それはかなり明確ですが、スクリーンリーダーユーザーにとってはそれほど明確ではありません。解決策は、それを明確にするために、aria-labelで要素の要素を包むことでした。しかし、その要素にも役割がない限り、Aria-Labelを使用することは想定されていません。役割を
    に適用できますが、
    にはすでにデフォルトの役割があります。
     
      要約テキスト
    

    アダムの記事(申し訳ありませんが、アダム)はポイントで非常に曖昧です。

    主な違いはセマンティックから来ています。あなたがあなたのサイトまたはそのロジックを持っているアプリケーションに一部を持っている場合、あなたはそれを宣言するために

    タグを使用する必要があります…

    を使用して、サイトまたはアプリの一部を支援技術に読みやすくすることが論理的に正しい場合。スクリーンリーダーに留意すれば、優れたアプローチです。

    したがって、セクションに対してロール= "region"を自動的に取得しますが、スクリーンリーダーに何かをしているかどうかはわかりません。クイックテスト(ボイスオーバーを有効にしたデスクトップ用のChrome)では、Aria-Labelのない Webローターのランドマークセクションにはそこにありませんでしたが、Aria-Labelを持っていれば現れました。

    ポイントは次のとおりです。

    を使用しては、アクセシビリティに適したことをしていると仮定します。その目的はかなり限られており、ランドマークを確立するのにのみ便利です。それでも、あなたはそれほど助けていません。コメントのレオニー・ワトソン:

    選択が視覚的に隠された見出しとアクセス可能な名前のセクション要素の間にある場合、どのアプローチが正しいものであるかを決定する前に考慮すべきことがいくつかあります。

    セクション要素にアクセス可能な名前がある場合、ナビゲーション可能なランドマーク要素になるため、スクリーンリーダーのユーザーは、スクリーンリーダーのショートカットキーを使用して、見出しでできるように、次のようにナビゲートできます。

    ただし、最新のWebAim Screen Readerユーザー調査によると、スクリーンリーダーのユーザーの68%は、ランドマークを好む2.9%と比較して、見出しでナビゲートすることを好みます。

    したがって、厳格なアクセシビリティの観点からは、おそらく見出しを落とすことができますが、使いやすさの観点からは、少なくともより多くのスクリーンリーダーユーザーがランドマークを使用してコンテンツをナビゲートする好みを表現するまでです。

以上がセクション要素との取引の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
@KeyFrames CSS:最も使用されているトリック@KeyFrames CSS:最も使用されているトリックMay 08, 2025 am 12:13 AM

@keyframesispopularduetoitsversitility andpowerincreatingsmoothcssanimations.keytricksinclude:1)defingsmoothtransitionsbetweenstates、2)AnimatingMultipleProperiessimally、3)3)bendorprefixesforbrows -compativity、4)組み合わせwithjavasfo

CSSカウンター:自動番号の包括的なガイドCSSカウンター:自動番号の包括的なガイドMay 07, 2025 pm 03:45 PM

csScounterSareSareusedTomageautomaticinginginwebdesigns.1)それらは、コンテンツ、リスト、および積極的なものを使用することができます

スクロール駆動型のアニメーションを使用したモダンなスクロールシャドウスクロール駆動型のアニメーションを使用したモダンなスクロールシャドウMay 07, 2025 am 10:34 AM

特にモバイルデバイスでは、スクロールシャドウを使用することは、Chrisが以前にカバーした微妙なUXです。 Geoffは、アニメーションタイムラインプロパティを使用する新しいアプローチをカバーしました。これがさらに別の方法です。

画像マップを再検討します画像マップを再検討しますMay 07, 2025 am 09:40 AM

簡単に復習してみましょう。画像マップはHTML 3.2に戻ります。ここで、最初にサーバー側マップを使用してから、マップとエリア要素を使用して画像上でクリック可能な領域を定義したクライアント側マップをマップしました。

開発者:すべての開発者の調査開発者:すべての開発者の調査May 07, 2025 am 09:30 AM

State of Devsの調査は現在、参加に対して開かれており、以前の調査とは異なり、コードを除くすべてをカバーしています:キャリア、職場だけでなく、健康、趣味などもあります。 

CSSグリッドとは何ですか?CSSグリッドとは何ですか?Apr 30, 2025 pm 03:21 PM

CSSグリッドは、複雑で応答性の高いWebレイアウトを作成するための強力なツールです。設計を簡素化し、アクセシビリティを向上させ、古い方法よりも多くの制御を提供します。

CSS Flexboxとは何ですか?CSS Flexboxとは何ですか?Apr 30, 2025 pm 03:20 PM

記事では、レスポンシブデザインにおけるスペースの効率的なアラインメントと分布のためのレイアウト方法であるCSS FlexBoxについて説明します。 FlexBoxの使用量を説明し、CSSグリッドと比較し、ブラウザのサポートを詳細に説明します。

CSSを使用してWebサイトを応答するにはどうすればよいですか?CSSを使用してWebサイトを応答するにはどうすればよいですか?Apr 30, 2025 pm 03:19 PM

この記事では、ビューポートメタタグ、柔軟なグリッド、流体メディア、メディアクエリ、相対ユニットなど、CSSを使用してレスポンシブWebサイトを作成するための手法について説明します。また、CSSグリッドとフレックスボックスを使用してカバーし、CSSフレームワークを推奨しています

See all articles

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

Video Face Swap

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

AtomエディタMac版ダウンロード

AtomエディタMac版ダウンロード

最も人気のあるオープンソースエディター

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

SublimeText3 Linux 新バージョン

SublimeText3 Linux 新バージョン

SublimeText3 Linux 最新バージョン

VSCode Windows 64 ビットのダウンロード

VSCode Windows 64 ビットのダウンロード

Microsoft によって発売された無料で強力な IDE エディター