Angular is a popular framework for creating powerful JavaScript applications quickly. However, it doesn’t always create the most accessible applications. In this post we look at ways that anyone can implement to make Angular based applications usable by all.

It is the shared responsibility of a developer and the rest of their team to ensure that everyone can access a webpage equally.

Tim Berners-Lee, creator of the World Wide Web and director of the World Wide Web Consortium (W3C) said: “The power of the web is in its universality.” Apps built without accessibility in mind alienate up to 20% of the entire web-using population.

Progress took accessibility seriously when creating Kendo UI, and as a result, Kendo UI components make it easy to provide an accessible experience in your Angular applications. Providing widgets suitable for both professional websites as well as enterprise-grade business applications, Progress’ Kendo UI is a robust HTML5 framework used to build interactive, high-performance websites and applications. It’s easy to create accessible apps since it comes with a library of over 70 accessible UI widgets and data-visualization gadgets. It’s easy to get started with Kendo UI and Angular, as well as to integrate Bootstrap. There are several different product units to choose from, based on what the requirements of your project are.

About Accessibility

What does accessibility mean? The W3C says that when an app is properly designed, any user can understand, perceive, navigate and interact with it. Accessibility should cover any disability that affects the user’s access to the web, including:

Physical - for example not being able to use a mouse or a keyboard

- for example not being able to use a mouse or a keyboard Cognitive, learning, and neurological - like memory problems or concentration problems (learn more about the types of cognitive disabilities)

- like memory problems or concentration problems (learn more about the types of cognitive disabilities) Auditory - hard of hearing and deafness

- hard of hearing and deafness Visual - for instance, color blindness or low vision

- for instance, color blindness or low vision Speech - muteness or stuttering

Read this guide to learn more about the types of disabilities that can affect the experience of the people using the web.

WAI-ARIA

The W3C’s main initiative towards accessibility is WAI-ARIA, or the Web Accessibility Initiative - Accessible Rich Internet Applications Suite. In short, it describes ways to make content and apps more accessible to people who have disabilities. It also assists with dynamic content, and advanced user interface controls, such as those provided by Kendo UI.

The Seven Elements

There are many ways to improve the accessibility of your apps. In this article, we focus on seven of them. All principles we cover here apply both when using and not using Kendo UI.

Support for WAI-ARIA in Your Frontend Elements

People who are visually impaired use screen readers to understand apps and websites. When you implement elements with only <div> or <span> (for example), the reader does not understand what's inside those elements, and the app is misperceived.

WAI-ARIA bridges the gap between rich applications and disabled users. This is accomplished by using additional metadata, which you introduce through HTML element attributes. This metadata is then used by the screen reader to reason about a control or a DOM element. These attributes, like role, aria-haspopup, aria-selected and others, all provide vital information to screen readers. This metadata is then used to offer richer interaction with disabled users.

These attributes are automatically added when using Angular from versions 2.x and up. It's still necessary to do the work to provide the alt text for your images, to make sure you're not using non-semantic <div> elements as buttons, etc. If you're using AngularJS version 1.x, you should install ngAria.

Kendo UI is the first HTML5 framework to provide full ARIA support for its widgets.

Here is a demonstration of how WAI-ARIA works with buttons. If you inspect the code with your browser, you can see what attributes the browser automatically adds.

Color Contrast

We all know that green has a connotation of “being right,” and red the opposite. However, both look brown to a person with red-green colorblindness, which is the most common kind. It affects over 8% of people with European ancestry. More problems occur when you use color alone to denote sale prices and required fields.

Colors should be specifically labeled, especially when developing online shopping sites. You should label swatches of color with the name of the color, to make it easier for everyone to make product choices.

There must be sufficient contrast between text color and its background. This concept is known as the luminosity contrast ratio, and also applies to text found on buttons, icons, and images.

Color is also used to convey information on maps and diagrams. You must make these uses as easily perceptible as well.

You can check contrast with WebAIM’s Contrast Checker.

When using Kendo UI, default colors can easily be added using the Kendo UI Theme Builder.

Keyboard Shortcuts and Navigation

Sometimes people cannot use a mouse, or they may not know where to click. This makes it important to provide keyboard shortcuts and navigational abilities.

For a high-level overview of keyboard accessibility, read this document provided by the Bureau of Internet Accessibility.

If you decide to implement keyboard shortcuts for your Angular app, libraries like angular2-hotkeys and ng-keyboard-shortcuts allow you to specify large numbers of shortcuts and manage them effectively.

Kendo UI supports keyboard shortcuts for nearly all of its components. Learn more about how Kendo UI does it here:

Kendo UI Keyboard Shortcuts

An example date picker usable with only a keyboard

Accessibility compliance table for Kendo UI and Angular

Subtitles on Videos

Subtitles on videos (also known as captions) are invaluable to those with hearing or cognitive impairments.

Providing subtitles on videos is a difficult task for a software developer since it requires more than engineering alone. There’s a lot of work needed to create subtitles for each video you are producing.

If you use videos in your documentation, or if you’re embedding videos in your Angular app (perhaps for onboarding purposes), do your best to choose videos that are already subtitled. If you are producing those videos in-house, then advocate for subtitles from the beginning of the project.

If you already have the subtitles but don’t know how to add them to your video, the hls.js player library supports embedding WebVTT subtitles out of the box. Using it with Angular is easy.

Semantics in HTML

Writing Angular apps means creating HTML markup. When coding the HTML that is read by a screen reader, use your HTML elements to perform the role they were created for. Angular makes it easy to use <div> and <p> everywhere, but that's not good practice, and it doesn't help accessibility at all.

Instead, use <h1> headers for the actual headings. Use <p> for paragraphs, <button> to denote buttons, and <a> to anchor your links.

If you are looking for more resources on this topic Mozilla has created an in-depth guide to writing accessible HTML, and it includes a section on good semantics.

External Services

If you are using Stripe.js to accept credit card payments, Auth0 to authenticate users, or another external service, make sure that any dialogs or other windows these services use also meet your standards for accessibility. Pick the accessible options over non-accessible ones.

If accessible UI elements are not available from your vendors, consider creating your own using their API and sharing it with the world. You’ll make it easier for other Angular developers to create an accessible app.

Text Equivalents

Since you can’t assume that each user of your app will see the pictures you include, use alt tags for images. You only need to add “Funny cat,” and not “Picture of a funny cat.” Accessibility tools already understand the fact it’s a picture. Similarly, when using SVG elements, include a title and description.

Read this article to learn more about making images accessible for everyone.

In Conclusion

In this article, we looked at how to make Angular apps more accessible. Taking these steps ensures your apps and sites are accessible work for everyone.

We covered frontend elements, color and contrast, keyboard shortcuts and navigation, subtitles in videos, HTML semantics, external services, and text equivalents. When developing Angular apps, it’s best to address each of these concerns from the beginning, and not add them as an afterthought.

The best time to think about accessibility is before starting a project. When doing user research, take into account that people have all kinds of different accessibility requirements and abilities. Increasing the awareness of your development team is the best way of promoting accessibility for everyone.

Learn More about Accessibility

We have created a comprehensive whitepaper on accessibility for developers that covers everything from laws to coding to testing.

Download the whitepaper: Accessibility for Developers

Adding Accessibility to Your Apps

One easy way to make sure that you are creating accessible web apps is to start with components from the Kendo UI libraries. Our components are all WCAG complaint and give you great functionality from grids and charts to schedulers and pickers. Get a head start on your app's UI and a head start on accessibility compliance at the same time.

Learn more about: Kendo UI