JAWS не читает выбранные опции - PullRequest
Новая
       18

JAWS не читает выбранные опции

0 голосов
/ 28 февраля 2019

Я делаю проект на JAWS, я вернул HTML-код 

<!DOCTYPE html>
<html>
    <head>
        <title>Page title</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

        <script src="<%out.print(request.getContextPath());%>/jquery/external/jquery/jquery.js"></script> 

        <script src="<%out.print(request.getContextPath());%>/jquery/jquery-ui.js"></script>
        <link rel="STYLESHEET" type="text/css" href="<%out.print(request.getContextPath());%>/jquery/jquery-ui.css"></link>

        <link href="<%out.print(request.getContextPath());%>/select2/4.0.6-rc.0/css/select2.min.css?v=2" rel="stylesheet" />
        <script src="<%out.print(request.getContextPath());%>/select2/4.0.6-rc.0/js/select2.min.js?v=2"></script>

        <script src="<%out.print(request.getContextPath());%>/select2/maximize-select2-height/maximize-select2-height.js"></script>
        <script src="<%out.print(request.getContextPath());%>/select2/maximize-select2-height/maximize-select2-height.min.js"></script>

        <link rel="STYLESHEET" type="text/css" href="<%out.print(request.getContextPath());%>/font-awesome/css/font-awesome.min.css">

        <script type="text/javascript">
            $(document).ready(function () {
                $('.form-control').select2({
                    theme: "classic",
                    templateSelection: function (data, container) {
                        if (data.id == '') {
                            $(container).css("color", "grey");
                        } else {
                            $(container).css("color", "black");
                        }
                        return data.text;
                    },
                }).maximizeSelect2Height();
               
            });
        </script>
    </head>
    <body>

        <div>
            <div class ="col-sm-3">
                <label for="app1">Name:</label>
            </div>
            <div class ="col-sm-9">                        
                <select required class = "form-control" id ="app1">
                    <option value="" >select a program name</option>
                    <option >india</option>
                    <option >china</option>
                    <option>netherlands</option>
                    <option >africa</option>
                    <option >nepal</option>
                    <option >india</option>
                    <option >china</option>
                    <option>netherlands</option>
                    <option >africa</option>
                    <option >nepal</option>
                    <option >india</option>
                    <option >china</option>
                    <option>netherlands</option>
                    <option >africa</option>
                    <option >nepal</option>
                    
                </select>             
            </div>
        </div>

    </body>
</html>

Вывод будет примерно таким: enter image description here

, когда я запускаю JAWS, он читает все из поля drpdown, ноэто не чтение опций для выбора.Мне нужен текстовый поиск в выпадающем списке его требование.Если я удалю текстовый поиск, который использовал плагин select2, он работает нормально, но мне нужно, чтобы в окне поиска был какой-нибудь другой альтернативный плагин, который я могу использовать.

1 Ответ

0 голосов
/ 28 февраля 2019

Ваш пример кода в вашем вопросе является простым

Я думаю, что у вас проблема в том, что имеет фокус, поэтому стрелка вниз отправляется на , поскольку JAWS обычно переключается в «режим форм», когда фокус перемещается на вход.В «режиме форм» вы не можете использовать обычные сочетания клавиш программы чтения с экрана для навигации по странице.

Вам, вероятно, понадобится клавиатурный обработчик для захвата клавиши со стрелкой вниз и использования aria-activedescendant, чтобы указать программе чтения с экрана, где должен быть «фокус».

См. Также « 5.6.2 Управление фокусом в композитах с помощью aria-activedescendant ».

...