Home>Support>Accessability Issue (Vantage Premium)

Accessability Issue (Vantage Premium)

Hello,
I am fairly new to Vantage and I just downloaded the Premium version yesterday, so perhaps I am just missing it.

Using VoiceOver (a screen reader for the blind) on my iPhone the menu seems to work except when you arrive at a menu that has a submenu.

Here is a portion of my menu…

Home
About Us
–>Board of Directors
–>Meeting Agendas
Service Projects

(NOTE: The “–>” is not actually in the menu. That was just to show you what the submenu is.)

Here is what VoiceOver says…

“Home link”
“Slash link image”
“About Us link”
“Service Projects link”

Through experimentation I discovered the “slash link image” is what to click to get the About Us submenu”. That isn’t good for a couple of reasons. First, the slash image appears before you reach the About Us menu item; therefore, logically, if you can figure out the slash image is what activates a submenu, you would assume the submenu is associated with the Home menu item because it appears after the Home menu item. Also, “Slash image link” does not indicate to someone who is using a screen reaader that by clicking on it you will get a submenu, let alone a submenu for the About Us menu item.

Another problem I am having when using VoiceOver is once I open the submenu there doesn’t appear to be a clear way to return to the main menu without completely refreshing the page.

Any ideas on how I can address these issues? Unfortunately, I am not a PHP guy. However, it is important the site be accessible to screen readers. The site is for my Lions Club, and not only do we have members who are blind / visually impaired, Lions Clubsespecially seek ways to help those who are blind / visually impaired.

You can view my site by going to: www.StocktonSanJoaquinLions.org. Please ignore my mess though. I just started this project. :)

Thanks for your help!

Warmly,
Hy

Hayim “Hy” Cohen,
Stockton, California | USA

URL: http://www.stocktonsanjoaquinlions.org

This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.

  1. 9 years, 8 months ago Andrew Misplon
    Hi, I Work Here

    Hi Hy

    Thanks for reaching out and for your feedback.

    Vantage unfortunately isn’t an Accessibility Ready (that’s a tag on the WordPress.org theme directory) theme. That means that it wasn’t developed with this in mind and also hasn’t gone through accessibility testing that themes with that tag on the directory would go through.

    That said Vantage is based on the Underscores starter theme which is built with accessibility in mind.

    With the above in mind, we’ll definitely do what we can to help out here.

    Would you mind testing with a default theme like Twenty Thirteen or Twenty Fifteen activated and see if you’re getting a different result? I can then go take a look at what those themes are doing and see we can tweak Vantage for you.

    In summary, please try finding a theme with a menu that does work in this regard, we can then try resolve from there.

  2. 9 years, 8 months ago Hy Cohen

    Hi Andrew,

    I just jecked both of WordPress’ default themes Twenty Thirteen and Twenty Fourteen. Both of their menus read well using VoiceOver on my iPhone; however, they handle it differently.

    Strictly from a screen reader user’s point of view, the way the Twenty Fourteen menu is read is the “better” of the two because when you are both starting to read through the sub-menu and leave the sub-menu the screen reader verbally tells you so; whereas, the Twenty Thirteen menu doesn’t give you any indication you are in a sub-menu. As long as the website designer uses good naming practices when naming each page that isn’t a problem.

    Now, strictly from a sighted person’s point of view, the Twenty Thirteen theme is best. When you open the menu in the Twenty Fourteen theme the entire contents of the menu is visible at once–including the sub-menu items. With the Twenty Thirteen theme the sub-menu remains “closed” (not visible) until you touch the menu item containing the sub-menu. Additionally, the Twenty Thirteen more closely resembles your theme design since the sub-menu items are not visible until the user wants to view them.

    So, here is a sample of what each menu design would look like as soon as you open the menu in cellphone view without choosing anything–including any item containing the sub-menu.

    TWENTY FOURTEEN MENU

    Home
    About Us
    –> Overview
    –> Board of Directors
    –> Club History
    Contact Us

    TWENTY THIRTEEN MENU

    Home
    About Us
    Contact Us

    And they both look like this once the About Us menu item is selected (but not clicked on to cause it to be viewed)

    Home
    About Us
    –> Overview
    –> Board of Directors
    –> Club History
    Contact Us

    Oh, and I think I forgot to also mention that the Search icon in the menu just says “Landmark” and doesn’t indicate in any way you can search the site from there using Vantage. Once you click on it with the screen reader it does then tell you that you are in a search field. I would imagine at least fixing that should be fairly easy by just adding ALT text to the image (e.g. , or something like that.). I also don’t remember mentioning that using VoiceOver on my Mac (OS X 10.10) using Safari (so I am viewing the full desktop version of the site) the search icon for whatever reason isn’t visible at all. I can’t even click on it using VoiceOver! That is very strange! I will try it on my Windows 8.1 computer once I get into my office at work this morning. It may just be an issue with VoiceOver/OSX/Safari. I will let you know.

    If need be, is there a way to turn off the Search icon and just use a traditional text form field to perform searches? How about forcing cellphone users to use the desktop version of the site instead of the cellphone version, or at least providing a link to allow the full desktop version to be used on a cellphone? Maybe that is a next to worst based choice (having to find another theme).

    I really like your theme, so I truly hope the mobile menu problems can be addressed.

    Please let me know if you have questions. I did my best to explain what is going on with the screen reader.

    Warmly,
    Hy

  3. 9 years, 8 months ago Andrew Misplon
    Hi, I Work Here

    Hi Hy

    Menu:

    Sorry, I missed the entire mobile focus here. The Vantage mobile menu is unfortunately beyond the scope I can assist with from a support perspective. You could consider:

    1. Jetpack plugin > Mobile Theme module: http://jetpack.me/support/mobile-theme/
    2. WP Touch plugin: https://wordpress.org/plugins/wptouch/

    Search:

    The menu search can be de-activated from Appearance > Theme Settings > Navigation > Search in Menu. A regular search widget could be added to the header from Appearance > Widgets > Header.

    However I’ve attempted to fix the problem for you in this child theme:

    https://siteorigin.com/wp-content/uploads/2015/01/vantage-child-menu-search-accessibility.zip

    Install the ZIP from Appearance > Themes > Add New: Upload Theme

    Adding a child theme will cause Customizer, Menu and Widgets to reset. To test it out before re-doing those settings.

Replies on this thread are closed. Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More