رابط نصي
ترجمة لـالمواصفات بالإنجليزية. إن اختلفت الترجمة عن الأصل، فالإنجليزية هي المرجع.
رابط قائم بذاته، بجانب زر رئيسي أو بعد فقرة («اطّلع على طريقة عملنا»): تحته خط بلون التمييز، ومعه سهم حين يقود إلى خطوة تالية، أو أيقونة حين يغادر الموقع.
CSS: css/components/link.css. الأصناف: .al-link، .al-link--arrow، .al-link--muted.
البنية
<a class="al-link al-link--arrow" href="#approach">See how we build <svg class="al-icon al-mirror" aria-hidden="true">…arrow…</svg></a>
<a class="al-link" href="https://example.com" target="_blank" rel="noopener">The guidance
<svg class="al-icon al-mirror" aria-hidden="true">…external…</svg><span class="al-visually-hidden">(opens in a new tab)</span></a>
<a class="al-link al-link--muted" href="/privacy">Privacy notice</a>
الأنواع والأحجام
| النوع | الاستخدام |
|---|---|
| عادي | رابط قائم بذاته |
--arrow | إلى خطوة تالية: الإجراء الثاني بجانب زر رئيسي |
| خارجي | إلى موقع آخر: أيقونة الرابط الخارجي، وتبويب جديد، و«(يُفتح في تبويب جديد)» لقارئ الشاشة |
--muted | التذييلات والأسطر القانونية |
يأخذ حجم النص المحيط به. أما الروابط داخل النص الجاري فلا تحتاج إلى شيء من هذا: الأنماط الأساسية تضع تحتها خطًا.
الحالات
التمرير: لون التمييز وخط أسمك؛ ويتحرك السهم 3 بكسل باتجاه القراءة (لا عند تقليل الحركة). التركيز: إطار التركيز في النظام. وتبدو الروابط المزارة كغيرها.
لوحة المفاتيح
Enter يتبعه.
ARIA
عنصر <a href> أصلي. ونصه يقول إلى أين يقود. والأيقونات aria-hidden؛ ويضيف الرابط الخارجي «(يُفتح في تبويب جديد)» نصًا مخفيًا بصريًا.
من اليمين إلى اليسار
ينعكس السهم وأيقونة الرابط الخارجي (.al-mirror)، ويتحرك السهم إلى اليسار عند التمرير. واعزل أي مقطع لاتيني داخل نص رابط عربي (عنوانًا أو اسمًا) بـ<bdi>.
افعل ولا تفعل
- قرن زرًا رئيسيًا واحدًا برابط نصي للإجراء الثاني، في صفحة تسويقية.
- سمِّ الوجهة: «اطّلع على طريقة عملنا»، «اقرأ إشعار الخصوصية».
- كتابة «انقر هنا» أو «اعرف المزيد».
- فتح تبويب جديد لرابط داخل الموقع نفسه.
الرموز
الرموز التي يستخدمها (5)
--al-color-accent، --al-color-text، --al-color-text-muted، --al-duration-fast، --al-ease-standard