المخططات الشريطية المتداخلة

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

لكنهم جميلون أيضًا!

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

HTML

سنبدأ بالترميز لأنه ، حسنًا ، هذه هي الطريقة التي نعرف بها ما يحتاج إلى التصميم.

<div class="container">
  <div class="chart">
    <dl class="numbers">
      <dd><span>100%</span></dd>
      <!-- all the way to 0% -->
    </dl>
    <dl class="bars">
      <div>
          <dt>2018</dt>
          <dd>
            <div class="bar" data-percentage="50"></div>
            <div class="bar overlap" data-percentage="53"></div>
          </dd>
        </div>
      <div>
      <!-- more bars -->
    </dl>
  </div>
</div>

سنستخدم قوائم الوصف (<dl>) لأنه نهج دلالي أكثر بكثير مقارنة بالقوائم القياسية المرتبة وغير المرتبة. سبب آخر هو أننا نقوم بتضمين تسمية داخل كل شريط. لا تحتوي القوائم العادية على علامة بداخلها لإضافة عنوان أو وصف بخلاف قوائم التعريف. بعبارات بسيطة ، يكون الأمر أكثر منطقية ويمكن قراءته أيضًا.

قائمة الوصف الأولى ، .numbers، هو المحور ص. ال .bars هو المكان الذي يتم فيه تصور البيانات وقمت بعمل قائمة تعريف لبناء المحور السيني أيضًا. يحتوي كل عنصر بالقائمة على ملف .bar والتسمية كمصطلح وصف (dt).

وما الجديد في البيانات السمة؟ ال data-percentage يتم استخدامه لتحديد ارتفاع الشريط ، والذي يمثل قيمته في النهاية على المحور ص. يمكننا تعيينه يدويًا في CSS لكل شريط ، لكن هذا متكرر والكثير من التعليمات البرمجية الإضافية التي يمكن استبدالها ببضعة أسطر من CSS.

أنماط المخططات الأساسية

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

.chart {
  display: flex;
}

لا نحتاج حتى إلى تحديد الاتجاه حيث يتم تعيين flexbox افتراضيًا على row. لنفعل ذلك ثم نضيف flexbox إلى قائمة الملصقات على طول المحور الصادي أثناء تواجدنا فيه نظرًا لأننا نعلم أنها ستعمل في column الاتجاه.

.numbers {
  display: flex;
  flex-direction: column;
  list-style: none;
  margin: 0 15px 0 0;
  padding: 0;
}

صدق أو لا تصدق ، يمكننا استخدام flexbox مرة أخرى للأشرطة نظرًا لأنها تعمل أيضًا في ملف row الاتجاه.

.bars {
  display: flex;
  flex: auto; /* fill up the rest of the `.chart` space */
  gap: 60px;
}

لقد قمت بإعداد هذا حتى يتمكن .bars تشغل تلقائيًا أي مساحة متبقية من ملف y-axis .numbers.

ربما لاحظت ذلك في HTML ، لكن "الشريط" في الواقع عبارة عن شريطين حيث يتداخل أحدهما مع الآخر. لقد قمت بلف تلك في عام <div> يمكننا استخدام حاوية مرنة أخرى تحمل مصطلح التعريف (<dt>) نستخدمها كتسمية وتفاصيل الوصف (<dd>) التي تحتوي على كلا قيمتي الشريط:

.bars > div {
  align-items: center;
  display: flex;
  flex-direction: column;
  flex: 1;
  position: relative;
}

سيكون كل شريط بنفس العرض ، وبالتالي flex: 1. نحن نضع العنصر نسبيًا أثناء وجودنا فيه لأننا على وشك وضع كل شريط تمامًا ونريد التأكد من بقائهم في حاوياتهم.

يحتوي كل شريط على نسبة ارتفاع تتوافق مع القيم الموجودة على طول المحور y الرأسي. قد تتذكر أيضًا أننا قدمنا ​​كل شريط أ data-percentage سمة - سنقوم برش القليل من JavaScript الذي يحدد ارتفاع كل شريط باستخدام هذه القيم.

var bars = document.querySelectorAll("dd .bar");
bars.forEach((bar) => {
  var height = bar.getAttribute("data-percentage");
  bar.style.height = height + "%";
});

هذا هو مخططنا الأساسي!

نريد أن نصل بهذا إلى حيث يمكننا رؤية الأشرطة متداخلة مع بعضها البعض. هذا هو التالي!

أشرطة متداخلة

إن الحيلة لجعل شريط يتداخل مع الآخر أمر مضحك لأننا نحاول في كثير من الأحيان منع الأشياء من التداخل المرئي في CSS. لكن في هذه الحالة ، نريد أن يحدث ذلك بالفعل.

القضبان متداخلة بالفعل ؛ من الصعب معرفة ذلك. لاحظ في HTML أن الثانية .bar في كل مجموعة لديها إضافية .overlap صف دراسي. لنستخدم ذلك في اشتقاق الأعمدة. أنت حر تمامًا في اختيار التصميم الخاص بك لهذا الغرض. أقوم بإضافة القليل من الحشو إلى .overlap الأشرطة بحيث تكون أعرض من الأشرطة الأخرى. ثم أقوم بتعديل ترتيب التكديس باستخدام z-index بحيث أن .overlap تقع الحانات أسفل القضبان الأخرى.

دعونا نضيف أسطورة

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

<figure class="legend">
  <div class="type1">Estimate</div>
  <div class="type2">Actual</div>
</figure>

باستخدام <figure> يشعر بالحق بالنسبة لي. غالبًا ما يتم استخدامها لالتفاف الصور ، لكن المواصفات يقول يتم استخدامها "للتعليق على الرسوم التوضيحية والمخططات والصور وقوائم الرموز وما إلى ذلك." ونعمل على رسم تخطيطي. ربما يمكننا استخدام قائمة غير مرتبة للاحتفاظ بالعناصر ، لكني ذهبت مع غير ذات دلالة <div>. إذا كان لدى أي شخص رأي حول أفضل طريقة لترميز هذا ، فأنا آذان صاغية في التعليقات!

مرة أخرى ، التصميم متروك لك تمامًا:

اعتبارات الوصول

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

على وجه التحديد ، نحن بحاجة إلى:

1. تحقق من وجود تباين كبير بين ألواننا ،
2. السماح لمستخدمي لوحة المفاتيح بالتبويب على كل شريط متداخل ، و
3. تأكد من أن برامج قراءة الشاشة تعلن عن المحتوى.

تناقضات اللون

نحتاج إلى تباين كافٍ بين:

• الأشرطة المتداخلة
• الأشرطة وخلفية الرسم البياني
• نص التسمية والخلفية

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

هذا ما أستخدمه:

• القضبان المتداخلة: (#25DEAA و #696969: 3.16: 1 نسبة)
• الأشرطة وخلفية الرسم البياني (#696969 و #111: 3.43: 1 نسبة)
• نص تسمية المحور "ص" والخلفية (#fff و #333: نسبة 12.63: 1)

الجدولة بين القضبان

للحصول على هذا حيث يمكن لمستخدمي لوحة المفاتيح تحديد كل شريط فردي بامتداد علامة التبويب المفتاح ، يمكننا الوصول إلى HTML tabindex ينسب. يمكننا استخدام JavaScript التالية داخل الدالة for-each لإضافة هذه الخاصية إلى كل شريط (كلاهما). سنقوم بتعيين فهرس علامات التبويب على 0:

bar.setAttribute("tabindex", 0);

يمكننا أيضًا إضافة بعض CSS لتحسين المخطط عندما يتم تحديد الشريط أثناء وجودنا فيه:

.bar:focus {
  outline: 1.5px solid #f1f1f1;
}

الإعلان عن محتوى على قارئات الشاشة

جانب آخر مهم لإمكانية الوصول هو التأكد من أن برامج قراءة الشاشة يمكنها الإعلان عن الأشرطة ونسبها المئوية.

نحن نعمل مع مخططين مختلفين في أحدهما: مخطط يعرض القيم "المقدرة" والآخر يعرض القيم "الفعلية". سيكون أمرًا رائعًا أن يعرف المستخدم الشريط الذي يتم الإعلان عنه ، لذلك دعونا نسميه بامتداد aria-label صفة، عزا:

<div class="bar" data-percentage="50" aria-label="Estimate">50%</div>

لاحظ أن لدينا قيمة الشريط مباشرة في HTML أيضًا. سيتم الإعلان عن ذلك ، لكننا ما زلنا نريد إخفائه بصريًا. يمكننا استخدام transparent نص لذلك ، ولكن هناك طريقة أخرى لاستخدام كلاسيكي .visually-hidden خدعة من خلال تغليف القيمة بـ span:

<div class="bar" data-percentage="50" aria-label="Estimate">
  <span class="visually-hidden">50%</span>
</div>

.visually-hidden {
  clip: rect(0 0 0 0); 
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap; 
  width: 1px;
}

بينما نتحدث عن الإعلان عن المحتوى ، يمكننا على الأرجح منع قراءة تسميات المحور ص. ليس الأمر وكأن المستخدم يفتقد المعلومات ، حيث أن النسب المئوية الفعلية لكل شريط متاحة بالفعل ومعلنة. يمكننا استخدام aria-hidden السمة لذلك:

<dl class="numbers" aria-hidden="true">
  <dd><span>100%</span></dd>
  <dd><span>80%</span></dd>
  <dd><span>60%</span></dd>
  <dd><span>40%</span></dd>
  <dd><span>20%</span></dd>
  <dd><span>0%</span></dd>
</dl>

أعتقد أيضًا أنه من الجيد أن يتجاهل قراء الشاشة الأسطورة لأنها أداة مساعدة بصرية:

<figure class="legend" aria-hidden="true">
  <div class="type1">Estimate</div>
  <div class="type2">Actual</div>
</figure>

العرض النهائي

هذا هو التفاف!

ها نحن ذا ، مخطط به أشرطة متداخلة! إنها طريقة رائعة لمقارنة البيانات وآمل أن تجد استخدامًا لها في بعض المشاريع.

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