تمرکز از همان لبه‌ای شروع می‌شود که خواندن

خواندن فارسی از راست شروع می‌شود. اگر Tab از چپ شروع کند، چشم و دست دو مسیر دارند. این سایت ترتیب تمرکز را با tabindex عوض نمی‌کند. ترتیب، ترتیب سند است. پس چیزی که اول خوانده می‌شود باید در سند هم جلوتر باشد، و چیدمان راست‌به‌چپ باید همان ترتیب را از لبه‌ی راست نشان بدهد.

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

لینک پرش، اولین کنترل

اولین چیز قابل تمرکز در body لینک پرش است. href آن #main است و متنش از دیکشنری می‌آید: «پرش به محتوا». بیرون از صفحه نشسته است، با translateY(-140%)، و inset-inline-start: 1rem آن را به لبه‌ی شروع می‌چسباند. در صفحه‌ی فارسی آن لبه راست است. در انگلیسی چپ است. قانون جدا برای left نوشته نشده.

با :focus برمی‌گردد سر جایش، نه فقط با :focus-visible. تا وقتی تمرکز نگیرد دیده نمی‌شود، چون جایی برای کلیک کردن ندارد. بعد از پرش، تمرکز به #main می‌رود و سرصفحه رد می‌شود.

اگر معرفی صفحه‌ی اول روشن باشد، دکمه‌ی «رد کردن معرفی» در سند بعد از لینک پرش است و قبل از سرصفحه. جایش روی صفحه پایین و لبه‌ی پایان است، inset-inline-end. پس جای دیده‌شدن و جای Tab یکی نیست. این استثنا عمدیِ یک کنترل موقت است، نه الگوی منو.

حلقه دور خود عنصر است

:focus-visible در استایل سراسری یک خط ۲ پیکسلی به رنگ تاکید است، با outline-offset: 3px. حلقه دور همان عنصری کشیده می‌شود که تمرکز دارد. جهت صفحه حلقه را به لبه‌ی دیگر پرت نمی‌کند. اگر عنصر به‌خاطر dir در سمت راست چیده شده باشد، حلقه هم آن‌جاست.

همه‌جا این حلقه نیست. ورودی پالت فرمان outline: none دارد و ردیف انتخاب‌شده با پس‌زمینه و box-shadow مشخص می‌شود. جست‌وجوی فهرست وبلاگ روی :focus خط خودش را می‌گذارد، نه روی :focus-visible. ریل کنار خانه‌ی سایت برچسب را با :focus-visible باز می‌کند، همان‌طور که با hover باز می‌کند. نشانگر سفارشی aria-hidden است و فقط برای اشاره‌گر دقیق ساخته می‌شود. در ترتیب Tab نیست.

ترتیب سند، ترتیب خواندن

سرصفحه این ترتیب را دارد: نشان، بعد ناوبری خانه و وبلاگ و پروژه‌ها و درباره، بعد ابزارها. ناوبری display: flex است و row-reverse ندارد. در سند راست‌به‌چپ، شروع flex همان لبه‌ی راست است. اولین لینک، خانه، همان‌جا نشسته که خواندن شروع می‌شود. Tab همان راه را می‌رود.

aria-current="page" روی لینک فعال است. این وضعیت را اعلام می‌کند. جایش را عوض نمی‌کند.

روی عرض کم، همان nav با CSS به پایین صفحه می‌رود: position: fixed و bottom. در سند هنوز داخل سرصفحه است. چشم آن را آخر صفحه می‌بیند و Tab هنوز قبل از #main به آن می‌رسد. این یکی‌جا نیست که چیدمان و تمرکز از هم جدا شده‌اند. منطقه‌ی لمسی جابه‌جا شده، ترتیب سند نه.

دکمه‌ی بازگشت به بالا بعد از پاپیچ در سند است، با inset-inline-end. تا وقتی کلاس show نگیرد شفاف است و pointer-events ندارد، ولی از سند حذف نشده است. صفحه‌کلید می‌تواند به دکمه‌ای برسد که هنوز دیده نمی‌شود. این را به‌جای یک ترتیب جادویی پنهان نکرده‌ام.

چه چیزی نباید در این ترتیب باشد

جوّ صفحه، خط درخشان پاپیچ، و بوم صحنه aria-hidden هستند. کلیک و Tab به آن‌ها نمی‌رسد. نام ریپازیتوری و کد dir="ltr" دارند تا لاتین آینه نشود. آن جزیره داخل خودش چپ‌به‌راست است. اطرافش هنوز صفحه‌ی فارسی است.

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

صفحه‌ی همکاری تماس را جدا از این مکانیک می‌گذارد. تنها راه عمومی تلگرام است، @MH759. ساختن خود سایت در چرا این سایت را از نو ساختم است، و نسخه‌ی کوتاه در این سایت.

اگر یک چیز بماند این است: تمرکز را با عدد tabindex به زور راست نیاوردم. سند را به ترتیب خواندن چیدم، و dir همان ترتیب را از لبه‌ی راست نشان می‌دهد.