Accessibility – alternative texts for control elements (flag-links)

  • Resolved neralex

    (@neralex)


    1 year, 2 months ago

    Hey there,

    at the moment I’m doing accessibility-tests for client-websites and found some issues with alternative texts for control elements, in this case your flag-links to switch the language.

    Requirement: Graphic control elements must have a meaningful alternative text that describes the destination and purpose of the link.

    In the flollowing example the link itself has a title-attribute with “German”. But the alt-attribute of the <img>-tag has only the short-version “de” but it should have something like as it used for the link-title: “German” when someone is using a screen reader.

    Example:

    <a href="#" title="German" data-gt-lang="de" class="glink nturl notranslate gt-current-lang"><img loading="lazy" src="/wp-content/plugins/gtranslate/flags/svg/de.svg" width="24" height="24" alt="de"></a>

    The NVDA screen reader outputs in this example not enough information for people with visual disabilities:

    Graphic
    de https://mydomain.tld/#

    This issue is not only related to this wordpress-plugin, it exists also with the stand-alone integration of Gtranslate. Is there a way to optimize the alternative texts for he flags-images?

    Thanks in advancea

Viewing 1 replies (of 1 total)
  • Plugin Author edo888

    (@edo888)

    1 year, 2 months ago

    Hi,

    Feel free to modify the javascript code which produces the HTML code for the language switcher. Or you can write extra javascript code to add the necessary extra attributes for “img” elements.

    I believe that since “img” is inside “a” element which has German as title, it should be somehow connected to it.

    For Accessibility purposes our recommendation is always to use the most simple selector, like the Dropdown or Language names without flags.

    Thanks! 🙂

Viewing 1 replies (of 1 total)

The topic ‘Accessibility – alternative texts for control elements (flag-links)’ is closed to new replies.