0

I am faced with a rather unique accessibility challenge. For reference, it is related to the way templates from Moodle's Database activity work but I will describe the limitations below.

I have three available templates in a list view of data: a header, a repeatable row template for each datum, and a footer (not relevant). I can use any HTML in a template but due to input filters block-level elements are closed at the end of each template. So I cannot, for instance, put the list view in a table (I would end up with N + 1 tables: one for the header and one for each datum row). I want a responsive list, where the header is not visible on a narrow screen while individual labels are visible in each repeated row.

The challenge is to semantically associate each label with its value. This thread was very useful but unless I missed something, it does not solve my problem. I cannot use aria-labelledby or aria-describedby in the rows because they use ID (which must be unique) references and I cannot generate unique IDs in each row (I do not have access to an index-like replacement in the templates, only raw values). <label> is only for input elements but I believe even if I could use it here I'd still run into the ID challenge.

So basically I have:

<!-- header tpl -->
<div class="row header">
  <span class="hidden-xs">Field One</span>
</div>

<!-- repeated row tpl -->
<div class="row data-row">
  <span class="visible-xs hidden-sm label">Field One:</span>
  <span class="value">[[field one value]]</span>
</div>

but cannot figure out how to semantically associate .label with .value. I looked at adding aria-label on .value but MDN says that is a "a string value that labels an interactive element" and this is a static list of data, not interactive. I also worry that the visual label plus aria-label are redundant for screenreaders.

Maybe a semantic association isn't necessary and because of the text order it's fine? It seems like I should be able to do better, though.

phette23
  • 413
  • 4
  • 11
  • Oh wow writing this out I think I figured it out...could I add IDs to the header elements and then use `aria-labelledby` references on each datum? Is there a problem with one label being referenced by multiple elements? – phette23 Apr 20 '23 at 21:29
  • `aria-label`, `aria-labelledby`, and `aria-describedby` are mainly used for labeling interactive elements. They can also be used with other roles, such as [landmark roles](https://www.w3.org/TR/wai-aria/#landmark_roles), which would include things like a ` – slugolicious Apr 20 '23 at 22:18
  • I'm missing the basic premise of what you want to achieve. Do you have name/value pairs and you want the "name" associated with the "value"? That sounds like a table and there is good support for screen readers with `` elements if you provide row and/or column headings via `
    ` and `. See more details at "[W3.org Tables Tutorial](https://www.w3.org/WAI/tutorials/tables/)"
     – slugolicious Apr 20 '23 at 22:22
  • If the name/value association is desired, one might think a `
    `/`
    `/`
    ` list would work. Semantically, that would be the right element, but unfortunately, screen readers do not treat definition lists the same. If you have 3 pairs of dt/dd elements, some screen readers will say you have a list with 3 items (which makes sense) but only allow you to navigate to the "term" elements using the screen reader `i` key. Other screen readers say the list has 6 items (not really correct) but at least you can navigate to each term and definition using the `i` key.
     – slugolicious Apr 20 '23 at 22:26
  • Please read my post. I cannot use a table nor a dl because of how the header and repeated templates are split up. Block level elements cannot overlap them. Neither of those are possible given the limitations I outlined and I specifically said I cannot do a table. – phette23 Apr 20 '23 at 22:38
  • But yes: I essentially have what _should_ be a table with `` labels but I cannot use a table. I wonder if the solution in my comment is enough or if there is another (non-ID based) way to do references in ARIA attributes. – phette23 Apr 20 '23 at 22:40
  • 1
    *"Is there a problem with one label being referenced by multiple elements?"* No, it's valid to have one element with an ID and then refer to that ID in multiple elements using `aria-labelledby`. I do that quite often. – slugolicious Apr 21 '23 at 02:14
  • *"I wonder if the solution in my comment is enough"*. I don't think so because as noted in the "Practical support..." link, putting an `aria-labelledby` on a `
    ` is not going to work unless that `
    ` has an interactive or landmark role.
     – slugolicious Apr 21 '23 at 02:16
  • Note that if your output visually looks like a table but is not really a table, it would fail [WCAG 1.3.1](https://www.w3.org/TR/WCAG21/#info-and-relationships). But I'm wondering if you really have a problem to begin with. A screen reader user can navigate to each piece of text on the page. If I navigate sequentially (essentially walking the DOM) and I read the "label" and then read the value, I should be able to make sense of it. It might help if you could post an image or a rough HTML example of what the output looks like. I could give better advice with that. – slugolicious Apr 21 '23 at 02:19
  • 1
    It would probably be interesting to report an issue to moodle telling that their templating limitation cause severe accessibility limitations as well. As an widely used e-learning platform, I hope they are open to receive that comment and will try to fix it. You seem to well have understood the problem and how to fix it, but you can't apply it just because of some random limitation of a framework, that's unacceptable. – QuentinC Apr 21 '23 at 05:50
  • 1
    Practically, no worry, if the value is just next to the label in reading order / DOM order, it will stay understandable. Not optimal, but still reasonably usable. However, for sure it will be a problem if your pseudo-table is supposed to be read in another order than DOM order (typically, column-wise vs. row-wise) – QuentinC Apr 21 '23 at 05:55

0 Answers0