تنسيق القوائم (Lists) والروابط (Links)

تلعب أنماط الروابط الافتراضية (Default link styles) دوراً حاسماً في تعزيز سهولة الاستخدام وإمكانية الوصول (accessibility) على الويب.

لقد أصبحت هذه الأنماط (styles) — التي عادةً ما تكون باللون الأزرق للروابط غير المُزارة (unvisited links) وباللون الأرجواني للروابط المُزارة (visited links) — معياراً يتوقعه المستخدمون ويعتمدون عليه عند تصفح المواقع الإلكترونية.

يتمثل الغرض الأساسي من أنماط الروابط الافتراضية (default link styles) في توفير مؤشرات بصرية واضحة (clear visual cues) تساعد المستخدمين على التمييز بين العناصر التفاعلية وغير التفاعلية (interactive and non-interactive elements) في صفحة الويب.

يُعد هذا التمييز جوهرياً لابتكار تجربة تصفح بديهية وسهلة الاستخدام (user-friendly).

لننظر في الأنماط الافتراضية الأساسية للروابط (basic default styles for links) :

<link rel="stylesheet" href="styles.css">

<a href="/">رابط مثال</a>
            

a:link {
 color: blue;
}

a:visited {
 color: purple;
}
            

معاينة:

تؤدي هذه الأساليب وظائف مهمة (important functions) عديدة.

أولاً، يبرز اللون الأزرق المخصص للروابط غير المُزارة (unvisited links) بوضوح مقابل معظم ألوان الخلفية والنصوص، مما يجعل تمييز هذه الروابط أمراً سهلاً؛ ويُعد هذا التباين (contrast) أمراً بالغ الأهمية لتمكين المستخدمين من مسح الصفحة ضوئياً (scan a page) بسرعة والعثور على عناصر التنقل (navigational elements) أو المعلومات المهمة.

يُعزز الخط السفلي (underline) التأكيد (emphasizes) على أن النص قابل للنقر (clickable)، مما يوفر إشارة بصرية إضافية؛ ويُعد هذا مفيداً بشكل خاص للمستخدمين الذين يعانون من عمى الألوان أو يجدون صعوبة في التمييز بين الألوان.

يساعد تغيير لون الروابط التي تمت زيارتها (visited links) (عادةً إلى اللون الأرجواني) المستخدمين على تتبع الأماكن التي زاروها؛ وتُعد هذه الميزة بالغة الأهمية عند تصفح المواقع الإلكترونية الكبيرة أو إجراء الأبحاث، إذ تحول دون قيام المستخدمين بإعادة زيارة الصفحات نفسها عن غير قصد.

تأمَّل مثال HTML هذا:

<p>
 اعرف المزيد عن
 <a href="https://www.example.com/cats">القطط</a>
 و
 <a href="https://www.example.com/dogs">الكلاب</a>
</p>
            

معاينة:

بدون استخدام أي تنسيق CSS مخصص، ستعرض معظم المتصفحات هذه الروابط باللون الأزرق مع خط سفلي. وعند النقر على أحد الروابط (links)، سيتغير لونه إلى الأرجواني، مما يوفر للمستخدم تغذية راجعة (feedback) فورية حول سجل التصفح (browsing history) الخاص به.

على الرغم من شيوع قيام المصممين (designers) بتعديل هذه الأنماط الافتراضية (default styles) لتلائم الطابع الجمالي للموقع الإلكتروني، إلا أنه من الضروري الحفاظ على المبادئ الجوهرية (core principles) التي تقوم عليها.

إذا اخترت تغيير الأنماط الافتراضية (default styles)، فتأكد من أن الروابط (links) تظل متميزة بوضوح عن النص العادي، ومن وجود فرق مرئي بين الروابط التي تمت زيارتها وتلك التي لم تتم زيارتها (visited and unvisited links)، ومن أن الألوان المختارة توفر تبايناً كافياً (sufficient contrast) مع الخلفية (background).

على سبيل المثال، قد تستخدم نمطاً مخصصاً (custom style) كهذا:

<link rel="stylesheet" href="styles.css">

<a href="/">رابط مثال</a>
            

a:link {
 color: blue;
 text-decoration: none;
 border-bottom: 1px solid blue;
}

a:visited {
 color: purple;
 border-bottom: 1px solid purple;
}
            

معاينة:

يحافظ هذا على نظام الألوان الأزرق والأرجواني، مع استبدال الخط السفلي (underline) بحدٍّ سفلي (bottom border) لإضفاء مظهر أكثر عصرية.

من المهم أيضاً مراعاة الحالات المختلفة للروابط (different states of links). فبالإضافة إلى الحالة الافتراضية وحالة الرابط المُزار (default and visited states)، عادةً ما تكون للروابط حالات أخرى عند تمرير المؤشر فوقها (hover) وعند تفعيلها (active) :

<link rel="stylesheet" href="styles.css">

<a href="/">رابط مثال</a>
            

a:hover {
 color: red;
}

a:active {
 color: darkorange;
}
            

معاينة:

توفر هذه الحالات تغذية راجعة فورية للمستخدمين أثناء تفاعلهم مع الروابط، مما يعزز سهولة الاستخدام العامة للموقع.

ختاماً، ورغم إمكانية تخصيص أنماط الروابط، ينبغي الحفاظ على المبادئ التي تستند إليها الأنماط الافتراضية.

إنها تؤدي دوراً جوهرياً في توفير تجربة ويب قابلة للاستخدام ومتاحة للجميع، مما يساعد المستخدمين على تصفح المحتوى والتفاعل معه بفعالية.

اجعل الوضوح وتجربة المستخدم دائمًا على رأس أولوياتك عند تصميم أنماط الروابط (designing link styles) لمواقعك الإلكترونية.