Comments on WAI-finding with ARIA Landmark Roles

12 Reader Comments

Back to the Column
  1. Hi Lyza,
    it’s only IE that does not expose main as a landmark (that is in the works though), In Chrome, Firefox and Safari it worked from day one of implementation (a few years back now). Most screen readers work around IE’s lack of support. As a consequence the advice/requirments for addition of default implicit roles to HTML elelements is changing. This will filter through to conformance checkers such as the W3C Nu markup checker which will in future issue a warning if role=main is used on the main element (for example). In addition an important rule of thumb for landmark use it to ensure that all content is a descendent of a landmark container.

    Copy & paste the code below to embed this comment.
  2. Thanks for the link to the A11y project. I work in ebook production for an academic publisher, so accessibility for readers with assistive technology is important to us. I’m always looking for ways to improve the usefulness of our ebooks. We do use WAI-ARIA in our files, and I keep having to remind our conversion vendors about the need for good semantic structure. I’m color blind myself, so I’m aware of how even simple choices can potentially affect usability for large numbers of people.

    Copy & paste the code below to embed this comment.
  3. Nice article. Simple to implement and high on usefulness, thanks.

    Copy & paste the code below to embed this comment.
  4. @Lyza
    What it means is that Firefox and Chrome have already hooked up the semantics for role=main (Safari too). They expose <main> with a role=main in Accessibility APIs. This test data provides a more granular level of detail about accessibility semantics implementation support for a bunch of HTML elements in the 4 major browsers (note that many of bugs listed have since been fixed, particularly in chrome).

    Copy & paste the code below to embed this comment.
  5. Not a correction nor even clarification, but from experience helping others I think three of the landmark roles warrant a tiny bit more detail.

    The landmark roles banner, main, and contentinfo should only appear once per page. This is specified in ARIA 1.0 and ARIA 1.1.

    How it impacts assistive technology users when more than one is used I cannot say as I am not a regular AT user.

    Copy & paste the code below to embed this comment.
  6. I don’t think it’s an issue of how it impacts AT users (as I am one myself). It’s a matter of thinking through what main, banner, and contentinfo are for. Would you have more than one footer on a page? Would you really have more than one main area since . . .  main pretty much implies one main? It’s a valuable clarification, Adrian; it’s just that it doesn’t have much to do with impact and very much to do with logic and common sense.

    I would quibble with the notion in this article that there isn’t much documentation. On the contrary, there’s a lot of documentation, test data, and blog posts. The problem is that, as stated, (and it is true in my experience) that most folks want accessibility to be basically a simple checklist. And I always find it noteworthy that people want that from accessibility, but (at least based upon what I read), it’s demanded less so from the usability field. That’s worth considering because I believe deeply that the two very much go hand-in-hand.

    The bottom line is that people are not learning accessibility i.e. it’s not commonly included in code examples, people don’t learn it in their education, etc.; whereas I think most folks do at least get a taste of usability.

    Thanks for the article; every little bit helps.

    Copy & paste the code below to embed this comment.
  7. Great article Lyza.

    It’s a shame that more devs don’t have a basic understanding of semantics - i.e. why use a <div> when a <button> is universally understood?!

    btw, on a similar topic to “role” attribute , here’s a summary of HTML5 section elements - - and their implicit roles.

    How often do you see <section> elements without a heading? And when you do see a heading, how often do these headings have an “aria-labelledby” attribute? Probably not very often.

    Adding the attribute provides context to an AT so that it will announce the presence of a “region” as well as the text of the heading. Simple. And very useful.

    It’s not difficult to make these simple adjustments to our code… and the benefits for AT users could be massive.

    Copy & paste the code below to embed this comment.
  8. Thank you for the information, Liza! I want to make my site more accessible to everyone, and the w3c documentation is quite dry to read and hard to find straightforward information.
    As the internet becomes more part of everyone’s lives, web designers and site owners should care more about have at least basic accessibility on their sites. It’s a shame that IE is still lagging behind support for this technology.

    Copy & paste the code below to embed this comment.
  9. Thanks very much to you all for great article and comments.

    18F published their guides for the US Government. Very good stuff:

    Copy & paste the code below to embed this comment.
  10. Great article. This is by far one of the most concise explanation of landmark roles I have found.

    Copy & paste the code below to embed this comment.
  11. information about css and html code that is very helpful for me who is studying deeper .. keep working , thanks to quality article , if you need information about more try visiting Daftar Harga Sepeda Fixie

    Copy & paste the code below to embed this comment.
  12. Sorry, commenting is closed on this article.