Javascript AA字体放大的可访问性

Javascript AA Font enlargment accessibility

本文关键字：访问 放大 AA 字体 Javascript      更新时间：2023-09-26

OK，基本上我需要帮助创建一个代码，增加字体大小的鼠标点击。下面是一个例子:http://www.rnib.org.uk/在右上角有3个AAA增加页面字体大小等

当前代码是

// 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"
    }
}

在HTML中实现如下:

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

我的只适用于标记为'p'的项目，谁能帮助我创建它，使功能像RNIB.org网站干杯

我想你可能把事情弄得太复杂了。我会更多地从CSS的角度来解决这个问题，并通过JS做一点小的工作。我想:

  • 在容器元素上使用类名
  • 使用CSS样式设置几个不同的尺寸
  • 使用JS在点击加减号链接时更改类名
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";
}

如果你的CSS设置了body font-size设置为100%，所有元素的字体大小定义为1.1 em, 1.5em等。然后你的按钮可以触发这些来增加或减少整个页面的字体大小。

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

所有元素将改变相对于其他元素的大小，例如，你的h1, h2等将仍然比你的p元素大。

我认为"更大"answers"更小"的按钮比三个预定义的大小更方便用户使用。

不只是为你的站点这样做，如果你把图标保留在那里，但是当有人按下它们时，你会显示一个弹出窗口，解释缩放/字体大小增加是内置的，几乎每个浏览器都有?

解决了编写脚本或字体大小间隔的复杂性，而且它还有一个额外的好处，即告诉用户这个功能几乎在他们使用的任何网站上都是可用的。

您还可以做一点UA嗅探，以确定他们应该按哪个热键，并在弹出窗口中显示。

我个人不建议每次点击都增加/减少1的字体大小。这是因为您必须迭代许多元素并设置字体大小。我建议使用3-5类来定义字体大小，并设置为body来影响其他元素。但是，如果您坚持每次单击增加/减少1的字体大小，则可以引用以下代码。如果你想从header中选择元素，你可以这样选择: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);
}

我建议您只更改页面缩放。这不会破坏网站的设计。

<script src="https://ajax.googleapis.com/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>

相关文章：