Какой элемент HTML использовать для коротких фрагментов текста? - PullRequest
Новая
       34

Какой элемент HTML использовать для коротких фрагментов текста?

0 голосов
/ 13 ноября 2018

Я работаю над пользовательским интерфейсом внутреннего административного веб-приложения, которое позволяет вам управлять различными видами данных (в нашем примере - людьми). Некоторые из экранов состоят из заголовка, содержащего основные сведения о человеке, и формы для внесения изменений.

Пример разметки (без стиля): 

<header>
    <h1>John Doe</h1>
    <img src="johndoe.jpg" alt="Profile picture"/>
    <div>Group X</div>
    <div>London, UK</div>
    <div>01.01.1970</div>
    <div>some kind of ID (example: X920EDY)</div>
</header>

Я хочу улучшить доступность нашего приложения с помощью семантической разметки, но не могу понять, какие теги HTML следует использовать в области заголовка. Я бы использовал <h1> для заголовка («Джон Доу») и <img> для изображения, но я не уверен, что использовать для остальной части контента.

Текст справа («Группа X») визуально выглядит как заголовок, но неправильно использовать <h2> здесь, так как <h> элементы должны представлять заголовки разделов и нет сгруппированного контента, который принадлежит этому тексту.

Тексты под заголовком в настоящее время определены как <div> - это также не кажется правильным, потому что <div> s сами по себе не имеют значения . Я думал об использовании <p>, но тексты не абзацы. Другие варианты, которые я рассмотрел, были <span> и <ul>, но они также кажутся неправильными, потому что первый, такой как <div>, , не имеет семантического значения , а тексты не создают список семантически похожих предметов .

У кого-нибудь есть идея получше?

1 Ответ

0 голосов
/ 14 ноября 2018

Список здесь будет лучшим решением, IMO. Он не будет передавать семантически подобные предметы, но соберет под одним капюшоном, так сказать, всю информацию о Джоне Доу.
Вы можете сделать <ul>, но если по какой-то причине вы хотите сохранить свои div s, вы можете сделать это и добавить соответствующую ARIA для списка, показанного ниже.
Еще одна вещь: насколько я вижу (с помощью зрительной помощи), идентификация связана с группой X. Т.е., данные идут так: Джон Доу, Лондон, дата рождения, группа x, ID. Если я прав, вам нужно изменить место вашего div s в коде , так как большинство программ чтения с экрана упорядочивают страницу так, как это указано в коде.
Итак, окончательное решение без изменения разметки, за исключением добавления внешнего div для списка: 

<div role="list">
    <div role="listitem">London, UK</div>
    <div role="listitem">01.01.1970</div>
    <div role="listitem">Group X</div>
    <div role="listitem">some kind of ID (example: X920EDY)</div>
</div>
...