Feature - Improve Accessibility for Screenreaders

[paulbauriegel]

Improve Accessibility for Screenreaders - Description & some structure via Aria-Attributes

We are currently in the internal review in Deutsche Telekom how to enable people with disabilities for our annotation process. One key-part will be better usability with screen-readers. This PR tries to enable basic functionality via aria attributes. I tried to not touch the current HTML structure too much, but it might make sense to change some of the aria-role="button" to actual html button. This would be the first of a couple of PR that we are proposing. In future PR we would also want to add a MR for a high contrast mode, and some optimizations for keyboard navigation for blind people.

Scope of this one: Description & some structure via Aria-Attributes.

• For a lot of icons in buttons: I added aria-hidden="true" as there are not relevant for the screenreader
• The buttons and many other UI elements got a screenreader description via aria-label
• For some items I added a aria-role such as role="button" or role="table"
• There are some additional aria attributes such as:
  • aria-expanded for collapse panel & drop-down menues
  • or aria-multiselectable for multi-select labels

Next steps - one at a time:

• Aria Labels are not multi-lingual yet.
• It does not fix the tabindex order or general problems with keyboard navigation for blind people.
• high contrast mode fixes
• Skip links for Screenreaders
• Alt Text for Image Field

We will most likely receive more feedback in our internal review process that we will also try to integrate then.

Type of change

• New feature (non-breaking change which adds functionality)

How Has This Been Tested Local Frontend Build w. Firefox tested w. VoiceOver

Checklist

• I added relevant documentation
• I followed the style guidelines of this project
• I did a self-review of my code
• I made corresponding changes to the documentation
• I confirm My changes generate no new warnings
• I have added tests that prove my fix is effective or that my feature works
• I have added relevant notes to the CHANGELOG.md file (See https://keepachangelog.com/)

[leiyre]

Hi @paulbauriegel, this is great and the proposed future MRs sound awesome. Feel free to move from draft to ready for review whenever you want. Thanks!

[paulbauriegel]

@leiyre It's ready to be reviewed from my side. Let me know what you think.

[leiyre]

Hi @paulbauriegel, It looks great to me. I will review the HTML and change some tags in other PR. Thank you for this contribution