IDEA GATHERING: Buttons need to have a meaningful label or description

[mariathecitizen]

What is the problem?
Scanned our test environment using axe-core (https://github.com/dequelabs/axe-core) and Playwright (https://github.com/microsoft/playwright)

The following pages related to Idea Gathering were scanned

1. test.app.citizenos.com/en/topics
2. test.app.citizenos.com/en/topics/ideation/create
3. test.app.citizenos.com/en/topics/ideation/edit/
4. test.app.citizenos.com/en/topics/[topic-id]#ideation
5. test.app.citizenos.com/en/topics/[topic-id]/ideas/[idea-id]

List of buttons missing meaningful labels or descriptions

1. .btn_medium_nav
2. #user_info_area > button
3. .btn_medium_close.icon[_ngcontent-ng-c3390327874=""]
4. .search_start
5. .btn_idea_like
6. .idea_header_left > .btn_small_plain[_ngcontent-ng-c3136057725=""]
7. .btn_small_plain.icon[_ngcontent-ng-c3136057725=""]
8. .btn_medium_submit_ghost.close_button.icon
9. .btn_idea_like[_ngcontent-ng-c3136057725=""]
10. .idea_header_left[_ngcontent-ng-c3136057725=""] > .btn_small_plain[_ngcontent-ng-c3136057725=""]
11. .buttons_left > .btn_idea_select.btn_medium_close.icon
12. .mobile_hidden.btn_medium_close.icon
13. .buttons_right > .btn_idea_select.btn_medium_close.icon
14. .idea_header_left[_ngcontent-ng-c3745156968=""] > .btn_small_plain[_ngcontent-ng-c3745156968=""]
15. .buttons_wrap.tablet_hidden.ng-tns-c749924937-7 > .btn_medium_plain:nth-child(2)
16. #close_create > .btn_medium_submit_ghost
17. #navigate_create > .btn_medium_submit_ghost
18. .btn_medium_submit.tablet_hidden:nth-child(2)
19. .buttons_wrap.tablet_hidden.ng-tns-c749924937-2 > .btn_medium_plain:nth-child(2)
20. .btn_medium_submit.tablet_hidden:nth-child(2)
21. .buttons_right > .btn_idea_select.btn_medium_close.icon
22. .btn_medium_nav
23. .cos_cal_month_selector > button:nth-child(1)
24. #show_search
25. .btn_big_secondary
26. .button_dropdown.dropdown[_ngcontent-ng-c3745156968=""] > .btn_small_plain.icon
27. .like_wrap[_ngcontent-ng-c3745156968=""] > .btn_idea_like

Why is this a problem?

1. Screen readers may announce it as "Button...." with no context
2. Some keyboard or voice tools may not be able to use it without a meaningful description

Possible solution.
As per axe-core (https://github.com/dequelabs/axe-core) suggestions, any of the following should be fixed

• Element does not have inner 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
  

• Element does not have an implicit (wrapped) <label>
  

• Element does not have an explicit <label>
  

• Element's default semantics were not overridden with role="none" or role="presentation"