‏ویژگی headingoffset؛ سطح هدینگ‌ها رو خودکار جابه‌جا کن

نویسنده با یه مشکل آشنا شروع می‌کنه: یه کامپوننت کارت که چند بار تو یه صفحه استفاده می‌شه، گاهی بعد از H1 میاد (پس هدینگش باید H2 باشه) و گاهی توی یه بخش که با H2 شروع شده (پس باید H3 بشه). راه‌حل قبلیشون این بوده که به ادیتورها تو CMS اجازه بدن دستی سطح هدینگ رو انتخاب کنن، که هم کار اضافه‌ست و هم منبع خطا.

به گفتهٔ نویسنده، ویژگی آزمایشی جدید headingoffset یه راه بهتر می‌ده: این ویژگی سطح هدینگ‌های نوادگانِ یه المان رو به اندازهٔ مقدار داده‌شده افزایش می‌ده. یعنی همهٔ هدینگ‌ها رو H1 می‌نویسی و بعد رو هر والدی که می‌خوای سطح یکی بالاتر بره، headingoffset="1" می‌ذاری:

<h1>Museums</h1>
<section headingoffset="1">
  <h1>Free entry to the museum</h1>
</section>
<section headingoffset="1">
  <h1>All museums and collections</h1>
  <div class="cards" headingoffset="1">
    <h1>Alphabetical</h1>
  </div>
</section>

اینجا H1های داخل section به H2 و اونایی که تو یه ظرف افست تودرتو هستن به H3 تبدیل می‌شن. تو پنل دسترسی‌پذیری Firefox می‌بینی که تگ همچنان H1 می‌مونه ولی سطحش ۲ گزارش می‌شه.

خود نویسنده میگه برای صفحه‌های HTML استاتیک از این ویژگی استفاده نمی‌کنه، چون وقتی اسم تگ همون سطح واقعی رو نشون بده سند خیلی خواناتره. جای واقعیِ این قابلیت جاییه که به ساختار صفحه دسترسی یا کنترل مستقیم نداری — مثلاً موقع کار با کامپوننت‌ها. مثلاً یه web component که خودش هدینگ‌ها رو رندر می‌کنه و تو موقع نوشتن مارک‌آپ اصلاً تگ هدینگ رو نمی‌بینی؛ اونجا این ویژگی عالی جواب می‌ده چون توسعه‌دهنده کنترلی روی نحوهٔ استفادهٔ ادیتورها نداره.

نویسنده بعدش چند تا سؤال متداول رو جواب می‌ده: با ویژگی headingreset رو والد یا خود هدینگ می‌شه از این الگوریتم خارج شد. لازم نیست حتماً از H1 شروع کنی؛ اگه H2 بذاری با افست ۱ به H3 می‌شه. حداکثر افست ۸ هست و سطح هیچ‌وقت از ۹ بالاتر نمی‌ره؛ مقدار منفی هم مجاز نیست. برای استایل دادن به هدینگی که تگ واقعیش نیست هم از pseudo-class جدید :heading() استفاده می‌کنی. نویسنده میگه اسکرین‌ریدرها هم لازم نیست چیز خاصی پشتیبانی کنن؛ چون اطلاعات درست تو درخت دسترسی‌پذیری می‌شینه، VoiceOver تو تستش همیشه سطح درست رو اعلام کرده.

فعلاً این قابلیت کاملاً تازه‌ست و فقط تو Firefox Nightly پشت یه فلگ کار می‌کنه؛ باید تو about:config گزینهٔ dom.headingoffset.enabled رو فعال کنی. نویسنده ازش استقبال می‌کنه و امیدواره بقیهٔ مرورگرها هم زود پیاده‌اش کنن.

نکات کلیدی:

• headingoffset سطح هدینگ‌های نوادگان یه المان رو به اندازهٔ مقدار داده‌شده افزایش می‌ده
• بهترین کاربردش web componentهاست که توسعه‌دهنده کنترلی رو سطح هدینگ نداره، نه HTML استاتیک
• با headingreset می‌شه از الگوریتم خارج شد و لازم نیست حتماً از H1 شروع کنی
• حداکثر افست ۸ هست، سطح از ۹ بالاتر نمی‌ره و مقدار منفی مجاز نیست
• استایل‌دهی با pseudo-class :heading() و اعلام درست سطح‌ها در اسکرین‌ریدر
• فعلاً فقط تو Firefox Nightly پشت فلگ dom.headingoffset.enabled کار می‌کنه