HeadingsMap
Item logo image for HeadingsMap

HeadingsMap

Featured
4.5(

66 ratings

)
Item media 3 screenshot
Item media 4 screenshot
Item media 1 screenshot
Item media 2 screenshot
Item media 3 screenshot
Item media 4 screenshot
Item media 1 screenshot
Item media 2 screenshot
Item media 1 screenshot
Item media 2 screenshot
Item media 3 screenshot
Item media 4 screenshot

Overview

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/

4.5 out of 566 ratings

Google doesn't verify reviews. Learn more about results and reviews.

Review's profile picture

sep compMar 26, 2024

simple and without problems

Review's profile picture

Lavish BiotechMar 22, 2024

Amazing Extension for analyzing headings and flow of heading on page or blog

Review's profile picture

Tomasz GiętkowskiFeb 15, 2024

The extension is very useful. However, there is a conflict between the extension and Google Calendar. When the extension is enabled, you cannot see the meeting name you are currently entering on the event creation form. Tested on the latest versions of Chrome 121.0.6167.162 and extensions 4.8.

2 out of 2 people found this helpful
Replier's profile picture

Jorge RumorosoDeveloperFeb 15, 2024

Hi Tomasz, thanks for sharing both, your opinion and the comment about the conflict when used with Google Calendar. I didn't check it yet, but most likely it is because how Google positions some elements in the view. In fact, that happens also with other pages that use position "fixed" for some elements and contents. I will take a look to see if I can improve it. I am also reviewing the option to show the extension panel using the side-panel feature that Chrome has. This could take some time and not sure how feasible it will be. Anyway, thank you again for sharing this problem. Edited on 19/2/2024: I just made an update. The change includes a way to identify fixed elements in the page and adjust their position when the extension is open. I hope this fixes the problem. I tried to reproduce the problem, but I couldn't :( . I am almost sure it was because the field for the meeting name was fixed positioned, so hopefully it is fixed Edited on 27/2/2024: I finally found what the problem could be. Today I updated the extension with the fix, so I hope now the problem is gone. Basically, it was a styling property and the problem was related with how the browser rendered it. Thanks for sharing it and sorry for the inconveniences of the bug.

Details

  • Version
    4.8.4
  • Updated
    March 7, 2024
  • Offered by
    Jorge Rumoroso
  • Size
    573KiB
  • Languages
    5 languages
  • Developer
    Email
    rumoroso@gmail.com
  • Non-trader
    This developer has not identified itself as a trader. For consumers in the European Union, please note that consumer rights do not apply to contracts between you and this developer.

Privacy

The developer has disclosed that it will not collect or use your data.

This developer declares that your data is

  • Not being sold to third parties, outside of the approved use cases
  • Not being used or transferred for purposes that are unrelated to the item's core functionality
  • Not being used or transferred to determine creditworthiness or for lending purposes

Support

Related

Color Contrast Analyzer

3.3(64)

Analyze a web page or portion of a web page for conformance with WCAG 2.0 Color Contrast requirements.

axe DevTools - Web Accessibility Testing

4.0(106)

Accessibility Checker for Developers, Testers, and Designers in Chrome

WAVE Evaluation Tool

4.1(137)

Evaluate web accessibility within your browser.

Accessibility Insights for Web

4.7(36)

Accessibility Insights for Web helps developers quickly find and fix accessibility issues.

Heading Tag Markup

4.6(7)

This extension show the h-Tag on page.

HTML5 Outliner

4.2(260)

Generates a navigable page outline with heading and sectioning elements

Web Developer

4.5(2.8K)

Adds a toolbar button with various web developer tools.

Lighthouse

4.4(298)

Lighthouse is an open-source, automated tool for improving the performance, quality, and correctness of your web apps.

Alt & Meta viewer

4.2(10)

画像に設定された Alt または Title 属性をツールチップで表示することができます。ヘッダの Title、Meta 情報を一覧表示させることができます。

HTML Heading Highlighter

3.4(5)

Highlights all the headings on a page to visually allow the user to see the heading hierarchy.

TDK Meta Checker

4.7(3)

閲覧中のタイトル・description・キーワードなどのメタ情報を確認しやすく表示します。

WCAG Color contrast checker

4.1(22)

To check the color contrast between foreground and background of the texts

Color Contrast Analyzer

3.3(64)

Analyze a web page or portion of a web page for conformance with WCAG 2.0 Color Contrast requirements.

axe DevTools - Web Accessibility Testing

4.0(106)

Accessibility Checker for Developers, Testers, and Designers in Chrome

WAVE Evaluation Tool

4.1(137)

Evaluate web accessibility within your browser.

Accessibility Insights for Web

4.7(36)

Accessibility Insights for Web helps developers quickly find and fix accessibility issues.

Heading Tag Markup

4.6(7)

This extension show the h-Tag on page.

HTML5 Outliner

4.2(260)

Generates a navigable page outline with heading and sectioning elements

Web Developer

4.5(2.8K)

Adds a toolbar button with various web developer tools.

Lighthouse

4.4(298)

Lighthouse is an open-source, automated tool for improving the performance, quality, and correctness of your web apps.

Google apps