Accessibility issues and css

  • Resolved networka

    (@networka)


    2 years, 5 months ago

    Hi there,

    I just found the plugin and it seems very nice :)! I bought the Premium version to support the developmanet :).

    It would be awesome if you can add accessibility support to be wcag compliant. At the moment it is not possible to navigate with the keyboard and a screenreader.

    And can you plaese remove this css code:

    input[name=”s”], input[name=”cpsp-autocomplete”] {

    1. text-transform: lowercase;

    Thank you!

    • This topic was modified 2 years, 5 months ago by networka.
Viewing 15 replies - 1 through 15 (of 21 total)
1 2
  • Plugin Author codepeople

    (@codepeople)

    2 years, 5 months ago

    Hello @networka

    Thank you very much for using our plugin and your suggestions.

    About the lowercase text, you don’t need to edit the code. You only should enter the style definition below through the menu option “Appearance > Customize > Additional CSS”:

    input[name="s"], input[name="cpsp-autocomplete"] {
    text-transform: initial !important;
}

    Best regards.

    Thread Starter networka

    (@networka)

    2 years, 5 months ago

    Hi,

    my question was more why is there the text-transform css? Makes no sense to me. Beacusae in german you have words with capital letter etc. I know how to overwrite this :).

    And what yre your thoughts on accessibility?

    Plugin Author codepeople

    (@codepeople)

    2 years, 5 months ago

    Hello @networka,

    The plugin transforms texts in lowercase because the autocomplete texts can have different formats and be displayed displaced below the search terms you are typing.

    Regarding the WCAG, we will check the results popup with WCAG compliance checker tools and include the necessary modifications in a next plugin update.

    Best regards.

    Thread Starter networka

    (@networka)

    2 years, 5 months ago

    Perfect. Main issue is, that you cannot use keyboard only.

    Can that be solved differently? Because imho german is not the only language with capital letters…

    Plugin Author codepeople

    (@codepeople)

    2 years, 5 months ago

    Hello @networka

    A solution would be to modify the styles via the WordPress menu option “Appearance > Customize > Additional CSS”, as we recommended in a previous entry. This modification would not be affected by plugin or theme updates.

    Best regards.

    Thread Starter networka

    (@networka)

    2 years, 5 months ago

    I know. But I have to do this on every website I use the plugin. Do you have an example when there isn‘t lowercase set that it is leading to any issues? I did not understand your explanation why you don‘t want to remove this css….

    Plugin Author codepeople

    (@codepeople)

    2 years, 5 months ago

    Hello @networka

    The autocomplete is based on Google recommendations. For example, assuming you type “Lorem” and the autocomplete recommends “lorem ipsum”, the text will be displayed displaced. Please look at the screenshot image below:

    Best regards.

    Thread Starter networka

    (@networka)

    2 years, 5 months ago

    Ok now I can see it, too bad there is no solution at all. For now I have to deactivate the auto complete feature…

    Would be great if you can solve this and the accessibility issues with future updates :).

    Thank you for the nice plugin!

    Plugin Author codepeople

    (@codepeople)

    2 years, 5 months ago

    Hello @networka

    We have released a plugin update (just now) that allows you to navigate between the found items using the keyboard.

    Best regards.

    Thread Starter networka

    (@networka)

    2 years, 5 months ago

    Thank you :)! After my wcag audit I let you know if there are any other issues regarding accessibility :).

    Have a great weekend!

    Thread Starter networka

    (@networka)

    2 years, 5 months ago

    @codepeople can you please add me as a project translator? I already translate other plugins I like. I want to provide the german translation. And please sync the translation with the Pro version also.

    webchroma

    (@webchroma)

    2 years, 5 months ago

    Hi, thank You for the the last Update. There is still an Issue remaining, when moving with the keyboard through the the results they don’t get highlighted (no :focus).

    ciao

    Plugin Author codepeople

    (@codepeople)

    2 years, 5 months ago

    Hello @webchroma

    Please clear your browser’s cache. The plugin displays the focused term underlined in wave format and pink color.

    Could you please indicate the link to the page that includes the search box?

    Best regards.

    webchroma

    (@webchroma)

    2 years, 5 months ago

    hi,

    endeed the cache.

    thanks

    Thread Starter networka

    (@networka)

    2 years, 5 months ago

    Hi there,

    and wcag auditor found issues regarding the dropdown menu:

    Comboboxes are only output as input fields, not as input fields with auto-completion, and screen reader users are not informed that a results list has been expanded and how many results (please slightly delayed) are currently available.
    You can refer to the following page for the correct implementation of combo boxes:
    https://www.w3.org/WAI/ARIA/apg/patterns/combobox/.
    The following example probably comes closest to your results list:
    https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/grid-combo/.

Viewing 15 replies - 1 through 15 (of 21 total)
1 2

The topic ‘Accessibility issues and css’ is closed to new replies.