Accessibility Tips for WordPress Theme Developers

Through this blog what I want to share what I have found out about accessibility in WordPress Themes.

Ideally, that'll assist somebody with building increasingly open themes, and we can share thoughts of how to improve the web place for us all.

How about we begin with the required pieces of the riddle.

Screen-Peruser Text For Hiding Text

Utilising .screen-peruser text is not required, but instead I'll utilise it in a few precedents. WordPress utilises the CSS class .screen-peruser text to deal with any HTML output that is focused on screen readers. The reason for screen-peruser focused on text is to give extra context to links, document structure, or structure fields. This is useful for whoever is utilising screen readers when perusing the web.

Headings And Headings Hierarchy Structure

Headings are vital approach to navigate your site. They are the initial step most screen peruser users take when they begin to navigate your site. Furthermore, regular users can likewise peruse the website all the more effectively when there are structured headings.

Aria Landmark Roles

Aria landmark roles automatically distinguish areas of a page. This navigates to different segments of a page for assistive technology users.

These Are The Most Widely Recognized Roles:

header: role="banner"
main content: role="main"
sidebars: role="complementary"
footer: role="contentinfo"
search form: role="search"
navigation menus: role="navigation"

Controls

Always keep this thing as same - Give links as links, buttons must be buttons, divs always be divs, ranges should be ranges to guarantee local keyboard accessibility and interaction with a screen peruser. Article links are not buttons. Nor are divs and ranges.

All controls should likewise have text to indicate the idea of the control, yet it excessively can be hidden inside the .screen-peruser class.

For instance, while toggling a menu, the control ought to be a catch, not a connection, div or range.

You can generally style the catch utilising CSS. Many subject developers include a text style symbol demonstrating the menu, similar to the normally named "cheeseburger menu." This is an awful method for adding the textual style symbol:

Textual style symbols alone don't have any significance for screen readers. When all is said in done the best logo is a text mark.

Instead you could do this:

At that point include the textual symbol style utilising a pseudo element, for example, #nav-toggle:: before.

You can likewise utilise the symbol textual style and .screen-peruser text together.

Located users will see just the burger symbol, and screen peruser users will presently comprehend that this control is for the menu.

Keyboard navigation

On ThemeShaper, there is incredible article about keyboard accessibility. To put it plainly, users must almost certainly navigate your site utilising just a keyboard. For instance, individuals who are visually impaired or have motor disabilities utilise the keyboard exclusively.

I want to provoke you to put your mouse away for some time and test your website. Would you be able to navigate through links, dropdown menu and structure controls utilising the tab and move + tab keys? Enter can be utilised to initiate links, buttons, or other intuitive elements.

Centre is important

Note that just links, buttons and structure fields can be centred around as a matter of course. That is the reason I continue taking note of that we should give links a chance to be links and buttons be buttons. Try not to attempt to supplant them with divs or ranges. Users should see and elements ought to have enhanced visualisations to record their state when they navigate your site utilising a keyboard. This is the place: centre strides in.

Dropdown Menus And Keyboard Accessibility

Have you taken a stab at getting to your submenus in a dropdown menu utilising just keyboard? On the off chance that you can't effectively do as such, we should perceive what we can do about that, beginning with the present rules for navigation menus.

Fizzles: Dropdown navigation menus are hidden utilising display: none; and brought into view on float

Passes: Dropdown navigation menus are hidden utilising position: supreme; and brought into view on drift and: centre, and are traversable utilising the tab key

The Underscores subject has a genuine case of dropdown menu markup which is traversable utilising the tab key. I'll trust there will be support for bolt enters in not so distant future. I for one use Responsive Nav as a beginning stage for open, responsive menus.