What is ARIA and how does it make online content more accessible?

What is ARIA and how does it make online content more accessible?

Make your content accessible to everyone

ARIA, or WAI-ARIA, is a framework which ensures online content and applications are more accessible for people with disabilities. In addition to helping screen readers more easily communicate text, ARIA aids in interactions with dynamic content and advanced interfaces such as buttons, input fields, etc. which might not be usable for a person with decreased vision or whom is unable to use a mouse.

For publishers, sport sites, and media outlets, ensuring their websites and applications support ARIA represents both a journalistic obligation and a market segment of loyal and active users which are often overlooked.

Millions of users rely on screen readers and assistive technology to access the internet

According to EuroBlind.org, an organization that aims to protect and promote the interests of all blind and partially-sighted people in Europe, there are 30 million visually impaired individuals in Europe alone. This means there are more visually impaired people in Europe alone, than the population of Sweden, Norway, Danmark and Finland combined.

Similarly, the National Federation of the Blind, nfb.org reports that 7.6 million Americans between the ages of sixteen-seventy-five are visually disabled. This is a group for whom having access to assistive technologies is important, and who rely on the internet for independence and empowerment to do tasks and seek information.

This often-overlooked segment of online users depends as much, if not more on, online content as the non-visually impaired to communicate, stay informed, and stay in touch with friends and family. A fact supporting this is the large number of users relying on screen readers using commercial readers, a 2017 survey found that at least 66% of screen reader users uses JAWS, one of the leading commercial readers on the market.

However, screen readers are only as good as the content they consume. Although data on the adoption of ARIA in website development is scare, awareness is growing. So what is ARIA specifically? ARIA W3C standards prescribes standardized formats for HTML structures which allows assistive technologies to better interpret and then communicate the code to users. One example is a simple “flag” which tells screen readers that this site supports ARIA.

Another important feature is providing text-based and screen-readable notices when updates are made to a site. For example, when a new post is published it might be obvious to regular users, but the visually impaired might not notice it as easily. However, if a HTML string is published together with the post, the screen reader can notify the users that something new has been published.

Ensuring high enough contrast between text and background colors is another more obvious aspect of accessibility which also helps users who do not use screen readers. Ensuring black fonts are used on white backgrounds instead of gray fonts, as well as using large enough font sizes are easy-to-do changes which makes a huge different for many readers.

How you can ensure your news and media content can be understood by screen readers

Newer news, sports, or media websites today have some basic support structures for ARIA. However not all 3rd party solutions come with the same level of conformance. So if, let’s say you have an article in which you are using a 3rd party solution, even if your article is readable the outside content might not be. Most social media today supports ARIA, but the awareness have not reached that far with vendors and solution providers. Live blogs, used to cover news, sports, traffic, elections etc. have long been an example of the type of specialized Content Management Systems (CMS) that screen readers could not understand.

AA-level compliant live blogging solution

During a recent project for the European Parliament’s Directorate for Campaigns, Live Center was chosen as the solution for which to provide updates before and during the election. The Directorate, being a part of the European Parliament, had a need for a solution which just like the rest of their website was at last AA standard level of compliant with W3C standards

Once implemented, Live Center provided the Directorate with a way to provide minute-by-minute coverage of the elections in 24 unique language blogs, covered by 30+ journalists, in a format which could be understood by visually abled and disabled alike.

How Live Center is complaint with ARIA standards

Norkon conducted an initial audit of Live Center to create a list of changes needed for compliance, while not impacting the use and performance of the solution. The required updates was mainly focused around labeling for images, to give journalists a way to describe picture, allowing for easier user navigation between posts in a feed, and alerting users of posts when they are published. Let’s take a look at some examples:

Including ARIA-Live

Most websites allows for content to be dynamically changed without reloading the page. For these changes to be visible, adding a ARIA-Live flag to the new content will announce to the screen reader that something new has appeared.

Labeling share buttons

Below each post in a live blog there are usually options to share the post on Facebook, Twitter, etc. However these have historically not been visible to assistive technologies. By applying default labeling such as “Share on twitter” Live Center allows all of your users to engage more with your content.

Hiding content that can’t be understood by readers

Some content such as decorative elements, arrows, and images cannot effectively be consumed by assistive technologies. Moreover, they can interrupt the flow of a live blog and make them more difficult to navigate. Live Center applies a aria-hidden=”true” attribute to these, ensuring screen readers skip them to move on to the next element on the website.

Try out Live Center and see its accessibility support yourself!

Have an upcoming event you want to Live Blog? Try out Live Center for 30 days by signing up for our free trial here

https://livecenter.com/get-started/

Leave a Reply

%d bloggers like this: