(Recommended tutorial: html tutorial)
SVG is an image file format. Its full English name is Scalable Vector Graphics, which means Scalable vector graphics. This article will introduce you to 7 solutions to improve the accessibility of SVG files on web pages.
1. SVG files used as images
If your SVG is imported as the src of
, be sure to
Add role="img"
attribute:
If you do not add role="img"
, some screen readers will not Will recognize
as an image and just read out the alt value.
2. SVG used as an icon
When using SVG as an icon, please use aria-hidden="true"
to hide it from the access device , add a visually-hidden sibling element as a textual semantic description of the icon.
Close
As above, add aria-hidden="true"
to
3. IE BUG
If the web page needs to be compatible with IE, then when using , you need to explicitly add
focusable="false"
attribute.
The reason is: a BUG about SVG in IE browser. As we all know, SVG will not be focused by default, but in IE, if the SVG is contained in focusable elements such as links and buttons, it can be focused using Tab. This leads to the situation where the child element is focused again after the parent element is focused.
4. BUG of Safari 10
In Safari 10, if contains
, be sure to separate them with spaces.
Otherwise, when you use the keyboard Tab to access here, you will not be able to jump to it. It has been fixed in later versions. If your webpage needs to support Safari 10, you need to pay attention to this.
5. SVG used as a picture
Sometimes you need to use the SVG file as a separate picture, then similar to the second item, add a visual hidden element Used as a semantic description.
Simply Accessible
The reason why I did not choose to add a description in the form of is because if
6. Support IE8- browser
In IE8- browser,
...
7. Color contrast
When designing SVG icons, be sure to consider users with color weakness or those used under high contrast black background themes (High Contrast theme) user. For example, when designing icons, consider using a solid background with a brightly colored border.
For more programming-related knowledge, please visit: Introduction to Programming! !
The above is the detailed content of A brief discussion on several methods to improve the accessibility of SVG files on web pages. For more information, please follow other related articles on the PHP Chinese website!