2

Ionic Version: v4 with angular 8

Issue: while trying to make a website built with ionic accessible i found that ionic components like date picker and ionic radio button are not accessible via screen readers. the screen reader identifies the component as a button. I think this is due to an empty button element inside the markup of these components.

My Trials: added a label to the date picker, added aria-label on the date picker, lastly tried aria described by nothing worked and the screen reader still reads the date picker as button

So is there a way to solve this?

saivishnu tammineni
  • 1,092
  • 7
  • 14
  • i know it is a little bit of work but setting up a fiddle that reproduces the problem would be a good idea so we can see the problem. At the moment you have limited your question to people who have used ionic4, angular and know about accessibility so you might not get an answer. At the moment the answer to your question is "yes, there is a way to solve this" :-P. – GrahamTheDev Jun 10 '20 at 06:12
  • the reproduction can be found on https://ionicframework.com/docs/api/datetime. :P if a screen reader is used it shouts out that date picker is a button – saivishnu tammineni Jun 10 '20 at 11:06
  • that is because they hide the input so the only thing that is focusable is the button (and you are right it is because it is empty). What you could do is add some text to the button (i.e. "open datepicker") within a span and then visually hide the text. You then have the problem that the whole datepicker itself is a complete mess of buttons within divs but that should fix your immediate problem :-P See https://stackoverflow.com/a/62109988/2702894 for a better visually hidden class. Alternatively you could add an aria-label *to the button* but visually hidden text in a span is more reliable. – GrahamTheDev Jun 10 '20 at 12:22
  • @GrahamRitchie thanks for the comment. but the button which causes this is part of the template of ion-datepicker which i cannot change. Or do you want me to add another button? – saivishnu tammineni Jun 11 '20 at 06:08
  • You would have to change the template. The only workaround I can think of is to do it with JavaScript and add the label / hidden text there. To be fair the whole component is a complete mess from an accessibility perspective, as I said the whole thing is just a load of buttons. The only other thing is to visually hide the whole datepicker widget and add a separate visually hidden input that binds to the same places. That would probably be your best option for screen readers although not ideal as the visual design would be confusing for those who use a screen reader who are sighted. – GrahamTheDev Jun 11 '20 at 07:47
  • @GrahamRitchie thanks for your interest again. the ionic components are used all over the project. so i will have to create a module which does any changes to ionic components and export them and use these components across app. also need to see how shadow dom plays here. thanks. will raise a issue in the ionic repo. – saivishnu tammineni Jun 11 '20 at 10:09

0 Answers0