Анализ страницы https://designsystem.digital.gov/components/data-visualizations/

Data visualizations | U.S. Web Design System (USWDS)

Note: The data visualizations components are guidance-only and do not include any Component Code. The examples of specific visualizations included with our guidance are intended to be a demonstration of one way to implement our guidance with a focus on accessibility and assistive tooling. General guidance Usability and accessibility are complementary goals for data visualizations. Simplicity Prefer common visualization types. Use data visualizations types that your target audience understands. When the level of the audience's data literacy is unknown, stick to well-used types (like line and bar charts) for explanatory visualizations. Don't try to do too much. Limit the 'big idea' expressed in a visualization to a central theme. Use no more than two or three concepts to reduce the cognitive load placed on the audience. Use color with care. Simplify color selection and don't reuse colors for different variables or within a particular variable. If you are finding this difficult, it may indicate too many concepts are present for a single visualization. When selecting colors, be sure to meet contrast requirements. References Choosing Colors  [nightingaledvs.com] Color Contrast and Color Blindness  [venngage.com] Lossless representation Avoid embedded information. Avoid embedding information as part of an image. Provide a textual representation of axis values and labels, and provide the ability to get a tabular representation of the underlying data. Reduce interaction. Even simple interactions have a usability cost. Your audience shouldn't be required to interact with a visualization to understand its message. Presuming the ability to use a mouse to hover over page elements eliminates portions of the audience from the full experience. Clarity of intent Provide context-sensitive explanations. Data visualization authors should consider the audience's experience when providing the background for the information they're sharing. Provide explanations or summaries that make sense to the target audience not just the author. Get to the point. If the visualization is intended to explain a specific point, don't leave the audience guessing as to the conclusion they're meant to draw. Clearly state the author's intended message as text. This avoids unintended ambiguity and helps the audience understand the visualization's intention. Accessibility Solve for individual impacted groups, and be specific in your solutions. Provide equivalent access. Semantic headings and descriptions that provide the author's stated intent support assistive technologies and deliver a clear message to across audiences. Screen readers might have difficulty reading content within an SVG. Provide an screen-reader accessible data table of the information represented in your visualization using the class usa-sr-only. When providing accessible equivalent, you can hide the visualization using the attribute aria-hidden="true". The information in both of the example charts on this page is made accessible to screen readers with a visually-hidden table. Note: This is not always a sufficient alternative for complex data sets. Provide equivalent facilitation. Access to the underlying data provides an alternative affordance for consuming the same information, but a data table does not provide an equivalent narrative to a visualization. Increase accessibility by providing additional information that the visualization communicates (like trends or a statistical summary) in plain text, using a screen reader–only class like .usa-sr-only. Focus on manual testing. Become familiar with testing tools and browser plugins. But only manual testing can check context and intent. The use of automated or mechanical checks can verify the presence of tags, not the proper content. Choose an accessible charting tool. There are many charting tools available, but not many adequately support accessibility. When using a 3rd-party tool, look for features such as: Support for accessible patterns and colors Sonification as a audio tool for visual impairment and analysis  [perkinselearning.org] Announcement handling References Accessibility for Teams  [digital.gov] 508 testing  [section508.gov] Accessibility testing with tab key  [matuzo.at] United States Access Board  [access-board.gov]

https://designsystem.digital.gov/components/data-visualizations/

Ошибок нет

width=device-width, initial-scale=1.0

Кол-во: 7

Кол-во: 17