Button Accessibility Shortcode

Button Accessibility Shortcode

Button text needs to be unique so visitors using assistive technologies will know where the button links go. Having duplicate buttons with "Learn More or Read More" on a page is an accessible issue. However making the text in the buttons more descriptive can cause issues with the design of the page if you are trying to have buttons that are similar in size.

Add the accessibility shortcode to the button shortcode to create accessible buttons when you want to display multiple "Learn More" buttons on a page. The shortcode will allow the button text to display "Learn More", but adds the additional text for accessibility so a screen reader will read "Learn more about Web Express bundles".

Note: You must add the button shortcode to a page before you can edit the code.


Edit the Button Shortcode:

In the button title part of the shortcode, add the additional invisible descriptive text for accessibility. The invisible text can be placed before or after the button text as long as it makes sense when the full text is read aloud.


 [button url="http://www.colorado.edu" color="blue"]Learn More [invisible]about student projects[/invisible][/button]