Question

我第一次使用一些辅助功能控件构建网站。我需要能够将文字大小设置为小，默认＆amp;较大，与正常设置对比，黑色为黄色，黄色为黑色。我是一名普通的前端开发人员，但不经常使用js或jquery

我的方法是将一些类设置为html＆＃34; body＆＃34;处理每个案件

我写了以下jquery：

// Accessibility 
// Check for cookies and set body class accordingly
if($.cookie("bodyclass-text")) {
      $("body").addClass($.cookie("bodyclass-text"));
    }
if($.cookie("bodyclass-contrast")) {
      $("body").addClass($.cookie("bodyclass-contrast"));
    }
// initialize the jquery code
 $(document).ready(function(){
  // add or remove classes to body as appropriate
  // return false keeps the browser from following the link's '#' target

  // Text size
  $("#defaultText").click(function(){
    $("body").removeClass("small-text");
    $("body").removeClass("large-text");
    $.cookie("bodyclass-text", null);
    return false;
  });
  $("#smallText").click(function(){
    $("body").removeClass("large-text");
    $("body").addClass("small-text");
    $.cookie("bodyclass-text", "small-text", { expires: 365, path: '/' });
    return false;
  });
  $("#largeText").click(function(){
    $("body").removeClass("small-text");
    $("body").addClass("large-text");
    $.cookie("bodyclass-text", "large-text", { expires: 365, path: '/' });
    return false;
  });

  // Contrast
  $("#defaultContrast").click(function(){
    $("body").removeClass("black-on-yellow");
    $("body").removeClass("yellow-on-black");
    $.cookie("bodyclass-contrast", null);
    return false;
  });
  $("#yellowOnBlack").click(function(){
    $("body").removeClass("black-on-yellow");
    $("body").addClass("yellow-on-black");
    $.cookie("bodyclass-contrast", "yellow-on-black", { expires: 365, path: '/' });
    return false;
  });
  $("#blackOnYellow").click(function(){
    $("body").removeClass("yellow-on-black");
    $("body").addClass("black-on-yellow");
    $.cookie("bodyclass-contrast", "black-on-yellow", { expires: 365, path: '/' });
    return false;
  });
});

因此，由于某些原因，文本大小调整器可以工作，但对比度交换器不起作用。这可能是一个CSS问题，当我在FireBug中看到这个时，我认为我的身体类正确设置，但是我不能将黄色显示为黑色或黑色黄色以启用。我已尝试添加我知道在我的文本css中使用了一些大的字体大小。

这是我提取的CSS：

/* Accessibility options */
body {
    font-size: 1em;
    color: #777;
    background: #fff;
}

body.yellow-on-black !important{
    color: yellow;
    background: black;
    font-size: 3em;
}

body.black-on-yellow !important{
    color: black;
    background: yellow;
    font-size: 3em;
}


body.small-text {
  font-size: 0.8em;
}

body.large-text {
  font-size: 1.4em;
}

为了完整性，我的html看起来像这样：

<div id="defaultText"><a>Normal text</a></div>
<div id="smallText"><a>Smaller text</a></div>
<div id="largeText"><a>Larger text</a></div>
<p>
<div id="defaultContrast"><a>Default Contrast</a></div>
<div id="yellowOnBlack"><a>Yellow on Black</a></div>
<div id="blackOnYellow"><a>Black on Yellow</a></div>

有人可以建议我如何解决这个问题吗？

测试网页位于：http://www.crossroadscare.hardingweb.net/index.php

辅助功能选项位于右栏的底部。

非常感谢

Answer 1

CSS中有两次!important出现在他们不属于的地方。只有单个属性可以!important，因此这些规则不正确，将被跳过。从

中删除!important

body.yellow-on-black !important{

和

body.black-on-yellow !important{

并在必要时将它们添加到各个属性中。（尽管如此，只有在需要覆盖具有!important并且无法更改的CSS的边缘情况下才有必要。）

可访问性，具有文本大小交换器，无法使对比交换器工作

1 个答案: