دسترسپذیری
امکانات دسترسپذیری ویجتهای WidgetCore؛ ساختار ARIA، نواحی زنده، فوکوس، کاهش حرکت، کنتراست، پشتیبانی راستبهچپ و کارکرد بدون جاوااسکریپت.
دسترسپذیری در این افزونه یک لایهی اضافی نیست؛ بخشی از ساختار خروجی است. این صفحه آنچه را که افزونه از پیش رعایت کرده و آنچه را که هنگام شخصیسازی باید خودتان رعایت کنید توضیح میدهد.
ویجت جستجوی زنده
الگوی combobox
فیلد جستجو الگوی استاندارد «قالب ترکیبی با فهرست» را پیاده میکند:
| ویژگی | مقدار | نقش |
|---|---|---|
role روی فیلد | combobox | اعلام الگوی تعامل |
aria-autocomplete | list | پیشنهادها در یک فهرست نشان داده میشوند |
aria-expanded | false در حالت لیست، true در حالت صفحه | وضعیت باز بودن پنل |
aria-controls | شناسهی فهرست نتایج | اتصال فیلد به فهرست |
aria-haspopup | listbox | نوع محتوای بازشو |
aria-activedescendant | شناسهی نتیجهی انتخابشده | اعلام گزینهی فعال بدون جابهجایی فوکوس |
فهرست نتایج role="listbox" و هر نتیجه role="option" با aria-selected است.
برچسب و نام دسترسپذیر
- فیلد یک
<label class="wgcr-search-label">دارد که بهصورت بصری پنهان است (با تکنیکclip) ولی برای صفحهخوان خوانده میشود. - آیکون جستجو
aria-hidden="true"دارد و اسپینر هم همینطور؛ هیچکدام خوانده نمیشوند. - فرم
role="search"دارد تا بهعنوان نقطهی عطف «جستجو» شناخته شود.
نواحی زنده
| عنصر | ویژگی | چه چیزی اعلام میشود |
|---|---|---|
.wgcr-search-status | aria-live="polite" | «تعداد نتایج: N» یا پیام خطا |
.wgcr-search-nomore | role="status" | پیام پایان نتایج |
.wgcr-search-pagination | aria-label | نام ناوبری صفحهبندی |
| دکمهی صفحهی جاری | aria-current="page" | شمارهی صفحهی فعال |
کار بدون جاوااسکریپت
فرم یک فرم واقعی GET است که به خانهی سایت میرود و فیلد s بههمراه post_type پنهان دارد. یعنی با جاوااسکریپت غیرفعال، کاربر همان جستجوی استاندارد وردپرس را برای همان نوع محتوا میگیرد — نه صفحهی خالی.
ویجت سوالات متداول
ساختار معنایی
| عنصر | نقش |
|---|---|
<h2>/<h3>/<h4> (طبق کنترل) | سرفصل پرسش در ساختار صفحه |
<button> داخل سرفصل | نقطهی تعامل با aria-expanded و aria-controls |
<div role="region"> | پاسخ، با aria-labelledby به همان دکمه |
وضعیت بسته و فوکوس
پاسخهای بستهشده با visibility: hidden از دید مرورگر بیرون میروند؛ در نتیجه:
- داخل محتوای پنهان با
Tabنمیروید. - لینکهای داخل پاسخ بستهشده در ترتیب فوکوس نمیمانند.
- صفحهخوان متن پنهان را نمیخواند.
اسکیمای ساختیافته
بلوک FAQPage به موتور جستجو کمک میکند پرسشها را بهصورت بازشو در نتایج نشان دهد. فقط اولین ویجت در هر صفحه اسکیما میگیرد تا دادهی تکراری تولید نشود.
کاهش حرکت
همهی ویجتها از prefers-reduced-motion پیروی میکنند:
@media (prefers-reduced-motion: reduce) {
/* انیمیشنها و انتقالها حذف یا کوتاه میشوند */
}در عمل: چرخش آیکونها، انیمیشن باز شدن پاسخها، ظاهر شدن پنل نتایج و چرخش اسپینر برای کاربرانی که کاهش حرکت را در سیستمعامل فعال کردهاند حذف یا فوری میشود. اگر استایل سفارشی با انیمیشن اضافه میکنید، همین رسانهپرسش را برایش بنویسید.
کنتراست رنگ
مقدارهای پیشفرض افزونه برای کنتراست متن انتخاب شدهاند:
| ترکیب | رنگ متن | رنگ زمینه |
|---|---|---|
| عنوان نتیجه | #111827 | #ffffff |
| خلاصه و تاریخ | #64748B | #ffffff |
| رنگ اصلی (فوکوس) | #2E86DE | #ffffff |
| عنوان پرسش در FAQ | #1F2937 | rgba(255,255,255,.72) |
| پاسخ در FAQ | #6B7280 | — |
هنگام شخصیسازی، کنتراست متن روی زمینهی جدید را بررسی کنید؛ هدف نسبت 4.5 به 1 برای متن معمولی و 3 به 1 برای متن بزرگ است. اگر پسزمینهی پنل را تیره میکنید، متغیرهای --wgcr-ink و --wgcr-slate را هم عوض کنید.
جهت متن و چیدمان
- همهی فاصلههای افقی با خواص منطقی نوشته شدهاند (
inset-inline-start،inset-inline-end،margin-inline)، پس در سایت چپبهراست هم درست کار میکنند. - پیکانها و نشانههای جهتدار با
dirصفحه میچرخند. - ترجمههای فارسی و انگلیسی همراه بستهاند؛ متنها با زبان سایت عوض میشوند.
نشانهگذاری هنگام شخصیسازی
اگر نتایج را با قالب المنتور میسازید، افزونه هیچ استایل انتخابی روی آنها نمیگذارد؛ در این حالت مسئولیت کنتراست، ترتیب فوکوس و وجود یک لینک اصلی در هر کارت با قالب شماست.
چکلیست انتشار
فقط با کیبورد تست کنید
از فیلد تا آخرین نتیجه و صفحهبندی را بدون ماوس طی کنید.
با صفحهخوان بشنوید
تعداد نتایج باید پس از هر جستجو خوانده شود.
با بزرگنمایی 200٪ ببینید
هیچ محتوایی نباید از دست برود یا روی هم بیفتد.
کاهش حرکت را فعال کنید
در سیستمعامل «Reduce motion» را روشن و دوباره تست کنید.
جاوااسکریپت را غیرفعال کنید
فرم باید به صفحهی نتایج وردپرس برود.
فهرست کلیدها در صفحهی میانبرهای کیبورد آمده است.