How can i enlarge wesite font-size when used with vw unit for WCAG (accessibility) propeses?

I'm writing some css style sheets for my website and having a mass use of "vw" and "vh" css units. I noticed that when I'm trying to enlarge (resize?) the font size with the browser magnifier or using Ctrl+Scrolling up with mouse, the font size doesn't incrase and stays static. I have to make this website accessible (AA Level) and one of the main requirements are

Ensure Your Site Responds Well to Increased Text-Size (1.4)

Got it from here.

Using "rem" or "em" do resize, but they don't have the effect of "stretched" when i resize the window which is the biggest adventage when using "vw" units.

How can i solve this? How can I gain both things? Making text resize and keep the aspect ratio of the text for the screen?

Thanks.

Solution

vh and vw units are not intended to be used for font-size if you want to be compatible with WCAG.

The only possible solution if you want to have the expected behavior is to make use of javascript.

EDIT : Sample solution with jQuery:

$(document).ready(function() {
  $(".vh").each(function() {
    $(this).css("font-size", $(this).css("font-size"));
  });
});

.vh {
   font-size: 50vh;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="vh">Test</div>