ساختار محتوا

یکی از مهمترین جنبه های دسترسی دیجیتال، ساختار زیربنایی صفحه است. وقتی وب‌سایت یا برنامه خود را با استفاده از عناصر ساختاری به جای تکیه بر سبک‌ها می‌سازید، به افرادی که از فناوری‌های کمکی (AT) استفاده می‌کنند، مانند صفحه‌خوان‌ها، زمینه حیاتی می‌دهید.

عناصر ساختاری به عنوان یک طرح کلی از محتوای روی صفحه عمل می کنند، اما آنها همچنین به عنوان نقاط لنگر عمل می کنند تا امکان ناوبری آسان تر در محتوا را فراهم کنند.

وقتی از عناصر معنایی HTML استفاده می‌کنید، معنای ذاتی هر عنصر به درخت دسترسی منتقل می‌شود و توسط AT استفاده می‌شود و به محتوا معنا بیشتری نسبت به عناصر غیر معنایی می‌دهد. ممکن است مواردی وجود داشته باشد که شما نیاز به افزودن ویژگی‌های ARIA اضافی برای ایجاد روابط یا بهبود تجربه کلی کاربر داشته باشید، اما در بیشتر موقعیت‌ها، یکی از بیش از 100 عنصر HTML موجود باید به تنهایی به خوبی کار کند.

در حالی که این ماژول روی پرکاربردترین عناصر ساختاری حیاتی برای دسترسی دیجیتالی تمرکز دارد، مطمئناً عناصر و عوامل محیطی اضافی وجود دارد که باید هنگام ساخت ساختار در وب سایت یا برنامه خود در نظر بگیرید. این مثال‌ها مقدمه‌ای برای موضوع هستند، نه جامع.

نقاط دیدنی

کاربران AT به عناصر ساختاری تکیه می کنند تا اطلاعاتی در مورد طرح بندی کلی صفحه به آنها بدهند. هنگامی که بخش‌های بزرگی از محتوا را جدا می‌کنید، می‌توانید از نقش‌های شاخص ARIA یا عناصر شاخص HTML جدیدتر برای افزودن بافت ساختاری به صفحه خود استفاده کنید.

نشانه‌ها تضمین می‌کنند که محتوا در مناطق قابل پیمایش است. توصیه می شود حداقل یک نشانه در هر صفحه ارائه دهید.

برخی منابع پیشنهاد می کنند که نشانه های ARIA و HTML را با هم ترکیب کنید تا پوشش AT بهتری ارائه شود. در حالی که این نوع افزونگی نباید مشکلاتی را برای کاربران شما ایجاد کند، برای اطمینان، الگوها را با استفاده از صفحه‌خوان آزمایش کنید. در صورت شک، بهتر است به طور پیش فرض فقط از عناصر شاخص HTML جدیدتر استفاده کنید، زیرا پشتیبانی از مرورگر بسیار قوی است.

بیایید عناصر شاخص HTML را با نقش‌های شاخص ARIA مقایسه کنیم.

عنصر نقطه عطف HTML نقش برجسته ARIA
<header> بنر
<aside> مکمل
<footer> اطلاعات محتوا
<nav> ناوبری
<main> اصلی
<form> 1 فرم
<section> 1 منطقه
 1 برای قابل دسترسی بودن نیاز به درج ویژگی name دارد. یک section باید برای نقش ضمنی region ARIA نامگذاری شود تا برای فناوری کمکی قابل مشاهده باشد.

حال، بیایید نمونه هایی از ساختار محتوای قابل دسترس را با هم مقایسه کنیم.

نکن 
<div>
    <div>...</div>
</div>

<div>
    <p>Stamp collecting, also known as philately, is
    the study of postage stamps, stamped envelopes,
    postmarks, postcards, and other materials relating
    to postal delivery.</p>
</div>

<div>
<p>© 2022 - Stamps R Awesome</p>
</div>
انجام دهید
<header>
    <nav>...</nav>
</header>
<main>
    <section aria-label="Introduction to stamp collecting">
    <p>Stamp collecting, also known as philately, is
    the study of postage stamps, stamped envelopes,
    postmarks, postcards, and other materials relating
    to postal delivery.</p>
    </section>
</main>
<footer>
<p>© 2022 - Stamps R Awesome</p>
</footer>

سرفصل ها

هنگامی که به درستی پیاده سازی شود، سطوح عنوان HTML یک طرح کلی مختصر از محتوای کلی صفحه را تشکیل می دهد.

شش سطح عنوان وجود دارد که می توانیم از آنها استفاده کنیم. سطح سرفصل یک <h1> برای بالاترین و مهم ترین اطلاعات صفحه استفاده می شود و برای پایین ترین و کم اهمیت ترین اطلاعات به صورت تدریجی به سطح سرفصل شش <h6> می رود.

ترتیب سطوح عنوان مهم است. در حالت ایده‌آل، سطوح عنوان را نادیده نخواهید گرفت، برای مثال، یک بخش را با <h1> شروع کنید و بلافاصله آن را با <h5> دنبال کنید. در عوض، باید به ترتیب به <h5> بروید. ترتیب سطح سرفصل به ویژه برای کاربران AT مهم است زیرا این یکی از راه های اصلی آنها برای پیمایش در محتوا است.

برای اینکه به شما کمک کند به ساختار معنایی مناسب و ترتیب سرفصل‌ها پایبند باشید، سبک‌های CSS خود را از سطوح عنوان جدا کنید. این به شما امکان انعطاف پذیری بیشتری در سبک های عنوان را می دهد در حالی که نظم سطح عنوان را حفظ می کنید. بسیار مهم است که از سبک ها به تنهایی برای ایجاد عنوان استفاده نکنید، زیرا AT آنها را به عنوان یک عنوان نمی بیند.

هنگامی که ما عناوین جعلی را جعل می کنیم، ساختار مناسب به کاربران AT منتقل نمی شود.

سرفصل ها برای افراد مبتلا به اختلالات شناختی و نقص توجه نیز مفید است. مهم است که محتوای عنوان را معنی دار کنید تا به آنها کمک کنید تا بفهمند چه چیزی در صفحه مهم است.

نکن 
<div>
    <h3>Stamps</h3>
    <p>Stamp collecting, also known as philately, is the study of 
  postage stamps, stamped envelopes, postmarks, postcards, and 
  other materials relating to postal delivery.</p>
</div>

<div>
    <h3>How do I start a stamp collection?</h3>
  <h2>Equipment you will need</h2>
    <h4>...</h4>
  <h2>How to acquire stamps</h2>
    <h4>...</h4>
  <h2>Organizations you can join</h2>
    <h4>...</h4>
</div>
انجام دهید 
<header>
  <h1>Stamp collecting</h1>
</header>
<main>
    <section aria-label="Introduction to stamp collecting">
        <h2>What is stamp collecting?</h2>
        <p>Stamp collecting, also known as philately, is the study of 
    postage stamps, stamped envelopes, postmarks, postcards, and 
    other materials relating to postal delivery.</p>
    </section>

    <section aria-label="Start a stamp collection">
        <h2>How do I start a stamp collection?</h2>
    <h3>Required equiment</h3>
    <p>...</p>

    <h3>How to acquire stamps</h3>
    <p>...</p>

    <h3>Organizations you can join</h3>
        <p>...</p>
    </section>
</main>

لیست ها

فهرست‌های HTML راهی برای گروه‌بندی معنایی اقلام مشابه با یکدیگر هستند که به آنها معنایی ذاتی می‌دهد، دقیقاً مانند فهرست فروشگاه‌های مواد غذایی شما یا آن فهرست کارهای بی‌پایانی که مدام نادیده می‌گیرید.

سه نوع لیست HTML وجود دارد:

  • دستور داد <ol>
  • نامرتب <ul>
  • توضیحات <dl>

عنصر فهرست <li> برای نشان دادن یک آیتم در یک لیست مرتب یا نامرتب استفاده می شود، در حالی که عبارت توصیف <dt> و عناصر تعریف <dd> را می توان در لیست توضیحات یافت.

هنگامی که این عناصر به درستی برنامه ریزی شوند، می توانند به کاربران غیر بینا AT در مورد ساختار قابل مشاهده لیست اطلاع دهند. هنگامی که یک AT با یک لیست معنایی روبرو می شود، می تواند نام لیست و تعداد موارد موجود در آن را به کاربر بگوید. همانطور که کاربر در لیست حرکت می کند، AT هر آیتم لیست را با صدای بلند می خواند و می گوید کدام شماره در لیست است - مورد یک از پنج، مورد دوم از پنج و غیره.

گروه بندی آیتم ها در فهرست ها همچنین به افراد بینا که دارای اختلالات شناختی و توجه هستند و افرادی که دارای ناتوانی در خواندن هستند کمک می کند، زیرا محتوای لیست معمولاً به گونه ای طراحی می شود که فضای خالی بصری بیشتری داشته باشد و محتوا به نقطه نقطه است.

نکن 
<div>
  <p>How do I start a stamp collection?</p>
  <p>Equipment you will need</p>
    <div>
      <p>Small tongs with rounded tips</p>
      <p>Stamp hinges</p>
      <p>Stockbook or albumn</p>
      <p>Magnifying glass</p>
      <p>Stamps</p>
    </div>
</div>
انجام دهید 
<div>
  <h1>How do I start a stamp collection?</h1>
  <h2>Equipment you will need</h2>
  <ol>
    <li>Small tongs with rounded tips</li>
    <li>Stamp hinges</li>
    <li>Stockbook or albumn</li>
    <li>Magnifying glass</li>
    <li>Stamps</li>
  </ol>
</div>

جداول

در HTML، جداول به طور کلی برای سازماندهی داده ها یا صفحه آرایی استفاده می شوند.

بسته به هدف جدول، از عناصر ساختاری معنایی مختلفی استفاده خواهید کرد. جداول می توانند ساختار بسیار پیچیده ای داشته باشند، اما زمانی که به قوانین معنایی اولیه پایبند باشید، بدون دخالت زیاد، نسبتاً قابل دسترسی هستند.

طرح بندی

در روزهای اولیه اینترنت، جداول چیدمان عنصر اصلی HTML بود که برای ساخت ساختارهای بصری استفاده می شد. امروزه ما از ترکیبی از عناصر معنایی و غیر معنایی مانند <div> و نشانه‌ها برای ایجاد طرح‌بندی استفاده می‌کنیم.

در حالی که روزهای ایجاد جداول طرح بندی بیشتر به پایان رسیده است، مواقعی وجود دارد که از جداول چیدمان استفاده می شود، مانند ایمیل های بصری غنی، خبرنامه ها و تبلیغات. در این موارد، جداولی که فقط برای چیدمان استفاده می‌شوند نباید از عناصر ساختاری استفاده کنند که روابط را منتقل می‌کنند و زمینه را اضافه می‌کنند، مانند <th> یا <caption> .

جداول چیدمان نیز باید از کاربران AT با نقش ارائه ARIA یا حالت پنهان آریا پنهان شوند.

نکن 
<table>
  <caption>My stamp collection</caption>
  <tr>
    <th>[Stamp Image 1]</th>
    <th>[Stamp Image 2]</th>
    <th>[Stamp Image 3]</th>
  </tr>
</table>
انجام دهید 
<table role="presentation">
  <tr>
    <td>[Stamp Image 1]</td>
    <td>[Stamp Image 2]</td>
    <td>[Stamp Image 3]</td>
  </tr>
</table>

داده ها

برخلاف جدول طرح بندی که باید از دید کاربران AT پنهان باشد، جدول داده و تمام عناصر آن باید در معرض دید قرار گیرند. ساختار جداول داده برای انتقال اطلاعات ساده و پیچیده به کاربران حیاتی است.

هنگامی که یک جدول به درستی ساختار یافته است، روابط بین سرصفحه ها و ردیف های ستون و داده های داخل جدول شکل می گیرد. هنگامی که ساختار نادرست است، کاربر برای رمزگشایی معنی و زمینه اطلاعات در جدول باقی می ماند.

بسته به پیچیدگی جدول، ایجاد روابط از طریق کد به روش های مختلفی انجام می شود. اولین قدم برای دسترسی به جدول، علامت گذاری سلول های سرصفحه با <th> و سلول های داده با عناصر <td> است.

برای جداول پیچیده تر، ممکن است لازم باشد از عناصر جدول HTML اضافی مانند <rowgroup> ، <colgroup> ، <caption> و scope برای انتقال معنا و روابط استفاده کنید.

نکن 
<table>
  <tr>
    <td>Animal</td>
    <td>Year</td>
    <td>Condition</td>
  </tr>
  <tr>
    <td>Bird</td>
    <td>1947</td>
    <td>Fair</td>
  </tr>
  <tr>
    <td>Lion</td>
    <td>1982</td>
    <td>Good</td>
  </tr>
  <tr>
    <td>Horse</td>
    <td>1978</td>
    <td>Mint</td>
  </tr>
</table>
انجام دهید
<table>
  <caption>My stamp collection</caption>
  <tr>
    <th>Animal</th>
    <th>Year</th>
    <th>Condition</th>
  </tr>
  <tr>
    <td>Bird</td>
    <td>1947</td>
    <td>Fair</td>
  </tr>
  <tr>
    <td>Lion</td>
    <td>1982</td>
    <td>Good</td>
  </tr>
  <tr>
    <td>Horse</td>
    <td>1978</td>
    <td>Mint</td>
  </tr>
</table>