feat: add chart #377
feat: add chart #377
Conversation
There was a problem hiding this comment.
Here's a few extra things that should probably be included in this page. If you don't have time to add them just let me know and I will add them before releasing to production.
-
Images of charts - what should the alternative text include? Should there be a longer description somewhere?
-
Interactive charts - how many tab stops? If too many is there a way to bypass the chart? Is the information understandable to screen reader users? Is there a way to access the information in a different form? Problems with information that only appears on hover.
-
Use of color - color is backed up by labels, symbols, patterns or different types of dotted lines. How is color used in heatmaps and is there a way to make that more accessible?
4)Presenting information in different ways
| <p> Here are some ways you can make your charts accessible</p> | ||
| <ol> | ||
| <li>**Use descriptive labels:** Clearly describe significant parts of the chart (e.g., the title and x and y-axises). Make data points and columns distinguishable by using clear labels and different colors. </li> | ||
| <li> **Be selective about color choices:** Use a color contrast checker to ensure that the colors in your chart can be detected by screen readers.</li> |
There was a problem hiding this comment.
Colors cannot be detected by screen readers. Color contrast is important for people with visual impairments or color blindness that find it hard to discern colors. Color should never be the only means to convey information. In the case of graphs/charts having different colored bars and a key is not enough as there's no way to match the colors to the key if you can't distinguish color. Either different patterns can also be used in the case of bar/pie charts, different symbols for each point on a line graph or the label can be attached to each graph segment.
|
Thanks for your work on this Chrissy! I will merge it into a temporary branch for now until I have time to finish off the WCAG section and add anything else about charts I think is relevant. This is so that others can still work from the main branch without conflicts. I'll let you know when it goes into prod. |
* Update ChartsTemplate.tsx * fix: add closing quotation mark * feat: add two sections to chart entry * feat: add content about chart types * feat: add content about comparision chart * feat: add tips on how to make charts accessible online * fix: changed line 5 * fix: made more changes * fix: made some changes * feat: add content about common accessiblity issues * feat: revise part of the accessibility * feat: finish section on accessibility tips * feat: set up list for color accessibility tips * feat: finished content for colors and set up other sections * fix: revise section names for chart entry * feat: add content about presenting information * feat: finished section on recommended resources * feat: started the WCAG criteria
Describe your changes
This PR adds content about charts
Screenshots - If Any (Optional)
Link to issue
Closes #374
Checklist before requesting a review
and it shows no errors.
Additional Information (Optional)
This is still a work in progress