Более чистый и доступный код с помощью HTML

Мы все были теми новыми разработчиками в команде веб-разработчиков, которые были ошеломлены и немного волновались перед началом работы. Новые члены команды, новые командные нормы и даже мысль «впишусь ли я». Все это совершенно обоснованные чувства при переходе в новую команду веб-разработчиков, но есть одна вещь, которая еще хуже, чем все это? Изучение новой кодовой базы!

Одна из самых сложных вещей в изучении новой кодовой базы веб-приложений — это JavaScript! В наш век веб-разработки JavaScript захватил власть и превратил изучение новых кодовых баз в утомительный процесс.

В свою очередь, это привело к тому, что основное внимание уделяется изучению JavaScript, а не основам, таким как HTML. Это только усугубляет проблему изучения новой кодовой базы, поскольку HTML полон <div> и <span> с кучей событий, пользовательских атрибутов данных и, конечно же, ARIA для доступности.

Ценность семантического/нативного HTML

Если вы хотите, чтобы ваш HTML был самой простой для понимания частью вашей кодовой базы, то научитесь ценить семантический и родной HTML. Придерживаясь их, вы облегчите понимание разметки, обеспечите доступность по умолчанию, а также сделаете код пригодным для долгосрочного использования.

Не верите мне? Давайте посмотрим на пару примеров, где HTML-разметка может быть намного проще для понимания!

Компоненты списков

Давайте сравним два списка, один из которых сделан с использованием <div> и <span> и заполнением пробелов с помощью ARIA, а второй — просто с помощью родного HTML.

Список ARIA

<div role="list">
<div class="row">
    <span class="dot"></span>
    <div class="li" role="listitem">
       {this.props.descOne} 
    </div>
</div>
<div class="row">
    <span class="dot"></span>
    <div class="li" role="listitem"> 
           {this.props.descTwo}
    </div>
</div>
<div class="row">
    <span class="dot"></span>
    <div class="li" role="listitem">
          {this.props.descThree}
     </div>
</div>
</div>
Вход в полноэкранный режим Выход из полноэкранного режима

Список HTML

    <ol class="list">
        <li>{this.props.descOne}</li>
        <li>{this.props.descTwo}</li>
        <li>{this.props.descThree}</li>
    </ol>
Войти в полноэкранный режим Выход из полноэкранного режима

Как вы можете видеть, компонент на основе ARIA использует много ARIA, чтобы компенсировать тот факт, что он должен быть списком, а также добавляет <span> для создания точек для элементов списка.

Если мы просто используем родной HTML, то это буквально 5 строк кода, и гораздо проще увидеть данные, которые входят в каждый элемент списка.

Компонент раскрытия/свертывания

Другим примером может быть использование семантического HTML для создания компонента раскрытия/свертывания. Есть разработчики, которые даже не подозревают, что этого можно добиться, используя только HTML (в большинстве случаев).

Этот пример покажет, как много ARIA, пользовательских атрибутов и событий используется для создания кнопки, которая расширяется и сворачивается, по сравнению с чистым результатом семантического HTML.

Отсутствие нативного HTML-развертывания/свертывания


<div role="button" tabindex="0" 
onClick="doClick()" onKeyUp="doClick()" 
aria-expanded="false" aria-controls="expanded-section" 
aria-label="More information on your car">
  <span aria-hidden="true" class="toggle"></span>
</div>
  <div class="expanded-section" aria-hidden="true">
    <p>The car has all wheel drive and contains some of the best brakes out there.</p>
  </div>
Вход в полноэкранный режим Выход из полноэкранного режима

Раздел Native HTML Expand/Collapse

<details class="expCol" id="summarySection">
  <summary class="sum" tabindex="0" role="button" aria-expanded="false">
    More information on your car
  </summary>

  <div class="expanded-section">
    <p>The car has all wheel drive and contains some of the best brakes out there.</p>
  </div>
</details>

Войти в полноэкранный режим Выход из полноэкранного режима

Как вы можете видеть, количество атрибутов ARIA и событий, привязанных к расширению/свертыванию с помощью ARIA, делает очень трудным отслеживание того, что делает вся разметка. В то время как <detail> и <summary> чисты, лаконичны и просты для понимания.

Построение на будущее

Как вы видели из приведенных выше примеров, использование семантического и собственного HTML — это способ сделать вашу разметку чище и доступнее для любого разработчика.

Одна вещь, которая обычно мучает сообщество разработчиков, — это устойчивый код, рассчитанный на будущее. Многие команды доходят до того, что через несколько лет их кодовая база заменяется на новую библиотеку. Это, в свою очередь, является причиной того, что большинство команд не прилагают усилий для изучения основ HTML.

Использование HTML может помочь вашей команде разработчиков быть готовой к любым изменениям, таким как эти, и к появлению новых членов команды! Он также может гарантировать, что ваш код будет гораздо более доступным для всех, поскольку семантический и «родной» HTML имеет встроенную доступность. В общем, HTML — это то, что нужно!

Оцените статью
Procodings.ru
Добавить комментарий