WAI-ARIA HTML. How to force 2 divs to be read out as one?

Question

I'm new to ARIA and I'm having trouble combining two divs (both just text) into one readout. The layout is an iOS like table with 2 text labels in one row. The idea is to readout the row as a whole as opposed to labels one by one. I have found the aria-label only works if the role is set (like button) but then you get extra words read out. Anyone has an idea?

HTML example:

<div id="block">
  <div id="foo" class="half" style="float:left">Date of birth</div>
  <div id="bar" class="half" style="float:right">1/01/1970</div>
</div>

label 1 should read out: "Date of birth 1/01/1970".

Answer 1

First let me say that you really don't need to do this. Screen reader users are used to dealing with HTML structure like this and can get around it easily.

However, if you want to do this:

Create an offscreen style.

.offscreen {
    border: 0;
    clip: rect(0 0 0 0);
    clip: rect(0, 0, 0, 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    width: 1px;
    position: absolute;
}

Then hide the visual content using aria-hidden and add an off screen text.

<div id="block">
  <div aria-hidden="true" id="foo" class="half" style="float:left">Date of birth</div>
  <div aria-hidden="true" id="bar" class="half" style="float:right">1/01/1970</div>
  <div class="offscreen">Date of birth: January 1, 1970</div>
</div>