Re: HTML Document Question: How should I code this?

Not sure if I understood correctly but I always like to make use of the
html semantics. I would do something like this if the design would allow the
whole list item look like a “card” or button (so clicking anywhere in the
<li> should activate the link), you can do this in an accessible way:
#HTML

<ol>
    <li>
    <a href="/page1" class="card-link">
      <h2>Page 1</h2>
      <p>for our comments</p>
    </a>
  </li>
  <li>
    <a href="/page2" class="card-link">
      <h2>Page 2</h2>
      <p>for our comments</p>
    </a>
  </li>
</ol>

Then style it like this:
#CSS

..card-link {
  display: block;        /* makes the entire area clickable */
  text-decoration: none;
  color: inherit;
  padding: 1rem;
  border-radius: 3px;
}
..card-link:hover,
..card-link:focus {
  background: #f0f0f0;
  outline: 2px solid #005fcc; /* visible focus for keyboard users */
}

Hope it helps,
Pedro Matias

On Fri, 10 Oct 2025 at 13:42, Janina Sajka <janina@a11y.nyc> wrote:

> Lionel Wolberger writes:
> > Sounding like a table with <tr> and <td>.
> >
> Could be, I suppose. I tend to dislike tables because they can be hard
> work for the screen reader user.
>
> I'm hoping for a solution that allows a simple, top to bottom reading
> that communicates sense.
>
> For now I have the two Federal citations in a li element, so they should
> display bulleted, with our comments following in an aside element.
>
> i have no idea how that looks to the visual reader, though.
>
> > From: Janina Sajka <janina@a11y.nyc>
> > Date: Friday, October 10, 2025 at 12:10
> > To: Accessibility at the Edge <public-a11yedge@w3.org>
> > Cc: APA Chairs <group-apa-chairs@w3.org>, Lionel Wolberger <
> lionel@userway.org>, Jason Taylor <jason@usablenet.com>
> > Subject: HTML Document Question: How should I code this?
> >
> > CAUTION: This email originated from outside of the organization. Do not
> click links or open attachments unless you recognize the sender and know
> the content is safe.
> >
> >
> > WARNING: The sender of this email could not be validated and may not
> match the person in the "From" field.
> >
> >
> > I need a bit of html coding advice for the forthcoming A11yEdge document
> ...
> >
> > I have two items I want to list out, naming each and putting anchor tags
> > pointing to the referenced items.
> >
> > Below each item I want to show the community group's comments on eachof
> > those two listed items.
> >
> > How best to code that?
> >
> > I'm thinking ...
> >
> > <ol>
> >
> > <li> Blah ... <a> ... </a> ...
> >
> > <p> for our comments </p></li>
> >
> >
> > Repeat the above for the second li and close </ol>
> >
> > Is that acceptable? Is there a better approach?
> >
> >
> > --
> >
> > Janina Sajka (she/her/hers)
> > Accessibility Consultant https://linkedin.com/in/jsajka
> >
> > The World Wide Web Consortium (W3C), Web Accessibility Initiative (WAI)
> > Co-Chair, Accessible Platform Architectures
> http://www.w3.org/wai/apa
> >
> > Linux Foundation Fellow
> > https://www.linuxfoundation.org/board-of-directors-2/
> >
>
> --
>
> Janina Sajka (she/her/hers)
> Accessibility Consultant https://linkedin.com/in/jsajka
>
> The World Wide Web Consortium (W3C), Web Accessibility Initiative (WAI)
> Co-Chair, Accessible Platform Architectures     http://www.w3.org/wai/apa
>
> Linux Foundation Fellow
> https://www.linuxfoundation.org/board-of-directors-2/
>
>
>

-- 
Pedro Matias
(+351) 963 009 898

https://pedromatias.dev