I need to make Support System accessible for WCAG 2.0 compliance.

I need to make my site as accessible as possible. Support is a really huge thing as you see here :slight_smile:. The system as is doesnt appear accessible.

The biggest thing is navigation in the FAQ's dropdowns, i tried to use the page with ChromeVox and it would not tab through the dropdown, it stopped and didn't read through the dropdown

Can someone help me make modifications?

This is the page in question:

https://abil***j**.org/frequently-asked-questions

  • Alex Stine
    • System Administrator

    Hello marge
    Hope you're well today!

    I work on all things accessibility here, so thanks for bringing this to our attention. I was able to navigate the combo box fine in Firefox using NV Access by doing the following.
    1. Navigating to the first combo box by pressing "c" in browse mode.
    2. Pressing "space" to go in to edit mode.
    3. Press "alt" followed by "down arrow".

    At this point it should have expanded the combo box that way you can navigate it with the up and down arrows. Once you have found the category you want, simply press "enter" to reload the page with the selected category.

    Please let me know if this helps and if I can assist you with any further questions.

    Thanks,
    Alex :smiley:

  • Alex Stine
    • System Administrator

    Hello marge
    Hope you're well today!

    Okay, I see what it means by talking about missing labels. Could you please try adding this code to your themes functions.php file? It would be best to add to a child theme that way it is not lost on upgrade.

    function add_labels_for_support_faq() { ?>
    <script type="text/javascript">
    jQuery(document).ready(function($) {
    $('#faq-cat-id').append('<label class="screen-reader-text" for="faq-cat-id">Select a Category</label>');
    $('input[name="support-system-faq-s"]').attr('id', 'support-system-faq-s').append('<label class="screen-reader-text" for="support-system-faq-s">Search FAQs</label>');
    });
    </script>
    <?php }
    add_action('wp_footer', 'add_labels_for_support_faq');

    Not sure what else it is talking about with headings, that all seems fine. Could you please give that code a go and see where that gets you?

    Can't wait to hear back.

    Cheers,
    Alex :smiley:

  • Alex Stine
    • System Administrator

    Hello marge
    Hope you're well today!

    I'll be honest, I cannot replicate the tabbing issue on Windows 7, Firefox, NV Access screen reader. I can however see the labels were not added. Could you please grant me support staff access? Then I can at least get those labels working for you.
    https://premium.wpmudev.org/docs/getting-started/getting-support/#chapter-5

    Please reply back when you enable access and I'll see what I can do. Do you have issues with tabbing on other sites such as the main WPMU DEV site here?

    Cheers,
    Alex :smiley:

  • Alex Stine
    • System Administrator

    Hello marge
    Hope you're well today!

    I tried to update the code, however I got this error.

    Unable to communicate back with site to check for fatal errors, so the PHP change was reverted. You will need to upload your PHP file change by some other means, such as by using SFTP.

    Could you please send FTP details to me via the private contact form?
    https://premium.wpmudev.org/contact#i-have-a-different-question

    In the subject field, include this text so it is assigned to me.

    Attn: Alex Stine

    Be sure to include the following.
    - FTP host, port, username, and password.
    - Link back to this support ticket.

    Once I receive your details, I will make the code changes and get back with you as soon as possible.

    Thanks,
    Alex :smiley:

  • Alex Stine
    • System Administrator

    Hello marge
    Hope you are well!

    I have removed the custom JS code I asked you to add and replaced it with a custom plugin version of Support System. Could you please check the front-end now? Should be working as expected.

    Can't wait to hear back. :slight_smile:

    Thanks,
    Alex :smiley:

  • marge
    • Design Lord, Child of Thor

    Hi Alex,
    Thanks for all of your work! I noticed some selectors have changed as well. (I've been changing the styles for more contrast.)

    I'm still running into the same errors on the FAQ's page, like missing form label.
    http://wave.webaim.org/report#/https://abilityjobs.org/frequently-asked-questions/#panel-1

    How difficult would it be to use tabs instead of a drop-down? The drop-down seems problematic like before. When I use the up and down arrow while using ChromVox, it's as if it's loading and reading a new page. ChromeVox Reads the site title, then page title, then category. This same behavior was happening before.

    What do you think?
    Thanks very much!

    Marge

  • Alex Stine
    • System Administrator

    Hello marge
    Hope you are well!

    I checked the FAQ page and can confirm labels are there. Your report above could be using cached information. The labels are hidden off the page via your themes "screen-reader-text" class. Switching to tabs would not be an easy task sadly, combo boxes here are the way to go.

    Please let me know if I can help with any further questions.

    Cheers,
    Alex :smiley:

  • marge
    • Design Lord, Child of Thor

    Hey Alex,
    Thanks! I'm now working on the contrast colors for accessibility. I'm not sure if I wiped out the "focus" color in the combo box. Looks like each element is styled separately.

    I'd like to set a focus color throughout the support system. I can see some confusion if a user enters a keyword with 0 (zero) results, then tried to use the combo box.
    Maybe event X number of results. Example: https://www.screencast.com/t/v3cNCwjrBspE
    The page refresh doesn't always clear the search bar.
    Any suggestions?

    Thanks sooo much for all your help!
    Marge

  • Alex Stine
    • System Administrator

    Hello marge
    Hope you are well!

    I really cannot advise much on colors or styling as I have lost most of my vision. :slight_smile: I might not be to big of a help there. I am honestly not sure why the search field is not clearing, but I have adjusted some other parts of the code. That should hopefully provide a better user experience.

    Not sure what to say with the issues you are having with your Chrome box. I am not really sure how a screen reader works there, I am mainly testing on a Windows environment. You may want to see if there are any articles floating around on the web that may guide you in the right direction for Chrome box accessibility.

    Please let me know if I can assist you with any further questions.

    Cheers,
    Alex :smiley:

  • marge
    • Design Lord, Child of Thor

    Hi Alex, Thanks for your note!

    I'm not looking for anything beautiful :slight_smile:, just readable text. I've been styling each individual element. Is there any more efficient way to do that? Or is that the best way since I'm using the WPMUDEV style sheet as a base.

    ChromeVox is an accessibility add-on Google uses in the browser. What screen readers do you use/test with WPMUDEV applications?

    Thanks!!
    Marge

  • Alex Stine
    • System Administrator

    Hello marge
    Hope you're well!

    Styling is really not an area I specialize in since I no longer have the vision to mess with CSS. Styling each specific element is really the only way to go unless you can find a unique ID or class shared between say a couple text fields. Then you can change the styles for both text fields at one time.

    I was unaware of ChromeBox being a browser add-on. I thought it might have been another name for the Chrome Book laptops. :slight_smile: For accessibility testing, I use the following setup.
    Browser: Firefox (latest)
    Operating System: Windows 7 Pro
    Screen Reader: NV Access NVDA (latest)

    Hope this helps. Please let me know if I can help you with any further questions.

    Cheers,
    Alex :smiley:

  • marge
    • Design Lord, Child of Thor

    Hi Alex,
    Thanks! I've downloaded the NVDA to test.

    One further question regarding the dropdown on FAQ's. I'm trying to make the focus, active and hover elements more noticeable and uniform (sorry another CSS question) for users.
    It's currently a blue color. (We are going black, white and red for best visibility.)The dropdown on the FAQ's is picking up the hover style from browsers. After talking to WPMUDEV support, they provided this link that has recommendations using jQuery to replace the current dropdown.
    After scanning around a bit I found another possible option.

    option:hover {
        box-shadow: 0 0 10px 100px #fff inset !important;
        background-color:red;
        outline-color: red;
        }

    I tried inserting this in different ways, but was not successful. I want to be sure there is no other way or if the jQuery is not recommended for accessibility

    Thanks very much!:smiley:

    Marge

  • Katya Tsihotska
    • Support & QA

    Hi marge

    Hope you're having a great day!

    Unfortunately, CSS masks aren't fully supported by Internet Explorer, Edge, and some other browsers. You can find more information about supporting masking by different browsers here:
    https://caniuse.com/#feat=css-masks

    For better compatibility, I would recommend you replace masking with FontAwesome icons. To do this you can use the following CSS code:

    #support-system .accordion .support-system-handldiv {
        background-color: transparent !important;
        background-image: none;
        -webkit-mask: none;
        mask-image: none;
        text-align: center;
    }
    #support-system .accordion .active .support-system-handldiv {
        background-color: transparent !important;
        background-image: none;
        -webkit-mask: none;
    }
    #support-system .accordion .support-system-handldiv:before {
        content: '\f067';
        color: #FFF;
        font-family: FontAwesome;
    }
    #support-system .accordion .active .support-system-handldiv:before {
        content: '\f068';
    }

    You can add it to the Appearance -> Customize -> Additional CSS section or add it via the following plugin: https://wordpress.org/plugins/custom-css-js/

    Kind regards,
    Katya

  • marge
    • Design Lord, Child of Thor

    This is more of what I was initially looking for. Thank you!!!!!!!!! Awesome!
    I made a few changes background vs. background-image. Took out the masking altogether since I added that. The CSS below worked fine. Do you see any issues with it?

    #support-system-faqs UL.accordion.support-system-faqs-list LI.accordion-navigation.support-system-faq A.clearfix
    {
    	background-color: #000000;
    	padding: 10px 0px 0px 10px;
    }
    #support-system-faqs .support-system-faqs-list .support-system-faq A.clearfix H3.support-system-faq-title
    {
    	color: #FFFFFF;
    }
    #support-system .accordion .support-system-handldiv {
        background-color: transparent !important;
        background: none !important;
        text-align: center;
    }
    #support-system .accordion .active .support-system-handldiv {
        background-color: transparent !important;
        background: none !important;
      }
    #support-system .accordion .support-system-handldiv:before {
        content: '\f067';
        color: #FFF;
        font-family: FontAwesome;
    }
    #support-system .accordion .active .support-system-handldiv:before {
        content: '\f068';
    }

    One last issue: On MS Edge and sometimes on Chrome, I see this:
    https://www.screencast.com/t/1WS277OlfBA

    Many thanks for all the help!
    Marge

  • Katya Tsihotska
    • Support & QA

    Hi marge

    I made a few changes background vs. background-image. Took out the masking altogether since I added that. The CSS below worked fine. Do you see any issues with it?

    I've checked your CSS and it looks fine for me, I haven't noticed any mistakes there.

    One last issue: On MS Edge and sometimes on Chrome, I see this:
    https://www.screencast.com/t/1WS277OlfBA

    It looks like it happens because the "Filter" button is hidden by javascript code. Javascript usually works a bit slower than CSS, so that's why the button appears for few seconds while the page is loading. Try to use the following CSS to fix this:

    form.support-system-filter input[name="support-system-submit-filter"] {
        display: none !important;
    }

    Let us know how it works.

    Kind regards,
    Katya

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.