0

選択可能な画像を作成するための2つのアプローチを検討していますが、できるだけ多くのユーザーがどのソリューションに最もアクセスしやすいのか疑問に思っています。1つはjQuerytoggleClassを使用しています

<html><head>
    <style type="text/css">
        img {
           padding: 10px;
           margin: 25px;
           float: left;
           background-color: #99BC99;
        }
        img.selected {
            background-color: #E13300;
        }
    </style>
    <script type="text/javascript" src="jquery-1.7.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">

        $(document).ready(function() {
            $('img').click(function(){
                $(this).toggleClass('selected');
            });
        });
    </script>
</head><body>
    <img src="images/image0.jpg">
    <img src="images/image1.jpg">
    <img src="images/image2.jpg">
    <img src="images/image3.jpg">
    <img src="images/image4.jpg">
    <img src="images/image5.jpg">
    <img src="images/image6.jpg">
    <img src="images/image7.jpg">
    <img src="images/image8.jpg">
</body></html>

他のアプローチでは、JavaScriptを使用せずにhtmlとcssを使用します

<html><head>
    <style>
    input[type=checkbox] {
        display:none;
    }
    input[type=checkbox] + label {
        padding: 10px;
        margin: 25px;
        background-color: #99BC99;
        float: left;
    }
    input[type=checkbox]:checked + label {
        padding: 10px;
        margin: 25px;
        background-color: #E13300;
        float: left;
    }
    </style>
</head><body>
    <input type='checkbox'  value='image0' id="image0"/>
    <label for="image0"><img src="images/image0.jpg"></img></label>
    <input type='checkbox' value='image1' id="image1"/>
    <label for="image1"><img src="images/image1.jpg"></img></label>
    <input type='checkbox' value='image2' id="image2"/>
    <label for="image2"><img src="images/image2.jpg"></img></label>
    <input type='checkbox' value='image3' id="image3"/>
    <label for="image3"><img src="images/image3.jpg"></img></label>
    <input type='checkbox' value='image4' id="image4"/>
    <label for="image4"><img src="images/image4.jpg"></img></label>
    <input type='checkbox' value='image5' id="image5"/>
    <label for="image5"><img src="images/image5.jpg"></img></label>
    <input type='checkbox' value='image6' id="image6"/>
    <label for="image6"><img src="images/image6.jpg"></img></label>
    <input type='checkbox' value='image7' id="image7"/>
    <label for="image7"><img src="images/image7.jpg"></img></label>
    <input type='checkbox' value='image8' id="image8"/>
    <label for="image8"><img src="images/image8.jpg"></img></label>
</body></html>

アクセシビリティに関するこれら2つのアプローチの違いは、もしあれば、何でしょうか？

4

1 に答える 1

1

JavaScript をブロックしている人を何人か知っているので、2 番目のオプションが最もアクセスしやすいと思います。

とにかく、javascript を使用すると見栄えが良くなるので、javascript なしで動作するものを作成し、その上に javascript レイヤーを配置する必要があります。人々がJavaScriptをオフにしても機能するようにします。

于 2012-05-15T02:11:07.067 に答える