Javascript AA Font enlargment accessibility - Stack Overflow

admin管理员组

文章数量:1315245

OK basically i need help to create a code that increase font size on a mouse click. Here is an example: / in the top right corner there are 3 AAA's which increase the pages font size etc

my current code is

// JavaScript Document
var min = 12;
var max = 32;

function increaseFontSize() {
    var p = document.getElementsByTagName('p');
    for (i = 0; i < p.length; i++) {
        if (p[i].style.fontSize) {
            var s = parseInt(p[i].style.fontSize.replace("px", ""));
        } else {

            var s = 12;
        }
        if (s != max) {
            s += 1;
        }
        p[i].style.fontSize = s + "px"
    }
}

function decreaseFontSize() {
    var p = document.getElementsByTagName('p');
    for (i = 0; i < p.length; i++) {

        if (p[i].style.fontSize) {
            var s = parseInt(p[i].style.fontSize.replace("px", ""));
        } else {
            var s = 12;
        }
        if (s != min) {
            s -= 1;
        }
        p[i].style.fontSize = s + "px"
    }
}

it is implemented in the HTML like this:

<a href="javascript:decreaseFontSize();">-</a>
<a href="javascript:increaseFontSize();">+</a>

mine only works for items tagged as 'p' can anyone help me create it so the function works like the RNIB website cheers

OK basically i need help to create a code that increase font size on a mouse click. Here is an example: http://www.rnib.uk/ in the top right corner there are 3 AAA's which increase the pages font size etc

my current code is

// JavaScript Document
var min = 12;
var max = 32;

function increaseFontSize() {
    var p = document.getElementsByTagName('p');
    for (i = 0; i < p.length; i++) {
        if (p[i].style.fontSize) {
            var s = parseInt(p[i].style.fontSize.replace("px", ""));
        } else {

            var s = 12;
        }
        if (s != max) {
            s += 1;
        }
        p[i].style.fontSize = s + "px"
    }
}

function decreaseFontSize() {
    var p = document.getElementsByTagName('p');
    for (i = 0; i < p.length; i++) {

        if (p[i].style.fontSize) {
            var s = parseInt(p[i].style.fontSize.replace("px", ""));
        } else {
            var s = 12;
        }
        if (s != min) {
            s -= 1;
        }
        p[i].style.fontSize = s + "px"
    }
}

it is implemented in the HTML like this:

<a href="javascript:decreaseFontSize();">-</a>
<a href="javascript:increaseFontSize();">+</a>

mine only works for items tagged as 'p' can anyone help me create it so the function works like the RNIB website cheers

• javascript
• accessibility

Share Improve this question Follow edited Jul 14, 2015 at 9:49 BoltClock 725k165165 gold badges1.4k1.4k silver badges1.4k1.4k bronze badges asked Feb 27, 2013 at 19:32 user1949280user1949280 7522 silver badges88 bronze badges

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 3

I think you may be overplicating things. I would approach this issue more from a CSS perspective with a little minor work through JS. I would:

• Use a class name on a container element
• Use CSS to style several different sizes
• Use JS to change the class name when the plus/minus links are clicked

HTML:

<a href="javascript:smallFontSize();">Small Font</a>
<a href="javascript:largeFontSize();">Large Font</a>
<a href="javascript:normalFontSize();">Normal Font</a>

<div id="myContainer" class="size-normal">
  <h1>Some header</h1>
  <p>Some paragraph</p>
  <ul>
    <li>Some list item</li>
  </ul>
</div>

CSS:

#myContainer.size-normal { font-size: 12px; }
#myContainer.size-large { font-size: 14px; }
#myContainer.size-small { font-size: 10px; }

JS:

var containerEle = document.getElementById('myContainer');
function smallFontSize() {
  containerEle.className = "size-small";
}
function largeFontSize() {
  containerEle.className = "size-large";
}
function normalFontSize() {
  containerEle.className = "size-normal";
}

If your CSS is set up so that you have a body font-size set to 100% and all element font sizes defined as 1.1 em, 1.5em, etc. Then your buttons can trigger these to increase or decrease the font size of the whole page.

document.getElementsByTagName('body')[0].style.fontSize.smaller;
document.getElementsByTagName('body')[0].style.fontSize.larger;

All elements will then change size relative to each other, e.g. your h1, h2, etc. will still be bigger than your p elements.

I would consider 'larger' and 'smaller' buttons more user-friendly than three predefined sizes.

Personally, I'm not remended to increase/decrease the font size by 1 every click. It is because you have to iterate many elements and set the font size. I will suggestion use 3-5 class to define the font-size and set to body to affect the further elements. But if you insist to increase/decrease the font size by 1 every click, you can reference the following code. If you would like to select elements from header, you can select it like this document.getElementById("menu").getElementsByTagName("h1")

function increaseFontSizeInternal(list) {
    for(i=0;i<list.length;i++)
    {   
        var s = 12;
        if(list[i].style.fontSize) 
        { 
            s = parseInt(list[i].style.fontSize.replace("px",""));
        }
        if(s!=max)
        {
            s += 1; 
        } 
        list[i].style.fontSize = s+"px"
    }
} 

function increaseFontSize()
{
    var paragraph = document.getElementsByTagName('p');
    increaseFontSizeInternal(paragraph);
    var links = document.getElementsByTagName('a');
    increaseFontSizeInternal(links);
    var headerInMenu = document.getElementById("menu").getElementsByTagName("h1")
    increaseFontSizeInternal(headerInMenu);
}

function decreaseFontSizeInternal(list) 
{ 
    for(i=0;i<list.length;i++) 
    {   
        var s = 12;
        if(list[i].style.fontSize) 
        {
            s = parseInt(list[i].style.fontSize.replace("px",""));
        } 
        if(s!=min) {
            s -= 1;
        }
        list[i].style.fontSize = s+"px"
    }
} 

function decreaseFontSize()
{
    var paragraph = document.getElementsByTagName('p');
    decreaseFontSizeInternal(paragraph);
    var links = document.getElementsByTagName('a');
    decreaseFontSizeInternal(links);
    var headerInMenu = document.getElementById("menu").getElementsByTagName("h1")
    decreaseFontSizeInternal(headerInMenu);
}

Instead of doing this just for your site, what if you keep the icons there, but when someone presses them, you show a popup explaining that zoom/font-size increase is built-in to almost every browser out there already?

That gets around the plications of writing a script or what interval to use for the font size, plus it has the added benefit of teaching users that this functionality is already available on almost any website they use.

You can also do a little UA sniffing to determine which hot-key they should press and show that in the pop-up.

I remend you to just to change page zoom. This will not break the design of website.

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="javascript:$('body').css({'zoom':parseFloat($('body').css('zoom'))+0.1})">A+</a><br>
<a href="javascript:$('body').css({'zoom':parseFloat($('body').css('zoom'))-0.1})">A-</a>

本文标签： Javascript AA Font enlargment accessibilityStack Overflow