WP Accessibility
[resolved] How to create custom triggers (4 posts)

  1. lenehanj
    Posted 2 years ago #


    I am currently using your plugin and it is working great, I am hoping to customize it slightly.

    I was hoping to create some text controls for the text enlargement and high contrast.

    For example, I was hoping to create some text that says:
    "Text Size: AA" and "Contrast: High/Low".

    In the example above I wanted the end user to select one of the "A"s to control the text size.(One of the "A"s would be bigger than the other one.)

    Also the end user could either click on the "High" or "Low" to change the contrast.

    The triggers "Text Size: AA" and "Contrast: High/Low" would be positioned in a menu across the top of the web page.

    Any help you can give me on this will be greatly appreciated.

    Kind regards



  2. Joe Dolson
    Plugin Author

    Posted 2 years ago #

    That's actually a pretty significant difference; it's really beyond the scope of this control. If you only wanted to change what the controls look like and what they say, that wouldn't be a huge problem; but changing how it behaves is much more significant. It's really beyond what I can do as support.

  3. lenehanj
    Posted 2 years ago #

    Hi Joe

    Thanks for your response. As a feature request I think it would worth considering having an option to change the controls to the more common approach of controlling text by have three A's of different sizes (small, medium and large) and three boxed C's for three levels of contrast.

    This arrangement seems to be the norm on web sites with accessibility controls. Am I incorrect to assume this? Is the arrangement of 3 A's for text size and 3 C's for contrast not favored by users with accessibility needs?

    I think by providing these controls on your plugin, you would help standardize these controls across the largest web publishing platform in the world.

    C'mon WordPress make these controls as part of the core and make WordPress the most popular web publishing platform in the world lead the way!


  4. Kenneth Feldman
    Posted 2 years ago #

    I have achieved this functionality, via somewhat of a hack.

    I hide the div .a11y-toolbar by setting {display: none} via my stylesheet.

    Then I copied and pasted the links that the JavaScript generates and placed them wherever I want to in my design -- for me I placed them in a widget.

    <a href="#" title="Toggle Font size"><span class="offscreen">Toggle Font size</span><i class="icon icon-font"></i></a>
    <a href="#" title="Toggle High Contrast"><span class="offscreen">Toggle High Contrast</span><i class="icon icon-adjust"></i></a>

    [Moderator Note: Please post code & markup between backticks or use the code button. Your posted code may now have been permanently damaged by the forum's parser.]

    Of course, this does not solve the problem of multiple sizes represented by their own links, but at least it gives control of placement of the links.

Topic Closed

This topic has been closed to new replies.

About this Plugin

  • WP Accessibility
  • Frequently Asked Questions
  • Support Threads
  • Reviews

About this Topic


No tags yet.