AXE Accessibility Audit - Fix issues

cemalokten commented 1 year ago

Relates to: #107

Overview: These are the accessibility issues currently present on the CMT site, if you are working on these issues please ensure you install the AXE audit plugin for Chrome and continue to test to ensure the issue is fully resolved.

[x] Issue # 1

Description: Ensures every ARIA button, link and menuitem has an accessible name

Fix any of the following:

Element does not have text that is visible to screen readers
aria-label attribute does not exist or is empty
aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
Element has no title attribute

Rule: ARIA commands must have an accessible name

Test URL: https://www.chilternmusictherapy.co.uk/

Source:

  <div class="dropdown-toggle w-dropdown-toggle" id="w-dropdown-toggle-1" aria-controls="w-dropdown-list-1" aria-haspopup="menu" aria-expanded="false" role="button" tabindex="0"></div>

[x] Issue # 2

Description: Ensures every id attribute value of active elements is unique

Fix any of the following:

Document has active elements with the same id attribute: search

Rule: IDs of active elements must be unique

Test URL: https://www.chilternmusictherapy.co.uk/

Source:

  <input type="search" class="menu_search w-input" maxlength="256" name="query" placeholder="Search for something..." id="search" required="">

[x] Issue # 3

Description: Ensures every id attribute value is unique

Fix any of the following:

Document has multiple static elements with the same id attribute: page_header_image

Rule: id attribute value must be unique

Test URL: https://www.chilternmusictherapy.co.uk/

Source:

  <img class="image" src="https://uploads-ssl.webflow.com/61962bf6d2a24d5db73bc048/61e9915dca48280882fb9ee9_shutterstock_378885964_small.jpg" width="0" height="0" alt="" sizes="100vw" id="page_header_image" loading="lazy" srcset="https://uploads-ssl.webflow.com/61962bf6d2a24d5db73bc048/61e9915dca48280882fb9ee9_shutterstock_378885964_small-p-800.jpeg 800w, https://uploads-ssl.webflow.com/61962bf6d2a24d5db73bc048/61e9915dca48280882fb9ee9_shutterstock_378885964_small-p-1080.jpeg 1080w, https://uploads-ssl.webflow.com/61962bf6d2a24d5db73bc048/61e9915dca48280882fb9ee9_shutterstock_378885964_small-p-1600.jpeg 1600w, https://uploads-ssl.webflow.com/61962bf6d2a24d5db73bc048/61e9915dca48280882fb9ee9_shutterstock_378885964_small-p-2000.jpeg 2000w, https://uploads-ssl.webflow.com/61962bf6d2a24d5db73bc048/61e9915dca48280882fb9ee9_shutterstock_378885964_small.jpg 2506w">

[x] Issue # 4

Description: Ensures every id attribute value is unique

Fix any of the following:

Document has multiple static elements with the same id attribute: w-node-ec512063-f79d-3279-1613-bf71616fe9cc-f93bc049

Rule: id attribute value must be unique

Test URL: https://www.chilternmusictherapy.co.uk/

Source:

  <div id="w-node-ec512063-f79d-3279-1613-bf71616fe9cc-f93bc049" role="listitem" class="story_card w-dyn-item">

[x] Issue # 5

Description: Ensures every HTML document has a lang attribute

Fix any of the following:

The <html> element does not have a lang attribute

Rule: <html> element must have a lang attribute

Test URL: https://www.chilternmusictherapy.co.uk/

Source:

  <html data-wf-domain="www.chilternmusictherapy.co.uk" data-wf-page="61962bf6d2a24d1bf93bc049" data-wf-site="61962bf6d2a24d5db73bc048" class="w-mod-js w-mod-ix wf-montserrat-n2-active wf-montserrat-n6-active wf-montserrat-n3-active wf-montserrat-n9-active wf-montserrat-n5-active wf-montserrat-n4-active wf-montserrat-n1-active wf-montserrat-n7-active wf-montserrat-n8-active wf-montserrat-i8-active wf-montserrat-i5-active wf-montserrat-i4-active wf-montserrat-i9-active wf-montserrat-i7-active wf-montserrat-i3-active wf-montserrat-i2-active wf-montserrat-i1-active wf-montserrat-i6-active wf-active brjwrsqaw idc0_347">

[x] Issue # 6

Description: Ensures links have discernible text

Fix all of the following:

Element is in tab order and does not have accessible text

Rule: Links must have discernible text

Test URL: https://www.chilternmusictherapy.co.uk/

Source:

  <a href="#welcome_section" class="arrow_down_button w-button"></a>

[x] Issue # 7

Description: Ensures links have discernible text

Fix all of the following:

Element is in tab order and does not have accessible text

Rule: Links must have discernible text

Test URL: https://www.chilternmusictherapy.co.uk/

Source:

  <a href="https://www.facebook.com/ChilternMusicTherapy/" target="_blank" class="footer_link w-inline-block"><img src="https://uploads-ssl.webflow.com/61962bf6d2a24d5db73bc048/6199434f253a4833dbd22c96_facebook.svg" loading="lazy" alt=""></a>

[x] Issue # 8

Description: Ensures links have discernible text

Fix all of the following:

Element is in tab order and does not have accessible text

Rule: Links must have discernible text

Test URL: https://www.chilternmusictherapy.co.uk/

Source:

  <a href="https://twitter.com/ChilternMusic" target="_blank" class="footer_link w-inline-block"><img src="https://uploads-ssl.webflow.com/61962bf6d2a24d5db73bc048/619b8a0bbb2a7f88f8d42229_twitter.svg" loading="lazy" alt=""></a>

[x] Issue # 9

Description: Ensures links have discernible text

Fix all of the following:

Element is in tab order and does not have accessible text

Rule: Links must have discernible text

Test URL: https://www.chilternmusictherapy.co.uk/

Source:

  <a href="https://www.youtube.com/c/chilternmusictherapy" target="_blank" class="footer_link w-inline-block"><img src="https://uploads-ssl.webflow.com/61962bf6d2a24d5db73bc048/619a2b3e140958373009f441_youtube.svg" loading="lazy" alt=""></a>

[x] Issue # 10

Description: Ensures links have discernible text

Fix all of the following:

Element is in tab order and does not have accessible text

Rule: Links must have discernible text

Test URL: https://www.chilternmusictherapy.co.uk/

Source:

  <a href="https://www.linkedin.com/company/chilternmusictherapy/" target="_blank" class="footer_link w-inline-block"><img src="https://uploads-ssl.webflow.com/61962bf6d2a24d5db73bc048/61d2bcf3d182a234e6079763_linkedin.svg" loading="lazy" alt=""></a>

[x] Issue # 11

Description: Ensures links have discernible text

Fix all of the following:

Element is in tab order and does not have accessible text

Rule: Links must have discernible text

Test URL: https://www.chilternmusictherapy.co.uk/

Source:

  <a href="https://www.instagram.com/chilternmusic/" target="_blank" class="footer_link w-inline-block"><img src="https://uploads-ssl.webflow.com/61962bf6d2a24d5db73bc048/619a2b62c0d05b668aeb3855_instragram.svg" loading="lazy" alt=""></a>

[x] Issue # 12

Description: Ensures interactive controls are not nested as they are not always announced by screen readers or can cause focus problems for assistive technologies

Fix any of the following:

Element has focusable descendants

Rule: Interactive controls must not be nested

Test URL: https://www.chilternmusictherapy.co.uk/

Source:

  <div class="dropdown-toggle w-dropdown-toggle" id="w-dropdown-toggle-2" aria-controls="w-dropdown-list-2" aria-haspopup="menu" aria-expanded="false" role="button" tabindex="0"><a href="/about-us" class="nav_link color_white w-nav-link" style="max-width: 1200px;">About Chiltern</a></div>

cemalokten commented 1 year ago

@cyberteenie

I have resolved all accessibility issues except for three issues:

[x] Interactive controls must not be nested This relates to the drop-down menus which are integral to the current design, I am unsure how to resolve this, @fadeomar are you able to advise on this?
[x] ID attribute value must be unique I have resolved most of these issues but there are some which I cannot fix
[x] Elements must only use allowed ARIA attributes This happens on the home-page and is related to the Youtube video element, which cannot be modified.

cyberteenie commented 1 year ago

Hey @cemalokten thanks for that! Can you have a chat with @fadeomar to see if he might have any suggestions that might help resolve these issues? As our resident Webflow expert, I think he might!

cyberteenie commented 1 year ago

@cemalokten just wondering if you had the chance to speak to Fadi about this?

cemalokten commented 1 year ago

@cyberteenie I messaged him privately to discuss, awaiting a reply

cyberteenie commented 1 year ago

Thanks Cemal!

fadeomar commented 1 year ago

all done @cemalokten @cyberteenie

cyberteenie commented 1 year ago

@katieshuster - just wanted to let you know that we have now sorted all the issues associated with the Accessibility Audit. I will close this issue now.

yalla-coop / chiltern-website

AXE Accessibility Audit - Fix issues #112