دسترسی‌پذیری

اهمیت دسترسی‌پذیری: ساخت افزونه‌های جوملا به صورت همه‌شمول

همه افراد باید فرصت داشته باشند که به محتوای آنلاین دسترسی پیدا کنند، با آن تعامل داشته باشند و از آن بهره‌مند شوند — بدون توجه به توانایی‌ها یا ناتوانی‌هایشان. دسترسی‌پذیری فقط یک الزام فنی نیست؛ بلکه یک وظیفه اخلاقی است که تضمین می‌کند وبی که می‌سازیم واقعاً شامل همه افراد باشد.

برای توسعه‌دهندگانی که با جوملا کار می‌کنند، اطمینان از اینکه افزونه‌های شما با استانداردهای دسترسی‌پذیری— به‌خصوص WCAG 2.2 AA —مطابقت دارند، صرفاً پیروی از دستورالعمل‌ها نیست. این به معنای ایجاد وب‌سایت‌ها و تجربیاتی است که پاسخگوی طیف گسترده‌ای از مخاطبان باشد. وقتی افزونه‌های جوملا شما قابل دسترسی باشند، درهای ورود را به روی افرادی با مشکلات بینایی، شنوایی، شناختی یا حرکتی باز می‌کنید و تضمین می‌کنید که بتوانند به‌راحتی در محتوای شما حرکت کرده، آن را بخوانند و با آن تعامل داشته باشند.

اما چرا باید برای شما اهمیت داشته باشد؟ فراتر از ایجاد تأثیر مثبت در زندگی کاربران، دسترسی‌پذیری می‌تواند مخاطبان شما را گسترش دهد، قابلیت استفاده سایت شما را بهبود بخشد و حتی سئوی سایت را ارتقا دهد. موتورهای جستجو، سایت‌های قابل دسترسی را ترجیح می‌دهند و بسیاری از قوانین حقوقی در سراسر جهان اکنون الزام می‌کنند که محتوای دیجیتال برای همه در دسترس باشد. این فقط یک روند نیست — بلکه حرکتی به سوی یک فضای دیجیتال عادلانه‌تر است.

در این بخش، ما به بررسی نحوه توسعه افزونه‌های جوملا می‌پردازیم که کاملاً قابل دسترس هستند و مطابق با دستورالعمل‌های WCAG 2.2 AA ساخته شده‌اند. ما قطعات کد و مثال‌هایی را نشان خواهیم داد که به شما کمک می‌کند افزونه‌های خود را دسترس‌پذیر و کاربرپسند کنید.

استانداردهای W3C

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

WCAG

جوملا به دنبال این است تا مطابقت با استاندارد WCAG 2.2 AA را به دست آورد و حفظ کند. WCAG (رهنمودهای دسترسی‌پذیری محتوای وب) مجموعه‌ای از دستورالعمل‌هاست که به منظور اطمینان از دسترسی همه کاربران، از جمله افراد دارای معلولیت، به محتوای وب طراحی شده‌اند. این دستورالعمل‌ها براساس چهار اصل کلیدی پایه‌گذاری شده‌اند: قابل درک (Perceivable)، قابل استفاده (Operable)، قابل فهم (Understandable) و مقاوم (Robust) که به اختصار آنها را «POUR» می‌نامیم.

- قابل درک (Perceivable): اطلاعات و اجزای رابط کاربری باید به گونه‌ای ارائه شوند که کاربران بتوانند آنها را دریافت کنند (مثلاً متن جایگزین برای محتوای غیر متنی). 

- قابل استفاده (Operable): اجزای رابط و ناوبری باید قابل استفاده باشند، به طوری که کاربران بتوانند با همه عناصر با روش‌های متنوع (مثلاً کیبورد یا ماوس) تعامل داشته باشند. 

- قابل فهم (Understandable): محتوا و رابط‌ها باید ساده و قابل فهم باشند، با دستورالعمل‌های واضح و ناوبری سازگار. 

- مقاوم (Robust): محتوا باید به اندازه کافی مقاوم باشد که به خوبی با تکنولوژی‌های فعلی و آینده، از جمله فناوری‌های کمکی، کار کند.

برای آشنایی بیشتر با رهنمودهای WCAG 2.2 می‌توانید به مستندات رسمی WCAG 2.2 مراجعه کنید.

ARIA

علاوه بر WCAG، ARIA (Accessible Rich Internet Applications) که برگردان آن «برنامه‌های اینترنت غنی قابل دسترس» می باشد، مجموعه‌ای از مشخصات فنی مهم است که دسترسی‌پذیری وب را خصوصاً برای محتوای دینامیک و اجزای پیچیده رابط کاربری ارتقا می‌دهد. ARIA به توسعه‌دهندگان امکان می‌دهد تا نقش‌ها، وضعیت‌ها و ویژگی‌هایی را به عناصر HTML اضافه کنند تا زمینه و تعامل بهتر برای کاربران دارای معلولیت، به‌خصوص افرادی که از صفحه‌خوان‌ها (screen readers)استفاده می‌کنند، فراهم شود.

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

جوملا پشتیبانی از ARIA را در هسته خود دارد و از توسعه‌دهندگان افزونه تقاضا می‌کند تا از ویژگی‌های ARIA برای افزایش دسترسی‌پذیری و هماهنگی با استانداردهای WCAG 2.2 استفاده کنند.

نکته برای توسعه‌دهندگان افزونه

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

ATAG

ATAG (رهنمودهای دسترسی‌پذیری ابزارهای نویسندگی) دستورالعمل‌هایی ارائه می‌دهد که هدف آن قابل دسترس‌تر کردن ابزارهای ایجاد محتوا، مانند خود جوملا، است. این دستورالعمل بر قابل استفاده بودن ابزارهای ساخت محتوا توسط افراد دارای معلولیت تمرکز دارد، هم در مرحله ایجاد محتوا و هم در حفظ استانداردهای دسترسی‌پذیری در محصول نهایی.

برای کسب اطلاعات بیشتر درباره ATAG می‌توانید به مستندات رسمی W3C مراجعه نمایید:

- [W3C ATAG (رهنمودهای دسترسی‌پذیری ابزارهای نویسندگی)](https://www.w3.org/WAI/standards-guidelines/atag/)

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

به عنوان مثال، یک توسعه‌دهنده کامپوننت، مانند کسی که یک مولد فرم ایجاد می‌کند، ابتدا باید مطمئن شود که خود مولد قابل دسترسی است و با استانداردهای WCAG 2.2 AA مطابقت دارد. سپس، آنها باید تأیید کنند که خروجی تولید شده در وب‌سایت نیز کاملاً در دسترس است.

بهترین روش‌ها برای طراحی قابل دسترس (Accessible Design)

در این بخش به جنبه‌های مختلف طراحی با توجه به قابلیت دسترسی پرداخته خواهد شد.

صفحات فرعی پیشنهادی:

- رنگ‌ها 

- فونت‌ها 

- تصاویر 

- ترتیب فوکوس 

راهنمای سریع (Tooltip)

مروری کلی

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

نمونه کد

مثال راهنمای سریع از کم_منوها (com_menus)، نمایش منوها

<span class=".." aria-describedby="tip-unpublish<?php echo $i; ?>">
    <?php echo $item->count_published; ?>
</span>
<div role="tooltip" id="tip-unpublish<?php echo $i; ?>">
   <?php echo Text::_('COM_MENUS_COUNT_UNPUBLISHED_ITEMS'); ?>
</div>

 مثال راهنمای سریع در بخش جلویی (فرانت‌اند) – آیکون ویرایش یک مقاله:

<a href="/.." aria-describedby="editarticle-<?php echo $id; ?>">
    <span class="icon-edit" aria-hidden="true"></span>ویرایش
    <div role="tooltip" id="editarticle-<?php echo $id; ?>">مقاله منتشر شده</div>
</a>

اشتباهات رایج

- عدم وجود شناسه (ID) 

- شناسه غیر یکتا و تکراری 

مثال در جوملا

- راهنمای سریع روی یک عنصر در جدول: 

  administrator/components/com_menus/tmpl/menu/default.php 

- راهنمای سریع در بخش جلویی که برای محتوای قابل ویرایش (در صورت داشتن اجازه ویرایش) قابل مشاهده است: 

  components/com_content/tmpl/article/form.php 

چه کسانی تحت تأثیر قرار می‌گیرند؟

- افرادی که از صفحه‌خوان استفاده می‌کنند نیاز دارند ... 

- افرادی که مشکلات شناختی دارند نیاز دارند ... و غیره.

چه کسانی بیشترین تأثیر را از قابلیت دسترسی این عنصر می‌گیرند؟

تست دسترسی‌پذیری

چگونه می‌توان با استفاده از یک صفحه‌خوان، قابل دسترسی بودن این مورد را بررسی کرد؟

مثال‌ها:

از صفحه‌خوان برای پیمایش به ... استفاده کنید

مطمئن شوید ...

مطمئن شوید ...

اگر ...، پس قبول می‌شود. ✅

اگر ...، پس شکست می‌خورد. ❌

چگونه می‌توان با استفاده از بازرس وب، قابل دسترسی بودن این مورد را بررسی کرد؟

روی صفحه کلیک راست کنید > بازرسی ....

مطمئن شوید ...

مطمئن شوید ...

اگر ...، پس قبول می‌شود. ✅

اگر ...، پس شکست می‌خورد. ❌

اگر ...، پس قبول می‌شود. ✅

اگر ...، پس شکست می‌خورد. ❌

لینک معیارهای موفقیت WCAG را اینجا ببینید. برای مثال: معیارهای WCAG 1.3.1 - اطلاعات و روابط

لینک به دستورالعمل(های) ATAG را اینجا ببینید. برای مثال: دستورالعمل A.3.2: (برای رابط کاربری ابزار تألیف) به نویسندگان زمان کافی بدهید.