Without a question, digital items have transformed the world. We’ve seen the online world labeled a human right in our lifetime.
We’re never more than a few mouse clicks away from apparently limitless knowledge. Starting from collecting bills, purchasing supplies to connecting with our administrations and getting a degree, we can do it everything online. Regardless, not all digital experiences are available to everyone.
Several folks believe that persons with disabilities make up a small percentage of their users, however, this is a fallacy. A disability affects about one-fifth of all Americans. 54 percent of people with mobility impairments use the internet. Fortunately, the globe is waking up to the fact that the internet should be made accessible to everyone.
A website that is designed and developed in such a way that individuals with impairments may use it is considered accessible. When creating sensible UI and experiences, designers must consider accessibility.
All public-sector websites are now required to follow the Web Content Accessibility Guidelines 2.0, which sets accessibility criteria for websites that are equivalent to those for the built world. Pressure will be put on the private sector to start complying in the coming year, and for years to come.
Visual, motor/ability, auditory, seizures, and learning are the five primary usability categories to evaluate, according to the Interaction Design Foundation. People from different walks of life use your site or app in the hopes of finding what they’re looking for as fast and effortlessly as everyone else.
Here are some ways in which you can make your UI more accessible.
Users should be able to adjust the size and content of the webpage
Users are viewing your goods on a variety of displays and devices. We love creating experiences where consumers can resize information to fit their preferences. Consider the following situation: When a user enters information into a field, the website zooms in automatically. The user should be able to zoom out or in from this location to ensure that the action they’re doing is correct. Finding this simple to accomplish results in a smooth transition.
Make it simple to find and use the search bar
Large businesses are making effective use of a prominent, easy-to-use search bar, as we described in our 2019 trends presentation for the Beer and UX group.
A typical user experience aim is to reduce the amount of work required for a user to execute a job, such as reducing the number of clicks required to enter text into a search box. One-click on the search icon, for example, on the Tidal streaming platform not only takes you to the search page, but it also brings up the keyboard, allowing you to put in your question.
Rather than requiring two clicks — select the search icon, then click the search option — it predicts your need for info and opens the keyboard for you.
Every image should have alt text
The advantages of alt tags go further than SEO. Individuals with visuals will be able to interpret your photographs with the help of alt text. This is particularly true for photographs that aren’t only for decoration.
The alt text should be kept brief, according to Moz. Since most screen readers stop reading after around 125 characters, it’s best to keep it at or below that length. In 2018, Instagram attracted attention after they finally implemented an alt text feature to their site. This, among many other things, was an early indication that accessible UI isn’t a fad – it’s the norm.
To make combinations that are accessible, change the color and text size
Using significant color contrast is one of the simplest methods to match your designs with the WCAG. Perhaps one of my favorite tools for this is the Web Aim Color Contrast Checker. It’s ideal if you’re starting from scratch with a color scheme or if you’re operating with just an existent pallet and need to generate a web-accessible color set. You may use the tool to enter particular hex codes or select colors from a color wheel, and then make small modifications to achieve AA or AAA contrast levels between items.
Make use of headings in a section
Digital goods are required to offer information in a way that organizes, directs, and drives the user to the next step, just like a book or a street sign.
Division heads, similar to a blog’s header or the beginning of a webpage, aid users in remembering what they’re reading. According to a Web AIM poll, 67 percent of respondents prefer to browse using the page’s headers. Using the “find” tool, going through the website’s links, and reading the complete page all rated lower than this discovery.
Make use of color contrast
Using the proper color contrast to achieve optimal readability is crucial to make a UI better approachable, yet it’s often ignored. You can notice that your text will not have enough difference with the backdrop or that the type size doesn’t match the contrast. Use the sources below to ensure you’re doing things correctly when it comes to making colors more accessible. Kevin Gutowski’s site, Web Aim, and the Contrast app are all great resources.
To signify a change in status, use more than just color
Color is a popular approach to convey state changes, and it may be useful in informing persons with normal eyesight of such alterations. However, for people with colorblindness or other vision problems, color alone may not be enough.
Color can be used in conjunction with shapes, icons, textual descriptions, or a mixture of all three to guarantee that you’re speaking properly. Consider a stoplight, in which each state is represented by a different color and location.
On the menu navigation, use link text
This method takes into account customers who have trouble finding menu items, such as recognizing which tab they are looking over and also where they are on the website. When a user moves their mouse over an item on the menu of a page, the screen reader reads the link text aloud, which is one possible solution.
The user instinctively clicks on this thing and is sent to the website of their choosing. It’s also a good idea to give clickable sections substantial sizes, no lower than 44px by 44px. Regardless of the use case, menu navigation is one of the most critical aspects of any website design. Link texts can aid with items related to the user’s navigation, similar to how alt text can help with picture details.
In a rational sequence, use header tags
This one is simple, but it’s easy to ignore if you’re concentrating on various portions of a page without contemplating how they fit together as one. Because screen reader software reads header tags in the order in which they occur, taking a step back to ensure that your organization makes sense can make a major difference in how someone gets your content of the page.
Create text for hyperlinks and icons that may be used without any further information
Reading every one of the links on a page is a basic screen reader operation. It may be extremely difficult to browse a page if the same copy is used for links that accomplish various things, such as ‘click here.’ When creating content for an action, it’s critical to make sure it’s distinctive and understandable when read on its own.
For more information on such interesting topics visit ZeeLase today!
