Accessibility Issue with the plugin

  • I am trying to integrate this plugin within the New York University’s WordPress multisite environment. For that this plugin needs to meet the WCAG 2.0 AA standards of Web Accessibility. This plugin meets all the core requirement but just need a few aria-labels on the “Add Importer” page. The following buttons need to have an aria-label to make this plugin compliant with WCAG 2.0 AA.

    Original Button HTML
    1. <select name=”jc-importer_template” id=”jc-importer_template”><option value=””>Choose a template</option><option value=”user”>User</option><option value=”post”>Post</option><option value=”page”>Page</option><option value=”taxonomy”>Taxonomy</option><option value=”custom-post-type”>Custom Post Type</option></select>?
    2. <input type=”radio” name=”jc-importer_import_type” value=”upload” checked=”checked”>?
    3. <input type=”radio” name=”jc-importer_import_type” value=”remote”>?
    4. <input type=”radio” name=”jc-importer_import_type” value=”local”>?
    5. <input type=”radio” name=”jc-importer_import_type” value=”post”>?
    6. <input type=”file” name=”jc-importer_import_file” id=”jc-importer_import_file”>

    Suggested Correct HTML
    1. <select aria-label=”import template button” name=”jc-importer_template” id=”jc-importer_template”><option value=””>Choose a template</option><option value=”user”>User</option><option value=”post”>Post</option><option value=”page”>Page</option><option value=”taxonomy”>Taxonomy</option><option value=”custom-post-type”>Custom Post Type</option></select>?
    2. <input aria-label=”upload file button” type=”radio” name=”jc-importer_import_type” value=”upload” checked=”checked”>?
    3. <input aria-label=”Remote file radio button” type=”radio” name=”jc-importer_import_type” value=”remote”>?
    4. <input aria-label=”Local File Radio Button” type=”radio” name=”jc-importer_import_type” value=”local”>?
    5. <input aria-label=”Push Request Radio button” type=”radio” name=”jc-importer_import_type” value=”post”>?
    6. <input aria-label=”import file button” type=”file” name=”jc-importer_import_file” id=”jc-importer_import_file”>

    It would be great if this correction could be made. So that the plugin could be integrated with NYU’s WordPress multisite.

Viewing 4 replies - 1 through 4 (of 4 total)
  • Plugin Author ImportWP

    (@jcollings)

    Hi konainm,

    Thank you for your interest in the plugin, the interface has been neglected for a while now, focusing more on improving the importer and optimisation for speed and memory usage. I will be rebuilding the interface in the near future as it hasnt really been changed in over 4 years.

    I have taken your advise and added the aria-label attribute onto all imputs, and should be added in the next minor version, which should be coming out in the next few days, just finalizing some extra importer optimsations before i do.

    James

    Thread Starter konainm

    (@konainm)

    Hello James,

    Thank you for your quick response on this and for fixing the labels.Looking forward to your release.

    Best,
    Konain

    Thread Starter konainm

    (@konainm)

    Hello James,

    Thank you for fixing the previous aria-label issues.

    The following issues are now being flagged in the UI. It would be great if you could take a look.

    General issues:

    Issue 1: If you make the changes in the subsections below, you would also need to update the following to keep accessibility consistent

    Location: <h3 class=”iwp-about__heading”><span>ImportWP</span></h3>
    Suggested Fix: <h2 class=”iwp-about__heading”><span>ImportWP</span></h2>

    Issue 2: Color contrast on the version number is low. Suggestion to make the green a bit darker

    Location: .iwp-about__version {
    background: #608b60;
    }
    Suggested Fix: .iwp-about__version {
    background: #274b27;
    }

    Location: Settings -> ImportWP -> Importers

    Issue 1: The page should always start with an H1 tag

    Location: <h2>Importers</h2>
    Suggested Fix: <h1>Importers</h1>

    Location: Settings -> ImportWP -> Add Importer

    Issue 1: The page should always start with an H1 tag

    Location: <h2>ImportWP</h2>
    Suggested Fix: <h1>ImportWP</h1>

    Issue 2: Radio inputs with the same name attribute value must be part of a group

    Location: On all Radio Buttons
    Suggested Fix: Remove the name attribute from those tags (easiest and most accessible fix)

    Or else at least 1 of the following should be fixed

    • All elements with the name “jc-importer_import_type” do not reference the same element with aria-labelledby
    • Element does not have a containing fieldset or ARIA group

    Location: ImportWP -> Settings

    Issue 1: The page should always start with an H1 tag

    Location: <h2>Settings</h2>
    Suggested Fix: <h1>Settings</h1>

    Location: ImportWP -> Go Premium

    Issue 1: The green color on the “Buy ImportWP Pro” should be a bit darker

    Location: .importwp-pro-upgrade .import-wp-btn {
    background: #608b60;
    }
    Suggested Fix: .importwp-pro-upgrade .import-wp-btn {
    background: #274b27;
    }

    Thanks,
    Konain

    • This reply was modified 6 years, 1 month ago by konainm.
    Thread Starter konainm

    (@konainm)

    Hello James,

    I hope you are doing well. I was wondering as to if you would be willing to work on making the above changes. If you approve the above changes and are willing to share your GitHub link I would be happy to create a pull request to fix those issues.

    Warm regards,
    Konain

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Accessibility Issue with the plugin’ is closed to new replies.