You may be a web developer creating graphical user interfaces (GUIs) for your applications. If so, you are probably well-versed in accessibility.
Do you worry that accessibility will make your GUI too complicated? You’ll have to read lengthy guidelines and inflate your HTML with many additional attributes. This could lead to your GUI needing to be more attractive and costing you too much money. Well, don’t worry. This article is for YOU.
This article will break accessibility down into core principles that are easy to understand and give you concrete guidance on how to design your GUI for accessibility right from the start. Although this article does not address all accessibility issues, it will help you avoid common mistakes that make GUIs inaccessible.
Accessibility has four core principles
These four principles are the foundation of accessible user interfaces:
Perceivable Information and user interface: All content can be viewed and understood by people with disabilities.
Operable User interface and navigation: People with disabilities can navigate your GUI and access all functions.
Quickly understood Information and user interface. All Information is structured and predictable and offers clear guidance and assistance for rectifying mistakes.
Reliable interpretation. Your GUI must be compatible with all current and future tools (for instance, different browsers and assistive technologies, and other user agents). This is a technical requirement, so that we will focus on something other than it in this article.
Let’s now look at some guidelines for creating accessible GUIs. These principles may differ from those above, but you must ensure that your GUI conforms to at least the first three principles.
Disclaimer Making a GUI accessible to blind people (who use a screen reader to navigate the GUI) is a complicated task that requires many more measures than what I have discussed in this article. I will instead focus on those with limited vision, mobility, or physical impairments. However, your GUI must be designed for screen readability from the beginning to be future-proof.
Prerequisite: Use a GUI framework
Your site should not be written in plain HTML. There are many frameworks and widget library options. Input elements in HTML are not always easily accessible by design. Frameworks should offer valuable and accessible widgets such as boolean buttons and swap selects. (See below).
These are the three essential requirements to consider when choosing a framework.
CSS can style widgets
A keyboard can also use widgets
Generated HTML code includes ARIA meta elements (see below).
Below is a list of GUI frameworks that support accessibility:
Reakit
Material User Interface
PrimeFaces (with a few exceptions)
For a deeper evaluation of accessible frameworks, see this article.
High contrast is a good idea for background and foreground colors
Imagine looking at your site through a lousy projector in a darkened room. The fancy, brightly colored icon with a dark background is hard to see. Everything will be fine if you change the icon to white. Why? Because white is more contrasty than dark blue. People with limited vision need to see a lot of contrast. (Remember the first principle: Accessible UIs can be perceived as Information).
You can’t use these fancy numbers to describe the contrast ratios of different text sizes. These are the rules.
When choosing colors for elements, remember the analogy of a “bad projector.”
You can select a background that is very dark or very bright. Use a very dark font on a dark background, and vice versa.
After you have chosen your colors, double-check your foreground/background contrast with a contrast checker tool.
Also, don’t use color gradients. They can be challenging to access and make your home look old.
Avoid color-coding elements. If you do, assign a shape that corresponds
You’ve created a status symbol that looks like a little ball. Everything is fine if the ball is green. You’re in trouble if it’s orange. Nice work! Wait, what about those with red-green blindness? They need to find out if they are in the situation.
It is not a problem to color-code elements. This color coding is helpful for most users to understand the GUI faster. But color is not the only distinguishing factor. You can either add text to the color or designate a shape that corresponds with it. The icon for red status could be an exclamation point instead of a ball in the example above.
Noting: A user must be able to distinguish between the meanings of different elements by simply looking at them. A tooltip does not suffice. It requires that the user navigates to each element to determine its meaning.
Links are included in this article. Users with limited vision should be able to identify connections. This is best achieved using Bold Or Underline Text (or both). A link color that is sufficiently contrasted with the background and the text could be used, but this must be challenging to achieve.
Use bitmap images sparingly
Accessibility is not just a problem with bitmaps that look nice in 2010; there are also some serious drawbacks.
Bitmaps are fixed-size file that produces aliasing artifacts when scaled.
Bitmaps are often a fixed color and have gradients, making incorporating them in their context challenging while maintaining excellent contrast.
They can slow down your site because they are significant. They must be cached, which can clutter up a device. It’s not an accessibility problem but another reason to stop using them.
Use vector-based images that only use one color instead.
These are the benefits
They can be scaled freely. You can mount them freely. Users with reduced vision will likely use the browser’s zoom feature to see images and icons at higher zoom levels.
You can choose any color you like, and they can be used in many contexts. The same icon can be used in multiple contexts or change its color during highlighting.
Some users turn on the operating system’s high contrast mode (which turns all of your screens into 80s-style black/white/neon colors). This mode allows users with reduced vision to see more of what’s on their screen. Vector images, on the other hand, change color in high-contrast mode. Bitmap images aren’t affected by this.
The most popular vector image libraries are FontAwesome and Glyphicons. You can create your vector images and save them as SVG (supported in all modern browsers).
Each image on your website should have an “alt” attribute with a description. Right? Right.