WAI-ARIA Live Regions

Aria-live regions will help a screen reader user get the dynamic updates on the application without losing the current focus from the activity that is being performed. Aria-live property is extremely useful to make a screen reader user under stand the complex widgets like dynamically updating tables or chat windows etc and the aria live property can be useful for regularly updating news sites, blogs & applications that pull data from social channels, gamification portals etc.

Aria-Live Property

The aria-live property indicates a section within the content that is live and the verbosity in which changes shall be announced. The following values may be used to determine the verbosity,

Aria-live=”off”

Aria-live=”off” indicates that a region is not live & changes will not be announced to the user. This attribute is used when there is a frequently updating content for example tweets & facebook activity that is being pulled into the site. There is no necessity for the user to get these updates by default, how ever user can read these updates by usual navigation.

Aria-live=”polite”

The update must be announced at the next interval. For example when the user stops typing or when the user is waiting for an update to happen & the most important thing to note is that user will not be interrupted by the live region in order to provide the update.

Example breaking news headlines, new offers in ecommerce stores, optin box for blogs etc.

Aria-live=”assertive”

Aria-live=”assertive” will inform the update immediately & this must be used with care as update is announced mmediately this cannot be used in a live region where frequent updates are expected.

For example aria-live=”assertive” can be used for form validation, appearance of new chat windows and one time offer of a product in ecommerce stores.

More examples of Aria live property can be found on the following websites,

Aria live region example1

Aria live region example 2

Aria live regions by juicy studio

Here is a screen capture video explaining all about ARIA live regions & this video is little behind the time, but concept is valid.

Note: I am just sharing the knowledge that I acquired by reading & practicing as accessibility consultant. Lot of this is already available on the web & is sharing it here on my blog so as to make my self an expert in the field & to remember the concepts.

Web Accessibility Resources

Hello,

When I spoke at the Indi SEO conference in Ahmadabad on the topic How Web accessibility and usability can improve your search rankings and conversions, I gave a deeper thought and decided to put a killer list of tools that can help any web master to check their web pages for accessibility issues.

web accessibility resources

Web Accessibility Testing Tools

Wave – Web Accessibility Evaluation Tool

Wave is a power full tool provided by Webaim.org, this online tools checks your web page for good and bad points and will provides a detailed web accessibility report.

Wave Firefox Toolbar Plug-in

If you are not interested to run web accessibility testing on online version of the Wave tool, you can use the Firefox plug-in and perform an accessibility check for each of the web page. This is mostly recommended as the online tool cannot perform the testing for password protected pages and dynamically generated pages.

FAE- Functional Accessibility Evaluator

FAE is also an online accessibility evaluator like wave… The Functional Accessibility Evaluator (FAE) analyzes web pages for markup that is consistent with the use of iCITA HTML Best Practices . This is built and managed by university of Illinois.

FAE – Functional Accessibility Evaluator Mozilla plug-in

FAE has got a Mozilla fire fox plug-in to check the accessibility of web pages that can help you test password protected and dynamically generated pages.

W3c Web Accessibility Evaluation Tools

World Wide Web consortium has a massive list of web accessibility tools. Please check when they are updated last and use with caution as some of them might be out of date.

Fangs Screen Reader Emulator for FireFox

I haven’t used this plug-in so can’t speak much about it now. Will run my own test and will provide my review soon. Here is a bit of description from the plug-in page, Fangs renders a text version of a web page similar to how a screen reader would read it. The ambition is to help developers understand how an assistive device would resent a website and thereby increase chances of finding accessibility issues early.

Color Checkers

I don’t have much experience using these tools as I am visually challenged my self and can’t comment much on the color contrast and visual design.

Color Contrast

Webaim color contrast checker

Check my colors – Color Contrast

Contrast Analyzer

Color Blindness

Color blind web page filter

Vischeck Color Blindness Simulator

Below links will help you find the authoring practices and more in depth knowledge on web accessibility.

Web accessibility and SEO go hand in hand

Web accessibility guidelines 2.0

WAI-ARIA authoring practices

How to add landmarks in your wordpress or web pages

Web Accessibility Blog by Rakesh

If all the following resources are read and implemented accordingly i can assure that you will achieve a mile stone in terms of creating a highly rich site which can bring you more leads and sales. If you come across any resources links and other things which might be interesting to share let me know in comments section and i will see to that it gets added .