gpt4 book ai didi

html - 星级评定组件 - 要使用的正确可访问性和语义是什么

转载 作者:行者123 更新时间:2023-12-04 21:29:56 25 4
gpt4 key购买 nike

我有一个当前具有以下语义的星级组件。 SVG 只是星星。

<div role='img' aria-label="6 out of 6 ratings">
<svg role="presentation"></svg>
<svg role="presentation"></svg>
<svg role="presentation"></svg>
<svg role="presentation"></svg>
<svg role="presentation"></svg>
<svg role="presentation"></svg>
</div>

我用过 role='img' aria 角色,因为我想理想地将此图像视为一个图像。然后我使用了 role='presentation'咏叹调上的角色 SVG因为我认为 SVG 本身并没有提供额外的信息,所以想要删除 SVG 及其子元素的语义。我读到了 presentation role这里。

我读了 article关于 SVG 可访问性,它们采用略有不同的方法。他们给出的例子如下:
<body>
...
<svg xmlns=http://www.w3.org/2000/svg role="img" aria-labelledby="title desc">
<title id="title">Circle</title>
<desc id="desc">Large red circle with a black border</desc>
<circle role="presentation" cy="60" r="55" stroke="black" stroke-width="2"
fill="red" />
</svg>

</body>
  • 他们使用 role='img在 svg 上。我相信这不适用于我的情况,最好保留 role='presentation'在我的 SVG 上?
  • 他们使用 titledesc .我相信作为单星SVG它不会为用户提供任何额外的好处?同样将鼠标悬停在 SVG 上会显示我不想要的标题(和 desc?)。

  • 回到我目前如何拥有它的例子:
  • 我可以做些什么来改进可访问性/语义设计以使其更加用户友好?
  • 我是否为容器和 SVG 正确使用了正确的 aria 角色?
  • 对于要读出的 aria-label,我是否应该能够浏览我的评级图像(作为一个整体)?
  • 我还应该使用其他 aria 属性吗?

  • 查看 semantic-ui 上的示例,据我所知,他们没有咏叹调角色。

    最佳答案

    The MDN Web docs for img role有一个链接到 star rating role="img" example

    他们使用 aria-hidden而不是 role="presentation"
    根据规范,img角色应该已经使其children presentational

    我想补充一点,可访问性不仅仅意味着可供屏幕阅读器访问。例如,MDN 示例中的“3 个黑人明星,2 个白人明星”是人们可能无法理解的(例如,人们自然地从右到左阅读)。

    "Grandma: Honey, Is it better to have 5 white stars, or 5 black stars?"



    我会说在评级旁边添加“注意:3/5”可能会有所帮助。

    关于html - 星级评定组件 - 要使用的正确可访问性和语义是什么,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55966205/

    25 4 0
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com