StemCell Therapy

Few people think much about web accessibility. Even fewer people understand it, and without understanding there wont be empathy or change. However, a string of high-profile class action lawsuits in 2019, like the one against Beyonces management company, brought the issue to light and I expect well see a lot more companies prioritizing web accessibility in 2020.

At the same time, the US and many European countries are more rigorously enforcing their by-laws applying to free content accessibility. Companies will no longer be able to afford to ignore this issue.

Its no surprise that visually impaired people are demanding better access. Populated with Instagram stories and online stores that display 360-degree, high-definition product images and video, the web has become a visual public space. That puts many people at an unnecessary disadvantage.

Its not only lawsuits driving demand for greater visual access, but the growing problem of poor vision. According to the World Health Organization (WHO), around 1.3 billion people have some visual impairment, such as low vision, color blindness, and (partial)blindness. Thats nearly 20 percent of the global population including your website visitors who struggle with accessibility.

Ill be the first to accept that the US is more lawsuit-happy than most. Maybe you live in another country, with a different legal culture and dont think you need to worry about accessibility. Thats the wrong mindset.

As a frontend developer, I do care about web accessibility; its my responsibility. I dont want visitors just to have access. I want them to have the best possible experience. Lets take a closer look now at some of the different types of visual impairments people have and how to address them on a site.

Light sensitivity is a very common issue, especially for people who sit in front of computer screens all day. Light-sensitive people can find it hard, painful, or even impossible to read and concentrate under bright lights, on bright screens, or on web pages where bright colors are combined.

This is why most developers like me switch to dark themes in their dev tools, IDE, or their OS (if it has one). Its also why popular apps like Twitter, Google, Facebook Messenger, and recently iOS, provide Dark Mode.

One difficulty is that theres no one standard for light sensitivity. It varies by person and setting, so its impossible to devise one configuration set that works for all light-sensitive people.

Offer Dark Mode or a Light Theme for your users and allow them to set the brightness, essentially letting them decide for themselves.

There are several approaches to achieve this, depending on your technology stack and browser support. A straightforward way is to combine a CSS variable and the CSS invert method: filter: invert().

By defining invert(1), the browser inverts all colors available in your apps to the exact opposite matching colors.

This filter effect also applies to all images within the app. You might want to add some code to make sure colors are reserved even in inverted mode (dark or light).

Warning: filter is still not supported in IE. If IE support is critical for your app, consider using other approach such as CSS-in-JS (styled components for Vue or for React).

Contrast sensitivity occurs where people struggle to read text that is placed over images and videos. This happens when white text is placed on a light background, black text is placed on a dark background, or text is placed on a visually busy background.

Unlike light sensitivity, contrast sensitivity issues are easy to identify. Popular browsers including Chrome and Firefox now include a contrast score check in their dev tools, which flag any page sections that arent visible enough. You shouldnt rely solely on these tools, however, because the automatic scores are not always 100 percent accurate.

To address contrast sensitivity fully, refer to the Web Content Accessibility Guidelines (WCAG). It states that text, or images of text, must have a contrast ratio of at least 4.5:1. Exceptions are large text (where its 3:1), invisible, and decorative text and logotypes, where the text is part of a brand name.

To summarize some of the main points:

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

Color blindness (or color vision deficiency) makes it difficult (or impossible) for affected people to identify or distinguish between specific colors.

Imagine a colorblind person visits an online store to buy a red t-shirt and sees only green ones. How would this visitor know which ones to buy?

In some cases it will be impossible to adapt an image to appear correctly for someone with color vision deficiency. For these, the options are to either provide chat/live support or text prompts (or, ideally, both).

To provide text prompts, we add the name of the color as text to images using the alt attribute. So instead of saying that an image is a t-shirt, we would explicitly state that it is a red t-shirt. The more specific, the better. Yellow is somewhat helpful, but mustard yellow is much more descriptive.

This will involve some light coding, or you can use one of the image management tools on the market that help automate this process.

Another option is to provide a unique pattern to represent each different color on your webpage. The standard approaches are not straightforward either designers need to manually code something or use image editing software like Photoshop or Gimp to create an extra resource for each colorblind case.

The free version of my companys own software includes a transformation e_assist_colorblind effect to make this process easier. For example, you can add stripes to highlight the difference between hot (red) and cold (green) colors.

Hopefully this has given you some ideas for how to address the most common issues around visual accessibility. By focusing on this important issue, youll not just avoid litigation, but youll attract more site visitors, raise engagement, and potentially boost revenue as well.

Published January 3, 2020 08:00 UTC

More here:
Visual accessibility will be a priority in 2020 heres how to adapt your site - The Next Web

This entry was posted on January 5, 2020 at 8:42 am and is filed under Blindness. You can follow any responses to this entry through the RSS 2.0 feed. Both comments and pings are currently closed. |