An accessibility options or preferences panel is very different from an overlay widget. An options panel allows users to customize settings on your site which can be deeply integrated into your site, allowing these options to behave in a reliable manner. An overlay widget is third party technology that affects your site without any integration and can behave in many unintended ways.
An example of an accessibility options panel is on the CNIB website. There is a “show preference” button at the top of the site which expands a preference area for adjusting how the website is presented.
The Kaya theme introduced an accessibility preferences panel in version 1.10.
Implementing integrated preferences
The first item when adding a preferences panel is determining how to integrate it. In order for child theme authors to utilize it, it needs to be simple and class based. The options have all been applied by adding a CSS class to the body tag of the website. This allows for child theme authors to use the classes in their code.
The next consideration was how to allow users to know when they modified a setting, and to be able to reset that to the default. For the settings each one has a clearly labeled default for site. This allows users to know when the setting is at the default, and allows them to reset each individual setting to the default if desired.
Site preferences with third party plugins
Many third party plugins add their own CSS. In many cases, this is inaccessible and far too much. In these cases, you’ll have to write your own code in your child theme to handle the plugin CSS issues. For simplicity, you may wish to use !important within your child theme. At this time, !important is not used within Kaya for accessibility preferences.
One site I was working on used an eLearning plugin and I had to write over 100 lines of CSS just to fix the fonts which had all been set in px instead of rems. Instead of allowing the site to set the sizes for text, the eLearning plugin overrode everything, and they did it all separately. Sometimes their code even used !important. It was a couple of needless hours because of poorly written plugin CSS.
Selecting preferences to offer
The first consideration is what preferences you offer to visitors. The Kaya theme includes five options, and of course allows website owners to enable or disable the preference panel completely. By default, the preferences panel is off and must be turned on by website administrators.
Once the preferences panel is enabled, there are five options site administrators can enable. Preferences must be enabled individually, which allows websites flexibility in what options they give their visitors.
- Text size
- Line spacing
- Change font
- Change contrast
- Enhance inputs
Text size
Text size allows website visitors to change the size of text. Text size is implemented in Kaya with rems, allowing for the website to inherit user browser preferences. This also makes it easier to resize the text with a single line of CSS. The resulting text uses both the browser preference of the user and the preference that they set on the site. So if the user has selected a large font in their browser and then selects large on the website, they will effectively see a very large font.
Options included:
- Default for site
- Small
- Large
- Extra Large
- Huge
Line spacing
The line spacing sets the site for relative line spacing ranging from 1 to 2 times the text size. Many people will find 150% of text size to be comfortable for reading. This allows the site visitor to override what was set in the theme settings for paragraphs and headings.
Options included:
- Default for site
- 1
- 1.25
- 1.5
- 1.75
- 2
Change font
Site authors can choose a variety of fonts in the theme settings, and they can also load their own fonts. This may be difficult for some people to read. The font changer allows the theme set fonts to overridden.
To help the most people, we have included Open Dyslexic font with the theme and allow people to choose it. This theme is added in the new fonts folder. When font awesome version 6 is added to the theme, it will go into this new folder.
Options included:
- Default for site
- Arial
- Open Dyslexic
- Times New Roman
- Verdana
Change contrast
Some people may not like the color choices of a website. If the theme settings have been used to set the colors, the change contrast will override the color preferences and allow for black and white website. Either with black as the background and white as the font, or white as the background and black as the text.
If colors have been set in the content, plugins, or using custom CSS, then it is the website author’s responsibility to test the site to ensure all of the content switches. For this reason, many website authors may wish to leave the change contrast disabled.
Options included:
- Default for site
- White background with black text
- Black background with white text
Enhance input areas
The enhance input areas adds additional styling to inputs, buttons, and links. This can be very useful for visitors, but will need to be tested with any plugins that you are using. They frequently have their own styles which override the theme.
Options included:
- Default for site: Off
- On
Segregating the CSS
The new CSS added for these accessibility preferences lives in the new file accessibility.css. This allows child theme authors to easily find the CSS related to these accessibility preferences so they can use the same selectors in their own code.