3

Web ページの JavaScript ベースの印刷機能を作成しました。ページの非表示の div から HTML を抽出し、それを新しいウィンドウにレンダリングして、印刷ダイアログをトリガーします。

このオプションはbutton、onclick="printTheThing()"イベントで利用可能になります。たとえば、スクリーン リーダーには JavaScript に関するいくつかの注意事項があることを知っています。目の不自由な人や目の不自由な人など、この機能の使用をブロックするかどうか、または何人の人をブロックするかを考えています。

実装により、新しいブラウザー ウィンドウが開き、そのドキュメントに追加されます。

function printTheThing() {
    var dispSettings = "toolbar=yes,location=no,directories=yes,menubar=yes,"
        + "scrollbars=yes,width=550,height=400",
        html = $('#theDivToPrint').html(),
        printWindow = window.open("", "", dispSettings),
        doc = printWindow.document;

    doc.open();
    try {
        doc.write('<html><head>');
        doc.write('<title>' + title + '</title>');
        doc.write('</head><body>');
        doc.write(html);
        doc.write('</body></html>');
    } finally {
        doc.close();
    }
    printWindow.focus();
    printWindow.print();
}

更新: ボタンは次のようになります。

<button type="button" onclick="printTheThing()">Print the thing!</button>

さらに、CSS を使用してボタンを画像に置き換えています。Firefox プラグイン「Fangs」でボタンをテストしました。これは、スクリーン リーダーが元のボタン テキストを完全に読み上げることを示唆しています。しかし、Fangs には対話機能がないため、印刷をテストすることはできません。

4

4 に答える 4

4

Chrome 拡張機能にはまったく依存しないでください。無料の NVDA でテストする必要があります。Google ファンボーイは、Chrome Vox で問題ないと言うでしょう。私を信じてください、私はATで15年近く働いています。

とにかく、JS ではなく、ボタンのコードを確認する必要があります... JS は問題ないようです。新しいウィンドウがあることを理解できない人もいますが、印刷ダイアログはウィンドウではなくフォーカスを取得する必要があります

于 2012-04-20T13:18:49.887 に答える
1

印刷可能なページをレンダリングする方法は、@mediaCSS ディレクティブを使用することです。そうすれば、別のウィンドウをポップアップしたり、アクセシビリティについて心配したりするような特別なことをする必要はありません。コンテンツは単に正しく印刷されます (必要に応じて、画面上のレイアウトとは大きく異なる可能性があります)。

于 2012-04-20T14:21:34.223 に答える
1

スクリーン リーダーを使用してアクセシビリティを改善するには、W3C WAI-ARIA ライブ リージョンを使用します。詳細については、推奨事項とFAQを参照してください。

テストするには、次のスクリーン リーダーを使用できます
。Windows の場合 - JAWS、
Linux の NVDA - orca (Chromium では動作しません) + Florian Margaine のアドバイス

ACheckerを使用して、WCAG 2.0、セクション 508、Stanca Act アクセシビリティ標準への準拠をテストすることもできます。

于 2012-04-20T13:17:29.690 に答える
1

最善の方法は、自分で試してみることです。

これを可能にする Google Chrome 拡張機能があります: https://chrome.google.com/webstore/detail/kgejglhpjiefppelpmljglcjbhoiplfn

于 2012-04-20T13:04:58.453 に答える