Aria-label gives a DAP violation for <option> tag in dropdown

Question

I am doing Accessibility testing for an Angular project at work. We use JAWS screen reader. We also use a plugin that identifies issues in the UI and reports them as violations. I am getting one for dropdowns that I'm not able to resolve. It is Accessible name does not match or contain the visible label text.

The code I have for the dropdown is:

<select *ngIf="!viewMode" formControlName="group" placeholder="select" id="group" data-placement="right">
    <option value="" [selected]>Select</option>
    <option attr.aria-label="{{group.title}}" *ngFor="let group of records" 
     [ngValue]="group" data-placement="right" data-toggle="tooltip" title="{{group.title}}">
         {{group.title | slice:0:30}}
         <span *ngIf="group.title.length > 30">...</span>
    </option>
</select>

We truncate the text of group.title and add ellipses ... if the entire title doesn't fit the fixed width of dropdown. The aria-label however always has the full title assigned.

Eg. if we have title as Psychology, maximum characters that we display are 6. Then dropdown will show Psycho... but the aria-label will stil be `Psychology.

My issue is that whenever the displayed title gets truncated I get a violation as title doesn't match the aria-label. If I remove the aria-label the screen reader only reads what is displayed, so it ends up reading the ellipses as dot dot dot which we don't want. I tried to use a hidden label instead on aria-label inside the option tag but that didn't work. Can anyone help me with a workaround??

Answer 1

Ideal answer

You shouldn't have to manually truncate labels, because that's a pure visual artifact to cop with insufficient space.

CSS should ideally be able to handle this case for you automatically, so that you would just write the full label and don't care at all.

The CSS to do that exists. The property is called text-overflow with the value èllipsis`. Example here

However, very often, and even in recent browsers, CSS support for <option> is very limited and incomplete. IN some browsers, you are even not allowed to change text color. So, applying text-overflow: ellipsis certainly won't work, sadly. IN a ideal world this would be by far the best solution.

Second best answer

You shouldn't have to manually truncate labels. If it can't be done automatically for you in CSS in case you lack space, the next best would probably be to reorganize your layout to make sure you have enough space to see entirely the longest label.

You may have a different aria-label than visible text, but generally it isn't recommanded. Hance the warning of your accessibility checker to remind it to you.

It isn't recommanded because several groups of people can have difficulties. For example, partially sighted people or those having dyslexia, who rely both on visible text and speech synthesis, will read the abbreviation but hear the full tex. It can be very confusing.

Third answer

If you really can't rearrange your layout to make all labels visible in full text, ignore the warning, leave the full text in aria-label and the shortened text visible as it is currently. There are problems for several groups of people, well, but it isn't so bad afterall. It would probably be much worse for accessibility if you decided to switch your <select< for a custom component.

So I would still strongly advice you to keep your <select> whatever the situation. Blind people and keyboard only users will thank you.

However, always remember that warnings are never present for nothing. They point you to a potential problem you'd better to solve. This is definitly not a false positive!