WHAT IS VISUAL ACCESSIBILITY WILL BE A PRIORITY HERE’S

Some people consider access to the web. Even very few people understand this, and without understanding there will be no sympathy or change. However, a series of high-profile lawsuits in 2019, such as the lawsuit against Beyoncé management, exposed the case – and I expect we’ll see many companies in 2020 before they use the Internet.

Meanwhile, the United States and many European countries are strictly enforcing their domestic laws that apply to free access to content. Businesses will not be able to afford to ignore this problem.

Not surprisingly, blind people demand better access. The Internet has become “stories” and online stores and web displaying 360-degree HD photos and videos have become a visible public space. This puts many people in an unnecessary situation.

Lawsuits seeking not only greater visual access, but the increasing problem of poor visibility. According to the World Health Organization (WHO), approximately 1.3 billion people have vision defects, such as visual impairment, color blindness, and (partial) blindness. It is about 20 percent of the world’s population – including visitors to your website – with accessibility.

Adjust your mind

I will be the first to admit that America is happier than other issues. Perhaps you live in another country, with a different legal culture and don’t think you need to worry about access. This is the wrong mindset.

As a front-end developer, I care about web accessibility, it is my responsibility. I do not want visitors to have “access”. I want them to have the best experience. Now let’s take a look at some different types of visual disabilities and how to address them on a site.

Light sensitivity

Optical sensitivity is a very common problem, especially for those who are sitting in front of a computer screen all day. People who are sensitive to light may find it difficult to read and focus under bright lights or on web pages with bright lights, hard, painful or impossible colors.

This is why most developers like me are replacing dark themes in Dev or IDE tools or their OS (if it has one). This is why popular apps such as Twitter, Google, Facebook Messenger and iOS have recently provided “Dark Mode”.

One of the difficulties is that there is no single standard for photosensitivity. This varies by person and setting, so it is impossible to put in a configuration kit that makes all people sensitive to light.

Solution: Photosensitivity issues

Offer your users a “dark mode” or “light theme” and let them set the brightness, and let them decide for themselves basically.

There are several ways to do this, depending on the technology stack and browser support. The direct method is to combine the CSS variables with the CSS: filter: invert () inversion method.

By setting invert (1), the browser converts all colors available in your applications to equally matched colors.

This filter effect also applies to all images within the app. You may want to add some code to ensure that colors are also reserved in top-down (dark or light) mode.

Warning: Filter is still not supported in IE. If IE support is required for your app, consider using another method such as CSS-in-JS (components designed for Vue or React).

Contrast sensitivity

Contrast sensitivity occurs when people struggle to read the text that is placed on photos and videos. This occurs when white text is placed against a light background, black text is placed against a dark background, or text is visually placed against a “busy” background.

Solution: Tools and Resources

In addition to photosensitivity, contrast sensitivity problems are easy to identify. Common browsers including Chrome and Firefox include “Contrast Check” in the developer tools, which indicates which page sections are not visible enough. However, you should not rely solely on these tools, as automated scores are not always 100 percent accurate.

To fully address contrast sensitivity, see Web Content Accessibility Guidelines (WCAG). This states that the contrast ratio of text, or text images, should be no less than 4.5. 1. Exceptions are large text (where 3: 1) and invisible text and logos and decorations, where text is part of the brand name.

To summarize some key points:

The treatment of contrast sensitivity should not be confused with changing color schemes. It is all about making sure that people can read the text of the webpage by providing optimal contrast between the text and its background.

Large text has lower contrast criteria. This is because a text larger than its nature is easy to read. The 18-point text, or 14-point bold text, is “large text”.

Contrast also applies to images of text, not only to fonts as a whole – for example, the brand logo JPG image.

To ensure that your website passes the contrast test, check out this free contrast checker tool by WebAIM.

Share this post