Usage Of Alt Attribute For SVG Elements Is Not Allowed #5569 - GitHub

Trang chủ » Html Svg Tag Alt Attribute » Usage Of Alt Attribute For SVG Elements Is Not Allowed #5569 - GitHub

Có thể bạn quan tâm

Skip to content Dismiss alert {{ message }} / bootstrap-vue Public

  • Uh oh!

    There was an error while loading. Please reload this page.

  • Notifications You must be signed in to change notification settings
  • Fork 1.9k
  • Star 14.5k
  • Code
  • Issues 178
  • Pull requests 18
  • Discussions
  • Actions
  • Projects
  • Security

    Uh oh!

    There was an error while loading. Please reload this page.

  • Insights
Additional navigation options Usage of alt attribute for SVG elements is not allowed #5569New issueNew issueClosed#5581ClosedUsage of alt attribute for SVG elements is not allowed#5569#5581LabelsType: AccessibilityType: Bug@RillingDev

Description

@RillingDevRillingDevopened on Jul 9, 2020

Describe the bug

According to the spec. the alt attribute is not allowed for <svg> elements: https://www.w3.org/TR/html52/semantics-embedded-content.html#the-img-element https://www.w3.org/TR/SVG2/struct.html#elementdef-svg

According to this stack-overflow answer, the best approach seems to be usage of a mixture of <title>,<desc> and the aria-label attribute.

Steps to reproduce the bug

  1. Go to https://bootstrap-vue.org/docs/icons
  2. Use "Inspect Element" on one of the icons, selecting the <svg> tag
  3. Check if an alt attribute is set

Expected behavior

No alt attribute is set, instead an aria-label attribute is set and optionally the <title> and <desc> are included in the SVG contents.

Versions

Libraries:

  • BootstrapVue: 2.15.0
  • Bootstrap: 4.5.0
  • Vue: 2.6.11

Environment:

  • Device: Desktop PC
  • OS: Arch Linux
  • Browser: Firefox
  • Version: 78

Demo link

Can be reproduced on https://bootstrap-vue.org/docs/icons

Additional context

As additional note, I'd like to ask if it is possible to also use the icon name in the label? by default right now the value of alt is just "icon" which provides very little context to a screen reader user.

Metadata

Metadata

Assignees

No one assigned

Labels

Type: AccessibilityType: Bug

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions

You can’t perform that action at this time.

Từ khóa » Html Svg Tag Alt Attribute