Accessibility - Githubissues

The application needs to meet AA accessibility standards. We should investigate the appropriate tools we want to implement. For now, we conducted an assessment with the EqualWeb chrome extension and the following issues were raised, organised by view:

Overall

Contrast on navbar headers (4.5:1)
within <head> block for each page **Predict** </li> <li>two submit buttons with same ID - leverage django form prefixes</li> <li>3 of 4 blue boxed filter fields are not accessible to screen readers: "This searchinput element does not have a name available to an accessibility API. Valid names are: label element, title undefined, aria-label undefined, aria-labelledby undefined." (<a rel="noreferrer nofollow" target="_blank" href="https://www.w3.org/WAI/standards-guidelines/act/rules/e086e5/">Further reading</a> on this one) <strong>Scenarios</strong></li> <li>Anchor element found with a valid href attribute, but no link content has been supplied. Link with a href attribute, but without link text. This means it does not have an accessibility API "name". <strong>Historic Data</strong></li> <li>search elements need valid names (same as predict)</li> <li>anchor elements with no link and no name/id (same as scenarios) <strong>Adjusted</strong></li> <li>search elements need valid names</li> <li>anchor elements with no link and no name/id</li> <li>two submit buttons with same ID (same as predict)</li> <li>two elements with id="efficiency-hub-table"</li> <li>"The relationship between td elements and their associated th elements is not defined. As this table has multiple levels of th elements, you must use the headers attribute on td elements. Table where not all TH elements contain IDs"." <strong>Costs</strong></li> <li>td elements (same as adjusted)</li> <li>anchor elements with no links</li> <li>two elements with id="efficiency-hub-table" and id="symbol"</li> </ul> </div> </div> <div class="page-bar-simple"> </div> <div class="footer"> <ul class="body"> <li>© <script> document.write(new Date().getFullYear()) </script> Githubissues.</li> <li>Githubissues is a development platform for aggregating issues.</li> </ul> </div> <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script> <script src="/githubissues/assets/js.js"></script> <script src="/githubissues/assets/markdown.js"></script> <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.4.0/build/highlight.min.js"></script> <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.4.0/build/languages/go.min.js"></script> <script> hljs.highlightAll(); </script> </body> </html>

SocialFinanceDigitalLabs / cs-demand-model-regional

Accessibility #95