实施文本大小可访问性功能的最佳方法是什么？

Question

I need to implement a feature into a web app i'm building that will increase text size / window zoom to assist in reading text.

The best method in my head would be to simulate a browser zoom so that my media queries are also taken into account and the layout doesn't break, but i'm not sure of the best way / if this is possible.

CSS zoom isn't really an option due to the framework using media queries.

Any help / other ideas would be greatly appreciated!

Answer 1

Well, as @slugolicious said, you probably should be steering users to use their browser's inbuilt browser zooming features.

However, it's entirely possible this is a client/business requirement, so I'll suggest something.

Your best bet is to place a CSS class on your content holding element that adjusts the user's font size.

Here's some css classes:

#content.font-lg {
    font-size: 125%;
}

#content.font-xl {
    font-size: 150%;
}

And to trigger them, some JavaScript:

function onLargeFontButtonClick() {
    var element = document.getElementById('content');
    element.className = 'font-lg';
}

function onExtraLargeFontButtonClick() {
    var element = document.getElementById('content');
    element.className = 'font-xl';
}

function onNormalFontButtonClick() {
    var element = document.getElementById('content');
    element.className = '';
}

If you already have classes on your content area, you might want to use += instead for the classname, possibly removing instances of the other font class. Adjust to your needs.

I hope this helps!