حل ارور aria-label در المنتور و خطای W3C Validator
یکی از بخشهای لذتبخش اما چالشبرانگیز در فرآیند آموزش سئو، بهینهسازی کدهای فنی سایت یا همان سئو تکنیکال (Technical SEO) است. حتماً برای شما هم پیش آمده که پس از طراحی یک صفحه زیبا با المنتور، وقتی آدرس سایت را در ابزار استاندارد سنجی وب یعنی W3C HTML Validator وارد میکنید، با انبوهی از خطاهای قرمز رنگ مواجه میشوید.
یکی از رایجترین، عجیبترین و کلافهکنندهترین خطاهایی که اخیراً به خاطر ویجت آکاردئون المنتور (Elementor Accordion) رخ میدهد، خطای مربوط به ویژگی aria-label روی تگهای div است.
در این مقاله از سایت سئو ثابت، قصد داریم به زبان ساده بگوییم که این ارور اصلاً چرا به وجود میآید و چطور میتوانید بدون دستکاری فایلهای اصلی قالب یا افزونه، آن را با یک کد اسنیپت (Code Snippet) ساده برای همیشه برطرف کنید.
متن خطای W3C چیست؟
این خطا معمولاً با متنی شبیه به عبارت زیر در گزارش W3C ظاهر میشود:
Error: The aria-label attribute must not be specified on any div element unless the element has a role value other than… From line…
<div class="e-n-accordion" aria-label="Accordion. Open links with Enter or Space...">
علت بروز این خطا در المنتور چیست؟
در استانداردهای مدرن طراحی وب (خانواده HTML5)، دسترسیپذیری یا Accessibility (به اختصار a11y) اهمیت ویژهای دارد تا افراد کمبینا یا نابینا هم بتوانند به کمک صفحهخوانها (Screen Readers) از سایت شما استفاده کنند. ویژگی aria-label ابزاری است که به صفحهخوان میگوید این بخش از سایت چه کاری انجام میدهد.
اما مشکل کجاست؟ طبق استانداردهای W3C، تگ <div> یک المان عمومی و بدون معنا است. شما نمیتوانید روی یک تگ عمومی بدون اینکه نقش (role) آن را مشخص کرده باشید، از aria-label استفاده کنید.
النتور در آپدیتهای اخیر خود برای ویجت آکاردئون جدید خود از تگ <div class="e-n-accordion"> همراه با aria-label استفاده کرده اما فراموش کرده که ویژگی role="region" را به آن اضافه کند! همین بیتوجهی کوچک المنتور، باعث رد شدن سایت شما در تستهای سئو تکنیکال و استاندارد وب میشود.
راهکار اول که شکست میخورد! (چرا جاوااسکریپت کافی نیست؟)
بسیاری از طراحان وب تلاش میکنند این مشکل را با تزریق یک کد جاوااسکریپت (JS) ساده حل کنند تا پس از لود شدن صفحه، ویژگی role="region" را به آکاردئون اضافه کند.
اما یک نکته کنکوری برای متخصصین سئو: رباتهای W3C کدهای خام HTML ارسال شده از سمت سرور را بررسی میکنند و کدهای جاوااسکریپت شما را اجرا نمیکنند! بنابراین راهکار جاوااسکریپت شاید در ظاهر کد مرورگر را اصلاح کند، اما ارور W3C شما را برطرف نخواهد کرد.
راهکار قطعی: اصلاح HTML در سمت سرور با کد اسنیپت PHP
بهترین، امنترین و سریعترین راه برای حل این مشکل، استفاده از زبان PHP برای اصلاح خروجی HTML سایت، دقیقاً قبل از ارسال آن به مرورگر (و ربات W3C) است. با این روش، تغییرات با آپدیت شدن المنتور نیز از بین نخواهند رفت.
مراحل اجرا:
وارد پیشخوان وردپرس خود شوید.
اگر از افزونههای مدیریت کد مثل WPCode یا Code Snippets استفاده میکنید، یک اسنیپت جدید بسازید. (اگر المنتور پرو دارید، میتوانید از مسیر المنتور > کدهای سفارشی اقدام کنید).
نوع کد را روی PHP Snippet قرار دهید.
حالت اجرا را روی Run snippet everywhere (اجرا در همه جا) بگذارید.
- کد زیر را کپی کرده و درون باکس کد قرار دهید:
<?php
/**
* رفع خطاهای زنجیرهای W3C Validator برای ویجت آکاردئون المنتور (نسخه اصلاحشده برای تمام آیتمها)
* منتشر شده در سایت سئو ثابت (SeoSabet)
*/
add_action('wp_loaded', 'seosabet_perfect_items_fix_start');
function seosabet_perfect_items_fix_start() {
ob_start('seosabet_clean_all_accordion_items_html');
}
add_action('shutdown', 'seosabet_perfect_items_fix_end');
function seosabet_perfect_items_fix_end() {
if (ob_get_length() > 0) {
ob_end_flush();
}
}
function seosabet_clean_all_accordion_items_html($html) {
if (is_admin()) {
return $html;
}
// ۱. حل ارور تگ دیو آکاردئون
$search_div = 'class="e-n-accordion" aria-label="';
$replace_div = 'class="e-n-accordion" role="region" aria-label="';
$html = str_replace($search_div, $replace_div, $html);
// ۲. حل ریشهای ارورهای تگ summary برای تمام آیتمها (با پوشش دادن tabindex 0 و -1)
$pattern_summary = '/]*?)tabindex="(-1|0)" aria-expanded="(true|false)" aria-controls="[^"]*?"([^>]*?)>/i';
$html = preg_replace($pattern_summary, '', $html);
return $html;
} - وضعیت اسنیپت را روی Active (فعال) بگذارید و آن را ذخیره کنید.
بعد از اینکه کد بالا را فعال کردید، حتماً باید کش سایت خود را کاملاً پاک کنید. اگر از افزونههای بهینهسازی سرعت مثل WP Rocket، LiteSpeed Cache یا سوپر کش استفاده میکنید، گزینه Clear Cache را بزنید. همچنین اگر سایت شما روی شبکه توزیع محتوا مثل کلودفلر یا ابرآروان است، کش آن را نیز خالی (Purge) کنید.
حالا اگر آدرس صفحه خود را مجدداً در سایت W3C Validator تست کنید، خواهید دید که این خطای قرمز رنگ با موفقیت به تاریخ پیوسته است!
جمعبندی
رفع خطاهای استاندارد وب شاید مستقیماً و به صورت آنی رتبه گوگل شما را جابهجا نکند، اما از نظر سئو تکنیکال، یک سیگنال مثبت به موتورهای جستجو میفرستد که سایت شما کاملاً بهینهسازی شده، استاندارد و برای ابزارهای دسترسیپذیری خوانا است. ما در سئو ثابت همیشه توصیه میکنیم که خطاهای کدهای قالب خود را جدی بگیرید تا تجربه کاربری (UX) و ساختار فنی سایتتان در بالاترین سطح ممکن قرار داشته باشد.
اگر شما هم با این ارور یا خطاهای مشابه المنتور مواجه شدهاید، نظرات و سوالات خود را در پایین همین صفحه برای ما بنویسید تا پاسخگوی شما باشیم.
