RE: Ignore HTML elements in mobile devices

Hi,

If I understand correctly, you want to hide an image that has no value for screen reader users so that it still appears visually but is not encountered on touch screen devices like VoiceOver?

 

The tabindex attribute will only effect operating systems that include native keyboard support, like Windows, but won’t do anything on a mobile device like iOS, since the interaction model is different.

 

So, to hide the image from ATs, simply add aria-hidden=”true” to the IMG tag, and that will remove the image from the Accessibility Tree so that screen readers won’t detect it, even if it still appears visually.

 

Reference:

http://www.w3.org/TR/wai-aria/states_and_properties#aria-hidden

 

Since an IMG tag is a static element, it isn’t automatically focusable in the browser anyway, so there is no need for the tabindex attribute at all, so I’d recommend dispensing with that.

 

Best wishes,

Bryan

 

From: Oscar Cao [mailto:oscar.cao@live.com] 
Sent: Sunday, September 07, 2014 9:06 PM
To: Rodrigo Prestes Machado; w3c-wai-ig@w3.org
Subject: RE: Ignore HTML elements in mobile devices

 

Oh sorry. I thought you were referring to navigation. The tabindex is only for tabbing via keyboard. It won't affect users clicking or tapping the element itself. Only way I know of making an image to be not read out is to make it a background image.

If you find a solution, please do share.

Thanks,
Oscar

Sent from my Windows Phone

  _____  

From: Rodrigo Prestes Machado <mailto:rodrigo.prestes@gmail.com> 
Sent: ‎8/‎09/‎2014 1:50 PM
To: w3c-wai-ig@w3.org
Subject: Re: Ignore HTML elements in mobile devices

Thank you guys. 

 

I have tried to set tabindex to -1 and 0, but the VoiceOver in IPad (mini) keep reading the node when I touch, it can be an issue of VoiceOver with Safari to IPad. I will try to test in other kinds of devices.

 

Thanks

Rodrigo

 

Em 07/09/2014, à(s) 22:27, Oscar Cao <oscar.cao@live.com> escreveu:





Yes. That is correct. I should have been more clear.

-1 is to remove from being focusable altogether.
0 is to let the browser decide the order based on markup structure.

Regards,
Oscar

Sent from my Windows Phone

  _____  

From: Corey Collins <mailto:ccollins@usc.edu.au> 
Sent: ‎8/‎09/‎2014 11:23 AM
To: Oscar Cao <mailto:oscar.cao@live.com> ; Rodrigo Prestes Machado <mailto:rodrigo.prestes@gmail.com> ; w3c-wai-ig@w3.org
Subject: RE: Ignore HTML elements in mobile devices

Would it also need to be a tabindex=”-1” to remove it from the navigation flow?

 

Reference: http://webaim.org/techniques/keyboard/tabindex

Corey Collins
Adaptive Technologies Specialist
Student Life and Learning
University of the Sunshine Coast
Tel: +61 7 5456 5383 | Email: ccollins@usc.edu.au | Web: www.usc.edu.au <http://www.usc.edu.au/> 

 

From: Oscar Cao [mailto:oscar.cao@live.com] 
Sent: Monday, 8 September 2014 11:04 AM
To: Rodrigo Prestes Machado; w3c-wai-ig@w3.org
Subject: RE: Ignore HTML elements in mobile devices

 

Hi Rodrigo

You only need the tabindex if it's an interactive element and do not want users to be able to tab to it.
Hope that helps.

Regards,
Oscar

Sent from my Windows Phone

  _____  

From: Rodrigo Prestes Machado <mailto:rodrigo.prestes@gmail.com> 
Sent: ‎8/‎09/‎2014 10:47 AM
To: w3c-wai-ig@w3.org
Subject: Re: Ignore HTML elements in mobile devices

Thanks Corey!

 

With a image, the alt=“” will be enough, but, do you know if we have a tabindex=“0” equivalente for touch events in ARIA?

 

Regards, 

Rodrigo

 

 

Em 07/09/2014, à(s) 20:55, Corey Collins <ccollins@usc.edu.au> escreveu:

 

Hi Rodrigo

 

Referencing an image within a CSS style will be ignored by a screen reader.

 

If the image is not being referenced in a CSS style, an empty alt will suffice but make sure you utilise the alt attribute (alt=””) or the image file name may be read-out.

 

Thanks.

Corey Collins
Adaptive Technologies Specialist
Student Life and Learning
University of the Sunshine Coast
Tel: +61 7 5456 5383 | Email:  <mailto:ccollins@usc.edu.au> ccollins@usc.edu.au | Web:  <http://www.usc.edu.au/> www.usc.edu.au

 

From: Rodrigo Prestes Machado [mailto:rodrigo.prestes@gmail.com] 
Sent: Monday, 8 September 2014 9:18 AM
To: w3c-wai-ig@w3.org
Subject: Ignore HTML elements in mobile devices

 

Dear Colleagues,

 

I'm new in accessibility, so, I'm sorry if my question is too basic. How can i ignore an element, for example, a image, in screen readers for mobile devices (VoiceOver or TalkBack). Sometimes we need to ignore element used just to style the page, so I need something similar tabindex=“0” but for touch events.

 

Best regards,

Rodrigo

 

-- 

Rodrigo Prestes Machado
Instituto Federal de Educação, Ciência e Tecnologia - Câmpus Porto Alegre
Endereço: Sala 708, Rua Cel. Vicente, 281, Centro, Porto Alegre - RS - Brasil, CEP: 90.030-040
Site:  <http://www.inf.poa.ifrs.edu.br/~rodrigo> http://www.inf.poa.ifrs.edu.br/~rodrigo
Telefone: +55 51 3930-6043

University of the Sunshine Coast, Locked Bag 4, Maroochydore DC, Queensland, 4558 Australia.
CRICOS Provider No: 01595D
Please consider the environment before printing this email.
This email is confidential. If received in error, please delete it from your system.

 

University of the Sunshine Coast, Locked Bag 4, Maroochydore DC, Queensland, 4558 Australia.
CRICOS Provider No: 01595D
Please consider the environment before printing this email.
This email is confidential. If received in error, please delete it from your system.