The table stays a real HTML table. Semantic markup, header cells, headers and scope attributes are kept.
Side-scrolling: the scroll area is a focusable, named region (role="region"), so keyboard users can scroll it with the arrow keys. Its name comes from the table's caption, then its aria-label, then the Screen reader name setting.
Cards: the visual labels are added for sighted users, and screen readers still get the column headings. Card tables don't add an extra tab stop.
More details: uses the native <details> and <summary> elements, which work with a keyboard and screen readers. A hidden screen-reader-only label is included.
Choose a Label color with enough contrast against your Card background.
Adding a <caption> to data tables is good practice, and it gives the scroll area a meaningful name.