Создать вкладки (tabs) из свойств элемента инфоблока

Скопируйте шаблон компонента (например, bitrix:news.detail) в свой и работайте в его template.php. Массив $arResult["DISPLAY_PROPERTIES"] содержит только заполненные свойства с готовыми к выводу значениями DISPLAY_VALUE, поэтому лишние проверки не нужны – Битрикс сам не кладёт сюда пустые свойства. Определим список свойств-вкладок и пройдёмся по нему:

<?php
$tabCodes = ['ANALYTICS', 'DESIGN', 'PROGRAMMING', 'TESTING', 'SUPPORT'];
$tabs = [];
foreach ($tabCodes as $code) {
    if (!empty($arResult['DISPLAY_PROPERTIES'][$code])) {
        $tabs[$code] = $arResult['DISPLAY_PROPERTIES'][$code];
    }
}
?>
<?php if ($tabs): ?>
<div class="tabs">
  <div class="tabs__list" role="tablist" aria-label="Информация о проекте">
    <?php $i = 0; foreach ($tabs as $code => $prop): $i++; ?>
      <button class="tabs__tab" role="tab"
              id="tab-<?= mb_strtolower($code) ?>"
              aria-controls="panel-<?= mb_strtolower($code) ?>"
              aria-selected="<?= $i === 1 ? 'true' : 'false' ?>"
              tabindex="<?= $i === 1 ? '0' : '-1' ?>">
        <?= htmlspecialcharsbx($prop['NAME']) ?>
      </button>
    <?php endforeach; ?>
  </div>

  <?php $i = 0; foreach ($tabs as $code => $prop): $i++; ?>
    <div class="tabs__panel" role="tabpanel"
         id="panel-<?= mb_strtolower($code) ?>"
         aria-labelledby="tab-<?= mb_strtolower($code) ?>"
         <?= $i === 1 ? '' : 'hidden' ?>>
      <?= $prop['DISPLAY_VALUE'] ?>
    </div>
  <?php endforeach; ?>
</div>
<?php endif; ?>

Первая вкладка активна: у её кнопки aria-selected="true" и tabindex="0", у остальных – false и -1. Панели неактивных вкладок скрыты атрибутом hidden.

Скрипт вешает клик и стрелочную навигацию с клавиатуры (влево/вправо, Home/End) – этого ждут пользователи скринридеров от вкладок:

document.querySelectorAll('.tabs').forEach(function (root) {
  var tabs = Array.from(root.querySelectorAll('[role="tab"]'));

  function activate(tab) {
    tabs.forEach(function (t) {
      var selected = t === tab;
      t.setAttribute('aria-selected', selected);
      t.tabIndex = selected ? 0 : -1;
      document.getElementById(t.getAttribute('aria-controls')).hidden = !selected;
    });
    tab.focus();
  }

  root.addEventListener('click', function (e) {
    var tab = e.target.closest('[role="tab"]');
    if (tab) activate(tab);
  });

  root.addEventListener('keydown', function (e) {
    var i = tabs.indexOf(document.activeElement);
    if (i === -1) return;
    if (e.key === 'ArrowRight') activate(tabs[(i + 1) % tabs.length]);
    else if (e.key === 'ArrowLeft') activate(tabs[(i - 1 + tabs.length) % tabs.length]);
    else if (e.key === 'Home') activate(tabs[0]);
    else if (e.key === 'End') activate(tabs[tabs.length - 1]);
  });
});