Support » Plugin: WP Accessibility » How to create custom triggers

  • Resolved lenehanj



    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


Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Author Joe Dolson


    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.

    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!


    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.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘How to create custom triggers’ is closed to new replies.