چگونه خطای «لینک ها نام قابل تشخیص ندارند» را رفع کنیم

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

فهرست مطالب

• درک خطای نام دار نشده لینک ها
• بررسی نقش ویژگی آریا لیبل
• شناسایی لینک های بدون متن
• افزودن متن توصیفی مناسب
• تست دسترسی با ابزارهای آنلاین
• اعمال به روزرسانی های دائمی سایت
• سوالات متداول

درک خطای نام دار نشده لینک ها

خطای «لینک ها نام دار نشده هستند» زمانی بروز می کند که یک عنصر یا هر عنصر تعاملی دیگری متن یا برچسب قابل تشخیص برای کاربران نداشته باشد. این مشکل مطابق با استانداردهای WCAG 2.1 (قواعد 2.4.4 و 2.4.9) است و به ویژه برای کاربران صفحه خوان (screen reader) که به متن لینک برای درک هدف آن وابسته اند، مانعی جدی محسوب می شود. اگر لینک بدون توضیح واضحی باشد، کاربر نمی داند کلیک کردن بر روی آن چه عملی انجام می دهد.

دلایل رایج این خطا شامل موارد زیر می شود:

• متن لینک خالی یا فقط شامل فضای سفید باشد ( ).
• تصویر داخل لینک بدون ویژگی alt یا aria-label باشد.
• استفاده از آیکون فونت یا SVG بدون توضیح متنی.
• ساختارهای داینامیک که پس از بارگذاری صفحه، برچسب دسترسی پذیری (مانند aria-label) به درستی اضافه نمی شود.

برای شناسایی این خطا می توانید از ابزارهای زیر استفاده کنید:

1. در Chrome DevTools، تب Accessibility را باز کنید؛ عناصر دارای پیام «Accessible name is missing» را بررسی کنید.
2. از Lighthouse یا axe‑core استفاده کنید؛ این ابزارها به صورت خودکار لینک های بدون نام را گزارش می دهند.
3. یک صفحه خوان ساده مانند NVDA یا VoiceOver را اجرا کنید و به دقت به صدای خوانده شده برای هر لینک گوش دهید؛ اگر فقط «link» یا «button» می شنوید، مشکل موجود است.

مثال عملی: فرض کنید در بخش فوتر یک آیکون اینستاگرام به صورت زیر کد شده است:

چون هیچ متن یا برچسبی وجود ندارد، صفحه خوان تنها «link» می گوید. برای رفع این مشکل می توانید یکی از دو راه زیر را اعمال کنید:

• افزودن aria-label="صفحه اینستاگرام" به عنصر .
• گنجاندن متن مخفی با کلاس sr-only (مثلاً «دنبال کردن ما در اینستاگرام») که فقط برای صفحه خوان ها قابل مشاهده است.

بررسی نقش ویژگی آریا لیبل

ویژگی aria-label به مرورگرهای کمکی اجازه می دهد که یک نام واضح برای لینکی که متن قابل خواندن ندارد، فراهم کند. وقتی لینکی فقط شامل یک آیکن یا تصویر خالی از متن باشد، ابزارهای دسترس پذیری نمی توانند هدف آن را تشخیص دهند و این منجر به خطای «Links Do Not Have a Discernible Name» می شود. افزودن aria-label مناسب، همانند افزودن یک عنوان توصیفی برای لینک است که به کاربران نابینا یا کم بینا کمک می کند تا به سرعت متوجه عملکرد آن شوند.

برای استفاده صحیح، مقدار aria-label باید به صورت دقیق توصیف کننده باشد و از کلمات عمومی مثل «کلیک کنید» یا «لینک» خودداری کنید. برای مثال، اگر لینکی به صفحه تماس با ما اشاره می کند و فقط یک آیکن ایمیل دارد، می توانید این گونه بنویسید:

در این مثال، ابزارهای کمکی متن «صفحه تماس با ما» را می خوانند، در حالی که کاربران عادی همچنان فقط آیکن ایمیل را می بینند.

از اشتباهات رایج می توان به استفادهٔ تکراری یا نامفهوم از aria-label اشاره کرد؛ به عنوان مثال، اگر تمام لینک های منو یک برچسب یکسان مثل «منو» داشته باشند، کاربران نمی توانند بین گزینه ها تمایز قائل شوند. همچنین، مقدار خالی (aria-label="") یا مقدار نادرست (مانند «click here») باعث می شود که ابزارهای کمکی همچنان نتوانند لینک را به درستی توصیف کنند. بهتر است هر بار که یک لینک بدون متن واضح وجود دارد، یک برچسب منحصربه فرد و معنادار ارائه دهید.

به خاطر داشته باشید که aria-label تنها زمانی موثر است که متن اصلی لینک قابل دسترس نباشد؛ اگر متن قابل خواندن موجود است، نیازی به این ویژگی نیست و استفادهٔ نادرست می تواند باعث آشفتگی در تجربه کاربری شود. بنابراین، پیش از افزودن aria-label، ابتدا بررسی کنید که آیا لینک به صورت طبیعی نامی دارد یا خیر، و سپس فقط در موارد ضروری این ویژگی را به کار ببرید.

شناسایی لینک های بدون متن

اولین قدم برای رفع خطای «لینک ها نام قابل تشخیص ندارند» این است که تمام لینک های موجود در صفحه را شناسایی کنید. می توانید از ابزارهای تست دسترسی مانند axe یا WAVE استفاده کنید؛ این ابزارها به صورت خودکار لینک هایی که متن یا برچسب توصیفی ندارند را برجسته می کنند. اگر از مرورگر Chrome استفاده می کنید، کافی است افزونه axe DevTools را نصب کنید و در کنسول «Accessibility» به بخش “Links” مراجعه کنید تا لیست لینک های مشکل دار را ببینید.

بعد از دریافت لیست، به بررسی منبع HTML بپردازید. اکثر موارد به دلیل استفاده از عنصر بدون متن یا داشتن محتوای تصویری بدون alt یا aria-label رخ می دهد. برای مثال، کد زیر یک لینک بدون متن است:

در این حالت مرورگرها و فناوری های کمکی نمی توانند منظور لینک را درک کنند. برای اصلاح، می توانید یکی از روش های زیر را به کار ببرید:

• متن قابل خواندن اضافه کنید: مشاهده جزئیات
• اگر می خواهید فقط آیکون بماند، ویژگی aria-label یا title توصیفی اضافه کنید:
• از کلاس های CSS برای مخفی کردن متن استفاده کنید: مشاهده جزئیات

پس از اعمال اصلاحات، حتماً دوباره صفحه را با همان ابزارهای تست بررسی کنید. اگر همه لینک ها حالا متنی یا توصیفی دارند، خطای «Links Do Not Have a Discernible Name» دیگر ظاهر نخواهد شد. برای اطمینان طولانی مدت، می توانید این بررسی را به عنوان یک گام در فرآیند CI/CD یا در فاز تست پیش انتشار قرار دهید تا هر تغییری که منجر به حذف متن لینک می شود، فوراً شناسایی گردد.

افزودن متن توصیفی مناسب

خطای «Links Do Not Have a Discernible Name» زمانی ظاهر می شود که متن پیوند برای کاربران، به ویژه کاربران صفحه خوان، معنی واضحی نداشته باشد. موتورهای دسترسی (مانند WCAG 2.1) می خواهند هر لینک بتواند به تنهایی توضیح دهد که کاربر پس از کلیک چه کاری انجام خواهد داد. اگر متن لینک فقط «کلیک کنید» یا «اطلاعات بیشتر» باشد، صفحه خوان نمی تواند به دسترس پذیری صحیح کمک کند و تجربه کاربری را خراب می کند.

برای ، چند نکته اساسی را در نظر بگیرید: متن باید کوتاه اما معنی دار باشد، به وضوح هدف یا محتوای مقصد را بیان کند و از تکرار اطلاعاتی که در اطراف لینک وجود دارد، خودداری کنید. به جای استفاده از عبارات عمومی، از کلماتی استفاده کنید که کاربر را راهنمایی می کند؛ برای مثال «دریافت گزارش سالانه ۲۰۲۳» یا «مشاهده جزئیات محصول X». اگر لینک در داخل یک پاراگراف قرار دارد که موضوع آن قبلاً توضیح داده شده، می توانید متن را حتی کوتاه تر کنید، ولی همچنان باید قابلیت تشخیص مستقل داشته باشد.

مثال عملی: در یک صفحه فروشگاه، لینک زیر معمولاً دیده می شود:

بیشتر بخوانید

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

مشخصات کامل محصول X

اگر به دلیل محدودیت طراحی مجبور به استفاده از متن کوتاه هستید، می توانید از ویژگی aria-label برای افزودن توضیح مخفی استفاده کنید:

اطلاعات

چک لیست سریع برای اطمینان از توصیف مناسب لینک ها:

• آیا متن لینک به تنهایی می تواند هدف را بیان کند؟
• آیا از عبارات کلی مانند «اینجا کلیک کنید» استفاده نشده است؟
• آیا طول متن بیش از ۶۰ کاراکتر نیست (برای حفظ خوانایی)؟
• اگر متن کوتاه است، آیا aria-label یا title اضافه شده است؟

تست دسترسی با ابزارهای آنلاین

برای شناسایی خطای Links do not have a discernible name، ابزارهای آنلاین تست دسترسی پذیری سریع ترین راه اندازی را فراهم می کنند. این ابزارها به صورت خودکار تمام لینک های صفحه را بررسی می کنند و مواردی را که متن یا برچسب واضحی ندارند، فهرست می کنند. به علاوه، اکثر آن ها گزارش های قابل فهمی به همراه مثال های کد ارائه می دهند، بنابراین می توانید به سرعت منبع مشکل را بیابید و رفع کنید.

از میان ابزارهای رایج می توان به Google Lighthouse، axe DevTools و WAVE اشاره کرد. Lighthouse در تب “Accessibility” کنسول مرورگر Chrome یک اسکن سریع انجام می دهد و لینک های بدون نام را با لینک مستقیم به خط کد نشان می دهد. axe DevTools به صورت افزونه مرورگر (Chrome/Firefox) کار می کند و جزئیات دقیق تری از جمله مسیر DOM و پیشنهاد اصلاح را ارائه می دهد. WAVE یک سرویس وب است؛ کافی است URL صفحه را وارد کنید تا یک لایهٔ گرافیکی روی صفحه نمایش داده شود که لینک های مشکل دار را با آیکون های زرد یا قرمز علامت گذاری می کند.

یک روش عملی برای استفاده از این ابزارها به این شکل است:

1. صفحهٔ هدف را در مرورگر Chrome باز کنید.
2. از DevTools → Lighthouse یک گزارش دسترسی پذیری اجرا کنید و به بخش “Links without accessible names” نگاه کنید.
3. در صورتی که ابزار axe نصب دارید، بر روی افزونه کلیک کنید، “Run axe” را بزنید و لیست خطاها را مرور کنید.
4. در WAVE URL صفحه را وارد کنید؛ لینک های علامت دار را پیدا کرده و به کد HTML بازگردید.
5. برای هر لینک، از ویژگی aria-label یا متن قابل خواندن داخل تگ استفاده کنید؛ مثال: .

پس از اعمال اصلاحات، مجدداً همان ابزار را اجرا کنید تا تأیید شود که همه لینک ها اکنون دارای متن یا aria-label واضح هستند. این چرخهٔ کوتاه تست‑اصلاح‑تست، اطمینان می دهد که صفحه تان برای کاربران کمکی و موتورهای جستجو به درستی قابل دسترس است.

اعمال به روزرسانی های دائمی سایت

به روزرسانی های منظم سایت نه تنها امنیت و عملکرد را ارتقاء می دهند، بلکه به ویژه برای رفع خطای “Links Do Not Have a Discernible Name” نقش کلیدی دارند. هر گاه محتوا یا ساختار HTML تغییر می کند، احتمال اضافه شدن لینک های بدون توصیف واضح افزایش می یابد؛ بنابراین یک برنامهٔ زمان بندی ثابت برای بررسی و اصلاح این موارد ضروری است.

ابتدا یک بازرسی دسترسی ماهانه را در تقویم تیم بگنجانید. می توانید از ابزارهای رایگان مانند axe یا افزونهٔ Lighthouse در مرورگر استفاده کنید؛ این ابزارها لینک های بدون متن توصیفی را شناسایی و گزارش می دهند. پس از هر اسکن، نتایج را در یک جدول ساده ثبت کنید تا پیشرفت را پیگیری کنید.

به روزرسانی منظم افزونه ها و پوسته ها نیز به طور غیرمستقیم خطا را کاهش می دهد. بسیاری از افزونه های قدیمی به صورت پیش فرض از aria-label یا متن لینک استفاده نمی کنند. پس از نصب هر نسخهٔ جدید، مستندات تغییرات را مرور کنید و در صورت نیاز، توابع یا کوتاه کدهای سفارشی را برای افزودن توضیح مناسب اصلاح کنید.

یک روش پیشگیرانهٔ دیگر، ایجاد یک راهنمای سبک دسترسی در مخزن کد است. در این راهنما می توانید قواعد زیر را ذکر کنید:

• هر باید دارای متن قابل خواندن یا ویژگی aria-label باشد.
• از استفادهٔ لینک های خالی یا فقط دارای آیکون بدون توضیح خودداری کنید؛ اگر تنها آیکون استفاده می شود، aria-hidden="true" را اضافه کرده و یک برچسب متنی مخفی (sr-only) قرار دهید.
• در قالب های ایمیل یا اسکریپت های دینامیک، متغیرهای متن لینک را به صورت دینامیک پر کنید.

به عنوان مثال، در یک فروشگاه آنلاین، یک دکمهٔ افزودن به سبد خرید به صورت آیکون سبد نمایش داده می شود. اگر فقط باشد، موتورهای دسترسی نمی توانند عملکرد آن را تشخیص دهند. افزودن aria-label="افزودن به سبد خرید" یا یک متن مخفی افزودن به سبد خرید مشکل را برطرف می کند و در هر به روزرسانی آینده نیز این الگو حفظ می شود.

سوالات متداول

چگونه می توانم لینک های بدون نام را در WordPress اصلاح کنم؟

در ابتدا ابزار بررسی دسترسی مرورگر یا افزونه axe را اجرا کنید. سپس در ویرایشگر وردپرس، به حالت متنی بروید و برای هر برچسب یک متن قابل خواندن مانند aria-label یا متن لینک اضافه کنید. پس از ذخیره، مجدداً تست کنید تا مطمئن شوید خطا حذف شد.

آیا افزودن aria-label به تمام لینک ها کافی است؟

اضافه کردن aria-label به لینک ها کمک می کند اما فقط زمانی مؤثر است که مقدار توصیفی داشته باشد. اگر لینک خالی باشد یا متن آن تکراری باشد، همچنان خطا می تواند بماند. ترکیب aria-label با متن قابل مشاهده بهترین روش است.

چرا افزودن متن خالی به alt باعث رفع خطا نمی شود؟

متن خالی در ویژگی alt برای تصاویر کاربرد دارد، اما برای لینک ها این اصل اعمال نمی شود. لینک باید دارای متن قابل درک یا صفت aria-label باشد. بنابراین استفاده از alt خالی خطا را رفع نمی کند.

آیا می توانم این خطا را با پلاگین خودکار برطرف کنم؟

بعضی پلاگین ها مانند Yoast یا Rank Math گزینه ای برای افزودن عنوان خودکار دارند، اما آنها همیشه نام قابل تشخیص تولید نمی کنند. بهتر است قبل از نصب، مستندات پلاگین را بررسی کنید و در صورت نیاز اصلاحات دستی انجام دهید. استفاده ترکیبی از پلاگین و بازبینی دستی بالاترین تضمین را دارد.

چک لیست سریع

• نقش aria-label را برای توضیح لینک ها بررسی کنید
• لینک های بدون متن قابل تشخیص را شناسایی نمایید
• متن توصیفی واضح یا برچسب های جایگزین مناسب اضافه کنید
• دسترس پذیری را با ابزارهای آنلاین تست کنید
• به روزرسانی های مستمر را برای حفظ دسترسی پذیری اعمال کنید

با پیروی از این گام ها، لینک های شما برای همهٔ کاربران به صورت واضح و قابل دسترس خواهند شد. این بهبود نه تنها تجربهٔ کاربری را ارتقا می دهد، بلکه به بهینه سازی سئو نیز کمک می کند. اگر نظری یا پرسشی دارید، خوشحال می شویم آن را بشنویم.