Discovery: Run accessibility tests on dashboards - Githubissues

NuCivic / react-dash

A framework for building data visualization dashboards using react. Docs: http://react-dashboard.readthedocs.io/en/latest/

MIT License

98 stars 22 forks source link

Discovery: Run accessibility tests on dashboards #81

Closed iris-i closed 6 years ago

iris-i commented 6 years ago

https://chrome.google.com/webstore/detail/wave-evaluation-tool/jbbplnpkjmmeebjpijfedlgcdilocofh

janette commented 6 years ago

@iris-i are you just looking for a list of red flagged items here?

iris-i commented 6 years ago

@janette Yep. We can then create tickets to fix any issues we find.

janette commented 6 years ago

dashboard/physician

NO red flagged items with WAVE

codesniffer results

insufficient contrast: <p style="color:red">This information is obtained fr...</p>
insufficient contrast:<div class="card-metric-caption">TOTAL TPC</div>
insufficient contrast: <div class="card-metric-caption">PHYS / 100K</div>

dashboard/summary

NO red flagged items with WAVE

codesniffer results

insufficient contrast: <span class="Select-clear">×</span> (school & data select)
insufficient contrast: <div class="card-metric-caption">Academics</div> (academics and financials metric boxes)
insufficient contrast: <div class="public_fixedDataTableCell_cellContent">70-100</div> (scoring key - meets standards column with #339900 background) codesniffer suggests #2d8800

dashboard/academics

dashboard/financials

dashboard/operations

NO red flagged items with WAVE

codesniffer results

same contrast issues with the drop down 'clear' links
same contrast issues with the lighter green background with white text
contrast issue with the light red background (#9f3e69) with white text

iris-i commented 6 years ago

Created a ticket to fix these issues: https://waffle.io/NuCivic/dkan_management/cards/59ea266349c9af00abaa1e99 Closing this.