4

たとえば、この設計をコーディングするためのアクセス可能な方法は何ですか。

代替テキスト http://easycaptures.com/fs/uploaded/220/0715108922.png

現在、私の会社の CMS は、このデザイン用にこの HTML を作成しています

<div id="presentationsContainer">
        <div class="ItemsContainer">
            <div class="presentationsItemContainer">
                <div class="TitleContainer">
                    Presentation October 2009</div>
                <div class="MediaContainer">
                    <a target="_blank" href="Presentation.ppt">Download PPT </a>
                </div>
            </div>
            <div class="presentations">
                <div class="TitleContainer">
                    May 2009</div>
                <div class="MediaContainer">
                    <a target="_blank" href="2009.ppt">Download PPT </a>
                </div>
            </div>
            <div class="presentations">
                <div class="TitleContainer">
                    March 2009</div>
                <div class="MediaContainer">
                    <a target="_blank" href="2009.ppt">Download PPT </a>
                </div>
            </div>
            <div class="presentations">
                <div class="TitleContainer">
                    Results Presentation September 2008</div>
                <div class="MediaContainer">
                    <a target="_blank" href="2008.ppt">Download PPT </a>
                </div>
            </div>
        </div>
    </div>

のようなもの<table>はスクリーン リーダーのユーザーにとっては良くありません。多くの非セマンティックな div タグを持つスクリーン ユーザーは、どちらもスクリーン リーダーのユーザーに問題を引き起こすか、非セマンティックな div は適切にマークアップするよりも問題が少なくなります。

アクセシビリティには何を使用する必要がありますか?また、css が無効になっている場合、どのコード手法が理解しやすい書式を維持しますか?

Jquery / Javascript の if 文

これが私が達成しようとしていることです：

スクロール位置に応じて固定位置と絶対位置を切り替える div があります。動作する例がありますが、スクロールの各ピクセルの位置が常に変化するため、少し遅いことに気付きました。そのため、if ステートメント (オンとオフのスイッチのようなもの) を追加すると、少しは改善されると思いました。でももちろん壊れました。

私はめったにjquery/javascriptを使用しないので、私の目にはこれは正しいように見えますが、そうではありません..何か助けになりますか? if ステートメントよりも、これを行うためのより良い方法があるかもしれません。

var top = blah;
var bottom = blah;
var ison=0;
$(window).scroll(function (event) {
    var y = $(this).scrollTop();
    if (y >= top && y <= bottom) {
        if (ison===0) {
            $('#float-contain').addClass('fixed');
            var ison = 1;
        }
    } else {
        if (ison===1) {
            $('#float-contain').removeClass('fixed');
            var ison = 0;
        }
    }
});
4

4 に答える 4

8

3つの方法のいずれかでIMOは問題ありません。私はそれらのいずれかが他の2よりも優れていると主張することができます。

私がそれを見ているとき、それがより少ないコードであるという理由だけで、私自身はリストと一緒に行くでしょう。

<ul id="presentationsContainer">
    <li>
        Presentation October 2009
        <span><a target="_blank" href="Presentation.ppt">Download PPT </a></span>
        <span><a target="_blank" href="Presentation.ppt">Download PPT </a></span>
    </li>
    <li>
        Presentation October 2009
        <span><a target="_blank" href="Presentation.ppt">Download PPT </a></span>
        <span><a target="_blank" href="Presentation.ppt">Download PPT </a></span>
    </li>
    <li>
        Presentation October 2009
        <span><a target="_blank" href="Presentation.ppt">Download PPT </a></span>
        <span><a target="_blank" href="Presentation.ppt">Download PPT </a></span>
    </li>
</ul>

[編集]追加のダウンロードpptの追加は、各liに別のスパンを追加するだけで実行できます。私は、PDFをダウンロードするために、スパンを右に浮かせて幅を与えることを想定しています。このように別の列を追加することは、もはやcssコードではありません。スパンを削除して、そのスタイルをタグに追加することもできます。その最初の列にリンクがないと仮定します。

ただし、それをテーブルに変更したい場合（列が多いほど良い選択かもしれません）、次のようにすることができます。ただし、調べる必要のあるコードがどれだけあるかはすでにわかります。

<table id="presentationsContainer">
  <tr>
    <td class="main" width="60%">Presentation October 2009</td>
    <td class="dl" width="20%">Download pdf</td>
    <td class="dl" width="20%">Download ppt</td>
  </tr>
  <tr>
    <td class="main" width="60%">Presentation October 2009</td>
    <td class="dl" width="20%">Download pdf</td>
    <td class="dl" width="20%">Download ppt</td>
  </tr>
  <tr>
    <td class="main" width="60%">Presentation October 2009</td>
    <td class="dl" width="20%">Download pdf</td>
    <td class="dl" width="20%">Download ppt</td>
  </tr>
</table>
于 2010-01-20T18:20:30.723 に答える
3

そのスクリーン ショットは、<table>. スタイルが簡単になり、x-browser と互換性があり、一部のヘッダーが完全にアクセス可能になります。css スタイルが削除された場合も、ほとんど同じようにレンダリングされます。

于 2010-01-20T18:45:22.197 に答える
1

よりアクセスしやすい (または少なくともW3C のガイドラインに沿った) ものの 1 つは、文脈に関係なく意味のあるダウンロード リンクです。

したがって、次の代わりに：

<a target="_blank" href="2009.ppt">Download PPT </a>

あなたが持つことができます：

<a target="_blank" href="2009.ppt" title="Download March 2009 presentation (PowerPoint file)">Download PPT </a>
于 2010-02-10T09:42:59.840 に答える