ستساعدك المقالة التالية: جوجل تشرح النص البديل للشعارات والأزرار
في بودكاست Google Search Off the Record، يناقش ليزي ساسمان وجون مولر من Google أفضل طريقة للتعامل مع النص البديل للشعارات والأزرار المستندة إلى الصور.
هناك أفضل الممارسات لإضافة سمات بديلة إلى الشعارات والأزرار.
قد تبدو القواعد معقدة بعض الشيء في البداية، لكنها في الواقع سهلة الفهم.
يعد الحصول على السمات البديلة بشكل صحيح أمرًا جيدًا للمستخدمين، كما أنه يعد أمرًا رائعًا للأرباح على المدى الطويل.
إضافة نص بديل إلى الصور الوظيفية
تبدأ ليزي ساسمان المناقشة بالإشارة إلى الصور الوظيفية، وهي الصور التي لها غرض وظيفي على صفحة الويب.
إنها تسأل عما إذا كان النص البديل يجب أن يصف ما يفعله الزر أو ما هي الصورة الموجودة على الزر في الموقف الذي يكون فيه الزر رمزًا.
وأخيرًا، تتساءل عما إذا كان هناك غرض من تحسين محركات البحث (SEO) لإضافة نص بديل إلى الصور الوظيفية مثل الأزرار.
“ليزي ساسمان:
…مستوى العناية الذي ننفق فيه على الأصول المرئية، يجب علينا أيضًا أن نضع نفس المستوى من الطاقة في الكلمات التي تصف تلك الأصول أيضًا. الذي أعتقد أنه عظيم.
هناك فئة أخرى من الصور تشبه الشيء الوظيفي، والذي قد يكون في بعض الأحيان زرًا.
كما لو كان رسمًا يعمل أيضًا كشيء.
فهل يجب أن يخبرني النص البديل بما سيحدث؟
إذا قمت بالنقر فوق هذا، فإنه سوف يأخذك إلى هنا؟
يمكن أن يكون مثل صورة لشيء ما، ثم يعمل أيضًا كزر.
وهل تصف الوظيفة، أم كما كانت أيضًا، لا أعرف… مثل صورة السهم؟
وأيضًا، هل يهم تحسين محركات البحث (SEO)؟
جون مولر:
نعم. أظن…
ليزي ساسمان:
يمكن أن يكون مثل الشعار.
جون مولر:
بالنسبة لإمكانية الوصول، ربما يكون هذا منطقيًا، للقيام بشيء حيال ذلك.
ولكن بالنسبة لتحسين محركات البحث، لن يقوم الأشخاص بالبحث عن زر الخروج، أو شيء من هذا القبيل.
النص البديل الموجود على الأزرار مخصص لإمكانية الوصول وليس لتحسين محركات البحث
يوضح جون مولر أنه لا يوجد غرض لتحسين محركات البحث لإضافة نص بديل إلى الأزرار.
لكنه لاحظ أيضًا أن النص البديل لهذه الأنواع من الصور يرجع أساسًا إلى أسباب تتعلق بإمكانية الوصول.
واصلت ليزي المناقشة:
“ليزي ساسمان:
…ولكن ربما سيفعلون ذلك بالنسبة للشعار، أو شيء من هذا القبيل. عند النقر عليه، يأخذك إلى الصفحة الرئيسية، أو شيء من هذا.
ولكنه أيضًا، “أوه، إنه شعار.”
فهل تقول: “هذا هو شعار Google Search Central”.
جون مولر:
بالتأكيد.
ليزي ساسمان:
أو مثل ما سيكون النص الوصفي.
إنه Googlebot في الشعار، ولكن هل الشيء الأكثر أهمية الذي يجب معرفته عن الصورة هو حقيقة أنها شعار؟
أو كيف يبدو الشعار؟
أعتقد من هذه الزاوية أن الناس ربما يبحثون عن الشعار.
جون مولر:
نعم.
ليزي ساسمان:
مثل ما هو شعار شركة X، ربما؟
جون مولر:
نعم. أعني أن الأمر يعود إلى نوع من الإستراتيجية التي نحاول تجنبها.
ماذا تريد أن تجد من أجله؟
ليزي ساسمان:
نعم، ولكن هذا هو السؤال الأكثر أهمية، على ما أعتقد، لأنه بعد ذلك يوجه نوعًا ما …
يمكنني أن أنجرف في كل هذه الثقوب، لذا، لا أعلم، تعطي الأولوية للأشياء التي يجب أن نفكر فيها، لأنك لا تحتاج بالضرورة إلى كتابة كل الأشياء لهذه الأشياء، اعتقد.”
الاستخدام السليم للنص البديل على الشعارات والأزرار
تعتمد الطريقة الصحيحة لاستخدام النص البديل على الصور مثل الشعارات في الواقع على ما إذا كانت الصورة عبارة عن رابط أم لا.
إذا كانت صورة الشعار تعمل كرابط للعودة إلى الصفحة الرئيسية، فمن الصحيح تسمية تلك الصورة بالوظيفة التي تحتوي عليها، بحيث لا يستطيع زائر الموقع الذي يستخدم قارئ الشاشة أن يكون هذا الشعار رابطًا للصفحة الرئيسية.
الهيئة الرسمية لوضع معايير HTML، اتحاد شبكة الويب العالمية (W3C) ينشر شرحا حول كيفية التعامل مع الشعارات.
رابط الصفحة الرئيسية للشعار
يجب أن يحتوي الشعار الذي يعمل كارتباط للصفحة الرئيسية على نص بديل يخبر مستخدم قارئ الشاشة أن الشعار هو رابط للصفحة الرئيسية.
يستخدم W3C هذا المثال للكود:
الكود أعلاه مخصص للشعار الذي قد يواجهه الشخص في أعلى الصفحة والذي يعمل أيضًا كرابط للعودة إلى الصفحة الرئيسية.
يوضح مثال النص البديل المقدم من W3C ببساطة، “W3C home” ولكن يمكن أن يكون أكثر وصفًا إذا كنت تريد ذلك.
رابط الصفحة الرئيسية للشعار والنص
هناك أنواع أخرى من روابط الشعار حيث يوجد شعار صورة ونص بجواره أو أسفله مباشرة ويتم ترميز كل من الصورة والنص داخل رمز الرابط نفسه.
بمعنى آخر، لا يوجد رابطان مثل رابط واحد للشعار ورابط واحد للنص، بل هو مجرد رابط واحد لكل من الشعار والنص معًا.
في هذه الحالة، نظرًا لأن النص يصف وظيفة الرابط، سيكون تكرار وظيفة رابط الشعار أمرًا متكررًا.
لذا فإن أفضل الممارسات في هذه الحالة هي استخدام نص بديل خالٍ.
هذا هو المثال الذي يقدمه W3C:
Note كيفية ترميز السمة alt للصورة:
img src = “https://www.searchenginejournal.com/alt-text-for-logos-and-buttons/469801/w3c.png” alt = “”
تُسمى علامات الاقتباس الفارغة للنص البديل بسمة بديلة فارغة (أو نص بديل فارغ). سوف يتخطاها قارئ الشاشة ببساطة.
السبب وراء كون النص البديل الخالي جيدًا هو وجود نص يصف وظيفة الارتباط:
صفحة W3C الرئيسية
نص بديل لرابط الرمز
في بعض الأحيان يكون الرابط على شكل رمز، بدون نص لشرح ما يفعله، على سبيل المثال رمز على شكل مظروف (يمثل بريدًا إلكترونيًا أو رسالة) أو طابعة (مما يشير إلى أن الرابط يقوم بتنشيط الطابعة).
في هذه الحالة، يعد وصف الصورة (مثل المظروف أو الطابعة) ممارسة سيئة.
أفضل الممارسات هي وصف ما تفعله الصورة (بدء إرسال بريد إلكتروني أو طباعة صفحة ويب).
يستخدم W3C مثال رمز الطابعة الذي يحتوي على الكود والنص البديل التالي:
كما ترون، يحتوي الرمز الموجود على شكل الطابعة على الكلمات “اطبع هذه الصفحة” كنص بديل. وهو يحكي ما يفعله الرمز. هذا مفيد.
نص بديل للزر
كما هو الحال في مثال الأيقونة، يجب أن يصف النص البديل لصورة الزر ما تفعله الصورة.
يستخدم W3C مثال مربع البحث الذي يحتوي على عدسة مكبرة لزر الإرسال.
الطريقة السيئة للقيام بذلك هي استخدام النص البديل لوصف أن الصورة عبارة عن عدسة مكبرة.
أفضل الممارسات هي استخدام النص البديل لوصف ما تفعله الصورة.
هذا هو رمز المثال الذي يعرضه W3C كمثال:
كما ترون، النص البديل لزر البحث هو كلمة “بحث” التي تصف وظيفة الزر.
نص بديل للأزرار والشعارات
لم تتطرق ليزي وجون إلى تفاصيل كيفية التعامل مع السيناريوهات المختلفة للشعارات والأزرار.
ومع ذلك، أشار جون إلى أنه لا توجد قيمة لتحسين محركات البحث للنص البديل للأزرار والشعارات، بل إنها تتعلق بإمكانية الوصول.
من أفضل الممارسات تقديم صفحات الويب المناسبة للمستخدمين الذين يصلون إلى صفحات الويب باستخدام برامج قراءة الشاشة.
كما ذكرنا سابقًا، يمكن للأشخاص الذين يستخدمون برامج قراءة الشاشة أن يكونوا عملاء أو مؤيدين لشركتك أو موقع الويب الخاص بك.
لذلك، من الجيد بالنسبة للنتيجة النهائية استخدام أفضل ممارسات إمكانية الوصول.
اقتباسات
تعرف على المزيد حول إمكانية الوصول إلى الأزرار والشعارات في W3C
الجمع بين روابط الصور والنصوص المتجاورة لنفس المورد
استخدام سمات البديل على الصور المستخدمة كأزرار إرسال
استمع إلى Search Off the Record Podcast عند علامة الدقيقة 15:57:
