辅助功能，有一个文本大小交换器，不能让对比度交换器工作

Question

这是我第一次创建一个带有一些辅助功能控件的网站。我需要能够设置文本大小为小，默认和大，并设置正常，黑色和黄色上的黄色对比。我是一个普通的前端开发人员，但不经常使用js或jquery

我的方法是为html "body“设置一些类来处理每种情况。

我已经编写了以下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中看到这一点时，我认为我的body类被正确设置了，但是我不能让黄色的黑色或者黄色的黑色生效。我也试着在里面添加了一些大字体，我知道这对我的文本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%s

body.yellow-on-black !important{

和

body.black-on-yellow !important{

并在必要时将它们添加到各个属性中。(不过，这应该不是必需的，只有在需要覆盖具有!important并且不能更改的CSS的边界情况下才是必要的。)