نقش ویژگی WCAG در سئو چیست ؟

اگر مقاله ترندهای سئو ۲۰۲۲ آرانیک وب را مطالعه کرده باشید حتماً به واژه WCAG، برخورده‌اید که در آنجا بیان کردیم که گوگل، به تمام مخاطبین خود حتی افراد کم‌توان هم اهمیت می‌دهد و در سال ۲۰۲۲ به وب سایت‌هایی که ویژگی WCAG را فعال کنند امتیاز مثبت می‌دهد و آنها را در صدر نگه می‌دارد.

ویژگی WCAG چیست ؟

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

هدف این ویژگی چیست ؟

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

ویژگی WCAG برای چه کسی است؟

WCAG در درجه اول برای موارد زیر در نظر گرفته شده است:

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

 

برای اطمینان از اینکه سازمان شما استاندارد WCAG را رعایت می کند، باید از چهار اصل طراحی POUR پیروی کند:

منظور از استاندارد WCAG چیست ؟

در ابتدا این ویژگی‌ ها را نام می‌بریم و سپس به توضیح آنها می‌پردازیم:

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

 

۱-منظور از محتوای قابل دریافت چیست ؟

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

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

تگ Applet: استفاده از ویژگی alt درون ویژگی هایتگ یا استفاده از متن در بدنه اپلت.

تگ area: دارای ویژگی alt باشد البته بی معنا نباشد.

تگ embed: حتما دارای تگ noembed باشد.

تگ img: حتما alt داشته باشد که نباید با نام فایل یکی باشد.

تگ input: تگ inputی که type ان img است باید alt داشته باشد که باید کوتاه باشد (در زبان انگلیسی حداکثر 100کاراکتر).

تگa: درباره تصویر و صدا نباید در صفت href دارای آدرسی منتهی به mp3 ,wmv باشد، این قانون در مورد تگ object که ویژگی Type آن برابرVideo , sound  می‌باشد نیز صدق می‌کند و رعایت آن الزامی است.

 

محتواهایتان باید سازگار باشند و بدون از دست دادن ساختارشان، قابل ارائه باشند.

مثلاً برای استفاده از جداول اطلاعاتی، ارتباط میان محتوا و جدول مشخص شود، اگر از کپشن برای جدول استفاده کرده‌اید باید موضوع جدول را مشخص کند اما به یاد داشته باشید برای جدول‌های طرح بندی نباید از صفت کپشن استفاده کنید.
اگر جدول پپیچیده‌ای مجود داشت از صفت Summary  استفاده کنید تا به صورت خلاصه توضیحاتی مرتبط با محتویات جدول ارائه دهید.

• جداولی که برای طرح بندی استفاده می شوند نباید th داشته باشند درحالی که در سایر جداول وجود این تگ الزامی است.
• دو ویژگی summary و caption نباید تکرار شده باشند.
• جدول نباید بیش از یک عنوان داشته باشد.
• Textarea باید دارای label از نوع متن مناسب باشد
• برای چک باکس‌ها از المان‌های filedset و legend برای دسته‌بندی گزینه‌ها استفاده شود.
• برای مشخص کردن عناوین از تگ P استفاده نکنید
• عنوان فیلد برای موارد ورودی و انتخابی با تگ Label مشخص شود.

 

قابلیت دیدن، شنیدن و تشخیص محتواها را برای کاربران ایجاد و راحت کنیم.

محتوا و بک‌‌گراند از هم قابل تشخیص باشند و با رنگ‌های مشخص از هم جدا شوند.

برای تگ Body یا تمام المان‌های درون متن، باید از رنگ‌ها استفاده کنیم.

pplet ،input ،object و اسکریپت، نباید تنها شامل رنگ شود.

در متن‌های توصیفی‌ای که برای عکس‌ها قرار می‌دهید، نباید فقط به رنگ عکس اشاره کنند، باید وجه تشخیص دیگری را هم قرار دهند.

نرخ کنتراست بین عکس و متن باید حداقل 1:5 باشد.

لینک‌ها کاملا باید نسبت به پسزمینه کنتراست داشته باشند.

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

عکس های دارای متن: متنی که درون عکس قرار دارد می بایست درalt قید شود.

 

2 -محتوای قابل استفاده

برای رعایت این مورد باید یک صفحه کلید قابل دسترسی قرار دهید و تمام قابلیت‌ها از این طریق در دسترس باشد.

هر اتفاقی که با نگهداشتن موس، حرکت دادن و غیره اتفاق می‌افتد باید با صفحه کلید هم انجام شود.

Appletها، objectها و اسکریپت ها باید به گونه ای تعریف شوند که با صفحه کلید نیز قابل استفاده باشند.

صفحه کلید باید امکان خروج از applet ،embed  و یا object و بازگشت به صفحه اصلی را بدهد.

مراقب باشید محتوایی که قرار می‌دهید برای کاربر متشنج کننده نباشد.

راه هایی برای کمک به کاربران در جهت یابی، یافتن محتوا و تعیین مکان آنها ارائه دهید.

به کاربر زمان کافی برای خواندن داده شود

تگ metaبا صف http-equiv-=”refresh” با در نظر گرفتن out-time به کار گرفته نشود.

در صفحات باید از title که شامل یک متن کوتاه برای توضیح کل صفحه است استفاده شود.

متن لینک‌ها باید با معنی و مرتبط با متن باشد (هر انکرتکست باید دارای متن با معنی باشد که مقصد لینک را مشخص می نماید).

از متون کلی برای لینک ها مثل برای اطلاعات بیشتر” اینجا را کلیک کنید” بپرهیزید.

برای سایت، سایت مپ تعیین کنید.

عناوین و برچسب ها

– عنوان صفحه باید با تگ h1 یا h2 مشخص شود.

– از تگ های h1 و h2 و… برای فرمت بندی و استایل دادن به محتوا استفاده نمی شود.

– بعد از تگ h2 تنها می توان از یکی از تگ های h1 ،h2 یا h3 استفاده کرد.

– بعد از تگ h3 تنها می توان از یکی از تگ های h1 ،h2 ، h3 یا h4 استفاده کرد.

– بعد ازتگ h4 تنها می توان از یکی از تگ های h1 ،h2 ، h3 ، h4 یا h5 استفاده کرد.

 

3 -محتوای قابل درک

تگ lang را به صورت صحیح برای متن قرار دهید و برای متن‌های راست به چپ باید dir=rtl مشخص شود تا ماشین بتواند متن را به راحتی بخواند.
برای بخش‌هایی از متن که با زبان اصلی متفاوتند باید از تگ مجزا و با صفت language مجزا مشخص شوند.

4 -صفحات وب به نحوی قابل پیش بینی کار کنند.

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

زمانی در محتوا تغییر ایجاد شود، که کاربر اقدام کرده باشد.

بدون این که اخطاری داده شود، تگ area صفحه جدیدی باز نکند.

Optin موجب تغییرات زیاد در صفحه نشود.

 

ناوبری یکپارچه

المان‌هایی که به صورت تکراری استفاد می‌شوند در همه صفحات با یک ترتیب مشخص و در یک محل ویژه و یکسان قرار داده شوند.

انواع یکسانی از داده‌ها به حالت یکسانی نمایش داده شوند.

روش شناسایی یکپارچه

درصورتی از blockquote استفاده کنید که واقعا نقل قول باشد.

فقط در صورتی از المان il استفاده کنید، که دیست داشته باشید و برای فرمت‌بندی متن از این المان‌ها استفاده نکنید.

 

5 –به کاربر برای اصلاح اشتباه کمک کنید.

شناسایی خطا:

اگر در فرم‌ها موردی را وارد نکردند، اعلان خطای مشخص و واضحی بدهید.

برچسب ها یا دستورالعمل ها

– هر المان input تنها یک label مرتبط با خود داشته باشد که دارای متن توضیحی برای input باشد.

– در فرم ها فیلدهای اجباری به کاربران اعلام گردد.

– المان‌ های input ی که نوع آن file ،password ،text ،checkbox  یا radio است باید دارای labelی باشد که هدف و کاربرد را توضیح دهد.

پیشنهاد رفع خطا

– در همه فرم ها در صورت بروز خطا راهنمایی جهت رفع خطا ارائه گردد.

جلوگیری از بروز خطا

برای جلوگیری از بروز خطا برای تراکنش‌های مهم و غیر قابل بازگشت، قبل از قبول فرم نهایی، از کاربر تاییدیه بگیرید.

اطلاعاتی که در صفحه وب پاک شده اند قابل بازگشت باشند.

 

سطوح موفقیت در ویژگی WCAG

 همان طور که در ابتدا بیان کردیم، برای دستیابی به انطباق با ویژگی WCAG، سازمان W3C‌، معیارهای موفقیت را به سه سطح پیاده سازی مختلف تقسیم کرده است. این سطوح به ترتیب با نام‌های سطح  A، AA و AAA شناخته می‌شوند.

 

در استاندارد اصلی  WCAG ، W3C  تفاوت بین سطوح را به شرح زیر توصیف کرد:

 

اولویت 1:

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

سطح A

اولویت 2:

یک توسعه دهنده محتوای وب باید این نقطه بازرسی را برطرف کند. رد کردن، این ایست بازرسی موانع قابل توجهی را برای دسترسی به اسناد وب برطرف می کند.

 سطح AA

اولویت 3:

گذراندن این ایست بازرسی توسط web developer  کمک می‌کند تا دسترسی به اسناد بهبود پیدا کند.

سطح AAA

مقاله دیجیتال مارکتینگ آرانیک وب را از دست ندهید.

 

جهت مشاوره رایگان با ما تماس بگیرید:

۰۲۱-۲۸۴۲۸۶۷۶ برای تماس مستقیم

۰۹۰۳۸۴۸۱۰۱۲ (فقط چت واتس اپ)

 ایمیل: info@aranikweb.ir