استانداردهای دسترسی‌ پذیری در وردپرس

در درس یازدهم از «دوره تخصصی استانداردهای طراحی قالب وردپرس» است. در این قسمت استانداردهای مربوط به «دسترسی پذیری در وردپرس» را بررسی می کنیم.

مفاهیم HTML

نگاهی علمی تر به معنای عبارت HTML داشته باشید. در اچ تی ام ال برای هر کاری یک تگ یا اتریبیوت در نظر گرفته شده است. مثلا وقتی یک لیست طولانی از لینک ها دارید، از list در HTML برای نمایش آن ها استفاده کنید نه یک راه حل پیچیده.

ساختار تیترها

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

برای ساختاربندی برگه ی خود از تگ های H2 تا H6 استفاده کنید.
طبقه بندی هدیتگ ها را نادیده نگیرید.
کاربری های اضافی را درون تگ های هدینگ قرار ندهید؛ کاربری هایی مثل لینک ها و دکمه ها.

کنترل ها

کنترل کردن به وسیله ی دکمه ها و لینک ها همواره ترجیح داده می شوند. اگر یک href یا «ادرس اینترنتی» مشخص در نظر دارید، بهتر است که آن را در برگه قرار دهید یا یک لینک از آن را اینگونه بسازید:

<a href="{your-valid-target}">

اگر شرایط بالا را ندارید، بهتر است که از یک دکمه (<button>) برای انجام این کار استفاده کنید.

اگر یک دکمه یا لینک یا کنترل را ویرایش کرده یا می سازید، به صورت زیر تصمیم گیری نمایید:

زمانی که یک href بی مفهوم مثل # دارید: آنگاه بهتر است از دکمه یا button استفاده کنید.
وقتی یک href واقعی دارید: آنگاه هم می توانید از دکمه و لینک <a> استفاده کنید.
وقتی یک لینک واقعی دارید که مانند یک Ajax عمل می کند: آنگاه از لینک برای زمانی که JS فعال نیست استفاده کنید. البته به طور کلی از دکمه ها هم استفاده می شود.
آدرس هایی که به مکانی دیگر در همان برگه هدایت می کنند (زمانی که می خواهید روی چیزی کلیک شود و بعد از آن برگه به پایین یا بالا اسکرول شود): آنگاه هم می توانید از دکمه استفاده کنید و هم می توانید از لینک بهره ببرید.
اگر آدرسی داشتید که کاربر را به مکانی خاص در برگه ای دیگر منتقل می کرد: آنگاه حتما باید از لینک ها استفاده کنید.

محتوای داینامیک

زمانی که بدون ریلود برگه، تغییرات داینامیکی در آن برگه ایجاد شد، شما باید فیدبک های رسایی (audible feedback) با ARIA برای تغییرات مهم تولید کنید. مثل یک اونت (event) ذخیره موفقیت آمیز.

از ()wp.a11y.speak برای همه ی پاسخ های ساده ی اجاکسی (AJAX responses) استفاده کنید. اگر از یک فعل و انفعال پیچیده تر استفاده می کنید، احتمالا ()wp.a11y.speak انتخاب مناسبی نباشد. در این صورت خودتان به دلخواه کدتان را بنویسید و سعی کنید که به بهترین شکل این کار را انجام دهید.

کنتراست رنگ

در بیشتر اوقات، افزونه ها رنگ های هسته (core) را دستخوش تغییر نمی کنند. اما اگر در مورد خاصی، قرار بود افزونه ای رنگی را به هسته اضافه کند یا رنگ ها را در هسته تغییر دهد، این رنگ ها باید حداقل میزان کنتراست (تضاد رنگی) را ایجاد کنند. حداقل میزان کنتراست 4.5:1 برای فونت‌سایز «24px و کوچک تر» ، و 3.0:1 برای «فونت‌سایز های بزرگ تر از 24px» یا «19px بولد» می باشد.

لینک ها زیرخط داشته باشند یا نه؟

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

دسترسی با کیبورد

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

به طور کلی می توان گفت که اگر می شود کاری را با موس انجام داد، باید آن کار با کیبورد هم انجام پذیر باشد.

عکس ها و آیکون ها

هر عکس باید یک نام قابل دسترسی داشته باشد. بهتر است که نام عکس ها فقط از جنس رشته (string) باشد. عکس ها، ایکون ها یا هر المان svg را می توان بوسیله ی یک عنصر <img> نمایش داد. اما همه ی این ها برای برنامه ی ما به عنوان یک عکس (image) تلقی می شوند. پس برای هر هدف خاص (نمایش عکس ها، ایکون ها یا هر المان svg) باید نامی خاص در نظر گرفته شود.

برای عنصر <img>، نام قابل دسترسی باید در ویژگی alt تصویر قرار بگیرد. اگر عنصر <img> برای اهداف دیگری استفاده شد، باز هم باید ویژگی alt را داشته باشد ولی این بار باید خالی و بدون مقدار باقی بماند.

در آیکون‌فونت ها، خود آیکون‌فونت باید دارای ویژگی یا اتریبیوت aria-hidden بوده و نیز screen-reader-text را در المان همسایه داشته باشد. اگر آیکون صرفا جنبه تزئینی داشته باشد (ornamental)، باز هم باید اتریبیوت aria-hidden را داشته باشد، ولی نیازی به screen-reader-text نیست.

&lt;a href=&quot;this.html&quot;>
&lt;span class=&quot;dashicons dashicon-thumbs-up&quot; aria-hidden=&quot;true&quot;>&lt;/span>
&lt;span class=&quot;screen-reader-text&quot;>Something&lt;/span>
&lt;/a>

SVG ها باید درون خطی یا in-line باشند. این عناصر باید شامل <title> و نام قابل دسترسی برای img باشند. برای پشتیبانی از تکنولوژی cross-technology ، المان title باید بوسیله ی aria-labelledby قابل دسترسی باشد.

اگر عناصر SVG صرفا جنبه ی زینتی داشتند، آنگاه نیازی به المان های title و aria-labelledby نیست. ولی در این حالت باید اتریبیوت یا ویژگی aria-hidden را داشته باشد.

برچسب گذاری (Labeling)

کدها باید دارای عنصر <label> مرتبطی باشند. (با استفاده از ویژگی های for/id، نه برای محصور کردن یک فرم) .label ها باید برای دیده شدن (visible) استفاده شوند ولی اگر لازم شد که پنهان باشند (hidden)، از کلاس .screen-reader-text استفاده کنید.

Placeholder ها گزینه ی خوبی هستند ولی نمی توان آن ها را جایگزینی برای label ها دانست. برای همه ی label ها، زمانی که روی آن ها کلیک شد، باید آن عنصر مورد فوکوس قرار بگیر. مثلا بعد از کلیک بر روی یک فیلد، آن فیلد در دسترس قرار بگیرد و هنگام کلیک بر روی یک رادیوباتن یا چک‌باکس، آن گزینه انتخاب شود.

از اتریبیوت title جدیدی برای حمل اطلاعات استفاده نکنید. به جای این کار از aria-label و screen-reader-text. استفاده نمایید.

زمانی هم که فرم ها را می سازید، برای دسته بندی عناصر در زیر یک هدینگ خاص، مختلف از <fieldset> و <legend> استفاده نمایید.

خب! همراهان گرامی، به پایان قسمت یازدهم یعنی دسترسی پذیری در وردپرس رسیدیم. در قسمت بعدی و آخر این مجموعه با ما همراه باشید.

منبع: سایت Wordpress