Search code examples
htmlaccessibilitysemantic-markup

What HTML element to use for short pieces of text?

I’m working on the UI of an internal administrative web application which enables you to manage different kinds of data (in our example - people). Some of the screens consist of a header, containing the basic informations of the person, and a form for making changes.

Example markup (without styling):

<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>

I want to improve the accessibility of our application by using semantic markup, but can’t figure out which HTML tags should be used in the header area. I’d use an <h1> for the title (“John Doe”) and an <img> for the image, but I’m not sure what to use for the rest of the content.

The text on the right (“Group X”) visually looks like a heading, but it doesn’t feel right to use an <h2> here, as <h> elements should represent headings of sections and there is no grouped content that belongs to that text.

The texts underneath the title are currently defined as <div> — it also doesn’t feel right because <div>s have no meaning on their own. I thought about using a <p> but the texts are not paragraphs. Another options I considered were <span> and <ul> but they also don’t seem right because the first one, like <div>, has no semantic value and the texts don't create a list of semantically similar items.

Does anyone have a better idea?

Solution

  • A list here would be the best solution, imo. It won't convey semantically similar items, but it will gather under one hood, so to say, all the info about John Doe.
    You may do a <ul>, but if for some reason you want to keep your divs, you may do so and add appropriate ARIA for the list, shown below.
    One more thing: As far as I can see (with sighted help), the ID thing is related to the group X. I.e., the data go like this: John Doe, London, birthdate, group x, ID. If I'm right, you need to change the place of your divs in the code, as most screen readers order the page as it is laid out in the code.
    So, the final solution without changing your markup, except for adding an outer div for the list:

    <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>