بررسی web accessibility یا دسترسی پذیری وب در وردپرس
مقالات تخصصی IT و هاستینگ

هر آنچه در مورد web accessibility یا دسترسی پذیری وب در وردپرس باید بدانید

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

دستورالعمل های دسترسی به محتوای وب (Web Content Accessibility Guidelines یا WCAG) یک استاندارد طلایی برای دسترسی پذیری وب می باشد که ابتدا نسخه 2.0 آن در سال 2008 منتشر و توسط کنسرسیوم جهانی وب (W3C) توسعه یافت.

نسخه فعلی یعنی WCAG 2.1، بهترین ویژگی های دسترسی پذیری وب را در 4 دسته مختلف قرار می دهد: قابل فهم، قابل اجرا، قابل درک و قدرتمند. پیش بینی می شود که نسخه 2.2، در پایان سال 2022 برای تعریف بیشتر دستورالعمل های موجود و افزودن چند دستورالعمل جدید، منتشر گردد.

این دسترسی پذیری، در جامعه وردپرس نیز وجود دارد و آنها متعهد هستند که بهترین روش ها را در CMS خود پیاده سازی نمایند. برخی از توسعه دهندگان وردپرس حتی از قالب ها و افزونه ها نیز فراتر می روند.

web accessibility یا دسترسی پذیری وب در وردپرس بسیار مهم است و پیمایش در آن نیز همانند گذشته دشوار نیست. هنگام کار روی طراحی مجدد یک وب سایت یا حتی اضافه کردن ویژگی های جدید به وب سایت فعلی خود، چند مورد وجود دارد که باید در طول فرآیندهای طراحی و ایجاد سایت در نظر گرفته شوند. این موضوع کمک می کند تا وب سایت مطابق با استانداردهای دسترسی پذیری فعلی، پیاده سازی گردد.

طراحی و ساخت اولیه

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

کنتراست رنگ

web accessibility یا دسترسی پذیری وب در وردپرس و کنتراست رنگ

تصویر(1)

یکی از ساده‌ترین عناصر وب برای آزمایش web accessibility یا دسترسی پذیری وب در وردپرس، رنگ‌ها هستند. WCAG 2.1 نسبت کنتراست رنگ برای هر دو رنگ پیش زمینه و پس زمینه در یک سایت را تعیین می کند.

نسبت کنتراست برای متن با اندازه معمولی (کوچک تر از 18pt) باید حداقل 4.5:1 و برای متن بزرگتر (18pt و بالاتر) 3:1 باشد. اما چگونه می توان متوجه شد که نسبت کنتراست رنگ چیست؟ سایت WebAim، یک ابزار معتبر برای بررسی نسبت کنتراست رنگ های سایت می باشد.

یک کد hex در بخش foreground color و یک کد hex در بخش background color وارد نمایید تا ابزار WebAim نسبت کنتراست این دو رنگ را محاسبه کند.  اگر مقدار آن به اندازه کافی زیاد نبود، می توانید مقدار هر رنگ را با استفاده از نوار لغزنده که در زیر آن قرار دارد تغییر دهید تا به نتیجه مطلوب دست پیدا کنید.

web accessibility یا دسترسی پذیری وب در وردپرس و تنظیم کنتراست رنگ

تصویر(2)

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

رنگ های پشتیبان

رنگ های پشتیبان در web accessibility یا دسترسی پذیری وب در وردپرس 

تصویر(3)

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

تصور کنید پنلی با تصویر بزرگ و یک متن سفید، در سایت خود قرار داده اید. هنگامی که نمایش تصاویر در مرورگر یک کاربر خاموش می شود، پس زمینه سایت به طور پیش فرض به رنگ سفید تغییر می یابد. اکنون متن سفید در پس زمینه سفید، نامرئی می شود. چه اتفاقی رخ می دهد اگر این متن محتوای مهمی مانند CTA یا یک پیشنهاد با ارزش باشد؟

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

ابزارهای ناوبری چندگانه

ابزارهای ناوبری چندگانه در web accessibility یا دسترسی پذیری وب در وردپرس

تصویر(4)

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

قرار دادن sitemap در پاورقی سایت می تواند یک راه حل بسیار عالی باشد. این روش به کاربران امکان می دهد تا تمام صفحات موجود را در یک بخش مشاهده نمایند که می تواند تجربه کاربری را بهبود بخشد.

افزونه WP Sitemap Page یک ابزار بسیار عالی برای افزودن نقشه سایت است که می تواند صفحات، پست های وبلاگ، نمونه کارها و موارد دیگر را فهرست کند. راه حل دیگر، اضافه کردن قابلیت جستجو به سایت می باشد تا کاربر بتواند به سرعت کل سایت را برای یک کلمه کلیدی یا بک عبارت خاص جستجو کند.

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

فرم بازخورد web accessibility یا دسترسی پذیری وب در وردپرس

فرم بازخورد دسترسی پذیری در web accessibility یا دسترسی پذیری وب در وردپرس 

تصویر(5)

در پاورقی وب سایت باید به فرم بازخورد، لینک داده شود. حتی اگر روش های متعددی را برای بهبود web accessibility یا دسترسی پذیری وب در وردپرس به کار برده باشید، باز هم جایی برای ارتقا وجود دارد.

افزودن یک فرم بازخورد، به کاربران اجازه می‌دهد تا نظرات یا انتقادات خود در مورد نحوه دسترسی به سایت را با مدیر وب سایت در میان بگذارند. قرار دادن فرم بازخورد باعث می شود تا کاربران نیز به این نتیجه برسند که به تجربه کاربری آنها در وب سایت، اهمیت می دهید.

پس از دریافت بازخوردها، می توانید از آنها برای بهبود و افزودن امکانات موردنیاز به سایت استفاده نمایید. شنیدن خواسته های کاربران و تطبیق امکانات با نیاز آنها، بخش مهمی از این فرآیند می باشد.

فرآیندهای تست پس از ایجاد وب سایت

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

تست خودکار

ابزارهای مختلفی برای تست خودکار دسترسی به سایت وجود دارند و باید در نظر داشته باشید که انجام تست های خودکار کافی نیستند اما برای شروع بررسی، عالی خواهند بود.

تست خودکار web accessibility یا دسترسی پذیری وب در وردپرس

تصویر(6)

برای نگاهی اجمالی به اینکه آیا سایت شما استانداردهای اولیه web accessibility یا دسترسی پذیری وب در وردپرس را رعایت می کند یا خیر، ابزار WAVE مجموعه ای از ابزارهای ارزیابی خودکار را ارائه می کند که صفحات وب را اسکن و مشکلات WCAG و مواردی را که نیاز به بررسی بیشتر دارند را گزارش می دهند.

با استفاده از یک افزونه مرورگر، ابزار WAVE می تواند خطاهای دسترسی را تشخیص داده و با رنگ قرمز نمایش دهد که به دو بخش Errors و Contrast Errors تقسیم می شوند. معمولا خطاها مربوط به کدنویسی سایت هستند. خطاهای کنتراست زمانی ایجاد می شوند که رنگ بندی سایت با استانداردهای کنتراست (که در ابتدای مقاله بررسی شد) مغایرت داشته باشد.

web accessibility یا دسترسی پذیری وب در وردپرس و ابزار های تست آن

تصویر(7)

زمانی که تصمیم گرفتید خطاهای کنتراست سایت خود را برطرف نمایید، افزونه هایی مانند Equalize Digital Accessibility Checker وجود دارند که می توانند این فرآیند را ساده تر کنند.

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

تست دستی

همانطور که پیشتر اشاره شد، محدودیت‌هایی در ابزارهای آزمایش خودکار وجود دارد. ابزار WAVE و Equalize Checker منابعی عالی برای اسکن خودکار هستند و باعث صرفه جویی زیادی در زمان می شوند. اما باید در نظر داشته باشید هوش مصنوعی‌ که توسط انسان ها ایجاد شده است نمی تواند همانند یک کاربر با محدودیت های حرکتی خاص، تست ها را انجام دهد.

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

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

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

همچنین تمام ویژگی‌های شناور سایت را بررسی و اطمینان حاصل نمایید که کلید TAB می تواند محتوای پنهان آن را نمایش دهد. بررسی نمایید که آیا می توانید با استفاده از کلید TAB به تمامی محتوا و لینک های سایت دسترسی داشته باشید؟

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

بررسی دستی این موضوع کمی زمان بر است و کسب اطمینان از دسترسی صحیح همه ابزارهای کمکی به سایت نیز کمی دشوار می باشد. از اطلاعات ارائه شده در این مقاله به عنوان نقطه شروعی برای بررسی web accessibility یا دسترسی پذیری وب در وردپرس خود استفاده نمایید. به یاد داشته باشید که web accessibility یک فرآیند دائمی است، زیرا استانداردها و دستورالعمل ها به طور مکرر برای خدمت رسانی بهتر به کاربران، بروز می شوند.

اشتراک گذاری:

نظرات

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *