Button text in Upper case letters not read as words by screen readers [NVDA]

Question

I have a button who text should be visible in uppercase as "LOG OUT". But, when the button gets focused using TAB press, NVDA screen-reader reads it as character by character as "L", "O", "G", "O","U", "T" instead of two words "LOG" and "OUT".

Demo for the issue.

HTML:

<div ng-controller="AppCtrl" ng-cloak="" ng-app="MyApp">
      <md-button tab-index="0" role="button">Log out</md-button> 
</div>

JS:

angular.module('MyApp', ['ngMaterial'])
.controller('AppCtrl', function($scope) {
});

Try setting the `aria-label` attribute to "log out". – G. Tranter Jul 05 '18 at 17:26 — G. Tranter, Jul 05 '18 at 17:26

score 1 · Accepted Answer · answered Jul 06 '18 at 13:39

1

You can use the aria-label property to override the text content:

<md-button tab-index="0" role="button" aria-label="log out">Log out</md-button>

answered Jul 06 '18 at 13:39

G. Tranter

16,766
1
48
68

Button text in Upper case letters not read as words by screen readers [NVDA]

1 Answers1