Role Reverser

What's all this, then?

As noted in Steve Faulkner's article, HTML Developers: Please consider–in the year 2021,if you find yourself using the role attribute to indicate to a browser what a thing on the page is, you're probably better off using something else. This tool takes your role-heavy markup and transforms offending HTML elements into fine, upstanding semantic markup.

Examples of markup transformed using the Role Reverser tool

Source HTML:

<div role="navigation" aria-label="Skip Link and Language Selector" id="controls" class="default-grid">
    <div role="list">
      <div role="listitem"><a href="#main">Skip to Content</a></div>
      <li class="opt">
        <a href="/WAI/meta/customize/">Change Text Size or Colors</a>
      </div>
      <li class="opt">
        <a href="/WAI/translations/">
          All Translations 
          <svg focusable="false" aria-hidden="true" class="icon-translations ">
            <use xlink:href="/WAI/assets/images/icons.svg#icon-translations"></use>
          </svg>
        </a>
      </div>
    </div>
  </div>
  <div role="banner" id="site-header" class="default-grid with-gap">
    <div class="logos">
      <a lang="en" class="home w3c" href="https://www.w3.org/">
        <svg role="img" aria-label="W3C" viewBox="0 0 68 34" xmlns="http://www.w3.org/2000/svg">
          <g>
            <path d="m16.117 1.006 5.759 19.58 5.759-19.58h4.17 11.444v1.946l-5.879 10.128c2.065.663 3.627 1.868 4.686 3.615 1.059 1.748 1.589 3.799 1.589 6.155 0 2.914-.775 5.363-2.324 7.348s-3.555 2.978-6.017 2.978c-1.854 0-3.469-.589-4.845-1.767-1.377-1.178-2.396-2.773-3.058-4.786l3.256-1.35c.477 1.218 1.106 2.178 1.887 2.879.781.702 1.701 1.052 2.76 1.052 1.112 0 2.052-.622 2.82-1.866.768-1.245 1.152-2.74 1.152-4.489 0-1.933-.411-3.429-1.231-4.488-.954-1.244-2.45-1.867-4.489-1.867h-1.588v-1.906l5.56-9.612h-6.712l-.382.65-8.163 27.548h-.397l-5.958-19.937-5.957 19.937h-.397l-9.53-32.168h4.17l5.759 19.58 3.892-13.185-1.906-6.395z"/>
            <path d="m64.92 1.006c-.819 0-1.554.295-2.111.861-.591.6-.92 1.376-.92 2.178s.313 1.545.887 2.128c.583.591 1.334.912 2.145.912.793 0 1.562-.321 2.161-.903.574-.557.887-1.3.887-2.136 0-.811-.321-1.57-.878-2.136-.584-.592-1.344-.904-2.171-.904zm2.643 3.065c0 .701-.271 1.351-.768 1.832-.524.507-1.174.777-1.892.777-.675 0-1.342-.278-1.84-.785s-.777-1.157-.777-1.849.287-1.368.802-1.891c.481-.49 1.131-.751 1.84-.751.726 0 1.376.271 1.883.785.49.489.752 1.147.752 1.882zm-2.559-1.807h-1.3v3.445h.65v-1.469h.642l.701 1.469h.726l-.769-1.57c.498-.102.785-.439.785-.929 0-.625-.472-.946-1.435-.946zm-.118.422c.608 0 .886.169.886.591 0 .405-.278.549-.87.549h-.549v-1.14z"/>
            <path d="m59.807.825.676 4.107-2.391 4.575s-.918-1.941-2.443-3.015c-1.285-.905-2.122-1.102-3.431-.832-1.681.347-3.587 2.357-4.419 4.835-.995 2.965-1.005 4.4-1.04 5.718-.056 2.113.277 3.362.277 3.362s-1.452-2.686-1.438-6.62c.009-2.808.451-5.354 1.75-7.867 1.143-2.209 2.842-3.535 4.35-3.691 1.559-.161 2.791.59 3.743 1.403 1 .854 2.01 2.721 2.01 2.721z"/>
            <path d="m60.102 24.063s-1.057 1.889-1.715 2.617c-.659.728-1.837 2.01-3.292 2.651s-2.218.762-3.656.624c-1.437-.138-2.772-.97-3.24-1.317s-1.664-1.369-2.34-2.322-1.733-2.859-1.733-2.859.589 1.91.958 2.721c.212.467.864 1.894 1.789 3.136.863 1.159 2.539 3.154 5.086 3.604 2.547.451 4.297-.693 4.73-.97s1.346-1.042 1.924-1.66c.603-.645 1.174-1.468 1.49-1.962.231-.36.607-1.092.607-1.092z"/>
          </g>
        </svg>
      </a>
      <a lang="en" class="home" href="/WAI/">
      <span class="wai"><span class="wa">Web Accessibility</span> <span class="i"><span class="initieative">Initiative</span> <span>WAI</span></span></span>
      </a>
      <div class="claim">
        <span>Strategies, standards, resources to make the Web accessible to people with disabilities</span>
      </div>
      <button class="button button-menu" aria-haspopup="true" aria-expanded="false" id="openmenu">
        <span>
          <svg focusable="false" aria-hidden="true" class="icon-menu ">
            <use xlink:href="/WAI/assets/images/icons.svg#icon-menu"></use>
          </svg>
          Menu
        </span>
      </button>
    </div>
    <div class="navigations">
      <div role="navigation" class="metanav" aria-label="Meta & Search" lang="en">
        <div role="list">
          <div role="listitem"><a href="/WAI/about/participating/">Get Involved</a></div>
          <div role="listitem"><a href="/WAI/about/">About W3C WAI</a></div>
          <div role="listitem">
            <form action="/WAI/search/" role="search">
              <div>
                <label for="header-search">
                <span class="visuallyhidden">Search:</span>
                <input id="header-search" type="search" name="q" placeholder="Search" aria-label="Search">
                </label>
                <button class="button button-icon button-nobg button-noborder">
                  <span>
                    <svg focusable="false" aria-label="Submit Search" class="icon-search ">
                      <use xlink:href="/WAI/assets/images/icons.svg#icon-search"></use>
                    </svg>
                  </span>
                </button>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div role="navigation" class="mainnav" aria-label="Main" lang="en">
    <div role="list">
      <div role="listitem"><a lang="en" href="/WAI/fundamentals/"><span>Accessibility Fundamentals</span></a></div>
      <div role="listitem"><a lang="en" href="/WAI/planning/"><span>Planning & Policies</span></a></div>
      <div role="listitem"><a lang="en" href="/WAI/design-develop/"><span>Design & Develop</span></a></div>
      <div role="listitem"><a lang="en" href="/WAI/test-evaluate/"><span>Test & Evaluate</span></a></div>
      <div role="listitem"><a lang="en" href="/WAI/teach-advocate/"><span>Teach & Advocate</span></a></div>
      <div role="listitem"><a lang="en" href="/WAI/standards-guidelines/"><span>Standards/<wbr>Guidelines</span></a></div>
    </div>
  </div>
  <main id="main" lang="en">
    <h1 role="heading" class="visuallyhidden">W3C Web Accessibility Initiative Home</h1>
    <section class="default-grid teaser making-web-accessible" aria-labelledby="mwa-title">
      <div role="banner" class="inner teaser-h">
        <h2 role="heading" id="mwa-title">
          <span class="title">Making the Web Accessible</span>
        </h2>
        <p class="subtitle">Strategies, standards, and supporting resources to help you make the Web more accessible to people with disabilities.</p>
      </div>
      <div class="inner grid-3">
        <div class="col1 making-web-accessible-box">
          <h3 role="heading">
            <svg focusable="false" aria-hidden="true" class="icon-hp-book mwa-icon mwa-icon-book">
              <use xlink:href="/WAI/assets/images/icons.svg#icon-hp-book"></use>
            </svg>
            W3C
          </h3>
          <p>The World Wide Web Consortium (W3C) develops international standards for the Web: HTML, CSS, and many more.</p>
        </div>
        <div class="col2 making-web-accessible-box">
          <h3 role="heading">
            <svg focusable="false" aria-hidden="true" class="icon-hp-tools mwa-icon">
              <use xlink:href="/WAI/assets/images/icons.svg#icon-hp-tools"></use>
            </svg>
            WAI
          </h3>
          <p>The W3C Web Accessibility Initiative (WAI) develops standards and support materials to help you understand and implement accessibility.</p>
        </div>
        <div class="col3 making-web-accessible-box">
          <h3 role="heading">
            <svg focusable="false" aria-hidden="true" class="icon-hp-computer mwa-icon mwa-icon-computer">
              <use xlink:href="/WAI/assets/images/icons.svg#icon-hp-computer"></use>
            </svg>
            You
          </h3>
          <p>You can use W3C WAI resources to make your websites, applications, and other digital creations more accessible and usable to everyone.</p>
        </div>
      </div>
      <div class="inner hidesection">
        <button class="showhidebutton" data-target=".making-web-accessible .inner:not(.hidesection)" aria-expanded="true" data-showhidebuttonid="homepage-making-web-accessible" data-showtext="Show information about W3C, WAI, You" data-hidetext="Hide Section">Hide Section</button>
      </div>
    </section>
    <div class="white-bg grid-five-three">
      <div class="col1 grid-line-right">
        <section class="teaser news-teaser" aria-labelledby="news-teaser-title">
          <div role="banner" class="teaser-h">
            <h2 role="heading" id="news-teaser-title">
              <span class="subtitle"> </span>
              <span class="title">News</span>
            </h2>
          </div>
          <h3 role="heading">Current Work</h3>
          <p><small>(updated monthly)</small></p>
          <p><strong>See <a href="/WAI/update/">What We're Working On – Accessibility Activities and Publications</a></strong></p>
          <article class="news-teaser">
            <h3 role="heading">WCAG2ICT Note Published</h3>
            <p><small>(2024-Oct-08)</small></p>
            <p><a href="https://www.w3.org/TR/wcag2ict/">Guidance on Applying WCAG 2 to Non-Web Information and Communications Technologies (WCAG2ICT)</a> is a completed W3C Group Note. WCAG2ICT describes how Web Content Accessibility Guidelines (WCAG) principles, guidelines, and success criteria can be applied to non-web information and communications technologies (ICT), specifically to non-web documents and software. The document includes guidance for WCAG 2.0, 2.1, and 2.2 success criteria and glossary terms. WCAG2ICT has been a key resource for including WCAG in ICT accessibility regulation, legislation, and standards around the world. This update facilitates further adoption of WCAG 2.1 and WCAG 2.2 in non-web contexts. For an introduction, see: <a href="https://www.w3.org/WAI/standards-guidelines/wcag/non-web-ict/">WCAG2ICT Overview</a>.</p>
          </article>
          <article class="news-teaser">
            <h3 role="heading">For Wide Review: Collaboration Tools Accessibility User Requirements</h3>
            <p><small>(2024-Jul-10)</small></p>
            <p><a href="https://www.w3.org/TR/ctaur/">Collaboration Tools Accessibility User Requirements</a> is ready for review. The document covers accessibility user needs, requirements, and scenarios for collaborative content creation and development tools. The solutions identified in this document are intended to influence the evolution of future accessibility guidelines, technical specifications, or features of collaboration tools and assistive technologies. They are also relevant to software developers who contribute to developing the collaborative experience. Questions for this review are in <a href="https://lists.w3.org/Archives/Public/public-wai-announce/2024JulSep/0001.html">e-mail for CTAUR review</a>. Please send any comments by 30 September 2024.</p>
          </article>
          <article class="news-teaser">
            <h3 role="heading">For Wide Review: Guidance on Applying WCAG 2 to Non-Web ICT (WCAG2ICT)</h3>
            <p><small>(2024-Jul-02)</small></p>
            <p>WCAG2ICT is <a href="https://www.w3.org/TR/wcag2ict-22/">Guidance on Applying WCAG 2 to Non-Web Information and Communications Technologies (WCAG2ICT)</a>, including documents and software. The Draft is ready for final review before we publish it as a completed W3C Group Note. For an introduction, see the <a href="https://www.w3.org/WAI/standards-guidelines/wcag/non-web-ict/">WCAG2ICT Overview</a>. Please submit any comments by 6 August 2024.</p>
          </article>
          <article class="news-teaser">
            <h3 role="heading">Updated Resource: How People with Disabilities Use the Web</h3>
            <p><small>(2024-Jun-24)</small></p>
            <p><a href="https://www.w3.org/WAI/people-use-web/">How People with Disabilities Use the Web</a> is updated with new user stories (personas) and new videos highlighting “Accessibility: It’s about people”. It describes tools and approaches that disabled people use to interact with technology and it covers barriers that people experience because of inaccessible digital technology. The resource helps developers, designers, content creators, and others understand the reasons behind creating accessible digital products. To quote the new videos: Whatever your role, “You can help make technology accessible to me.”</p>
          </article>
          <article class="news-teaser">
            <h3 role="heading">For Review: ACT Rules Format 1.1 - First Public Working Draft</h3>
            <p><small>(2024-Jun-18)</small></p>
            <p><a href="https://www.w3.org/TR/act-rules-format-1.1/">Accessibility Conformance Testing (ACT) Rules Format 1.1</a> Working Draft is available for review. The ACT Rules Format defines a format for writing accessibility test rules. It helps developers of automated testing tools and manual testing methodologies to write, share, and implement test rules. The test rules contribute to consistent testing for accessibility standards compliance. Changes from ACT Rules Format 1.0 include: new secondary accessibility requirements and allowing subjective applicability statements. For an introduction to ACT resources, see the <a href="https://www.w3.org/WAI/standards-guidelines/act/">ACT Overview</a>. Please submit any comments by 18 August 2024.</p>
          </article>
          <article class="news-teaser">
            <h3 role="heading">WCAG 2.2 in Dutch: Authorized Translation Published</h3>
            <p><small>(2024-Jun-13)</small></p>
            <p><a href="https://www.w3.org/Translations/WCAG22-nl/">Richtlijnen voor Toegankelijkheid van Webcontent (WCAG) 2.2</a>, the Dutch Authorized Translation of <a href="https://www.w3.org/WAI/standards-guidelines/wcag/">Web Content Accessibility Guidelines (WCAG) 2.2</a>, is now available, following completion of the <a href="https://www.w3.org/2005/02/TranslationPolicy">W3C Authorized Translations process</a>. Other translations of WAI resources are listed in <a href="https://www.w3.org/WAI/translations/">All WAI Translations</a>. WAI encourages translations in all languages. If you might be interesting in translating resources, see <a href="https://www.w3.org/WAI/about/translating/">Translating WAI Resources</a>. Thank you to all who contribute to translations.</p>
          </article>
          <article class="news-teaser">
            <h3 role="heading">WCAG 2.2 in Catalan: Authorized Translation Published</h3>
            <p><small>(2024-May-22)</small></p>
            <p><a href="https://www.w3.org/Translations/WCAG22-ca/">Directrius per a l’accessibilitat del contingut web (WCAG) 2.2</a>, the Catalan Authorized Translation of <a href="https://www.w3.org/WAI/standards-guidelines/wcag/">Web Content Accessibility Guidelines (WCAG) 2.2</a>, is now available, following completion of the <a href="https://www.w3.org/2005/02/TranslationPolicy">W3C Authorized Translations process</a>. Other translations of WAI resources are listed in <a href="https://www.w3.org/WAI/translations/">All WAI Translations</a>. WAI encourages translations in all languages. If you might be interesting in translating resources, see <a href="https://www.w3.org/WAI/about/translating/">Translating WAI Resources</a>. Thank you to all who contribute to translations.</p>
          </article>
          <a href="/WAI/news/" class="button button-more"><span>See All News</span></a> <a href="/WAI/news/subscribe/" class="button button-more button-secondary"><span>Subscribe to WAI News</span></a>
        </section>
      </div>
      <div class="col2">
        <section class="teaser audiences-inline" aria-labelledby="audiences-title">
          <div role="banner" class="teaser-h">
            <h2 role="heading" id="audiences-title">
              <span class="subtitle">See what we have for you: </span>
              <span class="title">Get Resources for…</span>
            </h2>
          </div>
          <div role="list" class="two small columns">
            <div role="listitem"><a href="/WAI/roles/new/">Getting Started</a></div>
            <div role="listitem"><a href="/WAI/roles/writers/">Content Writers</a></div>
            <div role="listitem"><a href="/WAI/roles/designers/">Designers</a></div>
            <div role="listitem"><a href="/WAI/roles/developers/">Developers</a></div>
            <div role="listitem"><a href="/WAI/roles/testers/"> Evaluators, Testers </a></div>
            <div role="listitem"><a href="/WAI/roles/managers/">Managers</a></div>
            <div role="listitem"><a href="/WAI/roles/policy-makers/">Policy Makers</a></div>
            <div role="listitem"><a href="/WAI/roles/trainers/"> Trainers, Educators </a></div>
            <div role="listitem"><a href="/WAI/roles/users/">Web Users, People with Disabilities, Advocates</a></div>
            <div role="listitem"><a href="/WAI/resources/">Everyone (All WAI Resources)</a></div>
            <div role="listitem"><a href="/WAI/translations/">Other Languages</a></div>
          </div>
        </section>
        <section class="teaser resource-inline" aria-labelledby="course-title">
          <a class="teaser-c stealthy-link col1" href="https://www.w3.org/WAI/fundamentals/foundations-course/">
            <div role="banner" class="teaser-h">
              <h2 role="heading" id="course-title">
                <span class="subtitle">Training Course:</span>
                <span class="title">Digital Accessibility Foundations</span>
              </h2>
            </div>
            <img src="/WAI/content-images/news/2019-12-03-w3cx-accessibility-intro.jpg" alt="" />
            <p>The free "Introduction to Web Accessibility" online course provides the foundation you need to make your digital technology accessible. It's designed for:</p>
            <div role="list">
              <div role="listitem">technical and non-technical learners</div>
              <div role="listitem">developers, designers, ux, writers, managers, advocates</div>
              <div role="listitem">professionals, instructors, students</div>
            </div>
            <div>
              <span class="button">About the Free Online Course</span>
            </div>
          </a>
        </section>
        <section class="teaser media-inline" aria-labelledby="perspectives-title">
          <div role="banner" class="teaser-h">
            <h2 role="heading" id="perspectives-title">
              <span class="subtitle">Web Accessibility Perspectives: </span>
              <span class="title">Video Captions</span>
            </h2>
          </div>
          <div class="media-wrapper">
            <iframe title="Video" width="560" height="315" src="https://www.youtube-nocookie.com/embed/iWO5N3n1DXU" allowfullscreen=""></iframe>
          </div>
          <p>Captions are the audio information in text that is synchronized with the audio and visual content. Captions are called "subtitles" in some regions. </p>
          <p>Video Captions are essential for people with disabilities and benefit everyone in a variety of situations.</p>
          <div class="button-group">
            <a class="button button-more" href="/WAI/perspective-videos/captions/"><span>More About Video Captions</span></a>
            <a class="button button-more button-secondary" href="/WAI/perspective-videos/"><span>See All Perspectives Videos</span></a>
          </div>
        </section>
        <section class="teaser resource-inline" aria-labelledby="media-title">
          <a class="teaser-c stealthy-link col1" href="/WAI/media/av/">
            <div role="banner" class="teaser-h">
              <h2 role="heading" id="media-title">
                <span class="subtitle">Featured Resource: </span>
                <span class="title">Making Audio and Video Media Accessible</span>
              </h2>
            </div>
            <img src="/WAI/content-images/news/2019-09-10-making-audio-and-video-media-accessible.png" alt="" />
            <p>This media resource helps you understand and create captions/subtitles, audio description of visual information, descriptive transcripts, and sign language for media. It introduces user experiences and benefits to organizations.</p>
            <div>
              <span class="button">Making Audio and Video Media Accessible</span>
            </div>
          </a>
        </section>
        
      </div>
    </div>
    <div class="default-grid teaser teaser-sponsors">
      <div class="inner">
        <div role="banner" class="teaser-h">
          <h2 role="heading" class="title">Sponsors and Funders</h2>
        </div>
        <p>WAI is supported in part by the following organizations. Thank you!</p>
        <div role="list">
          <div role="listitem"><span><a href="https://www.hp.com">HP</a></span></div>
          <div role="listitem"><span><a href="http://www.ibm.com/able">IBM Corporation</a></span></div>
          <div role="listitem"><span>European Commission (<abbr>EC</abbr>) <a href="https://ec.europa.eu/programmes/horizon2020/">Horizon 2020</a> — 822245 (<a href="https://www.w3.org/WAI/about/projects/wai-guide/">WAI-Guide Project</a>), 101004794 (<a href="https://www.w3.org/WAI/about/projects/wai-coop/">WAI-CooP Project</a>)</span></div>
          <div role="listitem"><span><a href="https://www.fordfoundation.org/">Ford Foundation</a>, <a href="https://www.fordfoundation.org/work/challenging-inequality/technology-and-society/">Technology and Society Program</a> (<a href="https://www.w3.org/WAI/about/projects/wai-core-ford/">WAI-Core Ford Project</a>)</span></div>
          <div role="listitem"><span>US Department of Health and Human Services, <a href="https://www.acl.gov/about-acl/about-national-institute-disability-independent-living-and-rehabilitation-research">National Institute for Disability, Independent Living and Rehabilitation Research</a>, contract HHSP23301500054 (<a href="https://www.w3.org/WAI/Core2015/">WAI-Core 2015, 2022 Project</a>)</span></div>
        </div>
        <p>WAI welcomes <a href="/WAI/about/sponsoring/">additional sponsors</a>.</p>
        <br />
        <p id="netlify" style="font-size: small">
          Previews of this site are powered by <a href="https://www.netlify.com/" style="color:black">Netlify</a>. 
        </p>
      </div>
    </div>
    <a class="button button-backtotop" href="#top">
      <span>
        <svg focusable="false" aria-hidden="true" class="icon-arrow-up ">
          <use xlink:href="/WAI/assets/images/icons.svg#icon-arrow-up"></use>
        </svg>
        Back to Top
      </span>
    </a>
  </main>
  <footer class="site-footer grid-4q" aria-label="Site">
    <div class="q1-start q3-end about">
      <div>
        <p><a class="largelink" href="https://www.w3.org/WAI/" lang="en" dir="auto" translate="no">W3C Web Accessibility Initiative (WAI)</a></p>
        <p>Strategies, standards, and supporting resources to make the Web accessible to people with disabilities.</p>
      </div>
      <div class="social" lang="en" dir="auto" translate="no">
        <div role="list">
          <div role="listitem">
            <a href="https://w3c.social/@wai">
              <svg focusable="false" aria-hidden="true" class="icon-mastodon ">
                <use xlink:href="/WAI/assets/images/icons.svg#icon-mastodon"></use>
              </svg>
              Mastodon
            </a>
          </div>
          <div role="listitem">
            <a href="https://www.linkedin.com/company/w3c-wai/">
              <svg focusable="false" aria-hidden="true" class="icon-linkedin ">
                <use xlink:href="/WAI/assets/images/icons.svg#icon-linkedin"></use>
              </svg>
              LinkedIn
            </a>
          </div>
          <div role="listitem">
            <a href="https://www.w3.org/WAI/feed.xml">
              <svg focusable="false" aria-hidden="true" class="icon-rss ">
                <use xlink:href="/WAI/assets/images/icons.svg#icon-rss"></use>
              </svg>
              Feed
            </a>
          </div>
          <div role="listitem">
            <a href="https://www.youtube.com/channel/UCU6ljj3m1fglIPjSjs2DpRA/playlists/">
              <svg focusable="false" aria-hidden="true" class="icon-youtube ">
                <use xlink:href="/WAI/assets/images/icons.svg#icon-youtube"></use>
              </svg>
              YouTube
            </a>
          </div>
          <div role="listitem"><a href="https://www.w3.org/WAI/news/subscribe/" class="button">Get News in Email</a></div>
        </div>
      </div>
      <div lang="en" dir="auto"  translate="no">
        <p>Copyright © 2024 World Wide Web Consortium (<a href="https://www.w3.org/">W3C</a><sup>®</sup>). See <a href="/WAI/about/using-wai-material/">Permission to Use WAI Material</a>.</p>
      </div>
    </div>
    <div lang="en" dir="auto"  translate="no" class="q4-start q4-end">
      <div role="list" style="margin-bottom:0">
        <div role="listitem"><a href="/WAI/about/contacting/">Contact WAI</a></div>
        <div role="listitem"><a href="/WAI/sitemap/">Site Map</a></div>
        <div role="listitem"><a href="/WAI/news/">News</a></div>
        <div role="listitem"><a href="/WAI/sitemap/#archive">Archive</a></div>
        <div role="listitem"><a href="/WAI/about/accessibility-statement/">Accessibility Statement</a></div>
        <div role="listitem"><a href="/WAI/translations/"> Translations</a></div>
        <div role="listitem"><a href="/WAI/roles/">Resources for Roles</a></div>
      </div>
    </div>
  </footer>
  
  <script src="/WAI/assets/scripts/details4everybody.js?1731036558659470431"></script>
  
  <script src="/WAI/assets/scripts/svg4everybody.js?1731036558659470431"></script>
  <script>
    svg4everybody();
  </script><script>
    var translationStrings = {};
  </script>

Proper native HTML version:

You can also use this bookmarklet version to run against any web page: Role Reverser. Just drag this link to your favourites/bookmarks and run it when you want to.

Role Reverser

Some music news ...

Also available here: