Tuesday 24 October 2017

Writing Accessible Content


I know I’m really late in the game but WordPress can speak! And has been speaking since version 4.2. Lately I’ve been learning more Javascript and needed this feature in one project. In this article I’ll try to explain simplified version how WordPress speaks with wp.a11y.speak() JavaScript method. Usually we have spinner or animation to indicate that our AJAX update have happened, and we can see the end result. With wp.a11y.speak() assistive technologies like screen readers can announce same updates from AJAX responses. Isn’t that cool!
Here are reference article and demo links:
How WordPress speaks
In my demo I have two examples:
Filter contacts based on the city where they live.
Filter posts by category using WordPress REST API.
As you can see from the demo site both forms have select HTML element but there is no submit button at all. We do dynamic changes using Javascript every time option have been changed. That’s where wp.a11y.speak() kicks in.
When you enqueue wp-a11y two empty placeholders are added just before closing body element. HTML code looks like this.
ARIA polite:
<div id="wp-a11y-speak-polite" class="screen-reader-text
Source: https://managewp.org/articles/16371/writing-accessible-content




source https://williechiu40.wordpress.com/2017/10/24/writing-accessible-content/

No comments:

Post a Comment