Monday, February 20, 2012

aria-hidden and role="presentation"

John Foliot pinged me about his blog post devoted to ARIA techniques used to hide the content from assistive technologies. Since I don't have straight answer then I decided to put my thoughts here.

presentation role
ARIA role="presentation" technique is intended to hide an element from AT users. A classical example is presentational images. If you place role="presentation" on the image then it gets removed from accessible tree. Also this technique can be used to remove HTML table semantics, i.e. if role="presentation" is specified on HTML table then table structure is not exposed.

ARIA role="presentation" is completely ignored if it's used on focusable element. That means the element isn't removed from accessible tree and its native semantic is exposed. For example, if you put this role on HTML button then it's revealed as normal HTML button to AT. This is reasonable because if the user focuses the button then focus doesn't get lost and screen reader announces something meaningful.

aria-hidden
The most noticeable difference from role="presentation" is aria-hidden affects on whole subtree. John gave a good use case: hide excess links from screen reader users. A common pattern is a clickable image inside HTML:a element. ARIA spec confirms this saying "Authors MAY, with caution, use aria-hidden to hide visibly rendered content from assistive technologies only if the act of hiding this content is intended to improve the experience for users of assistive technologies by removing redundant or extraneous content."

I should notice that ARIA is not designed to change visual presentation and affect on behavior. Thus if this is an ordinal link then no ARIA technique can be used to hide it from screen reader user since this contradicts to ARIA design. But if the author puts @tabindex="-1" on the link to make it unfocusable then aria-hidden looks like a proper way to achieve desired result.

Technical side
ARIA implementation guide allows to remove elements with aria-hidden from accessible tree but it doesn't require that. Also it states "If the object is in the accessibility tree, map all attributes as normal. In addition, expose object attribute hidden:true". Additionally it points that if the aria-hidden attribute is changed then the browser should emit attribute_changed event (in case of IAccessible2). That's exactly what Firefox does.

So Firefox does a minimal implementation of aria-hidden allowing a screen reader to do what it thinks it should. That means each screen readers should invent a wheel and actually that what happens (or doesn't) - check this table to see how Firefox is different depending on screen reader running.

Implementation of aria-hidden both on browser side and screen reader side is not straightforward. For example if some element having aria-hidden contains a focusable element then its *whole* subtree can't be ignored. At the first glance reasonable solution would be if the browser doesn't create an accessible for each element in subtree until the element is focusable, in other words it treats aria-hidden as role="presentation" was specified on each node in subtree. Otherwise AT needs to crawl the accessible tree to check if there's an element with aria-hidden in ancestor chain. The current Firefox implementation forces AT to do that.

Things to think about.
If the browser doesn't create an accessible for aria-hidden subtree then there is a black box having certain dimensions on the screen. Thus if the user investigates the page layout by mouse then screen reader says nothing when the mouse pointer is above that black box but if the user clicks at this area then he gets unexpected behavior.

On the other hand some screen magnifiers use dimensions of accessible objects for page zooming. No accessible then zoom is likely broken.

So at the second glance I think aria-hidden shouldn't change the tree at all. Instead the browser should expose hidden:true object attribute on every accessible from the subtree of aria-hidden element. That allows AT to decide whether they want to ignore the accessible or not and prevents AT to crawl the accessible hierarchy.

I'd say this rule should be applicable to role="presentation" as well. So if the user explorers the page by mouse then screen reader can say this is presentational image but exclude it from keyboard navigation.

36 comments:

  1. Alex, your comment that ARIA is not supposed to change the visual presentation is true. However, it is not prevented from deciding what is exposed to an assistive technology. So, in this sense I think you overstated the situation.

    Microsoft has decided that they would not expose content with aria-hidden="true" to an AT. Mozilla has chosen otherwise. ARIA is meant to expose the intent of the author. I do agree with you that the use of aria-hidden could be misused. So, I don't have an issue with the Firefox implementation. I have a minor concern over IE's implementation for that reason. I had hoped that the browsers would reach a common implementation but they have not. So, there you have it.

    aria-hidden was meant for dom based AT to let them know what was intended by the author.

    ReplyDelete
    Replies
    1. Great Article Image Processing Projects Deep Learning Projects for Final Year JavaScript Training in Chennai JavaScript Training in Chennai The Angular Training covers a wide range of topics including Components, Angular Directives, Angular Services, Pipes, security fundamentals, Routing, and Angular programmability. The new Angular TRaining will lay the foundation you need to specialise in Single Page Application developer. Angular Training Project Centers in Chennai

      Delete
  2. Note: in the planned full UIA implementation (this has not been fully implemented in IE) the plan is to expose the accessibility tree with hidden="true" in the aria properties so eventually it appears the two will be consistent.

    ReplyDelete
  3. Recently we've got some discussion in Mozilla bug about aria-hidden. I start to think that invisible state might be a best fit.

    ReplyDelete
  4. This is an awesome post. Really very informative and creative contents. This concept is a good way to enhance knowledge. I like it and help me to development very well. Thank you for this brief explanation and very nice information. Well, got good knowledge.
    WordPress development company in Chennai

    ReplyDelete
  5. toptan iç giyim tercih etmenizin sebebi kaliteyi ucuza satın alabilmektir. Ürünler yine orjinaldir ve size sorun yaşatmaz. Yine de bilinen tekstil markalarını tercih etmelisiniz.

    Digitürk başvuru güncel adresine hoşgeldiniz. Hemen başvuru yaparsanız anında kurulum yapmaktayız.

    tutku iç giyim Türkiye'nin önde gelen iç giyim markalarından birisi olmasının yanı sıra en çok satan markalardan birisidir. Ürünleri hem çok kalitelidir hem de pamuk kullanımı daha fazladır.

    nbb sütyen hem kaliteli hem de uygun fiyatlı sütyenler üretmektedir. Sütyene ek olarak sütyen takımı ve jartiyer gibi ürünleri de mevcuttur. Özellikle Avrupa ve Orta Doğu'da çokça tercih edilmektedir.

    yeni inci sütyen kaliteyi ucuz olarak sizlere ulaştırmaktadır. Çok çeşitli sütyen varyantları mevcuttur. iç giyime damga vuran markalardan biridir ve genellikle Avrupa'da ismi sıklıkla duyulur.

    iç giyim ürünlerine her zaman dikkat etmemiz gerekmektedir. Üretimde kullanılan malzemelerin kullanım oranları, kumaşın esnekliği, çekmezlik testi gibi birçok unsuru aynı anda değerlendirerek seçim yapmalıyız.

    iç giyim bayanların erkeklere göre daha dikkatli oldukları bir alandır. Erkeklere göre daha özenli ve daha seçici davranırlar. Biliyorlar ki iç giyimde kullandıkları şeyler kafalarındaki ve ruhlarındaki özellikleri dışa vururlar.

    ReplyDelete
  6. aşk kitapları
    youtube abone satın al
    takipçi satın al
    takipçi satın al
    takipçi satın al
    takipcialdim.com/tiktok-takipci-satin-al/
    instagram beğeni satın al
    beğeni satın al
    btcturk
    tiktok izlenme satın al
    sms onay
    youtube izlenme satın al
    tiktok jeton hilesi
    tiktok beğeni satın al
    takipçi satın al
    uc satın al
    sms onay
    sms onay
    tiktok takipçi satın al
    tiktok beğeni satın al
    twitter takipçi satın al
    trend topic satın al
    youtube abone satın al
    instagram beğeni satın al
    tiktok beğeni satın al
    twitter takipçi satın al
    trend topic satın al
    youtube abone satın al
    takipcialdim.com/instagram-begeni-satin-al/
    perde modelleri
    instagram takipçi satın al
    instagram takipçi satın al
    takipçi satın al
    instagram takipçi satın al

    ReplyDelete
  7. I think you can make youtube video about these techniques, can't you? If you worry about likes under your video use this site https://soclikes.com/ to get some likes

    ReplyDelete
  8. Hmm , very interesting thoughts! I think In order for more interested people to read your thoughts, you should post it on Instagram, and buy instagram likes to quickly increase their ammount.

    ReplyDelete
  9. Ucuz, kaliteli ve organik sosyal medya hizmetleri satın almak için Ravje Medyayı tercih edebilir ve sosyal medya hesaplarını hızla büyütebilirsin. Ravje Medya ile sosyal medya hesaplarını organik ve gerçek kişiler ile geliştirebilir, kişisel ya da ticari hesapların için Ravje Medyayı tercih edebilirsin. Ravje Medya internet sitesine giriş yapmak için hemen tıkla: ravje.com

    İnstagram takipçi satın almak için Ravje Medya hizmetlerini tercih edebilir, güvenilir ve gerçek takipçilere Ravje Medya ile ulaşabilirsin. İnstagram takipçi satın almak artık Ravje Medya ile oldukça güvenilir. Hemen instagram takipçi satın almak için Ravje Medyanın ilgili sayfasını ziyaret et: instagram takipçi satın al

    Tiktok takipçi satın al istiyorsan tercihini Ravje Medya yap! Ravje Medya uzman kadrosu ve profesyonel ekibi ile sizlere Tiktok takipçi satın alma hizmetide sunmaktadır. Tiktok takipçi satın almak için hemen tıkla: tiktok takipçi satın al

    İnstagram beğeni satın almak için Ravje medya instagram beğeni satın al sayfasına giriş yap, hızlı ve kaliteli instagram beğeni satın al: instagram beğeni satın al

    Youtube izlenme satın al sayfası ile hemen youtube izlenme satın al! Ravje medya kalitesi ile hemen youtube izlenme satın almak için tıklayın: youtube izlenme satın al

    Twitter takipçi satın almak istiyorsan Ravje medya twitter takipçi satın al sayfasına tıkla, Ravje medya güvencesi ile organik twitter takipçi satın al: twitter takipçi satın al

    ReplyDelete
  10. The Heritage Partnership is a financial advisory firm known to be proactive, progressive and reliable. We strive to be the new standard in financial guidance, creating significant value for our clients. Challenge the status quo with us. We care for the people who care for you. Our pursuit of technological updates, training roadmaps, support platforms and initiatives are thoughtfully designed to develop our people’s competency. It empowers and motivates them to grow and develop, thereby customizing unique solutions towards financial success for you, exceeding expectations every time.

    ReplyDelete
  11. We’re a Web Design Bali with over a decade of experience in building user friendly, secure websites that help strengthen your business.

    ReplyDelete
  12. Satya Puri Studio is Bali Construction have worked on historically-inspired homes & villa around the world — including “Lux Villa in Bali; Sukh Sagar Haveli in Jodhpur, Rajasthan; Kahani Paradise in Gokarna. Their work shows inspiration across history and styles, tied together with the goal of enhancing life through good design.

    ReplyDelete
  13. The best results come from collaboration. So we take a one-agency approach: a unified, integrated way of working together as one team. Professional Bali Digital Marketing agency offering honest, bespoke, multi-channel digital marketing services to a range of small and large private and public companies.

    ReplyDelete
  14. If you are in search of a great Yoga Course in Bali, Yoga Bali may be the best place to start with. It’s is one of the best yoga teacher training schools in Bali.
    At Yoga Bali we offer unique Yoga Teacher Training in Bali and online and have graduated over 50 successful yoga teacher trainees from all corners of the globe. Our 80 video Yoga Teacher Training Course is internationally accredited. Our 80 Hour Yoga Online Video Training is designed to connect existing teachers with a robust body of further knowledge and professional up-skilling with our dedicated teaching team.

    ReplyDelete

  15. Looking to incorporate your company in Bali? GRO Indonesia has a notable experience in dealing with company establishment. We have managed to assist a number of companies to assist them in processing their legal documents. We have a range of service options depending on your needs, which allow businesses to have a legal presence in Indonesia.

    ReplyDelete
  16. Whether you’re looking for income, growth or a combination of both, we offer quality advice, comprehensive Investment Management Singapore and ongoing service. With regular reviews, we adjust your portfolio to meet your changing needs and current market conditions to help you achieve your financial goals.

    ReplyDelete
  17. It's too bad to check your article late. I wonder what it would be if we met a little faster. I want to exchange a little more, but please visit my site 온라인카지노 and leave a message!!


    ReplyDelete
  18. Hii,
    This is great and awsome post for me. i loved to read your blog. it's really-really amazing. thanks for inspired me by your blog.Online Garen Store
    Buy Golden Jhumka
    Buy Online Seeds
    Buy Handicrafts Online
    Book Resin Planter
    Buy ZZ Plant Online India
    Buy Bunny Ear Cactus

    ReplyDelete
  19. I was looking for another article by chance and found your article 룰렛 I am writing on this topic, so I think it will help a lot. I leave my blog address below. Please visit once.

    ReplyDelete
  20. İnstagram takipçi satın al! İnstagram takipçi sitesi ile takipçi satın al sende sosyal medyada fenomen olmaya bir adım at. Sende hemen instagram takipçi satın almak istiyorsan tıkla:

    1- takipçi satın al

    2- takipçi satın al

    3- takipçi satın al

    ReplyDelete