基本上你有两个问题。
按钮并不是为了在其中包含大量内容而设计的，并且该按钮是标准的
<button>请记住，屏幕阅读器在聚焦时会一次性读取按钮的全部内容，在按钮列表中创建一个巨大的标签以供单击，而且您可能需要大声说出全部内容才能激活语音控制。
当阅读信息量很大的长篇内容时，不清楚点击会执行什么操作。它会打开一个包含更多详细信息的页面吗？产品是直接加入购物车吗？是否会在没有任何其他确认的情况下立即发射火箭导弹？ 即使实际执行的操作被清楚地写在中间的某个地方，它也会被其他所有操作淹没而难以察觉。
因此，按钮的内容必须简短，直接告诉你点击后会发生什么，否则实际上就无法访问，或者使用起来非常痛苦。
你不能简单地说一个按钮可以有任意内容。您应该防止这种情况发生，或者完全改变您的设计。 事实上，一旦按钮内有另一个交互元素，您就会遇到问题。这就是众所周知的嵌套交互区域问题，必须不惜一切代价避免。
所有这些问题都没有明确的答案。有时您希望答案是“是”，有时则希望答案是“否”。违背默认行为是很困难的，也不建议这样做。不同的浏览器/操作系统/等可能会有所不同。
您现在应该已经明白，完全可点击的卡片不应被视为按钮。您不应使用
<button><input type="button"/>role=button tabindex=0即使你以任何方式阻止嵌套的交互元素，单张卡片作为整体读取所给出的信息的长度和信息量仍然是一个问题
一个可能的解决方案是保持整个卡片像现在一样可点击，但不要使其可聚焦。但是，请务必小心，因为这样做后，屏幕阅读器和仅使用键盘的用户等将无法再访问它。 您必须提供另一种方式来打开该卡。您可以非常简单地在某处添加明确的“更多详细信息”链接或按钮，或者使用文章标题作为链接等。
例如参见这个问题和链接的文章。 示例中的卡片保持完全可点击，但只有屏幕阅读器和键盘用户与标题链接（即文章的标题）进行交互。 这也可能是适合您的情况的解决方案。