I need to make a button in a webpage to zoom in and out (accessibility controls)(disabled friendly)

Question

I need to make a button in a webpage to zoom in and out (accessibility controls)(disabled friendly)

I have a website for a Special School. It needs to be disabled friendly. It's built upon a responsive framework so when you Zoom with Ctrl+ it zooms in nicely and doesn't break down.

I want to place a button at the top that has a little + and - symbol to control this keyboard shortcut.

I would assume that this would require Java Script but apart from a basic knowledge of what it is that's my limit of expertise.

I have tried some research into this but I must be asking the wrong questions.

Has anyone done this before,? Know of any software or Code already Available? or can help me ask Google the right questions.

Thanks in advance

Kind Regards,

Ben

Answer 1

You could do something like this:

<button onclick="body.style.zoom='300%'">Zoom 300%</button>
<button onclick="body.style.zoom='200%'">Zoom 200%</button>
<button onclick="body.style.zoom='100%'">Zoom 100%</button>