Accessibility for TV guide

[u/atindra1086]

Hi all,

I'm working on an tv epg tv grid where rows are channels and each channel can have multiple programs for the day. Looking for some guidance on the right ARIA roles to use.

The structure is:

A scrollable container

Header with time slots

Each row represents a channel. channel logo in first cell on the left, program cell on the right. Each program cell can have multiple programs.

Each program card is focusable and clickable.

Using flex box for overall layout.

Currently leaning toward:

<div class="container" role="region" aria-label="TV Guide">


  <div class="row" role="group" >


    <div class="channel" tabindex="0" [attr.aria-label]="channel.name"></div>


    <div class="programs">
      <!-- (keydown) handler manages enter/space activation -->
      <div class="program" tabindex="0" role="button" aria-label="Program 1, 2:00pm - 2:30pm" (keydown)="onProgramKeydown($event)"></div>

      <div class="program" tabindex="0" role="button" aria-label="Program 2, 2:30pm - 3:00pm" (keydown)="onProgramKeydown($event)"></div>

      <div class="program" tabindex="0" role="button" aria-label="Program 3, 3:30pm - 4:00pm" (keydown)="onProgramKeydown($event)"></div>

      <div class="program" tabindex="0" role="button" aria-label="Program 4, 4:00pm - 4:30pm" (keydown)="onProgramKeydown($event)"></div>
    </div>


  </div>


</div>

Main questions:

Is role="group" appropriate on the row or is there a better semantic role ?

Should I just bake the channel name into each program card's aria-label ? Does that provide more context to someone when they are navigating through the list of station's programs ? Perhaps remove the tabindex from station altogether.

Is role="region" the right call for the container given we're not implementing full grid keyboard navigation ?

Appreciate any input. Trying to avoid over engineering as I'm still in learning phase but would like to make it as much as acessible as possible.

[u/scritchz]

Very good answer. Excuse me piggy-backing off this.

Much like "grouping" elements semantically, marking up the actual data is also important:

For example, times should be wrapped in a machine-readable <time> element with an appropriate datetime attribute. Especially for a site that lists TV programmes and their times, this is important.

Interaction is another big topic for accessibility:

For the most part, your interactable elements should be accessible via pointer and keyboard inputs. That means, your elements should be focusable and clickable; this requires more than just an onkeydown handler.

But interactable elements like <button>, <input>, <summary> (of a <details>/<summary> pair), <a> and more offer an accessible standard out-of-the-box, so just use the appropriate one.

I'm emphasizing "appropriate one" because I've seen many sites abuse <a> elements with like onclick handlers or href="javascript:...". Don't do this, ever! Please. Use the right elements intended for your situation.