الأنماط والمكونات وأنظمة التصميم

يستخدم العديد من الأشخاص التطوير القائم على المكونات باستخدام أدلة أنماط الأنماط أو مكتبات المكونات أو أنظمة التصميم الكاملة في عملية سير عمل التطوير. حتى إذا لم تكن قد استخدمت هذه الأدوات رسميًا، فمن المحتمل أنك تستخدم عملية مماثلة لتقسيم تصميم كبير لموقع ويب أو تطبيق أو منتج رقمي آخر إلى أجزاء يمكن إدارتها.

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

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

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

ومع توفّر عدد هائل من الخيارات المتاحة، يسهُل عليك الخلط حول هذا الموضوع. تهدف هذه الوحدة إلى تزويدك بمعلومات عامة حول كيفية تقييم الأنماط والمكونات وأنظمة التصميم لإمكانية الوصول، وتمنحك نقطة بداية لمساعدتك في اتخاذ خيارات أكثر سهولة في الوصول.

التفكير بشكل نقدي

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

في وحدات الاختبار التالية، ستتعلم المزيد حول الأساليب والأساليب الخاصة بكيفية تقييم الأنماط والمكونات وأنظمة التصميم لإمكانية الوصول. ولكن قبل تلك المرحلة، تحتاج إلى التراجع وطرح بعض الأسئلة الأساسية على نفسك، مثل:

  • هل هناك بالفعل نمط أو مكون أو نظام تصميم يمكن الوصول إليه؟
  • ما المتصفحات والتكنولوجيا المساعِدة (AT) التي أدعمها؟
  • هل هناك أي قيود على التعليمات البرمجية/إطار العمل أو احتياجات أي عمليات دمج/عوامل/مستخدم أخرى أحتاج إلى أخذها في الاعتبار؟

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

الموارد الراسخة

قبل إنشاء شيء جديد تمامًا، قم بالعناية الواجبة وراجع ما هو موجود بالفعل من حيث الأنماط والمكونات التي يمكن الوصول إليها وأنظمة التصميم التي يمكن الوصول إليها. بعد إجراء بحث بسيط، قد تفاجأ بإيجاد حل - أو عدة حلول - يناسب احتياجاتك.

تتضمن بعض الموارد الرائعة للأنماط والمكونات وأنظمة التصميم التي يمكن الوصول إليها ما يلي:

بالنسبة إلى إطارات عمل JavaScript، يمكن الوصول إلى الموارد التالية بشكل كافٍ أو من السهل تخصيصها لإمكانية الوصول:

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

يجب اعتبار جميع الموارد بمثابة نقطة بداية. احرص على اختبار كل شيء.

إتاحة المتصفّحات والتكنولوجيا المساعدة (AT)

بعد البحث في بعض الأنماط الأساسية أو المكونات أو نظام التصميم الكامل الذي قد يصلح لبيئة التطوير لديك، يمكنك الانتقال إلى دعم التكنولوجيا المساعدة. أحد الأنواع الرئيسية من التقنيات المساعدة (AT) التي تريد التركيز عليها عند تقييم الأنماط والمكونات وأنظمة التصميم هي قارئات الشاشة.

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

قارئ الشاشة نظام التشغيل توافُق المتصفح التكلفة
الوصول إلى الوظائف باستخدام الكلام (JAWS) أجهزة Windows Chrome وFirefox وEdge يتطلب الترخيص (يوجد إصدار مجاني مدته 40 دقيقة)
وصول غير مرئي إلى سطح المكتب (NVDA) أجهزة Windows Chrome وFirefox مجاني (يتطلّب التنزيل)
راوٍ أجهزة Windows Edge مجاني (مضمّن في أجهزة Windows)
VoiceOver macOS برنامج المتصفح Safari مجاني (مضمّن في أجهزة macOS)
أداة أوركا Linux Firefox مجاني (مضمّن في توزيعات مستندة إلى Gnome)
TalkBack Android Chrome وFirefox مجاني (مضمّن في إصدارات معيّنة من نظام التشغيل Android)
VoiceOver iOS برنامج المتصفح Safari مجاني (مضمّن في أجهزة iOS)

ويكون دعم المتصفح معقدًا بشكل عام، وتصبح الأمور أكثر تعقيدًا عند إضافة أجهزة AT ومواصفات ARIA إلى المزيج.

لكنها ليست كلها أخبارًا سيئة. لحسن الحظ، تساعدنا الموارد الرائعة، مثل تسهيل الاستخدام في HTML5 ودعم تسهيل الاستخدام وقائمة التحقق المخصصة لتطوير الوصول إلى عناصر التحكم المخصصة في WCAG، على فهم التوافق الحالي مع المتصفحات وأجهزة AT، وحتى وقت استخدام ARIA في المقام الأول.

تحدد هذه الموارد العناصر الفرعية المختلفة لنمط HTML وARIA المتاحة، بما في ذلك اختبارات المنتديات مفتوحة المصدر. يمكنك أيضًا مراجعة بعض أمثلة الأنماط - لكل من متصفحات سطح المكتب والجوال/أجهزة AT. وعلى هذا النحو، يمكن أن تساعدك هذه الموارد في اتخاذ قرار يسهل الوصول إليه فيما يتعلق بالأنماط والمكونات وأنظمة التصميم التي قد ترغب في استخدامها.

اعتبارات أخرى

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

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

وتسمح العديد من إطارات عمل JavaScript للمطوّرين باستخدام أي نمط من اختيارهم تقريبًا. في مثل هذه الحالات، قد يكون لديك قيود أقل ويمكنك تحديد خيار النمط الأكثر سهولة.

هناك اعتبارات إضافية يجب مراعاتها عند اختيار نمط أو مكون أو نظام تصميم، مثل:

  • عروض أداء
  • الأمان
  • تحسين محركات البحث
  • إتاحة ترجمة اللغات
  • عمليات الدمج مع جهات خارجية

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

التحقّق من استيعابك

اختبر معلوماتك عن الأنماط

هل تظل المكونات التي يمكن الوصول إليها دائمًا قابلة للوصول للمستخدمين؟

نعم، يمكنك استخدام هذه المكوّنات بدون أي جهد إضافي.
لا، يجب اختبار المكوّنات أولاً.