To show, browse and audit (for accessibility and SEO) the headings structure
The extension generates a documentmap or index of any web document structured with headings (you can access directly to the content by clicking on any of its items), and now, it shows the HTML 5 outline. Features: * List of headings and optional information about their level and if they break the correct hierarchical structure * List of sections with header information and includes optional information about errors in the structure * Information from the main document and also from the documents inside frames (includes a document selector that is active when there are multiple documents) * By clicking on the headers the document scrolls to the position of the header/section and highlights it * Detects changes in the DOM and when they finish, updates its content (if necessary) * It can also be refreshed manually * Allow collapsing list of headers by levels * HTML 5 Outline test is optional * CSS outline for identifying the header (or section) when clicking the tree * It doesn't show hidden headers or sections (hidden for assistive technologies) * If the header (or section) is an anchor, the link in the results has the href pointing to it (useful for being copied directly from the tree with the option in the contextual menu of the browser). Additionally, as option that can be disabled, it shows anchor-links that when clicked, copy the link to the clipboard * Two themes So this is useful not only to facilitate navigation to anyone, but also to help webdevelopers, consultants and auditors. Privacy statement on: https://rumoroso.bitbucket.io/
- (2021-05-26) Khoa Pham: I very love it, great app.
- (2021-04-02) Antonio Carlos Guglielmo Neto: Wonderful! I wish I had fiound it earlier!
- (2021-03-21) Евгений Баранников: super
- (2021-03-16) Alex Merrick: Extremely useful
- (2021-02-27) Mohamed ELkomy: really very helpfuel tool thanks a lot
- (2020-12-27) Ken Vega: Best one of the ones I've tried (tried around 5)
- (2020-10-06) David Cohen: I was an user on Firefox. I am happy to find Headingsmap on Chrome and recommand it. One short default, on Firefox, I opened H and let open to see more and more pages. On Chrome, I must re open H each time .... too more clic and re clic .... Thank you. David
- (2020-09-17) Jaxson Khan: Thank you!
- (2020-03-08) 黄志东: 20.3.9 Sorry. I'm late. Recently, I got a valid VPN and updated the extension. The problem has been fixed. Thanks! I have a suggestion. I hope to know my position in headingsMap bar. I usually lose my focus. Hi, I found some problem with the extension. When I use it on some website and cancel it, I found all thing of the page had moved to a side. This is terrible compatibility with the most of noting and marking extension. Sorry for my poor English. It is a fantastic extension. If you fix the problem, I will give it 5 stars. :)
- (2020-03-03) 温柔坚定的晓美焰: 非常非常优秀哟
- (2020-02-04) Ramon Fincken: Also shows red highlight that a heading is missing ( h1 -> h3. the first h3 is red because h2 is missing )
- (2019-12-12) John Bedggood: Let me say. i NEVER write reviews. But I've been using headingsMap for a month and now I can't live without it. Simple and super useful for everything I do. JB
- (2019-08-08) Simmy Silver: Awesome!
- (2019-07-22) Kosuke Ide: sweet. I like it when you click, it scrolls, and highlights it.
- (2019-05-22) Dana Rudenko: Exactly what I was looking for. Simple, clickable, amazing!
- (2019-04-17) Web Master: Very helpful tool and excellent support from the developer
- (2019-01-31) Mike T: Very useful for quickly viewing structure of pages to evaluate their accessibility.
- (2018-12-30) Ayixi: love it and is useful
- (2018-12-13) 小齐: Laggy in html5 outline mode
- (2018-11-26) Morgan JERABEK: "Consulter votre historique de navigation" pour un plugin qui donne les headings ? Sérieusement ? Quel est le réel objectif derrière ?
- (2018-11-26) Wolfgang Wiese: Since yesterday (2018/11/25) headingsMap wants to read the browser history. Why?
- (2018-11-25) Marko Štimac: Chrome reports that this extension is disabled until we accept new conditions - extension wants to read our history. Why is that?
- (2018-10-18) I have really liked this plugin, however it seems that it was updated and all the H tags are not displaying anymore, it's just the headlines with not H tags specified. Also, there were Headers Structure and HTML structure. Now, it only states Headers Structure without the H tags specified. Will this be fixed, as it really was a handy plugin before?
- (2018-09-17) Arnold Wender: A must have while optimizing heading structures :)
- (2018-06-25) Michelle Peace: Very helpful for quickly getting a look at the heading structure of a page during testing. Only wish I could change the color of the icon to be more visible with dark browser themes.
- (2016-12-29) Dominique Giordano: Does nothing when I push the button, not translated.
- (2016-08-31) Gerhard Schellmann: A readl interseting tool for me: The first I understand the correlation of sections and headings
- (2016-08-03) Delonghi Erp: Please, add search field.
- (2016-02-24) Luis S. Celadita Contreras: Sencillamente efectivo. Muy bueno.
- (2016-02-17) Chris Harvey: vertically squishes text way too small if there are many headings on a page.
- (2015-06-02) Joshua Muheim: This is useful, but it shows also heading elements that are hidden from the DOM (using CSS display:none / visibility:hidden), which is NOT correct.
- (2015-04-14) Alexey Inq: Thnx! Very usefull!
- (2014-07-23) 혜선주: :)
- (2014-03-26) Andrés Berdasco: Simply the best extension to verify the outline of a HTML/HTML5 document. Also, it is very usefull as a navigation tool in long documents.
- (2021-06-08, v:3.10.0) William Dashfield: Heading navigation using keyboard shortcuts
As far as I (and WCAG) can find out, there is no good plugin for keyboard navigation using HTML headings for Chrome/Firefox/Edge or Safari. There is a great need for this facility. It is built in to Opera and to all screen reader software, sighted non-mouse/keyboard only users can only navigate using Landmarks (which are not in universal use and not visible), by tabbing from link to link which is very tedious and slow going through menus (if there are no skip links as is often the case), or by using Page or Arrow keys which only works for browsing, not for following links or filling in forms (see below). A browser plugin that allows navigation with keyboard shortcuts would be of enormous value to people who by disability or preference do not use a mouse, and also to web-site accessibility testers. See https://github.com/w3c/wcag/issues/1712 for a discussion of the lack of such a plugin. Would you please consider adding shortcut key navigation by heading to your very useful headingsMap plugin? It would add further value, and many people (including myself) would be very grateful. If you do, as well as displaying the heading jumped to and following text, Tabbing to the next link/form field would need to take the user to the next link/form field AFTER the displayed header. One of the problems of using Page Down to scroll through a webpage is that it does not do this. I suggest you use the following key combinations by default, as they are the same as used by the popular NVDA screen reader: H,1,2,3,4,5,6 to go to the next heading, or to the next level 1,2,3,4,5 or 6 heading. Shift+H,1,2,3,4,5,6 to go back to the previous heading, or the previous level 1,2,3,4,5 or 6 heading. These particular shortcuts wouldn't work where the user could type - e.g. into an input field. NVDA uses Insert and spacebar to toggle between Browse and Focus modes to get round this. Giving the user the ability to choose different shortcut keys would be desirable.
- (2021-03-11, v:3.10.0) Bo Zhao: For some html files, the Firefox version works but Chrome version does not
I have some html files generated by .ipynb files. It seems that the firefox version works fine but Chrome version does not. What could be the problem?
- (2020-12-18, v:3.9.1) Marko Štimac: Scrollbar too short
I really like this extension, but one thing is kinda always bugging me. Scrollbar is too narrow so when I need to pinch it to slide left or right it is hard to to get it. Also, we can only pull it in the vertical center part where there are some dots. Can you make that full height and slightly wider?
- (2020-08-03, v:3.8.2) Lars Ballieu Christensen: Does HeadingsMap collect/transmit data?
Can you confirm that the HeadingsMap browser plugin does not collect and transmit data to any third party about webpages being analysed?
- (2020-05-12, v:3.6.6) Salah-Eddine Khouiel: Doesn't work
Hi, First of all thank you for this extension. Since a week the chrome plugin doesn't work when I click on it ... I cleaned the cache but still not working ... I tried different PC and still not working ... Thank you
- (2019-06-29, v:3.5.14) Tim Osborn: Clicking a heading with #id doesn't update the document location
Hi! Thanks for the extension - have found it thoroughly useful for ages 👍 I thought that I used to be able to click a heading in headings-map and actually _navigate_ to the heading in the document when it has an id attribute (ie - see my location bar update with #link rather than just scrollTo), but that's not working for me anymore... > If the header (or section) is an anchor, the link in the results has the href pointing to it (useful for being copied directly from the tree with the option in the contextual menu of the browser) I can't see a setting to enable contextual menu options, either... Is this still possible? I prefer headings map to solutions like "Show Anchors" https://chrome.google.com/webstore/detail/show-anchors/nhppnhnadikeniijclnghjfblnojgige?hl=en Many thanks for your work, ptim
- (2019-06-27, v:3.5.14) Daniel Tonon: Sections labeled using aria-label show false error colorisation
Thanks for adding aria-label support. There is still a bug with it though (I've only just gotten around to tested it now). If there is no <h#> element used to label the sectioning element, and aria support is turned on, the field still says that it is in error. You can see it occur on GitHub https://github.com/. The <nav> element is labeled using only aria-label. It is displayed as being in error. It should not be. The only times a field should be considered in error is if no label is available at all or (maybe) if there are multiple different labels being given to the same sectioning element.
- (2019-05-17, v:3.5.12) Ferdy Christant: Include <title> from inline SVG
Great extension. Feature request: when using an inline SVG, any <title> element inside the SVG should be respected as header value if wrapped inside a header. The extension currently does not do that. Example: <h1> <svg> <title>Mytitle</title> .... </svg> </h1>
- (2019-05-04, v:3.5.11) Daniel Tonon: Document outline tool does not accept <div role="heading"> elements as headings
What the subject title says
- (2019-05-04, v:3.5.11) Daniel Tonon: Ignores aria-level >6
It is possible to create a valid <h7> element using <div role="heading" aria-level="7">. If I do this, Headings Map displays it as a <h2> heading. See this link for evidence that W3C approves of this method: https://www.w3.org/WAI/GL/wiki/Using_role%3Dheading_to_identify_headings#Example_2
- (2019-04-28, v:3.5.11) Daniel Tonon: Document outline tool: Please take aria-label and aria-labelledby attributes into account
The official W3C Validator service (https://validator.w3.org/) has the exact same issue. I posted an issue in their issue tracker. (https://github.com/validator/validator/issues/805) They have recognized that this is a bug that needs fixing. Headings Map has the exact same bug in it. Please add support for aria-label and aria-labelledby attributes as a method for labeling sectioning elements.
- (2019-03-21, v:3.5.6) Headings Incorrectly Marked as Hidden
Hello! I am trying to evaluate heading structure on the following page: https://humboldtgov.org/CivicAlerts.aspx?CID=14 However, the extension is detecting headings as being hidden. I am not seeing anything within the HTML that would cause this and when testing with NVDA screen reader, I am able to traverse through the headings.
- (2019-02-09, v:3.5.5) Regina Mize - Genealogist: Not working
I am trying to use the tool and it is not working.
- (2018-10-18, v:3.3.0) Heading numbers not showing
Hello, First of all, thank you for such a great tool! Since last update (most likely) I've noticed the heading numbers are not shown any more. Please see http://easycaptures.com/fs/uploaded/1291/5899703816.png Could this be fixed in next update please? Thanks and regards, Olvier
- (2018-10-16, v:3.3.0) Emre Y: Headingnumbers are gone
I used to see the heading numbers, but all I see are the titles now, now heading numbers.