visual-accessibility-will-be-a-priority-in-2020

Few people think much about web accessibility. Even fewer people understand it, and without understanding there won’t be empathy or change. However, a string of high-profile class action lawsuits in 2019, like the one against Beyonce’s management company, brought the issue to light — and I expect we’ll 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.

It’s 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.

It’s 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. That’s nearly 20 percent of the global population — including your website visitors — who struggle with accessibility.

Adjust your mindset

I’ll 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 don’t think you need to worry about accessibility. That’s the wrong mindset.

As a frontend developer, I do care about web accessibility; it’s my responsibility. I don’t want visitors just to have ‘access.’ I want them to have the best possible experience. Let’s 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

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). It’s also why popular apps like Twitter, Google, Facebook Messenger, and recently iOS, provide “Dark Mode.”

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

Solution: Light sensitivity themes

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.

/*Define css variable for dark/light mode*/

:root {

  --nightMode: 0;

}




/*Apply the mode change to the whole app on */

body {

  filter: invert(var(--nightMode));

}

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

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.

Solution: Tools and resources

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 aren’t visible enough. You shouldn’t 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 it’s 3:1), invisible, and decorative text and logotypes, where the text is part of a brand name.

To summarize some of the main points:

  • Addressing contrast sensitivity shouldn’t be confused with changing color schemes. It’s all about ensuring that people can read webpage text by providing the optimal contrast between text and its background.
  • Larger text has a lower contrast criteria. This is because larger text is, by nature, easier to read. 18 point text or a 14 point bold text is considered “large text.”
  • Contrast also applies to images of text, not just strictly applied to fonts — for example, a JPG image of a brand logo.

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

Color blindness

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? 

Solution: Translate colors to text

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.

Solution: Pattern your colors

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 company‘s 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, you’ll not just avoid litigation, but you’ll attract more site visitors, raise engagement, and potentially boost revenue as well. 

Published January 3, 2020 — 08:00 UTC

147 comments

  1. Hello there, just became aware of your blog through Google, and found that it is truly
    informative. I’m gonna watch out for brussels. I’ll be grateful if you
    continue this in future. Many people will be benefited from your writing.
    Cheers!

  2. I needed to thank you for this fantastic read!!
    I certainly enjoyed every little bit of it. I have you saved as a favorite to check out new stuff you post?

    my homepage: Jamel

  3. I loved as much as you will receive carried out right here.
    The sketch is tasteful, your authored material stylish.
    nonetheless, you command get bought an shakiness over that you wish be delivering the following.
    unwell unquestionably come more formerly again since exactly the same
    nearly a lot often inside case you shield this increase.

    Also visit my homepage :: Blosum CBD Reviews (http://www.meteoritegarden.com)

  4. I am extremely impressed together with your writing talents and also with the layout in your weblog.
    Is this a paid subject or did you modify it yourself?
    Either way keep up the nice high quality writing, it’s rare to see a nice blog like this one these
    days.

    Look at my webpage :: WifiLift

  5. Hey I know this is off topic but I was wondering if you knew of any widgets I could add to my blog that
    automatically tweet my newest twitter updates.

    I’ve been looking for a plug-in like this for quite some time and
    was hoping maybe you would have some experience with something like this.
    Please let me know if you run into anything.
    I truly enjoy reading your blog and I look
    forward to your new updates.

    Check out my blog – Royal Derma Cream

  6. Write more, thats all I have to say. Literally, it seems
    as though you relied on the video to make your point.
    You obviously know what youre talking about, why waste your intelligence on just posting videos to your weblog when you could be giving us something enlightening to read?

    Feel free to surf to my site :: D-Fine8 Ingredients

  7. After I initially commented I appear to have clicked
    on the -Notify me when new comments are added- checkbox and from now on whenever a comment is added I get 4 emails with the same
    comment. There has to be an easy method you are able to remove me
    from that service? Thanks a lot!

    Here is my web page … Vigra Fast Review

  8. Hi there, I found your website by way of Google at the same
    time as searching for a similar matter, your website came up, it seems to
    be good. I have bookmarked it in my google bookmarks.[X-N-E-W-L-I-N-S-P-I-N-X]Hello there,
    simply become alert to your blog via Google, and found that
    it’s really informative. I am gonna be careful for brussels.

    I will be grateful should you continue this in future.
    Many folks can be benefited out of your writing.
    Cheers!

    Visit my site – D-Fine8 Reviews

  9. I have been exploring for a little bit for any high quality articles or blog posts on this
    kind of house . Exploring in Yahoo I eventually
    stumbled upon this site. Studying this information So i’m satisfied to convey that I’ve an incredibly just right uncanny feeling
    I came upon just what I needed. I so much surely will make sure to don’t put out of your
    mind this web site and give it a look on a relentless basis.

    my homepage :: Live Well CBD

  10. Excellent post. I was checking constantly this weblog and I am impressed!
    Very helpful information specifically the
    ultimate phase 🙂 I care for such information a lot.
    I was looking for this certain info for a long time.
    Thanks and good luck.

    Also visit my web blog: Glacier Air Cooler (Trevor)

  11. I would like to show my appreciation to this writer just for rescuing me from this setting.

    Because of looking throughout the search engines and meeting tips which
    are not pleasant, I figured my entire life was well over.
    Living minus the answers to the problems you’ve resolved all through your main article content is
    a serious case, and ones that would have badly damaged my
    career if I hadn’t discovered your blog post. That talents and
    kindness in playing with all things was crucial. I’m not sure what I would have done if I hadn’t discovered such a step like
    this. I am able to at this moment relish my future.
    Thanks for your time so much for this professional
    and sensible help. I won’t be reluctant to
    suggest your blog to any individual who should get tips on this problem.

    Here is my page – Keto Lean X (librarius.main.jp)

  12. What’s Going down i’m new to this, I stumbled upon this I’ve discovered It positively
    helpful and it has aided me out loads. I’m hoping to give a contribution & aid other customers
    like its aided me. Good job.

    my web-site WifiLift Price

  13. Greetings I am so excited I found your weblog, I really found you by mistake, while I was searching on Aol
    for something else, Nonetheless I am here now and would just like to say thanks for a tremendous post and a all round entertaining blog (I also love the
    theme/design), I don’t have time to read through it all
    at the minute but I have saved it and also included your RSS feeds, so when I have time I will be
    back to read a great deal more, Please do keep up the fantastic work.

    My web-site :: lysto-forum.tue-image.nl

  14. I’m extremely impressed along with your writing skills as neatly as with the layout for your weblog.
    Is this a paid subject matter or did you modify it yourself?

    Either way keep up the nice quality writing, it is rare to look a
    great weblog like this one today.

    Also visit my page … http://www.goldenanapa.ru

  15. Hi there! I know this is kinda off topic nevertheless I’d figured I’d
    ask. Would you be interested in exchanging links or maybe guest writing
    a blog post or vice-versa? My site covers a lot of the
    same subjects as yours and I believe we could greatly benefit from each other.
    If you are interested feel free to send me an email. I look forward
    to hearing from you! Wonderful blog by the way!

    Here is my webpage – Spore Mens Vitality Mix Reviews

  16. Thanks a lot for providing individuals with an extraordinarily spectacular chance to read in detail from
    this website. It’s usually so excellent and as well , full of
    a great time for me and my office colleagues to visit your website on the least 3 times in 7 days to learn the fresh stuff you have.

    And of course, I am just always contented for the special solutions you
    give. Selected 2 points on this page are without a doubt the most impressive we’ve ever had.

    My web blog … Maximum Recall Pills

  17. Thank you for the sensible critique. Me and my neighbor were just preparing to
    do a little research about this. We got a grab a book from our local library but I think I learned more
    clear from this post. I’m very glad to see such excellent
    info being shared freely out there.

    Also visit my web blog :: vbriudaipur.org

  18. Every weekend i used to pay a quick visit this site,
    for the reason that i want enjoyment, since this this web page conations truly good funny stuff
    too.

    Feel free to surf to my webpage; Clinton

  19. Thank you for another great article. The place else could anybody get that kind
    of info in such an ideal way of writing? I’ve a presentation next
    week, and I’m at the look for such info.

    my blog post; Alpha Edge

  20. My programmer is trying to convince me to move to .net from PHP.
    I have always disliked the idea because of the costs. But he’s
    tryiong none the less. I’ve been using WordPress on various
    websites for about a year and am worried about switching to another platform.
    I have heard great things about blogengine.net.
    Is there a way I can transfer all my wordpress posts into it?

    Any kind of help would be greatly appreciated!

    my web site – Alpha Edge Male Enhancement Reviews

  21. Wonderful article! This is the type of information that are meant to be shared across the internet.

    Disgrace on Google for no longer positioning this post higher!
    Come on over and visit my website . Thanks =)

    Here is my homepage … Viking XL Keto

  22. Hi there just wanted to give you a quick heads up. The
    text in your content seem to be running off the screen in Safari.

    I’m not sure if this is a formatting issue or something to do with internet browser compatibility
    but I figured I’d post to let you know. The layout look great though!
    Hope you get the issue resolved soon. Cheers

    Feel free to visit my web-site :: Maximum Recall Pills

  23. Hey I am so thrilled I found your weblog, I really found you by accident, while I was researching on Askjeeve for something else, Anyways I am here now and would just like to say thanks a
    lot for a incredible post and a all round entertaining blog (I also love the theme/design), I don’t have time
    to look over it all at the minute but I have bookmarked it and also added your RSS feeds, so when I have
    time I will be back to read a lot more, Please do keep up the fantastic job.

    My web-site … kanmoulue.com

  24. Hello There. I found your blog using msn. This is
    a really well written article. I will be sure
    to bookmark it and come back to read more of your useful information. Thanks for
    the post. I will certainly return.

    Have a look at my site; Keto Smooth

  25. I drop a leave a response when I especially enjoy a post on a website or
    if I have something to add to the discussion. Usually it’s caused by
    the passion communicated in the article I read.
    And on this post Visual Accessibility Will Be a Priority in 2020 – Pavvy Designs.
    I was actually moved enough to leave a comment :
    -P I actually do have a couple of questions for you if you do
    not mind. Is it only me or does it give the impression like a
    few of the remarks look as if they are written by brain dead folks?
    😛 And, if you are posting on other social sites,
    I’d like to follow everything fresh you have to post.
    Could you list the complete urls of your community sites like your
    twitter feed, Facebook page or linkedin profile?

    Also visit my blog geforce-samp.com

  26. When I initially commented I clicked the “Notify me when new comments are added” checkbox and now each time a comment is added
    I get three emails with the same comment. Is there any way you can remove me from that service?
    Thank you!

  27. I know this if off topic but I’m looking into starting my own weblog
    and was wondering what all is needed to get set up?

    I’m assuming having a blog like yours would cost a pretty penny?
    I’m not very internet savvy so I’m not 100% certain. Any tips or advice would be greatly appreciated.
    Kudos

    Feel free to surf to my web-site … rftitanforge.com

  28. Does your site have a contact page? I’m having trouble
    locating it but, I’d like to shoot you an e-mail. I’ve got some recommendations for your blog you might be interested in hearing.

    Either way, great blog and I look forward to seeing it improve over time.

  29. I am really loving the theme/design of your site.
    Do you ever run into any web browser compatibility issues?
    A small number of my blog visitors have complained
    about my blog not working correctly in Explorer but looks great in Opera.
    Do you have any suggestions to help fix this problem?

    Feel free to surf to my blog post: https://bbs.yunweishidai.com

  30. Nice post. I was checking constantly this blog and I am impressed!

    Very useful information specially the remaining section 🙂 I take care
    of such information a lot. I used to be looking for this certain info for a long time.
    Thank you and good luck.

    Check out my webpage :: http://www.tjml.top

  31. I appreciate, cause I discovered just what I used to be having a look for.
    You’ve ended my four day lengthy hunt! God Bless
    you man. Have a great day. Bye

  32. Appreciating the persistence you put into your blog and in depth information you present.
    It’s great to come across a blog every once in a while that isn’t the same old rehashed information. Great read!
    I’ve saved your site and I’m adding your RSS feeds to my
    Google account.

  33. What i don’t understood is in fact how you are no longer actually a lot more neatly-favored than you may be right now.
    You are very intelligent. You understand therefore significantly with regards
    to this subject, made me in my opinion consider it from
    so many various angles. Its like women and men don’t seem to be interested until it is
    one thing to do with Lady gaga! Your own stuffs nice.
    At all times care for it up!

  34. Hello there, simply become alert to your blog via Google, and
    found that it is really informative. I’m gonna be careful for
    brussels. I’ll appreciate when you continue this in future.
    A lot of other people can be benefited from your writing.
    Cheers!

    My webpage :: Summer Valley CBD

  35. Excellent weblog right here! Also your website a lot up fast!
    What host are you the usage of? Can I get your associate link in your host?

    I wish my web site loaded up as quickly as yours lol

  36. I am really loving the theme/design of your web site.
    Do you ever run into any web browser compatibility issues? A handful of
    my blog visitors have complained about my blog not operating correctly in Explorer but looks great in Firefox.

    Do you have any tips to help fix this problem?

  37. Wonderful work! This is the type of info that are meant to be shared across the internet.
    Disgrace on the seek engines for not positioning this submit upper!
    Come on over and talk over with my site . Thanks =)

    Here is my homepage: Reneaux Review

  38. To follow up on the update of this theme on your website and would wish to
    let you know just how much I prized the time you took to produce this useful post.
    Inside the post, you actually spoke on how to actually handle this challenge
    with all ease. It would be my personal pleasure to collect some more
    tips from your web page and come up to offer other individuals what I have learned
    from you. Thank you for your usual fantastic effort.

    Feel free to surf to my website Molten Keto Reviews

  39. What i don’t understood is in reality how you are no longer actually
    much more neatly-appreciated than you might be right now.
    You are so intelligent. You understand therefore considerably in relation to
    this matter, produced me individually consider it from so many
    varied angles. Its like men and women don’t seem to be
    involved until it is one thing to accomplish with Woman gaga!
    Your personal stuffs outstanding. At all times take care of it
    up! scoliosis surgery https://0401mm.tumblr.com/ scoliosis surgery

  40. I have to express my appreciation to this writer just for bailing me out of this challenge.
    Right after surfing throughout the the net and meeting advice
    that were not pleasant, I assumed my entire life was gone.
    Existing devoid of the approaches to the problems you’ve resolved through your entire
    short post is a serious case, and ones which might have adversely damaged
    my career if I hadn’t encountered your blog. Your primary skills and kindness in taking care
    of almost everything was valuable. I am not sure what I would
    have done if I hadn’t come across such a solution like this.
    I’m able to at this time look ahead to my future. Thanks for
    your time very much for your skilled and effective guide.
    I won’t hesitate to endorse your web site
    to any individual who needs assistance on this issue.

    My page; Extreme Muscle XXL Review

  41. Hello there! This post couldn?t be written much better!
    Going through this article reminds me of my previous roommate!
    He continually kept talking about this. I most certainly will send this
    information to him. Fairly certain he will have a good read.

    Many thanks for sharing!

    my web-site: growing weed

  42. You’re so interesting! I do not think I’ve truly read through anything like this
    before. So great to discover someone with some genuine thoughts on this issue.
    Seriously.. thanks for starting this up. This
    site is something that is needed on the web,
    someone with a little originality!

    Have a look at my web page :: making sex better

  43. Howdy just wanted to give you a quick heads up. The
    words in your post seem to be running off the screen in Ie.
    I’m not sure if this is a formatting issue or something to do with
    browser compatibility but I figured I’d post to let you know.
    The style and design look great though! Hope you get the issue fixed soon. Many thanks

    Feel free to visit my website; diet plans tend

  44. Someone necessarily lend a hand to make significantly articles I’d state.
    That is the very first time I frequented your website page and to this point?
    I amazed with the analysis you made to make this
    actual publish extraordinary. Fantastic process!

    my web blog :: making sex better

  45. Good – I should definitely pronounce, impressed with your website.
    I had no trouble navigating through all tabs and
    related information ended up being truly simple to do to access.
    I recently found what I hoped for before
    you know it in the least. Quite unusual. Is likely to appreciate it for those who add forums or
    anything, website theme . a tones way for
    your customer to communicate. Nice task.

    Feel free to visit my web page bbs.yunweishidai.com

  46. I love your blog.. very nice colors & theme. Did you design this website yourself or did you hire someone
    to do it for you? Plz respond as I’m looking to design my
    own blog and would like to find out where u got this from.

    thank you

    Stop by my webpage: eating habits

  47. Thanks for another magnificent article. Where else may just anyone get that kind
    of information in such a perfect way of writing? I’ve a presentation next week, and
    I’m on the search for such info.

    my webpage :: eczema heals

  48. Thank you for all of your effort on this web site.
    My daughter delights in making time for research and it’s really easy to understand
    why. We all know all regarding the compelling medium you give helpful
    ideas via this web blog and as well increase contribution from the others on this theme
    and our favorite daughter is really studying a lot of things.
    Have fun with the remaining portion of the new
    year. You have been carrying out a dazzling job.

    Feel free to visit my web-site; crash diet diet

  49. Superb post however , I was wanting to know if you could write a litte more
    on this topic? I’d be very grateful if you could elaborate a
    little bit further. Cheers!

    My page … psicura.it

  50. Hi, Neat post. There’s a problem with your
    site in web explorer, could check this? IE still is the market leader and a large section of other people will leave out your wonderful writing
    due to this problem.

    Here is my webpage :: diabetic diet

Leave a Reply

Your email address will not be published.