This plugin makes your website more accessible to people with disabilities. This plugin is nicely designed and has many useful features for your site visitors.
This plugin needs some special css markup to work proper. Please check the section “Special Markup”.
Screenshot
Settings Page
Go to the settings page to enable and configure the plugin.
Font Size, High Contrast, Simple View, Print View
These options requires a special markup. Please review the section “Special Markup” in this article.
Simple Language
For some reasons, it is a good idea to provide a summary of the most important informations in simple language. You can either add a pdf or any other document or link a content page with content in simple language.
Sign Language
To make your website more accessible you should provide a video in sign language with a short overview about the most important informations.
Special Markup
Font Size
If you want to give the site visitor the ability to can change the font size, it is recommended to define all font-size definitions except for the html tag in REM values. Then add a pixel value to your site html tag.
html { font-size: 16px; }
body { font-size: inherit; }
h1 { font-size: 2.4rem; }
h2 { font-size: 1.8rem; }
p { font-size: 1rem; }High Contrast
To make your theme high contrast ready, add extra css to your theme. The accessibility toolbar will simply add a special class “contrast” to your site html.
html.contrast * { color: orange !important; background: black !important; border-color: orange !important; }
html.contrast a { text-decoration: underline !important; }
html.contrast img { filter: grayscale(100%) !important; background: orange !important; border: 2px orange solid !important; }Simple View
To make your theme simple view ready, add extra css to your theme. The accessibility toolbar will simply add a special class “simplified” to your site html.
html.simplified #header-topbar { display: none !important; }
html.simplified #header-slider { display: none !important; }
html.simplified #site-main { max-width: 720px !important; }Print View
To make your theme print ready, add extra css to your theme. The accessibility toolbar will simply add a print button to your site.
@media print {
#header-topbar { display: none !important; }
#header-slider { display: none !important; }
}