یکی از اجزای کلیدی طراحی وب خوب، قابلیت دسترسی است. سایت شما باید برای کاربرانی با نیازها و توانایی های فیزیکی متنوع در دسترس باشد. در غیر این صورت، ممکن است بخش قابل توجهی از مخاطبان خود را بیگانه کنید (و خود را در آب داغ قانونی بیابید). بنابراین، انجام ممیزی دسترسی به وب حداقل یک بار در سال ضروری است.
خوشبختانه، این روند آنقدرها هم که فکر می کنید پیچیده نیست. ???? ما فهرستی از مراحلی را گردآوری کرده‌ایم که می‌توانید انجام دهید تا مطمئن شوید که سایت شما با استانداردهای دسترسی مانند WCAG مطابقت دارد و بدون در نظر گرفتن توانایی‌های بازدیدکننده، تجربه کاربری روانی را ارائه می‌دهد.
مروری بر دسترسی به وب
قابلیت دسترسی به وب روشی است برای اطمینان از اینکه همه می توانند از یک وب سایت استفاده کنند، از جمله افراد دارای معلولیت. برای مثال، فردی که دچار اختلال عصبی عضلانی است ممکن است نتواند از موش استفاده کند. با این حال، اگر یک وب سایت از ناوبری صفحه کلید پشتیبانی می کند، همچنان باید بتواند با آن تعامل داشته باشد.
به طور معمول، توسعه دهندگان و طراحان وب حرفه ای از آن پیروی می کنند دستورالعمل‌های دسترسی به محتوای وب (WCAG) هنگام ایجاد وب سایت ها این دستورالعمل ها شامل پیشنهاداتی در مورد نحوه ارائه خدمات به کاربران دارای ناتوانی جسمی، از جمله اختلالات بینایی است.
با این حال، اگر وب سایت خود را خودتان ساخته اید، با استفاده از یک سیستم مدیریت محتوا (CMS) مانند وردپرس یا یک راه حل همه کاره مانند Wix، ممکن است محتوای شما به طور کامل در دسترس نباشد. برای مثال، ممکن است از رنگ‌هایی با کنتراست ناکافی استفاده کنید یا تصاویر را بدون متن جایگزین آپلود کنید.
بنابراین، باید یک ممیزی دسترسی به وب انجام دهید تا مطمئن شوید که سایت شما کاربرانی با نیازهای متنوع را در خود جای می دهد. در برخی کشورها، این در واقع یک الزام قانونی است. مثلا، قانون آمریکایی های دارای معلولیت (ADA) مستلزم آن است که همه وب سایت ها برای کاربران دارای معلولیت قابل دسترسی باشند.
نحوه انجام ممیزی دسترسی به وب (در 6 مرحله)
اکنون، بیایید به نحوه انجام ممیزی دسترسی به وب نگاه کنیم. مراحل زیر بر اساس توصیه های ذکر شده در WCAG است.
مرحله 1: سعی کنید سایت خود را فقط با یک صفحه کلید ???? پیمایش کنید
همانطور که در بالا ذکر شد، کاربران مبتلا به بیماری های عصبی ممکن است نتوانند با ماوس در وب حرکت کنند. اگر سایت شما از پیمایش صفحه‌کلید پشتیبانی می‌کند، آنها را قادر می‌سازد تا با استفاده از کلیدهای تب، فلش، enter و فاصله، سایت شما را مرور کنند و موارد موجود در صفحه را انتخاب کنند.
برای بررسی اینکه آیا سایت شما این قابلیت را دارد یا خیر، از یکی از صفحات خود در قسمت جلویی بازدید کرده و کلید تب را فشار دهید. اولین عنصر تعاملی در صفحه شما (معمولاً یک آیتم منو) انتخاب خواهد شد.
می‌توانید برای پرش از یک عنصر به عنصر دیگر، کلید tab را فشار دهید و کلید Enter را فشار دهید تا از صفحه پیوند داده شده بازدید کنید یا عملی را انجام دهید (مانند ارسال فرم):
اگر نمی توانید سایت خود را با صفحه کلید هدایت کنید، باید این ویژگی را با یک ابزار اختصاصی اضافه کنید. به عنوان مثال، WP Accessibility Helper ناوبری صفحه کلید و چندین ویژگی دیگر را ارائه می دهد تا سایت شما را با WCAG هماهنگ کند.
مرحله 2: مطمئن شوید که سایت شما دارای کنتراست رنگ کافی است
در حالت ایده آل، هر قطعه از متن در سایت شما باید خوانا باشد. ممکن است در حال حاضر از فونت های واضح و اندازه فونت بزرگ استفاده کرده باشید، اما باید رنگ متن و پس زمینه ای که روی آن نمایش داده می شود را نیز در نظر بگیرید.
اگر تضاد کافی بین عناصر وجود نداشته باشد، کاربرانی که دارای اختلالات بینایی مانند کوررنگی هستند، احتمالاً نمی توانند محتوای شما را بخوانند. برای مثال، ممکن است از رنگ آبی مشابه برای متن و پس‌زمینه استفاده کنید یا از رنگ پررنگی مانند قرمز بر روی سایه قوی سبز استفاده کنید.
برای بررسی اینکه آیا کنتراست رنگ کافی در سایت خود دارید، می توانید با PageSpeed Insights آزمایشی انجام دهید. کافی است URL خود را وارد کنید، سپس منتظر بمانید تا نتایج ظاهر شود و به بخش Accessibility بروید.
در اینجا، ممکن است پیامی ببینید که می گوید رنگ های پس زمینه و پیش زمینه نسبت کنتراست کافی ندارند:
اگر روی آن کلیک کنید، به شما نشان می دهد که کدام عناصر باید اصلاح شوند:
سپس، می توانید از ابزاری مانند استفاده کنید جستجوگر کنتراست WebAIM برای انتخاب رنگ های مناسب این نسبت کنتراست بین رنگ های انتخابی را به شما نشان می دهد:
همچنین به شما می گوید که آیا آنها دستورالعمل های دسترسی WCAG را رعایت می کنند یا خیر. شما می‌خواهید در تمام اجزای آن یک پاس داشته باشید.
مرحله 3: هر محتوای متحرکی را که به طور خودکار پخش می شود غیرفعال کنید ????️
محتوای متحرک مانند فیلم ها و چرخ فلک های تصویری می تواند وب سایت شما را جذاب تر کند. مشکل این است که اگر این محتوا روی پخش خودکار تنظیم شود، کاربرانی که مشکلات شناختی دارند ممکن است آن را منحرف یا طاقت فرسا بدانند.
بنابراین، شما می خواهید صفحات خود را مرور کنید و چنین عناصری را در سایت خود شناسایی کنید. سپس، باید پخش خودکار را غیرفعال کنید و مطمئن شوید که کاربر روی انیمیشن کنترل دارد. به عنوان مثال، آنها باید بتوانند آن را پخش کنند و هر طور که می خواهند آن را متوقف کنند و صدا را کنترل کنند.
مرحله 4: به دنبال تصاویر بدون متن جایگزین بگردید
مرحله مهم دیگر در ممیزی دسترسی به وب شما این است که مطمئن شوید هر تصویر در سایت شما دارای متن جایگزین است. این توصیفی از تصویر و محتوای آن است که توسط صفحه‌خوان‌ها برای کاربران دارای ناتوانی بینایی خوانده می‌شود.
البته، اگر یک وب‌سایت یا وبلاگ بزرگ دارید، بررسی هر تصویر احتمالاً کاری بی‌پایان خواهد بود. یک بار دیگر، می‌توانید آزمایشی را از طریق PageSpeed Insights انجام دهید و به بخش Accessibility نگاه کنید تا ببینید آیا هیچ تصویری را بدون متن جایگزین پرچم‌گذاری کرده است یا خیر.
از طرف دیگر، می توانید از ابزارهای دسترسی به وب مانند استفاده کنید دسترسی NV برای بررسی سایت خود با یک صفحه خوان:
اگر سایت وردپرسی دارید، اضافه کردن متن جایگزین نسبتاً آسان است. تنها کاری که باید انجام دهید این است که تصویر را در Block Editor انتخاب کرده و به دنبال آن بگردید متن جایگزین فیلد در پنل تنظیمات:
حتی می توانید متن جایگزین را با ویرایش عکس های خود در کتابخانه رسانه اضافه کنید.
مرحله 5: اطمینان حاصل کنید که عناصری مانند جداول، سرفصل ها و لیست های گلوله به درستی علامت گذاری شده اند ⚡
همانطور که قبلاً می دانید، افراد دارای اختلالات بینایی از صفحه خوان برای حرکت در وب استفاده می کنند. این نرم افزار محتوا را برای آنها می خواند، اما اگر عناصری مانند جداول یا لیست ها به درستی در صفحه علامت گذاری نشده باشند، صفحه خوان قادر به تشخیص آنها نخواهد بود. در نتیجه، خروجی ممکن است کمی گیج کننده باشد.
جداول باید در تگ های
- و
- قرار گیرند.
برای بررسی این مورد در Google Chrome، عنصر صفحه ای را که می خواهید بررسی کنید انتخاب کنید. سپس روی آن راست کلیک کرده و انتخاب کنید بازرسی کنید. این کد HTML آن عنصر را به شما نشان می دهد:
به همین ترتیب، باید مطمئن شوید که عنوان‌های شما در برچسب‌هایی مانند
یا
پیچیده شده‌اند.
مرحله 6: ابزارهای تعاملی مانند فرم ها را آزمایش کنید
در نهایت، می‌خواهید تمام ابزارهای تعاملی سایت خود، عمدتاً فرم‌ها و دکمه‌ها را بررسی کنید. فیلدهای فرم باید به درستی علامت گذاری شوند، با برچسب هایی که به وضوح نشان می دهد که کاربران چه اطلاعاتی را باید ارائه دهند.
علاوه بر این، زمانی که کاربر جزئیات نادرست را وارد می کند، باید یک پیام خطا وجود داشته باشد. در غیر این صورت، ممکن است متوجه شوند که چرا نمی‌توانند فرم را ارسال کنند یا چه اشتباهی انجام داده‌اند.
به عنوان مثال، یک فرد مبتلا به نارساخوانی ممکن است آدرس ایمیل را اشتباه تایپ کند. در این صورت، آنها ممکن است پیامی را ببینند که به آنها اطلاع می دهد که آدرس ایمیل نامعتبر است.
این کار تشخیص اشتباه در فرم را برای آنها آسان تر می کند. حتی ممکن است به جای یک «تعداد نامعتبر» یا «تاریخ نامعتبر»، جزئیات بیشتری درباره خطا ارائه کنید. به عنوان مثال، ممکن است چیزی مانند «شما نمی‌توانید در آینده تاریخ انتخاب کنید» یا «هیچ کاراکتر خاصی مجاز نیست» را اضافه کنید.
همچنین می‌خواهید عناصر دیگری را در فرم بررسی کنید تا مطمئن شوید که به درستی کار می‌کنند و استفاده و درک آنها آسان است. اینها شامل منوهای کشویی، دکمه‌های رادیویی و دکمه‌های فراخوان برای اقدام هستند.
نتیجه گیری در مورد انجام ممیزی دسترسی به وب ????
با انجام ممیزی دسترسی به وب، می توانید اطمینان حاصل کنید که وب سایت شما نیازهای همه کاربران را بدون توجه به توانایی های آنها برآورده می کند. به علاوه، به شما کمک می کند تا با مقررات مهم دسترسی و WCAG مطابقت داشته باشید.
برای شروع، باید مطمئن شوید که سایت شما از ناوبری کلمات کلیدی پشتیبانی می کند و از کنتراست رنگ کافی استفاده می کند. سپس، باید پخش خودکار را در محتوای متحرک غیرفعال کنید، به دنبال تصاویر بدون متن جایگزین بگردید و مطمئن شوید که عناصری مانند جداول و لیست ها به درستی علامت گذاری شده اند. همچنین آزمایش ابزارهای تعاملی مانند فرم ها و دکمه ها ضروری است. ????️????️????️
آیا در مورد انجام ممیزی دسترسی به وب سؤالی دارید؟ در بخش نظرات زیر به ما اطلاع دهید!
راهنمای رایگان
4 گام ضروری برای افزایش سرعت
وب سایت وردپرس شمامراحل ساده را در مجموعه کوتاه 4 قسمتی ما دنبال کنید
و زمان بارگذاری خود را 50-80٪ کاهش دهید. ????
نظر خود را به اشتراک بگذارید