The Kaya theme has been developed specifically with accessibility in mind. We regularly make improvements and updates to the Kaya theme to improve accessibility for users of all abilities. Many accessibility improvements have been shown to improve experiences for everyone.
In this page we try to cover some specific accessibility work that has been done.
If you find an area where accessibility could be improved, contact us at info@easya11yguide.com with your suggestion.
Note on sample content issues
This website is populated with the theme test sample data. That includes some content that does not pass WCAG guidelines. If this content bothers you, please take it up with the theme test group to update their sample data.
Accessibility preferences
In version 1.10 options were added to include an accessibility preferences panel at the top of the site. These can be found in the theme customizer under Accessibility. More details about how these preferences work can be found in the blog post on adding website accessibility options panel.
Focus states
We designed the focus state in Kaya to use two colors. A blue and a white. The two colors have sufficient contrast with each other. Additionally, blue has been chosen since people expect that blue-colored content is a link. The two-color focus state will also provide sufficient contrast with whatever background colors are used.
Keyboard navigation
Our theme has been tested by both sighted and non-sighted users for keyboard accessibility. All elements, include the menu are accessible in our testing. The main navigation menu can be navigated with the tab key. We know that arrow key accessibility would be more desirable for large menus, if you would like additional functionality we recommend using the Max Mega Menu plugin.
Skip to Content Link
A skip-to-content link is included at the beginning of the theme.
Forms
The Kaya theme does not include any forms. It supports the basic search form widget provided by WordPress and uses appropriate label.
Headings
In theme content, heading levels are used. There are two screen reader only headings provided by the theme. These are <h2> elements. They are in the sidebar and the footer. We recommend for widgets in the sidebar and footer that you use <h3> elements so that they fall appropriately under these screen reader headings.
<h2 class="screen-reader-text">Sidebar</h2>
<h2 class="screen-reader-text">Footer</h2>ARIA Landmark Roles
The content within the theme uses semantic markup.
Content Links
Links within content sections are underlined by default.
Repetitive Link Text
Links with a “read more” include additional screen reader text that clarifies what you are reading more of. This assists people using screen readers to know which links go where.
Contrast
Links have a change of removing the underline on hover. This is a significant enough change that contrast is not required. On focus links receive a double outline.
Images
When a featured image is set for posts, the alt text set for that image is used. It is the responsibility of content creators to ensure accurate alt text.
Font Awesome Icons
Font Awesome is included with the theme. When social media icons are displayed using the Kaya Social widget, they include screen reader text for their purpose.
If you choose to use font awesome within your designs, please remember to use screen reader text when appropriate. Otherwise, please use aria-hidden to hide it from screen readers. See the font awesome documentation for more information.
Media
There are no media items included with the Kaya theme that start automatically.
Screen Reader Text
The Kaya theme supports the screen-reader-text classes and uses it where appropriate to add content for screen readers.
Opening in New Windows
The Kaya theme does not open content in new windows by default. If you plan to open content in new windows, we recommend the Accessibility New Window Warnings plugin.