Semantic HTML for Language Selector Widget Accessibility

Hi there,

I wanted to raise an accessibility issue with the language selector widget’s HTML output.

Currently, the widget renders its language options as a <div> containing <a> tags directly. This structure is not semantically correct for a list of navigational items and is being flagged by accessibility auditing tools.

Current output:

<div class="gt_options" style="display:none">
 <a href="#" class="nturl" data-gt-lang="en">
 <img data-gt-lazy-src="/wp-content/plugins/gtranslate/flags/svg/en.svg" alt="en" src="/wp-content/plugins/gtranslate/flags/svg/en.svg"> English
 </a>
 <a href="#" class="nturl" data-gt-lang="fr">
 <img data-gt-lazy-src="/wp-content/plugins/gtranslate/flags/svg/fr.svg" alt="fr" src="/wp-content/plugins/gtranslate/flags/svg/fr.svg"> French
 </a>
</div>

Expected output:

<ul class="gt_options" style="display:none">
 <li>
 <a href="#" class="nturl" data-gt-lang="en">
 <img data-gt-lazy-src="/wp-content/plugins/gtranslate/flags/svg/en.svg" alt="en" src="/wp-content/plugins/gtranslate/flags/svg/en.svg"> English
 </a>
 </li>
 <li>
 <a href="#" class="nturl" data-gt-lang="fr">
 <img data-gt-lazy-src="/wp-content/plugins/gtranslate/flags/svg/fr.svg" alt="fr" src="/wp-content/plugins/gtranslate/flags/svg/fr.svg"> French
 </a>
 </li>
</ul>

The change is straightforward: replace the outer <div> with a <ul>, and wrap each <a> tag in an <li>.

Using a <ul> with <li> items is the semantically correct approach for a collection of related links.

This is a WCAG 2.1 concern under Success Criterion 1.3.1 (Info and Relationships), which requires that information conveyed through structure is available to assistive technologies.

Would it be possible to update the widget template to output this markup?