---
url: 'https://dxpr.com/ar/hc/%D8%A7%D9%84%D8%AA%D9%88%D8%AB%D9%8A%D9%82/%D8%AA%D8%B9%D9%84%D9%85-dxpr-builder/%D9%85%D8%AA%D9%82%D8%AF%D9%85/%D8%A5%D9%85%D9%83%D8%A7%D9%86%D9%8A%D8%A9-%D8%A7%D9%84%D9%88%D8%B5%D9%88%D9%84'
title: 'جعل صفحاتكم ميسّرة | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T01:24:47+00:00'
updated: '2026-10-24T17:19:22+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: |-
  امنحوا كل صورة وصفًا، وحافظوا على ترتيب العناوين، واجعلوا النص مقروءًا
  فوق الألوان، ليتمكن مستخدمو قارئات الشاشة ولوحات المفاتيح من استخدام
  صفحاتكم. تسرد هذه الصفحة ما يفعله DXPR Builder نيابة عنكم، وما
  تضيفونه بأنفسكم، وكيف تتحققون من النتيجة قبل النشر.
tags:
  - 'Make pages accessible and findable'
image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
published: true
og:
  site_name: DXPR
  updated_time: '2026-10-24T17:19:22+0000'
  'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.'
schema:
  '@context': 'https://schema.org'
  '@graph':
    -
      mainEntity: {  }
    -
      '@type': TechArticle
      headline: 'جعل صفحاتكم ميسّرة'
      description: |-
        امنحوا كل صورة وصفًا، وحافظوا على ترتيب العناوين، واجعلوا النص مقروءًا
        فوق الألوان، ليتمكن مستخدمو قارئات الشاشة ولوحات المفاتيح من استخدام
        صفحاتكم. تسرد هذه الصفحة ما يفعله DXPR Builder نيابة عنكم، وما
        تضيفونه بأنفسكم، وكيف تتحققون من النتيجة قبل النشر.
      image:
        '@type': ImageObject
        url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
        width: '1200'
        height: '630'
      datePublished: '2026-10-24T01:24:47+0000'
      dateModified: '2026-10-24T17:19:22+0000'
      author:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
        url: 'https://dxpr.com/'
        logo:
          '@type': ImageObject
          url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg'
          width: '1348'
          height: '501'
      publisher:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
        url: 'https://dxpr.com/'
        logo:
          '@type': ImageObject
          url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg'
          width: '1348'
          height: '501'
      mainEntityOfPage: 'https://dxpr.com/ar/hc/%D8%A7%D9%84%D8%AA%D9%88%D8%AB%D9%8A%D9%82/%D8%AA%D8%B9%D9%84%D9%85-dxpr-builder/%D9%85%D8%AA%D9%82%D8%AF%D9%85/%D8%A5%D9%85%D9%83%D8%A7%D9%86%D9%8A%D8%A9-%D8%A7%D9%84%D9%88%D8%B5%D9%88%D9%84'
      articleSection: 'صفحات متاحة وقابلة للعثور'
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/ar/hc/%D8%A7%D9%84%D8%AA%D9%88%D8%AB%D9%8A%D9%82/%D8%AA%D8%B9%D9%84%D9%85-dxpr-builder/%D9%85%D8%AA%D9%82%D8%AF%D9%85/%D8%A5%D9%85%D9%83%D8%A7%D9%86%D9%8A%D8%A9-%D8%A7%D9%84%D9%88%D8%B5%D9%88%D9%84'
      description: |-
        امنحوا كل صورة وصفًا، وحافظوا على ترتيب العناوين، واجعلوا النص مقروءًا
        فوق الألوان، ليتمكن مستخدمو قارئات الشاشة ولوحات المفاتيح من استخدام
        صفحاتكم. تسرد هذه الصفحة ما يفعله DXPR Builder نيابة عنكم، وما
        تضيفونه بأنفسكم، وكيف تتحققون من النتيجة قبل النشر.
      breadcrumb:
        '@type': BreadcrumbList
        itemListElement:
          -
            '@type': ListItem
            position: 1
            name: الرئيسية
            item: 'https://dxpr.com/ar'
      publisher:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
      inLanguage: ar
---
[مركز المساعدة](/ar/hc)/[التوثيق](/ar/hc/%D8%A7%D9%84%D8%AA%D9%88%D8%AB%D9%8A%D9%82) /[تعلّم DXPR Builder](/ar/hc/documentation/learn-dxpr-builder) /[إدارة الموقع](/ar/hc/documentation/learn-dxpr-builder/manage) /[صفحات متاحة وقابلة للعثور](/ar/hc/documentation/learn-dxpr-builder/manage/accessible-findable) # جعل صفحاتكم ميسّرة.

 تعلّم DXPR Builderإدارة الموقعصفحات متاحة وقابلة للعثور

   ## في هذا الدليل

 أدلة ذات صلة

- [اختصارات لوحة المفاتيح](/ar/hc/%D8%A7%D9%84%D8%AA%D9%88%D8%AB%D9%8A%D9%82/%D8%AA%D8%B9%D9%84%D9%85-dxpr-builder/%D8%A7%D9%84%D9%85%D8%B1%D8%AC%D8%B9/%D8%A7%D8%AE%D8%AA%D8%B5%D8%A7%D8%B1%D8%A7%D8%AA-%D9%84%D9%88%D8%AD%D8%A9-%D8%A7%D9%84%D9%85%D9%81%D8%A7%D8%AA%D9%8A%D8%AD)
- [جدار الحماية وإقامة البيانات](/ar/hc/%D8%A7%D9%84%D8%AA%D9%88%D8%AB%D9%8A%D9%82/%D8%AA%D8%B9%D9%84%D9%85-dxpr-builder/%D8%A7%D9%84%D8%A8%D8%AF%D8%A1/%D8%AC%D8%AF%D8%A7%D8%B1-%D8%A7%D9%84%D8%AD%D9%85%D8%A7%D9%8A%D8%A9-%D9%88%D8%A5%D9%82%D8%A7%D9%85%D8%A9-%D8%A7%D9%84%D8%A8%D9%8A%D8%A7%D9%86%D8%A7%D8%AA)

امنحوا كل صورة وصفًا، وحافظوا على ترتيب العناوين، واجعلوا النص مقروءًا فوق الألوان، ليتمكن مستخدمو قارئات الشاشة ولوحات المفاتيح من استخدام صفحاتكم. تسرد هذه الصفحة ما يفعله DXPR Builder نيابة عنكم، وما تضيفونه بأنفسكم، وكيف تتحققون من النتيجة قبل النشر.

## ما يفعله المنشئ نيابة عنكم

- **بنية نصية حقيقية.** يستخدم عنصر النص CKEditor 5 مع عناوين حقيقية (**العنوان 1** إلى **العنوان 6**) وفقرات وقوائم.
- **ARIA على العناصر التفاعلية.** تحمل التبويبات `role="tablist"`و`role="tab"`. وتحمل أشرطة التقدم وعدادات الدائرة `role="progressbar"` مع حدّها الأدنى والأقصى وقيمتها الحالية. وعناوين لوحات الطي أزرار تُعلن ما إذا كانت لوحتها مفتوحة.
- **مربعات حوار محرّر ميسّرة.** كل مربع حوار إعدادات هو `role="dialog"` مع `aria-modal` وعنوان.
- **وصول بلوحة المفاتيح في المحرّر.** **Enter** يفتح إعدادات العنصر، ويغلق **Escape** اللوحة أو يلغي تحديد العنصر، وينقل **Ctrl**(**Cmd** على Mac) مع مفتاح سهم العناصر. انظر [مرجع اختصارات لوحة المفاتيح](/ar/hc/%D8%A7%D9%84%D8%AA%D9%88%D8%AB%D9%8A%D9%82/%D8%AA%D8%B9%D9%84%D9%85-dxpr-builder/%D8%A7%D9%84%D9%85%D8%B1%D8%AC%D8%B9/%D8%A7%D8%AE%D8%AA%D8%B5%D8%A7%D8%B1%D8%A7%D8%AA-%D9%84%D9%88%D8%AD%D8%A9-%D8%A7%D9%84%D9%85%D9%81%D8%A7%D8%AA%D9%8A%D8%AD).

عناصر التخطيط (المقاطع والصفوف والأعمدة) هي عناصر `div`عادية. والبنية التي يعلنها قارئ الشاشة تأتي من عناوينكم.

## إضافة نص بديل إلى صورة

1. أشيروا إلى الصورة وانقروا **المزيد** > **الإعدادات**.
2. افتحوا لوحة **تحسين محركات البحث**.
3. اكتبوا وصفًا في **سمة Alt**: ما تُظهره الصورة ولماذا هي على الصفحة، في جملة أو جملتين، دون عبارة "image of".
4. انقروا **حفظ** في مربع الحوار، ثم **حفظ** على شريط الحاوية.

عندما تكون **سمة Alt** فارغة، لا يكتب عنصر الصورة أي `alt`على الإطلاق، وقد تقرأ قارئات الشاشة اسم الملف. ولصورة زخرفية محضة، استخدموا **صورة خلفية** للمقطع في لوحة **النمط** بدل ذلك؛ فقارئات الشاشة تتجاوز الخلفيات. ويستخدم دوّار الصور **سمة Alt** واحدة لكل صوره، فصفوا المجموعة.

تبدأ الصور المولّدة بالذكاء الاصطناعي بأمركم كنص بديل لها. حرّروه ليصف النتيجة لا الطلب. انظر [النص البديل للصور](/ar/hc/%D8%A7%D9%84%D8%AA%D9%88%D8%AB%D9%8A%D9%82/%D8%AA%D8%B9%D9%84%D9%85-dxpr-builder/%D8%B0%D9%83%D8%A7%D8%A1-%D8%A7%D8%B5%D8%B7%D9%86%D8%A7%D8%B9%D9%8A/%D8%A7%D9%84%D9%86%D8%B5-%D8%A7%D9%84%D8%A8%D8%AF%D9%8A%D9%84-%D9%84%D9%84%D8%B5%D9%88%D8%B1%D8%A9).

## الحفاظ على ترتيب العناوين

1. امنحوا الصفحة عنوانًا واحدًا من المستوى 1. تعرض معظم القوالب عنوان الصفحة كعنوان من المستوى 1، فلا تضيفوا ثانيًا في المنشئ. على DXPR CMS يمكنكم إخفاء ذلك العنوان على صفحة واحدة بدل ذلك: في نموذج تحريرها، افتحوا **إعدادات قالب DXPR** وحدّدوا **عنوان الصفحة** ضمن **مناطق الإخفاء في DXPR**.
2. في شريط أدوات عنصر النص، استخدموا قائمة العناوين لتمييز عناوين المقاطع كـ **العنوان 2** والعناوين الفرعية كـ **العنوان 3**. ولا تتجاوزوا المستويات.
3. استخدموا أزرار القوائم في شريط الأدوات للقوائم بدل الشرطات المكتوبة.

تثبّت ثلاثة عناصر مستوى عنوانها. فـ **العنوان** في Jumbotron هو دائمًا العنوان 1، و**العنوان** في البطاقة هو دائمًا العنوان 5، وكل **عنوان تبديل** في لوحة طي هو عنوان من المستوى 2.

## التحقق من تباين الألوان

تعرض منتقيات الألوان لوحة قالبكم لكنها لا تقيس التباين، فتحققوا منه بأنفسكم:

| النص | الحدّ الأدنى للنسبة (WCAG AA) |
|---|---|
| نص المتن | 4.5:1 |
| النص الكبير (24 px، أو نحو 19 px عريض) | 3:1 |

للنص فوق صورة، أظلموا الصورة لتبقى النسبة ثابتة عبر الصورة كلها. وفي لوحة **مؤثرات الخلفية** الخاصة بالمقطع، اضبطوا **مؤثر الخلفية** على **التدرج اللوني** مع رقاقتي **لون البداية**و**لون النهاية** الداكنتين شبه الشفافتين. تعرض [الخلفيات](/ar/hc/%D8%A7%D9%84%D8%AA%D9%88%D8%AB%D9%8A%D9%82/%D8%AA%D8%B9%D9%84%D9%85-dxpr-builder/%D8%A5%D8%B9%D8%AF%D8%A7%D8%AF%D8%A7%D8%AA-%D8%A7%D9%84%D8%B9%D9%86%D8%B5%D8%B1/%D8%A7%D9%84%D8%AE%D9%84%D9%81%D9%8A%D8%A9)الخطوات.

## استخدام روابط وأزرار وصفية

يعرض عنصرا الزر والرابط النص الذي تكتبونه كنص الرابط. اكتبوا ما يفعله الرابط ("Register for Open Day") لا "click here". ويملك عنصر الرابط أيضًا **سمة العنوان** في لوحة **تحسين محركات البحث** الخاصة به لوصف أطول.

## ما الذي ترونه

1. اضبطوا **وضع العرض** على شريط الحاوية إلى **معاينة**، فلا تعترض عناصر تحكم المحرّر طريقكم.
2. اضغطوا Tab للتنقل عبر الصفحة. فكل زر ورابط وتبويب قابل للوصول ويعرض حلقة تركيز مرئية.
3. يُعلن مدقق آلي، مثل تدقيق إمكانية الوصول في المتصفح أو إضافة axe، عدم وجود أخطاء لمحتوى المنشئ على الصفحة المنشورة.

## إذا لم تروا تقريرًا نظيفًا

- **يُبلغ المدقق عن صورة دون نص بديل.** **سمة Alt** الخاصة بعنصر الصورة فارغة. املؤوها، أو انقلوا الصورة الزخرفية إلى خلفية مقطع.
- **يُبلغ المدقق عن عنوانين من المستوى 1.** **العنوان** في Jumbotron هو دائمًا العنوان 1، بجانب عنوان صفحة قالبكم. استخدموا عنصر نص مع عنوان من المستوى 2 بدل ذلك.
- **يُبلغ المدقق عن مستوى عنوان متجاوَز.** **العنوان** في البطاقة هو دائمًا العنوان 5. اتركوه فارغًا وابدؤوا البطاقة بعنوان عنصر نص بالمستوى الصحيح.
- **يُبلغ المدقق عن تباين منخفض على نص فوق صورة.** أضيفوا التدرج اللوني الموضح أعلاه، أو اختاروا خلفية نص أغمق.

## ما الخطوة التالية؟

- [اختصارات لوحة المفاتيح](/ar/hc/%D8%A7%D9%84%D8%AA%D9%88%D8%AB%D9%8A%D9%82/%D8%AA%D8%B9%D9%84%D9%85-dxpr-builder/%D8%A7%D9%84%D9%85%D8%B1%D8%AC%D8%B9/%D8%A7%D8%AE%D8%AA%D8%B5%D8%A7%D8%B1%D8%A7%D8%AA-%D9%84%D9%88%D8%AD%D8%A9-%D8%A7%D9%84%D9%85%D9%81%D8%A7%D8%AA%D9%8A%D8%AD) للقائمة الكاملة لاختصارات المحرّر.
- [الجدار الناري وإقامة البيانات](/ar/hc/documentation/learn-dxpr-builder/getting-started/behind-a-firewall) لمواضيع الامتثال الأخرى.