search

material-components / material-components-web

Modular and customizable Material Design UI components for the web
https://material.io/develop/web
MIT License
17.13k stars 2.15k forks source link

Button and Tab components: `text-transform: uppercase` causes some screen readers to spell the word instead of reading it #3698

Open deap82 opened 5 years ago

deap82 commented 5 years ago

I've started looking in to accessibility for a web application where we use a fair amount of MDC Web components. One of the first oddities I stumbled upon was when trying the app using Androids built in screen reader Talkback.

When reading elements that has text-transform: uppercase it often spells the word instead of reading it. There seems to be some kind of whitelist of words that are read as word anyways, but mostly the words are spelled instead of read out, especially in other languages than English.

When it comes to MDC Web this obviously affects components such as Button and Tab.

  1. Are you aware of this issue?
  2. Do you have any plans to address this issue?
  3. Do you have any recommendations on how to handle this in the mean time?
abhiomkar commented 5 years ago

Thanks for reporting this issue @deap82

I'm surprised android screen reader relies on CSS text transform for pronunciation. Also, I guess it spells out the word only when it is not in dictionary.

I recommend using aria-label HTML attribute with normal casing as a work around while we fix our documentation.