Month: September 2019

A Beginners Guide To Aria Markup

Accessibility is a major issue in today’s online world. These days, having a website that many people struggle to navigate is considered unacceptable.

ARIA markup is a step in the right direction. It’s an answer to the question how you can make your website more usable for those with disabilities.

What is ARIA? A set of code attributes that expand HTML’s capabilities and make it easy to optimize your site for screen readers. It does this by making parts of your website visible to assistive technology, that otherwise, these devices wouldn’t be able to interact with at all.

Ready to include ARIA in your website? Or just curious to learn more about it? In this article, we’ll explain what ARIA is, how to make your site accessible, and give you the resources to learn more about this invaluable technology.

Why Make Your Site Accessible?

Some people might wonder: why care about web accessibility? Is it really worth putting in the resources to learn specifications like ARIA? Is creating an accessible website really making much of an impact?

Disability Isn’t Uncommon

In actuality, yes. Disability isn’t so rare. 18.7% of Americans have a disability of some form. While not all of these will impair their ability to interact with the web, that’s still a staggering number, and it only includes people from the US.

3.3% of Americans also have a vision impairment. This means they could have trouble seeing websites and may rely on tools like screen readers. That’s also a significant percentage of your potential user base and includes the elderly and those with temporary disabilities.

People with impairments need the Internet just as much as everyone else. Many use it to shop, socialize, and find information. Sometimes it’s their primary, or even their sole way, of doing so.

54% of disabled people are online, and while this number is smaller than compared to the general population, it’s still a significant portion.

Plus, it’s 2019. In this day and age, we should strive to include every user group as well as we can. Giving people with disabilities unrestricted access to browse the web should be a major goal for any web developer.

Plus, it even comes with personal benefits.

Accessibility Overlaps With Good Web Design and SEO

A site that follows accessibility standards is often one that’s using good web design principles, works better on mobile devices, and ranks high in SEO.

For instance, one of the WCAG standards includes not auto-playing long clips of audio without a way to stop the sound. This is already a big no-no for web designers. Another standard is providing enough color contrast between elements. Colors that blend together on a website are often an indication of a bad palette.

As a consequence, following accessibility guidelines leads to a site that looks better and is more user-friendly. Can anybody say win-win?

wireframes as example for web design

Accessibility is also an important part of SEO. Shirking it can lead to ranking penalties from Google and other search engines. But adding alt text to your images, including keyboard controls in interactive elements, and using headings both help disabled visitors and give you an SEO boost.

What Is Aria Markup A Beginners Guide

As you can see, making your site accessible is a good idea as it has an impact on all user groups. If designing a website that offers everyone a good experience is your aim, then you should do everything you can to avoid excluding people with impairments.

One thing you can do is implement ARIA into your design, so people with screen readers can better find their way through your site.

What are Screen Readers?

A screen reader is a program that reads the content of a page or document out loud while allowing you to navigate it using the keyboard. Anyone can download one onto their computer, and there are a variety of programs available free or paid.

Some of them also help navigate the desktop and other programs as well as websites. They may enlarge text and images for the visually impaired, and some can output to a refreshable braille display. This guide explains how screen readers work.

Without screen readers, visually impaired people would struggle to use a computer and the Internet, or be unable to use them at all.

ARIA markup plays a big part in how these tools function. It provides extra information, giving them more options and the ability to interact with parts of the UI that would otherwise be invisible to them.

But what exactly is ARIA, and how can you improve your website by including it? Let’s give a quick breakdown on this specification and how it works.

What is ARIA?

ARIA stands for Accessible Rich Internet Applications. It is a set of attributes that provide extra context for how a web page is laid out and what’s inside it. In other words, they give more information about parts of the UI, such as popup alerts, menus, or even whole sections of the page.

If you have ever looked at a website with the browser developer tools, you might have seen it before.

To quote the Mozilla documentation: “The complementary landmark role is used to designate a supporting section that relates to the main content, yet can stand alone when separated.” So, basically, this part of the markup lets screen readers know about what part of the layout they are dealing with.

Consequently, ARIA allows you to create accessible interfaces and widgets without even changing how they look or act on the front end. Most people won’t be able to even tell the markup is present. But add a little code, and screen readers will be able to seamlessly interact with your interface.

When is ARIA Really Necessary?

By default, screen readers can understand most HTML and HTML5 elements. If you have a very simple, static site, you may not need to implement ARIA at all. But some Javascript, dynamic, and interactive elements can’t be seen by screen readers, and this is where the markup comes in.

On the other hand, you shouldn’t use ARIA when what you’re defining is already accessible. For instance, the HTML element is recognized by screen readers. It doesn’t need to have a button ARIA role. You should only include roles when you’re not using HTML elements that are supported by assistive devices.

In the same vein, technically I don’t need to add the complementary role to an aside element above as they both describe the same thing. However, you find this markup quite often as it is above.

Still confused? Let’s talk a little more about how ARIA works.

Understanding ARIA

Things can get very complex with ARIA, and it’s easy to get overwhelmed. But the basics of it are fairly easy to break down. Once you understand those, learning more advanced concepts will be a snap.

ARIA markup is made up of three attributes: roles, states, and properties.

ARIA Roles

Roles define elements on a page, such as buttons and checkboxes. They help screen readers tell what parts of a page do, and they have four different sub-categories: landmark, document, widget, and abstract roles.

  • Landmark roles— Separate a site into different sections, like main content, navigation, and complementary areas. This can help visitors get their bearings and more easily find what they’re looking for on a page.
  • Document roles — Describe specific sections within a page, such as articles, documents, lists, and rows.
  • Widget roles — Define elements and interfaces. Tabs, textboxes, alerts, and buttons are some of the elements ARIA can describe. When HTML doesn’t define these elements, or you’re using a widget made of many different parts, widget roles can help.
  • Abstract roles — These are utilized by the browser. You don’t need to worry about them.

States and Properties

States and properties work similarly to each other. Properties once set rarely change, as they only describe relationships with other elements. States are dynamic and can change on their own or with user interaction.

An example of a state is aria-busy, which tells the screen reader that the element is updating. Another is aria-pressed, which indicates that a button has been pushed. These are elements which can actively change.

On the other hand, properties include attributes like aria-valuemax which sets the maximum number in a range selector, or aria-haspopup which indicates that an element will trigger a popup. These are not likely to update.

And that’s the basics of ARIA. Much simpler once it’s broken down, right? But you’d be surprised how much you can do with it.

To learn more, try the official WAI-ARIA documentation, or Google’s beginner introduction for developers.

Testing for ARIA Accessibility

Once you’ve implemented ARIA, you might want to make sure that everything is running smoothly. How does your site really look on assistive devices?

The most obvious way is to download a free screen reader like NVDA, blindfold yourself, and go to town. This will give you the full experience.

nvda screen reader banner

You can also skip the blindfold and just hover the elements you want to check ARIA attributes on, but you’ll miss out on key info like how difficult it is to find those elements.

Even this isn’t a perfect representation of what it’s like to use a screen reader as it takes a lot of practice to learn, so it’s best to ask actual users to test drive your website.

There are also many inspector tools like Firefox’s Accessibility Inspector that let you see information about selected elements. WAVE points out various errors, including those with ARIA.

Finally, this ARIA widget checklist makes a great audit for while you’re designing.

Other Ways to Make Your Site Accessible

ARIA markup is just the beginning when it comes to web accessibility. There are many other standards you should follow to make your site usable by people with vision, hearing, mobility, and other impairments.

Here are a few examples of just a handful of guidelines you should follow.

  • Website content is responsive and works while zoomed in.
  • The site and its elements can be used with only a keyboard.
  • Text is properly contrasted against the background.
  • All non-text content has text alternatives, including audio and video captions/transcripts.
  • Ensure that most images have descriptive alt text, and decorative images have empty alt text.
  • No information is conveyed solely through sight, sound, or color.
  • Avoid auto-playing audio without providing a mute button.
  • Automatically moving elements can be paused or stopped.

That’s only a handful of what you can do to make your site truly accessible. If this feels like too much, try the simple accessibility checklist. Use it as a basis for your design before moving onto the more detailed WCAG guidelines.

Making Your Site Usable for Everyone

Avoiding accessibility can have a negative impact on your user base and even your reputation. People with disabilities make up a large percentage of web users, and it’s important to ensure that the majority of the Internet isn’t closed off to them.

By implementing accessibility standards including ARIA markup, you’re both giving screen reader users the ability to see more of the web, and allowing your website to grow as large as possible.

Once you know how to include specifications like ARIA, accessibility will seem a lot less confusing. Making your site easier to use for everyone means more people willing to stick around, so there’s no reason not to use ARIA if your site needs it. Many themes also offer it out of the box by now.

These standards don’t just help people with disabilities; they help everyone. Accessibility guidelines often overlap with good web design practices and are quick to implement once you know them.

So remember to include ARIA when you’re developing a website. It’s better for you and for all your users.

Do you ever have trouble navigating websites? What could web designers and developers do to improve the situation? Let us know your experiences with online accessibility (or lack thereof) in the comments!

Filed under: WordpressTagged with: , ,

Web Accessibility in Your Website or Store

As developers and online store owners, we often treat accessibility as a bonus. But it’s really a requirement! Each piece of a website build should be considered from the perspective of all site visitors, no matter their age, capabilities, or impairments. After all, it’s important that everyone can easily use your store and purchase your products.

When it comes down to it, accessible content is defined as:

  1. Perceivable. All information must be presented in ways that users can perceive, no matter what user agents (browsers, screen readers, or other software) they operate or what disabilities they have.
  2. Operable. Visitors need to be able to navigate around the site and use all functionality even if they don’t utilize a traditional mouse.
  3. Understandable. Content, forms, menus, links, and other site components need to be easily understood by users.
  4. Robust. A variety of tools, including screen readers, voice recognition software, and braille readers should all be able to read your content.

But how does accessibility become a core part of the development process?  What factors should be considered and how do you adapt an existing store? What tools can be used to test for web accessibility?

All of those questions will be answered below, but if you’re interested in a more in-depth look at why accessibility is so important, take a look at The Importance of Accessibility for Your Online Store.

Making Accessibility a Focus

An accessible website starts with the right mindset.  It’s important to get everyone involved – the developer, the business owner, the content manager, etc. – on the same page.

One of the best ways to gain an understanding of accessibility is to try using your favorite websites with a screen reader. NVDA is a great option for Windows users and VoiceOver is perfect for Mac users.  Take all the actions you normally would – search the website, read a blog post, add a product to your cart – and gain an understanding of what it’s like to do so from a different perspective.

Web Accessibility In Your Online Store What You Need To Know

The next step to focusing on web accessibility is starting with a good, high-quality WordPress theme. The WooCommerce Storefront theme, for example, adheres to accessibility guidelines, integrates seamlessly with WooCommerce, and is extremely flexible at the same time.  View all Storefront features here.

Or, if you’re using the WordPress theme directory, the work has already been done for you; search using the tag “Accessibility” and you’ll find some great options.  If you’re developing your own theme, the WordPress Theme Handbook has in-depth, clear accessibility guidelines that will start you off on the right track.

Then, as you go through the website building process, test things constantly. It’s much easier to adjust elements as you go than to rebuild once the site’s finished!

Tools for eCommerce Accessibility

The right tools are critical to building an accessible eCommerce site.  Below, you’ll find some great options for testing; many of these are also mentioned when discussing specific accessibility factors later in this post.

Screen Reader Testing:

  • For Mac (free): VoiceOver
  • For Windows (free, open source): NVDA
  • For Windows (paid): JAWS
Website visitor using a braille reader tool on his computer.

How to Make Your eCommerce Site Accessible

Accessible Images

In order to help your visually impaired users experience the images on your site, you need to make sure to add alt text for each one.  Screen readers use alt text to “read” your image (tip: Google does, too!). If you’re a developer, make sure that each element contains an alt attribute.  If you’re a site owner, you can use the default WordPress functionality to easily add alt text to your images.

A great place to start is by considering the purpose of your image:

1. Does it convey straightforward information,  e.g. a simple picture or icon?

In this case, describe your image in a way that will help your users picture it.  Good alt text would be, “Woman pushing a stroller down the sidewalk.”

2. Does it convey complicated information, e.g. an infographic or chart?

For complex images, it might be too difficult to describe the content in a concise way; you may need to add a long description.  There are several ways to approach this, including referencing an area of the page where the complicated image is described in more detail. Find out more ways to approach this here.

3. Is it solely decorative, e.g. a small flower element used as part of the site design?

Tell screen readers to skip over decorative elements by giving them an empty alt attribute:

Ideally, you should be including decorative images in your CSS rather than your HTML.

If you’re tempted to stuff keywords in your alt text for SEO purposes, remember that Google prioritizes user experience.  It’s more important that your alt attributes do a good job describing your image than listing a keyword.

Accessible Links

The important thing to consider when adding links is to always tell your site visitors what’s going to happen when they click. Even if they read the link entirely out of context (which is often the case with certain types of screen readers), they should know where they’re going next.

Examples of bad link text:

  • For more information about our candles, click here.
  • Download our sizing chart to find your perfect fit.

Examples of good link text:

  • For more information about our candles, see Candle FAQs.
  • To find your perfect fit, download our sizing chart as a PDF.

There may be times, however, when it’s valuable or necessary for you to use link text like “Read More.”  An example of this might be a grid of recent blog posts on your home page, where each short excerpt ends with a “Read More” link.  What do you do in that case?

A great solution would be to use the aria-label attribute, which allows you to add a descriptive label to your link.

Here’s what a link with the aria-label attribute might look like:

A bad solar installation can make your upfront
investment evaporate. Here are 15 questions to ask
any potential solar installer before you trust their
reputation. [Read more...]

But what if you want to link an image? In the case of images, your alt attribute will be your link text.  So if you have a mockup of your free eBook download, you want your alt attribute to be something like, “eBook about choosing the right lipstick for your skin tone.”  This tells your site visitors both what the picture is and what will open when they click on it.

Accessible Fonts

The first thing you want to consider is font size.  It’s important that your text can easily be read by people who are partially blind or who simply have trouble seeing smaller font sizes.  While there isn’t an official minimum font size, a good starting point is 16px for your body text.

Typically, it’s up to a user’s browser to resize fonts, which they do by either enlarging the text itself or by zooming into the page and applying responsive styles.  You should build your website in a way that allows a user to zoom up to 200% without losing the ability to use or view your site content. For example, you want to avoid truncated content or overlapping text when the font resizes.  The best thing to do is to test it yourself. Find instructions for each browser here. 

Consider the font choices that you make as well.  Cursive or intricate fonts are often very difficult to read and should only be used occasionally (such as a signature or decorative element).  Stick to only 2-3 fonts throughout your website to make your information less confusing and easier to understand.

An example of the Ishihara Color Blindness Test – circles filled with dots and numbers in different colors.
The Ishihara Color Blindness Test, often used to test for color blindness.

Accessible Colors

Not everyone sees color the same way.  In fact, approximately 8% of men and 0.5% of women have some form of color blindness.  So, your website should be entirely functional and usable in greyscale.  You can use tools like the Chrome extension Grayscale Black and White for testing.

Contrast is a big consideration for web accessibility.  Look at text on top of images or backgrounds as well as the contrast between elements (such as buttons and pictures) that are close to one another.

Ideally, you want a luminosity contrast rating of 4.5:1 for body text and 3:1 for large text. Contrast Checker is a great tool for testing foreground vs. background and even viewing your color choices in greyscale.

An important rule to keep in mind: Don’t rely on color alone.  Shapes and symbols can help communicate the same message.

For example, if your contact form error message is in red, you may also want to add a stop sign or exclamation point symbol that grabs attention in case your site visitors’ are red-green color blind.  Patterns and textures are also a great way to demonstrate contrast.

Accessible Headings

Remember that headings aren’t just there for size – they’re an important structural component of your content.  Using proper heading elements allow screen readers to quickly identify headings and sections throughout the page and navigate effectively.

What does a proper heading structure look like?

The H1 element should be used to identify the primary topic of the page and should only be used once per page.  This would be the title of a blog post or name of the product, for example.

H2 and H3 elements should be used to introduce different sections of the content beneath.

Here’s an example heading format for a blog post:

Why choose a stainless steel water bottle

Stainless steel water bottles are perfect for camping

They can be used to boil water in the wilderness.

They’re durable and can survive falls

Stainless steel water bottles keep drinks colder longer.

Stainless steel water bottles are the safer choice.

They don’t leach chemicals like many plastic bottles do.

They don’t rust like other metals.

They can be cleaned in the dishwasher.

As you can see, the content is organized in a way that a site visitor or a screen reader can easily understand what each section is about.

Strong Tags

In my subjective opinion, these are a throwback from the old html syntax, and I personally consider them a no no. In my view it is akin to regular shouting, and makes a mess of the page. If anything, to accent a word, I would prefer to use the I tag and I run a mile from posts which are peppered with strong tags, but thats just me, you might think differently.

Accessible Forms

Forms can be tricky for screen readers, but they’re often the way that you’ll collect payment information, product customization details, and even leads.  That’s why it’s so important that they’re accessible and easy-to-use.

A good place to start is by using labels – yes, even if you have placeholders!  A label should tell your users what to fill out (e.g. Email Address) while the placeholder should share how to fill out the field (e.g. [email protected]).  This is a critical piece of a screen reader understanding your form.

Make sure that any required fields are clearly labeled and that instructions (especially on formatting requirements for dates, phone numbers, etc.) are outlined in a way that’s easy to understand.

It’s also critical that your forms are keyboard accessible – they can be navigated and filled out only using a keyboard.  As a developer, be careful with your use of javascript when it comes to manipulating form data, submitting forms, and changing form elements.  Misused javascript is one of the most common reasons a form isn’t fully accessible.

Accessible Videos

Videos are a great way to explain your products, showcase their uses, and share testimonials from your customers.  Make sure they’re accessible, too!

One way to do this is by adding captions to your videos, which will help those that are deaf or hard-of-hearing to understand the audio.  The University of Washington provides great tips for adding captions to your videos yourself.  But, if a professional videographer is creating your video, simply ask them to add captions.

Adding audio descriptions is an important step to help those who are blind understand what’s happening in your video.  Create a separate audio track that describes important visual content, especially sections of your video that don’t already have narration.  You could also use transcripts to write out all audio content and describe the video itself.

You’ll also want to consider the video player.  Make sure that the option you choose supports closed captions and provides toggles to turn audio descriptions on and off.  You also want to make sure that all buttons on the player can be used with a screen reader or keyboard.

Keyboard Navigation

We’ve touched a bit on this already, but it’s important that your website can be operated using only a keyboard. This is especially helpful for people with motor impairments who may have difficulty using a traditional mouse.

Since the Tab button is used to navigate throughout the page, it’s important that your website navigation is set up so that it follows the visual flow of the page (left to right, top to bottom).

Test your website to ensure that you’re able to navigate with the Tab button in the following order:

  1. Header
  2. Main navigation menu
  3. Any page navigation and links
  4. Footer

Also take the time to go through any custom widgets, apps, plugins, etc. to ensure that they can easily be exited using the Escape key and that they follow the proper accessibility guidelines for widgets.

The biggest key here is to test, test, test!  Spend time going through all pages using only your keyboard to make sure they’re easy to use.

Accessible Downloads

If you sell digital downloads on your eCommerce site, it’s important to also make sure that the downloads themselves are accessible.

One great way to make PDFs accessible is to add PDF tags, which provide a hidden, structured representation of the content that’s visible to screen readers.  Adobe Acrobat provides a great guide to making your PDFs accessible

Of course, you’ll also want to keep in mind other accessible principles that we discussed above, like color contrast and font size, throughout your digital download design.

Woman with hearing aid using a laptop on a couch.

Accessible Courses

When creating online courses, make sure that you keep in mind concepts like video captions and audio transcripts.  Consider presenting your content in multiple styles, like video, audio, and text so that there’s something for everyone.  Many of the design principles above will also apply to your courses.

It’s important that you provide multiple methods of communication for your students.  For example, a nonverbal user may not be able to call and ask questions and a blind student may not be able to submit questions online easily.  The same thing goes for submitting any assignments or coursework. Be flexible with your students and work with any existing disabilities to help them get the most out of your courses.

When it comes down to making your online site or store accessible, the important thing is to take the time to understand how those with disabilities will use your site.  When you have a good understanding, it’s much easier to account for accessibility throughout all stages of the development process and, ultimately, provide an excellent experience for all of your customers.

If you’re looking for more information, WordPress provides a great web accessibility handbook that includes even more testing tools, development best practices, and tips for store owners.

Filed under: eCommerce, WordpressTagged with: ,