The pattern testing for this article did include some combinations of browsers and screen readers that may fall into the “fringe” category, but there are also notes on which combinations of operating systems, browsers, and screen readers are recommended for your own testing. This doesn’t mean you shouldn’t or couldn’t use a screen reader on a different browser, this just means that if you do, the results may not be as accurate as if you used the recommended one(s). It is important to note that part of interpreting the results of the SVG pattern tests is understanding that creators of each screen reader have a recommended browser(s) that they fully support. See the Pen Testing Results by Carie Fisher. None of the patterns in this group completely failed the tests.Pattern 12: + role="img" + + + aria-describedby="".Note: While this pattern is not perfect as it repeated alternative descriptions, it did not ignore any of the elements in the testing, unlike the “use caution” patterns. Pattern 11: + role="img" + + + aria-labelledby="".Pattern 7: + role="img" + + aria-describedby=""Įxtended Alternative Descriptions Using The Tag (Group 3) Best In Show.Pattern 8: + role="img" + + aria-labelledby="".Pattern 4: + role="img" + aria-labelledby=""īasic Alternative Descriptions Using The Tag (Group 2) Best In Show.Pattern 3: + role="img" + aria-label="".Looking over the results table, we can conclude the following: Basic Alternative Descriptions Using The Tag (Group 1) Best In Show There are some clear SVG pattern winners and losers, plus a few patterns somewhere in the middle that you could implement as long as you are aware of, and can accept their limitations. See the full CodePen Accessible SVG Pattern Comparison (Fox Version) by Carie Fisher.īy running various screen readers on different combinations of operating systems and browsers, we see definite patterns emerging in the final results table. Pattern #12: + role="img" + + + aria-describedby="" Pattern #11: + role="img" + + + aria-labelledby="" While the drawback to using this pattern is that you cannot easily control many visual elements or animations as an inline SVG, this pattern should render lighter and faster images overall and allow for easier maintenance on SVGs that you use in multiple locations. This is a good choice for basic, uncomplicated images on your website, app, or other digital product. The first group of four patterns utilizes the tag linking out to an SVG file. Continue reading to discover which SVG patterns you should avoid and which patterns are the most inclusive! Basic Alternative Descriptions Using The Tag Of course, the following examples are not meant to be an exhaustive list of all the possible patterns being used in the digital sphere, but they do highlight some of the more popular or ubiquitous SVG patterns you might encounter. This article outlines twelve distinct SVG patterns found “in the wild” and each alternative description announced when accessed by different combinations of operating systems, browsers, and screen readers. Part of that advancement includes considering the impact of such designs and code on actual humans, aka our end users. Advancements in JavaScript and the introduction of CSS media queries such and have extended the functionality of SVGs way beyond their initial use case of simply displaying vector images on a website.Īs SVG technology advances, our understanding of how we design and develop SVGs needs to advance as well. While Scalable Vector Graphics (SVGs) were first introduced in the late 90s, they have seen a massive resurgence in popularity in the last decade due to their extreme flexibility, high fidelity, and relative lightness in a world where bandwidth and performance matter more than ever. Carie will also be running an online workshop on Accessible Front-End Patterns all around front-end accessibility. Discover which SVG patterns we should avoid and which patterns are the most inclusive when comparing different combinations of OSs, browsers, and screen readers.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |