خطاهای قسمت Accessibility پیچ اسپید گوگل

آموزشی, مقالات
رضوان نظری
آگوست 6, 2025

خطاهای قسمت Accessibility پیچ اسپید گوگل

خطاهای قسمت Accessibility پیچ اسپید گوگل تقریبا شامل ۲۰ مورد اصلی هستند. در ادامه خطاها را و راه‌حل‌های رفع آن را توضیح می‌دهیم.

خطای Document does not have a title element

زمانی ظاهر می‌شود که در کد HTML صفحه، هیچ تگ title وجود نداشته باشد. این تگ باید داخل head صفحه تعریف شده باشد و یکی از اصلی‌ترین اجزای سئو است.

تگ title در HTML، عنوان صفحه را مشخص می‌کند؛ عنوانی که در تب مرورگر نمایش داده می‌شود، در موتورهای جستجو به‌عنوان تیتر صفحه ظاهر می‌گردد، و همچنین برای کاربرانی که از فناوری‌های کمکی مانند صفحه‌خوان (Screen Reader) استفاده می‌کنند، بسیار مهم است.

وقتی صفحه‌ای بدون تگ title باشد، کاربر نابینا یا کم‌بینا که از screen reader استفاده می‌کند، نمی‌تواند بفهمد که در چه صفحه‌ای قرار دارد. چون screen reader هنگام ورود به صفحه، معمولاً عنوان آن را اعلام می‌کند. نبود این تگ باعث گیج شدن کاربر می‌شود و تجربه‌ی کاربر را به‌شدت ضعیف می‌کند.

همچنین برای افرادی که چند صفحه در مرورگر باز دارند، نبود عنوان مناسب باعث می‌شود نتوانند به‌راحتی صفحه موردنظر را پیدا کنند، چون عنوان در تب مرورگر نمایش داده نمی‌شود یا به‌صورت پیش‌فرض نشان داده می‌شود.

موتورهای جستجو مانند گوگل برای نمایش نتایج جستجو، از تگ title استفاده می‌کنند. نبود این تگ باعث افت سئوی سایت می‌شود و ممکن است صفحه اصلاً ایندکس نشود یا با عنوان نامناسب در نتایج نمایش داده شود.

مقالات مرتبط
معرفی جامع ابزار Google Page Speed
رفع ارورهای پیج اسپید گوگل

راه‌حل رفع خطا

برای رفع این خطا، کافی است یک تگ title داخل بخشheadصفحه قرار دهید.
باید برای هر صفحه یکتا باشد (عنوان هر صفحه متفاوت با صفحه‌های دیگر)
باید مختصر، توصیفی و مرتبط با محتوای صفحه باشد (ترجیحاً بین ۳۰ تا ۶۰ کاراکتر)
استفاده از کلمات کلیدی مهم در عنوان برای سئو مفید است.

خطای Document does not have a meta description

زمانی ظاهر می‌شود که در کد HTML صفحه، هیچ تگ وجود نداشته باشد. تگ متا وظیفه دارد یک خلاصه‌ی کوتاه و مفید از محتوای صفحه را برای موتورهای جستجو، مرورگرها و گاهی برای ابزارهای دسترسی‌پذیری (مثل screen reader ها) ارائه کند.

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

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

در واقع نبود توضیح متا برای گوگل و برای کاربر، این یک علامت منفی است.

راه‌حل رفع خطا

برای رفع این خطا، باید در بخشheadصفحه HTML، یک تگmeta name=descriptionقرار دهید.

اکثر قالب‌های وردپرس اگر از افزونه‌های سئو مثل Yoast SEO یا RankMath استفاده کنی، بخش جداگانه‌ای برای وارد کردن meta description دارند. فقط کافیه در بخش ویرایش برگه یا نوشته، قسمت “متای توضیحات” رو پر کنی

توضیح متا نه خیلی کوتاه، نه خیلی بلند باشد.
حاوی کلمات کلیدی مهم مرتبط با محتوای همان صفحه باشد.
برای هر صفحه باید منحصر به‌فرد باشد؛ یعنی یک صفحه نباید دقیقاً همان description صفحه دیگر را داشته باشد.
جذاب و ترغیب‌کننده نوشته شود تا کاربر روی آن کلیک کند برای مثال با تأکید روی مزیت، تخفیف، حل یک مشکل یا خاص بودن محتوا

خطای<html> element does not have a [lang] attribute

این خطا زمانی نمایش داده می‌شود که در تگ اصلی <html> فایل HTML، صراحتاً زبانی برای محتوای صفحه تعریف نشده باشد.

در HTML، تگ <html> پایه و ریشه‌ی صفحه‌ وب‌سایت است. زمانی که مرورگر یا ابزارهای کمکی مثل صفحه‌خوان‌ها برای نابینایان یک صفحه را بارگذاری می‌کنند، اولین چیزی که بررسی می‌کنند این است که بدانند زبان محتوای صفحه باز شده چیست.

اگر صفحه به فارسی است اما زبان مشخص نشد باشد، screen reader فرض را بر انگلیسی یا زبان پیش‌فرض سیستم می‌گذارد و متن فارسی را با تلفظ و ریتم اشتباه می‌خواند.

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

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

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

راه‌حل رفع خطا

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

خطای Links do not have descriptive text

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

هر لینکی که در HTML ایجاد می‌کنید (با تگ <a>)، باید دارای متنی واضح و مشخص باشد که کاربر بفهمد اگر روی آن کلیک کند وارد چه صفحه‌ای یا چه اتفاقی خواهد افتاد. این متن فقط نباید برای کاربران عادی قابل درک باشد، بلکه باید برای فناوری‌های کمکی مانند صفحه‌خوان‌ها Screen Readers نیز معنا داشته باشد.

کاربری که از screen reader استفاده می‌کند نمی‌فهمد این لینک‌ها به چه چیزی اشاره دارند.

حتی کاربران عادی هم در حالت دوم نمی‌دانند “کلیک کنید” برای چه چیزی است.

موتورهای جستجو هم نمی‌توانند مفهوم لینک را درک کنند، که به سئوی داخلی آسیب می‌زند.

راه‌حل رفع خطا

استفاده از متن توصیفی در لینک‌ها

برای هر لینک، متن آن باید کاملاً توصیف‌کننده باشد. به‌جای نوشتن اینجا کلیک کنید یا فقط گذاشتن تصویر، باید به‌طور مستقیم بگویید که لینک در مورد چیست.

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

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

ترکیب متن و تصویر هم اشکالی ندارد، به شرطی که متن واضح باشد

خطای Buttons do not have an accessible name

این خطا زمانی ظاهر می‌شود که در کد HTML صفحه، یک یا چند دکمهbuttonوجود داشته باشند که هیچ نام قابل درکی برای کاربران، مخصوصاً افراد نابینا یا کم‌بینا که از screen reader استفاده می‌کنند، نداشته باشند. بنابراین:

دکمه‌ها یکی از پرکاربردترین اجزای رابط کاربری هستند؛ مثلاً دکمه‌ی ارسال فرم، ورود، سبد خرید، رفتن به صفحه بعد و… . کاربر باید بتواند بفهمد که هر دکمه دقیقاً چه کاری انجام می‌دهد.

هیچ متنی داخلش نباشد، فقط شامل یک آیکون باشد بدون توضیح، یا به‌جای دکمه، از تگ‌های مشابهی استفاده شده باشد بدون ویژگی‌های کمکی، در این صورت برای کاربری که از screen reader استفاده می‌کند، این دکمه مثل یک عنصر گنگ و بی‌معنا ظاهر می‌شود. مثلاً صفحه‌خوان فقط می‌گوید: button بدون اینکه مشخص کند چه کاری انجام می‌دهد.

افرادی که نمی‌توانند صفحه را ببینند، با کمک screen reader ها صفحه را مرور می‌کنند. اگر گزینه‌ای نام نداشته باشد، آن‌ها نمی‌فهمند که این دکمه مربوط به چه چیزی است. مثلاً آیا این دکمه برای ارسال فرم است یا افزودن به سبد خرید نداشتن نام باعث:

سردرگمی کاربران با نیازهای ویژه
عدم رعایت استانداردهای WCAG 2.1
آسیب به تجربه کاربری و رتبه سئو

راه‌حل رفع خطا

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

نوشتن متن واضح داخل دکمه

اگر فقط آیکون استفاده می‌کنید، aria-label بنویسید
اگر از آیکون SVG استفاده می‌کنید، باز هم aria-label لازم است
استفاده از titleاگرچه اولویت با aria-label است

خطای Background and foreground colors do not have a sufficient contrast ratio

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

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

راه‌حل رفع خطا

استفاده از ابزار بررسی نسبت کنتراست

برای بررسی اینکه آیا ترکیب رنگ‌های محتوا قابل قبول است یا خیر، می‌توان از ابزارهایی مانند:

WebAIM Contrast Checker
Accessible Colors
یا DevTools کروم > Audits > Accessibility > Contrast استفاده کنید.

خطای Elements have visible focus styles

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

راه‌حل رفع خطا

حفظ focus پیش‌فرض مرورگر

اگر از CSS برای حذف حالت focus استفاده نکرده باشید، مرورگر به‌صورت خودکار سبک focus را اعمال می‌کند و نیازی به هیچ کار اضافه‌ای نیست.
اگر از فریم هایی مثل Bootstrap یا Tailwind استفاده می‌کنید، مطمعن شوید که کلاس‌های focus فقط وقتی استفاده شوند که خودتان جایگزین مناسب و قابل مشاهده‌ای تعریف کرده باشید.

خطای Heading elements are not in a sequentially-descending order

این خطا زمانی نمایش داده می‌شود که ترتیب تگ‌های صفحه h1، h2،h3، h4 و… در کد HTML رعایت نشده باشد. ساختار عنوان‌های یک صفحه وب، ترتیب صحیح آن رعایت نشده باشد. این خطا نشان می‌دهد که در استفاده از تگ‌های <h1‏>، <h2‏>، <h3‏> و غیره، از سطح مناسبی به سطح پایین‌تر به ترتیب استفاده نشده است

هدینگ‌ها، مثل فهرست مطالب در یک کتاب عمل می‌کنند:

h1: عنوان اصلی صفحه
h2: زیرعنوان‌های اصلی درون آن
h3: زیرمجموعه‌های هر زیرعنوان و به همین ترتیب الی آخر.

راه‌حل برای رفع خطا

همه تگ‌های <h1> تا <h6> را در محتوای صفحه پیدا کنید.
اطمینان از ترتیب منطقی
از <h1> فقط یک‌بار استفاده کنید معمولاً عنوان اصلی صفحه.
بعد از آن، از <h2> برای عنوان‌های مهم استفاده کن.
اگر در دل یک بخش <h2>، بخشی دیگر وجود دارد، از <h3> استفاده کنید و همین‌طور تا <h6>.

خطای Document does not have a <title> element

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

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

راه‌حل رفع خطا

برای رفع این خطا باید مطمئن شوید که سند HTML شما دارای تگ title درون بخش head باشد.

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

جهت اطلاعات بیشتر:

خطاهای قسمت Performance پیچ اسپید گوگل

معرفی و آشنایی کامل با ابزارهای سئو

افزایش سرعت سایت در PageSpeed Insights

خطای Form elements do not have associated labels

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

این مشکل تجربه کاربری را ضعیف می‌کند و در قوانین دسترس‌پذیری (مانند WCAG) به‌عنوان یک مانع جدی در برابر کاربران با نیازهای خاص شناخته می‌شود. از دید SEO هم گوگل چنین صفحاتی را کمتر متوجه میکند.

راه‌حل رفع خطا

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

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

خطای video elements do not have captions

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

این مشکل یک نقض جدی محسوب میشود. رفع و رعایت آن برای سایت‌های رسمی دولتی یا سایت‌های خدماتی ضروری است. بنابراین:

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

راه‌حل رفع خطا

در داخل تگ video از عنصرtrackبرای افزودن فایل زیرنویس استفاده کنید.
اضافه کردن زیرنویس به‌صورت درون‌ویدیویی
فایل‌های زیرنویس باید با ویدیو هماهنگ و دقیق زمان‌بندی شده باشند.
اگر سایت شما چندزبانه است، برای هر زبان، یک <track> جداگانه اضافه کنید.
از فرمت استاندارد WebVTT برای زیرنویس استفاده کنید، زیرا توسط اکثر مرورگرها پشتیبانی می‌شود.

خطای ARIA roles used are not valid

این خطا زمانی نمایش داده می‌شود که در HTML مقادیر اشتباه برای ویژگی role استفاده شده‌است. این ویژگی به صفحه‌خوان‌ها کمک می‌کند بتوانند محتوای صفحه را برای افراد با شرایط خواص قابل درک کنند. اگر یک مقدار نامشخص تعیین شود مرورگر یا صفحه خوان نمی‌تواند رفتار درست را انجام دهند درنتیجه تجربه کاربری مختل می‌شود.

مثلاً اگر بنویسید <div role=”card”> در حالی که “card” نقش معتبری نیست.
مثلاً نوشتن <div role=”buton”> به جای “button”.
مثل این‌که <a> را به‌جای role=”link” با role=”button” مشخص کنید بدون اینکه ویژگی‌های لازم را داشته باشد.
استفاده از نقش‌هایی که دیگر در نسخه‌های جدید ARIA وجود ندارند.

راه‌حل رفع خطا

بررسی نقش‌ها با مرجع رسمی ARIA

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

تصحیح اشتباهات تایپی

اگر به‌طور مثال نوشته‌اید role=”botton” اصلاحش کنید به role=”button”.

استفاده از نقش در عناصر مناسب

مثلاً اگر دارید role=”navigation” استفاده می‌کنید، بهتر است آن را روی یک عنصر معنایی مانند <nav> بگذارید، نه روی یک <div> بی‌معنی.

عدم استفاده از نقش‌های تکراری یا ناسازگار در یک بخش

استفاده همزمان از نقش‌های متناقض مانند role=”main” در چند بخش مختلف باعث خطا می‌شود. نقش‌هایی مثل main باید فقط یک بار در صفحه ظاهر شوند.

استفاده از ابزارهای تست ARIA

از ابزارهایی مثل WAVE، Lighthouse یا Chrome DevTools استفاده کنید تا ببینید چه نقش‌هایی مشکل دارند و کجای کد باید اصلاح شود.

خطای ARIA attributes do not match their roles

این خطا زمانی نمایش داده می‌شود از یک ویژگی مربوط به ARIA استفاده کرده‌اید اما این ویژگی برای نقشی که در همان محتوا تعریف کرده اید. معتبر نیست یا مجاز به استفاده نیست. این نقض باعث می‌شود صفحه‌خوان‌ها نتوانند محتوا را درک کنند.

راه‌حل رفع خطا

نقش محتوا را بررسی کنید

ببینید چه Role برای محتوا استفاده کرده‌اید.
نقش‌های رایج: button, dialog, checkbox, tab, tabpanel, alert, tooltip, و غیره.

ویژگی‌های ARIA معتبر

برای هر Role فقط از ARIA attributeهایی استفاده کنید که برای آن نقش تعریف شده‌اند.

عنصر را اصلاح کنید

یا نقش عنصر را عوض کنید تا با ویژگی‌های ARIA هم‌خوانی داشته باشد،
یا ویژگی‌های اضافی و ناسازگار را حذف یا جایگزین کنید.

خطای ARIA hidden elements contain focusable elements

این خطا زمانی ظاهر می‌شود که وقتی در HTML از ویژگی aria-hidden=”true”استفاده می‌کنید به مرورگر و صفحه‌خوان‌هااعلام می‌کنید که محتوای آن صفحه باید برای کاربران با شرایط خاصن خوانده نشود و تعامل نشود.

اما اگر درون یک محتوا که aria-hidden=”true” دارد، یک عنصر قابل فوکوس مانند: input، button، a با href، یا هر چیزی که tabindex=”0″ دارد قرار بگیرد، تناقض ایجاد می‌شود. بنابراین:

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

راه‌حل رفع خطا

این باعث سردرگمی و تجربهٔ کاربری بد می‌شود. اگر واقعاً می‌خواهید بخش مورد نظر برای همه کاربران مخفی باشدتمام عناصر قابل فوکوس داخل آن را حذف یا غیرفعال کنید.

ادامه مقالات مرتبط:

رفع ارورهای پیج اسپید گوگل

معرفی و رفع خطای Core Web Vitals

خطای Tabindex values greater than 0 are used

این خطا زمانی ظاهر می‌شود که یک محتوی در HTML مقدار tabindex بزرگتر از صفر تعیین می‌شود برای مثال (tabindex=3) شما به طور‌مستقیم درحال دست کاری ترتیب پیش‌فرض طبیعی حرکت فوکوس هستین. این کار یاعث می‌شود ترتیب حرکت کار با کیبورد از یک محتوا به محتوای دیگر به طور غیر طبیعی غیر قابل پیشبینی می‌شود.

کاربرانی که از کیبورد یا صفحه‌خوان‌ها استفاده می‌کنند، به یک ترتیب منطقی و قابل پیش‌بینی نیاز دارند. استفاده از مقادیر بزرگ‌تر از صفر در tabindex باعث می‌شود این منطق و ترتیب به هم بخورد. بنابراین:

ناسازگاری با تجربه کاربری کاربر انتظار دارد ترتیب فوکوس با ترتیب طبیعی عناصر در DOM هم‌خوان باشد.
دسترسی‌پذیری پایین برای افراد کم‌توان یا نابینا که با صفحه‌خوان کار می‌کنند، دچار سردرگمی می‌شوند.
نگهداری سخت اگر عناصر جابه‌جا شوند، یا موارد جدیدی اضافه شوند، تمام tabindexهای دیگر باید دوباره تنظیم شوند.
غیرپیش‌بینی بودن فوکوس تغییر دستی ترتیب فوکوس، از کنترل استاندارد مرورگر خارج می‌شود و خطاهای غیرمنتظره می‌سازد.

راه‌حل رفع خطا

استفاده از tabindex =0
اگر می‌خواهید یک عنصر قابل فوکوس شود، از 0 استفاده کنید.
tabindex =0 عنصر را در ترتیب طبیعی صفحه وارد کنید.
از مقادیر بزرگ‌تر از صفر استفاده نکنید
مقادیر مثل tabindex =1 یا tabindex =3 را حذف یا به 0 تغییر دهید.
به مرورگر اجازه دهید ترتیب فوکوس را به صورت طبیعی (بر اساس ترتیب کد HTML) مدیریت کند.

اصلاح طراحی یا منطق صفحه

اگر در طراحی‌تان مجبور شده‌اید tabindex را دستکاری کنید، بهتر است به جای آن ترتیب HTML را اصلاح کنید.

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

خطای Lists do not contain only <li> elements

این خطا زمانی ظاهر می‌شود که به طور مستقیم و نحوه‌ی استفاده از تگ های HTML مربوط می‌شود و هدف از آن اطمینان از درک مناسب محتوا برای کاربرانی که از صفحه‌خوان‌ها استفاده می‌کنند است.

وقتی شما از تگ‌های لیستی HTML مثل لیست بدون ترتیب، لیست ترتیبی یا menu استفاده می‌کنید، محتوای داخل این تگ‌ها فقط باید شامل تگ‌های <li> باشد. اگر داخل این لیست، تگ‌هایی مثل <div>، <span>، <p> یا هر تگ دیگری مستقیماً قرار داده شود که خارج از ساختار <li> است، مرورگر ممکن است ظاهراً آن را نمایش دهد، اما برای صفحه‌خوان‌ها ساختار منطقی لیست شکسته می‌شود. بنابراین:

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

راه‌حل رفع خطا

تمام محتوای داخل <ul> یا <ol> را داخل تگ‌های <li> قرار دهید.
اگر می‌خواهید آیتم‌ها شکل خاصی داشته باشند یا چند محتوا مثلاً آیکن، متن، دکمه کنار هم باشند، آن‌ها را داخل <li> قرار دهید، نه بیرون.

خطای Skip link target is not present

این خطا زمانی ظاهر میشود که در صفحه شما لینکی با عنوان skip link پرش به عنوان اصلی وجود دارد. اما این لینک قصد دارد محتوایی که باید به آن کاربر منتقل کند، در HTML وجود ندارد یا به درستی تعریف نشده. بنابراین:

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

راه‌حل رفع خطا

شناسایی لینک skip:

فایل HTML یا الگوی سایت را بررسی کنید و لینکی با href که با # شروع شده را پیدا کنید.

بررسی مقصد لینک:

بررسی کنید که در صفحه عنصری با id=”main” یا هر مقدار دیگر که در href لینک آمده وجود دارد. درصورت نبود آن را اضافه کنید.

خطای Page has no landmarks

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

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

راه‌حل رفع خطا

کافی است حداقل یک نقش landmark معتبر در صفحه تعریف کنید، مثل:

استفاده از تگ‌های HTML5 مانند:

<main>
<header>
<nav>
<aside>
<footer>
<section> (در صورت استفاده‌ی درست)
اگر نمی‌خواهید از HTML5 استفاده کنید یا به دلایلی از div استفاده کرده‌اید، می‌توانید role مناسب را با role=”…” اضافه کنید:
<div role=”main”> برای بخش اصلی محتوا
<div role=”navigation”> برای منوی سایت
<div role=”banner”> برای هدر سایت
<div role=”contentinfo”> برای فوتر

خطای Duplicate ID attribute values

این خطا زمانی ظاهر می‌شود که در HTML ویژگی id برای هر عنصر باید منحصر به فرد باشد. ینی در یک صفحه سایت هیچ وقت نباید دو یا چند محتوا id مشابه هم داشته باشند. زیرا id یک شناسنامه است. مرورگر، جاوااسکریپت و صفحه خوان‌ها از این id ها برای شناختن دقیق یک محتوا استفاده می‌‌کنند.

دو یا چند محتوا id داشته باشند ابزار های کمکی نمی‌توانند درک کنند دقیقا کدام محتوی مدنظر است. این مشکل باعث سردرگرمی کاربران با شرایط خاص می‌شود. این مشکل های غیر‌منتظره باعث کاهش دسترس‌پذیری صفحه وب‌سایت می‌شود.

راه‌حل رفع خطا

بررسی دقیق کل فایل HTML

فایل HTML را بررسی کنید و مطمئن شوید که هیچ دو عنصری از ویژگی id یکسان استفاده نمی‌کنند.

استفاده از class به جای id در عناصر تکراری

اگر چند محتوا با یک استایل مشابه بگیرند یا در یک دسته باشند، از class استفاده کنید نه id.

نتیجه

بررسی تحلیل خطاهای بخش Accessibility نشان داد مهم ترین خطاها و ایرادها نبود ساختارها، تکرار شناسه ها، استفاده از زنگ ها با کنتراست نامناسب و…. رفع این مشکلها با رعایت اصول باعث بالا رفتن تجربه کاربری و حتی سئو سایت را تقویت می‌کند.

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

شرکت تبلیغاتی ماکان، همراه مطمئن شما در مسیر طراحی و توسعه‌ی سایت‌های حرفه‌ای با وردپرس و رشد در دنیای دیجیتال.