‏۱۹ و نیم نکته دسترس‌پذیری که احتمالاً نمی‌دونستی

منوئل ماتوزوویچ توی ارائه‌ش در StripeCon Europe (سپتامبر ۲۰۲۶، زالتسبورگ) به‌جای نکته‌های همیشگی مثل alt تصویر و ساختار هدینگ‌ها، سراغ ۱۹ و نیم جزئیات کمتردیده‌شده HTML و CSS رفته. شروعش با یه مشکل ساده‌ست: هدر و بنر کوکی که position: fixed دارن، توی زوم ۲۰۰ درصد بخش بزرگی از صفحه و توی ۴۰۰ درصد نزدیک نصف ارتفاع صفحه رو می‌گیرن.

دلیلش اینه که وقتی کاربر زوم می‌کنه، اندازه inner مرورگر کوچیک‌تر می‌شه (توی مثال ارائه از ۲۰۰۰ به ۱۰۰۰ و بعد ۵۰۰ پیکسل) و media query ها هم دقیقاً به همین اندازه نگاه می‌کنن. پس راه‌حل نویسنده اینه که fixed بودن رو شرطی کنه و فقط وقتی اعمالش کنه که ارتفاع viewport حداقل ۵۰۰ پیکسل باشه:

@media (min-height: 31.25rem) { /* 500px */
  .header {
    position: fixed;
  }

  .cookie {
    position: fixed;
  }
}

بخش بعدی درباره ARIA ـه. به گفته نویسنده، گذاشتن aria-haspopup="true" روی دکمه زیرمنو اشتباه رایجیه، چون یعنی دکمه یه menu رو کنترل می‌کنه و صفحه‌خونی مثل JAWS به کاربر می‌گه با کلیدهای جهت حرکت کنه، در حالی که خود attribute هیچ رفتار کیبوردی اضافه نمی‌کنه. ناوبری سایت هم menu نیست، فقط مجموعه‌ای از لینکه. جایگزین درست‌تر aria-expanded ـه، یا بهتر از اون attribute استاندارد popover که بدون جاوااسکریپت همین کارو می‌کنه، خودش aria-expanded ضمنی می‌ده و فوکوس رو هم مدیریت می‌کنه.

چند نکته ریزتر هم هست. روی img، مقدار role="presentation" دقیقاً مثل aria-hidden="true" عمل می‌کنه و کل عنصر رو از accessibility tree حذف می‌کنه، ولی روی یه h2 فقط نقش هدینگ حذف می‌شه و متنش همچنان خونده می‌شه. یه باگ هم هست: اگه SVG با title داخل button باشه، توی Safari و VoiceOver اسم دکمه درست خونده نمی‌شه و راه‌حلش اینه که با aria-labelledby به id همون title اشاره کنی.

بخش پایانی درباره چیزهای تازه‌ست. عنصر آزمایشی geolocation اگه کنتراست متنش زیر ۳ به ۱ باشه یا فونتش از 3.1rem بزرگ‌تر بشه، بی‌سروصدا غیرفعال می‌شه و کاربر هیچ بازخوردی نمی‌گیره؛ فقط پنل Issues به توسعه‌دهنده خبر می‌ده و نویسنده همین رو نگران‌کننده می‌دونه. کنار اون، متاتگ text-scale هست که اجازه می‌ده تغییر اندازه فونت سیستم روی موبایل روی سایت هم اثر بذاره، ولی نویسنده تأکید می‌کنه اول لوکال تستش کنین چون ممکنه لایوت رو بشکنه.

سه ویژگی آخر هم برای فوکوس و ساختار هستن: focusgroup که جابه‌جایی بین تب‌ها با کلیدهای جهت رو بدون جاوااسکریپت می‌ده (ولی نمایش محتوا و حالت انتخاب‌شده هنوز کار خودته)، reading-flow که ترتیب فوکوس رو از ترتیب DOM جدا می‌کنه و فعلاً فقط روی grid و Chromium کار می‌کنه، و headingoffset که پشت flag ـه: همه هدینگ‌ها رو h1 می‌نویسی و روی والد offset می‌ذاری تا سطحشون خودکار جابه‌جا بشه. یعنی یه کامپوننت کارت هر جای صفحه سطح درست خودش رو می‌گیره بدون اینکه ادیتور توی CMS دستی انتخابش کنه.

نکات کلیدی:

• توی زوم ۴۰۰٪ عرض inner مرورگر یک‌چهارم می‌شه، پس media query ها به همون عدد کوچیک نگاه می‌کنن
• aria-haspopup="true" یعنی menu؛ برای ناوبری سایت aria-expanded یا attribute popover درسته
• role="presentation" روی img مثل aria-hidden عمل می‌کنه، ولی روی هدینگ فقط نقش رو حذف می‌کنه
• عنصر آزمایشی geolocation با کنتراست کمتر از ۳:۱ یا فونت بزرگ‌تر از 3.1rem غیرفعال می‌شه
• reading-flow فعلاً فقط توی Chromium و روی grid کار می‌کنه و headingoffset هنوز پشت flag ـه