Как я могу запретить программе чтения с экрана NVDA читать «кликабельно» для серии Highcharts? Значения серии заключены в тег tspan и не имеют связанных с ним событий нажатия. Заранее спасибо за помощь.
Добавление 2-го снимка экрана (я прикреплю скрипку, как только разберусь) в ответ Грэму Ритчу Комментарий ie.
window.EJ = window.EJ || {},
EJ.features = EJ.features || {};
EJ.events = {};
(function(q) {
'use strict';
var topics = {},
subUid = -1;
q.subscribe = function(topic, func) {
if (!topics[topic]) {
topics[topic] = [];
}
var token = (++subUid).toString();
topics[topic].push({
token: token,
func: func
});
return token;
};
q.publish = function(topic, args) {
if (!topics[topic]) {
return false;
}
setTimeout(function() {
var subscribers = topics[topic],
len = subscribers ? subscribers.length : 0;
while (len--) {
subscribers[len].func(topic, args);
}
}, 0);
return true;
};
q.unsubscribe = function(token) {
for (var m in topics) {
if (topics[m]) {
for (var i = 0, j = topics[m].length; i < j; i++) {
if (topics[m][i].token === token) {
topics[m].splice(i, 1);
return token;
}
}
}
}
return false;
};
}(EJ.events));
/**
* Features loader
* Iterates over all data-features attributes in the DOM and will execute EJ.features.featureName.init()
*/
EJ.features = {
init: function() {
var features = $('[data-features]');
if (!features.length) return false;
for (var i = 0, n = features.length; i < n; i++) {
var $el = $(features[i]),
func = $el.data('features');
if (this[func] && typeof this[func].init === 'function') {
this[func].init($el);
}
}
}
};
EJ.features.careerFitTool = (function(quiz) {
quiz.init = function(el) {
if (!el) {
throw new Error('You must supply the constructor an element instance to operate on.');
}
var currQuestionIndex = -1,
$start = el.find('.quiz-start'),
$finish = el.find('.quiz-finish'),
$startOver = el.find('.quiz-startOver'),
$previousQuestion = el.find('.previous-question'),
$nextQuestion = el.find('.next-question'),
$stateDefault = el.find('.state-default'),
$stateActive = el.find('.state-quiz'),
$questions = el.find('.question-field'),
$progressIndicator = el.find('.progress-indicator'),
numOfQuestions = $questions.length
$answers = el.find('.answer');
var faPct = 0;
var boaPct = 0;
var hqPct = 0;
$previousQuestion.on('click', function() {
changeQuestion('prev');
});
$nextQuestion.on('click', function() {
changeQuestion('next');
});
$start.on('click', function() {
changeState('default', 'quiz');
});
$finish.on('click', function() {
changeState('quiz', 'finished');
});
$startOver.on('click', function() {
changeState('finished', 'default');
currQuestionIndex = -1;
$(el).find('form')[0].reset();
focusLetsGetStarted();
});
$answers.on('change', function() {
$nextQuestion.removeClass('disabled')
.attr('disabled', false);
})
/**
* Change state of quiz.
* @param {string} currState Current state (default/quiz/finished)
* @param {string} nextState Desired next state (default/quiz/finished)
*/
function changeState(currState, nextState) {
el.find('.state-' + currState).hide();
el.find('.state-' + nextState).show();
if (currState === 'default') {
$previousQuestion.hide();
$($questions[++currQuestionIndex]).show();
$($progressIndicator[currQuestionIndex]).addClass('active');
}
}
function computeJobFitPercents() {
var faAmount = 0;
var boaAmount = 0;
var hqAmount = 0;
var totalOptionAmount = 0;
var faPercent = 0;
var boaPercent = 0;
var hqPercent = 0;
for (var i = 1; i <= 45; i++) {
var radios = document.getElementsByName('group' + i);
for (var j = 0; j < radios.length; j++) {
var radio = radios[j];
var radioString = radio.value;
if (radioString.indexOf("Financial Advisor") >= 0 && radio.checked) {
faAmount++;
}
if (radioString.indexOf("Branch Office Administrator") >= 0 && radio.checked) {
boaAmount++;
}
if (radioString.indexOf("Headquarters") >= 0 && radio.checked) {
hqAmount++;
}
}
totalOptionAmount = faAmount + boaAmount + hqAmount;
faPercent = parseFloat(((faAmount / totalOptionAmount) * 100).toFixed());
boaPercent = parseFloat(((boaAmount / totalOptionAmount) * 100).toFixed());
hqPercent = parseFloat(((hqAmount / totalOptionAmount) * 100).toFixed());
var totalPercent = faPercent + boaPercent + hqPercent;
}
generatePieChart(faPercent, boaPercent, hqPercent);
// Populate the variables required to display the result
faPct = faPercent;
boaPct = boaPercent;
hqPct = hqPercent;
}
/**
* This function generates pie chart for the given inputs.
* It generates a job fir graph for the questions answered by the user.
*/
function generatePieChart(faPrcnt, boaPrcnt, hqPrcnt) {
Highcharts.setOptions({
colors: ['#F3BD06', '#f6d050 ', '#fae49b']
});
// Build the chart
$('#pieChartContainer').highcharts({
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
width: 230
},
credits: {
enabled: false
},
title: {
text: null
},
scrollbar : {
enabled : false
},
tooltip: {
enabled: false,
pointFormat: '<b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: false,
cursor: 'pointer',
dataLabels: {
enabled: false
},
showInLegend: true,
borderWidth: 0,
point: {
events: {
mouseOver: function() {
//pieChart.tooltip.hide();
}
}
}
}
},
exporting: {
enabled: false
},
legend: {
layout: 'vertical',
floating: false,
borderRadius: 0,
borderWidth: 0,
align: 'center',
verticalAlign: 'bottom',
labelFormatter: function() {
return this.y + '%' + ' ' + '-' + this.name;
}
},
series: [{
type: 'pie',
name: 'Career Chart',
point: {
events: {
legendItemClick: function() {
return false;
}
}
},
data: [
['Financial Advisor', faPrcnt],
['Branch Office Administrator', boaPrcnt], {
name: 'Headquarters',
y: hqPrcnt,
sliced: false,
selected: false
}
]
}]
});
}
/**
* Go to previous or next question
* @param {string} direction 'next' or 'prev'
* @return {boolean} are we on first or last question?
*/
function changeQuestion(direction) {
//Call function to compute the job fit percent as per the answers selected by the user
//computeJobFitPercents();
var questionAnswers;
var isAnswered;
$($questions[currQuestionIndex]).hide();
$progressIndicator.removeClass('active');
if (direction === 'next') {
currQuestionIndex++;
} else {
currQuestionIndex--;
}
$($progressIndicator[currQuestionIndex]).addClass('active');
questionAnswers = $($questions[currQuestionIndex]).find('.answer');
for (var i = 0, j = questionAnswers.length; i < j; i++) {
if ($(questionAnswers[i]).prop('checked') === true) {
isAnswered = true;
}
}
if (isAnswered) {
$nextQuestion.removeClass('disabled')
.attr('disabled', false);
} else {
$nextQuestion.addClass('disabled')
.attr('disabled', true);
}
if (currQuestionIndex === -1) {
$($questions[currQuestionIndex]).hide();
changeState('quiz', 'default');
} else if (currQuestionIndex === numOfQuestions) {
//Call function to compute the job fit percent as per the answers selected by the user
computeJobFitPercents();
$($questions[currQuestionIndex]).hide();
changeState('quiz', 'finished');
//Determine the result
$('#faOutcome').hide();
$('#faResultLink').hide();
$('#boaOutcome').hide();
$('#boaResultLink').hide()
$('#hqOutcome').hide();
$('#hqResultLink').hide();
if (faPct >= boaPct) {
if (faPct >= hqPct) {
$('#faOutcome').show();
$('#faResultLink').show();
} else {
$('#hqOutcome').show();
$('#hqResultLink').show();
}
} else if (boaPct >= hqPct) {
$('#boaOutcome').show();
$('#boaResultLink').show();
} else {
$('#hqOutcome').show();
$('#hqResultLink').show();
}
} else {
$($questions[currQuestionIndex]).show();
if (currQuestionIndex === 0) {
$previousQuestion.hide();
} else {
$previousQuestion.show();
}
}
return currQuestionIndex === numOfQuestions || currQuestionIndex === 0;
}
}
return quiz;
}(EJ.features.careerFitTool || {}));
EJ.initialize = function() {
EJ.features.init();
};
$(function() {
EJ.initialize();
$('.comp-registrationForm.modal').modal('show');
});
/* Enter Your Custom CSS Here */
input[type="checkbox"],input[type="radio"] {
box-sizing: border-box;
padding: 0;
margin: 4px 0 0;
margin-top: 1px \9;
/* IE8-9 */
line-height: normal;
position: relative;
opacity: 1;
left: 0;
}
input[type="file"]:focus,input[type="radio"]:focus,input[type="checkbox"]:focus {
outline: thin dotted #333 !important;
outline-offset: -2px !important;
outline-color: #000 !important;
}
.radio,.checkbox {
display: block;
min-height: 20px;
margin-top: 10px;
margin-bottom: 10px;
padding-left: 20px;
vertical-align: middle;
}
.radio label,.checkbox label {
display: inline;
margin-bottom: 0;
font-weight: 400;
cursor: pointer;
}
.radio input[type="radio"],.radio-inline input[type="radio"],.checkbox input[type="checkbox"],.checkbox-inline input[type="checkbox"] {
float: left;
margin-left: -20px;
}
.radio + .radio,.checkbox + .checkbox {
margin-top: -5px;
}
.radio-inline,.checkbox-inline {
display: inline-block;
padding-left: 20px;
margin-bottom: 0;
vertical-align: middle;
font-weight: 400;
cursor: pointer;
}
.radio-inline + .radio-inline,.checkbox-inline + .checkbox-inline {
margin-top: 0;
margin-left: 10px;
}
input[type="radio"][disabled],fieldset[disabled] input[type="radio"],input[type="checkbox"][disabled],fieldset[disabled] input[type="checkbox"],.radio[disabled],fieldset[disabled] .radio,.radio-inline[disabled],fieldset[disabled] .radio-inline,.checkbox[disabled],fieldset[disabled] .checkbox,.checkbox-inline[disabled],fieldset[disabled] .checkbox-inline {
cursor: not-allowed;
}
/*
# Button Primary
*/
.button,.button-cta,.button-cta-floating,.button-previous,.button-download,.button-expand,.button-arrow-only {
color: #fff;
background-color: #f8512e;
border-color: #f96141;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.2),inset 0 1px 1px rgba(255,255,255,0.15);
box-shadow: 0 1px 2px rgba(0,0,0,0.2),inset 0 1px 1px rgba(255,255,255,0.15);
-webkit-transition: background-color .25s ease-out;
transition: background-color .25s ease-out;
font-family: "Proxima Nova-Semibold",Helvetica,Arial,sans-serif;
font-weight: 400;
font-size: 15px;
line-height: 1;
padding: 8px 12px;
text-shadow: 0 1px 1px rgba(0,0,0,0.2);
}
.pull-right {
float: right !important;
}
.hide {
display: none !important;
}
.hidden {
display: none !important;
visibility: hidden !important;
}
/* start .comp-careerFitTool */
.comp-careerFitTool {
background: #9b9998;
padding-bottom: 15px;
position: relative;
}
.comp-careerFitTool:before,.comp-careerFitTool:after {
content: " ";
/* 1 */
display: table;
/* 2 */
}
.comp-careerFitTool:after {
clear: both;
}
@media screen and (min-width: 470px) {
.comp-careerFitTool {
padding-bottom: 35px;
}
}
.career-tool-intro {
color: #fff;
font-size: 20px;
padding: 20px;
}
@media screen and (min-width: 960px) {
.career-tool-intro h3 {
font-size: 32px;
}
}
.career-tool-intro p {
margin: 0;
}
@media screen and (min-width: 470px) {
.career-tool-intro {
padding: 25px;
}
}
.career-tool-info {
background: #fff;
border: 1px solid #9b9998;
color: #5b5955;
padding: 20px;
}
.career-tool-info:before,.career-tool-info:after {
content: " ";
/* 1 */
display: table;
/* 2 */
}
.career-tool-info:after {
clear: both;
}
.career-tool-info input[type="radio"],.career-tool-info input[type="checkbox"] {
margin-right: 5px;
vertical-align: top;
}
.career-tool-info label {
font-family: "Proxima Nova-Semibold",Helvetica,Arial,sans-serif;
font-weight: 400;
font-size: 18px;
}
@media screen and (min-width: 730px) and (max-width: 959px) {
.career-tool-info .questions-intro {
font-size: 20px;
}
}
@media screen and (min-width: 960px) {
.career-tool-info .questions-intro {
font-size: 24px;
}
}
.career-tool-info .questions {
margin-bottom: 16px;
}
.career-tool-info .question {
font-family: "Proxima Nova-Semibold",Helvetica,Arial,sans-serif;
font-weight: 400;
}
@media screen and (min-width: 730px) and (max-width: 959px) {
.career-tool-info .question {
font-size: 20px;
}
}
@media screen and (min-width: 960px) {
.career-tool-info .question {
font-size: 28px;
}
}
.career-tool-info .question-field,.career-tool-info .question-changer,.career-tool-info .question-progress {
padding-left: 50px;
}
.career-tool-info .question-field {
position: relative;
}
.career-tool-info .question-number {
font-family: "Proxima Nova-Bold",Helvetica,Arial,sans-serif;
font-weight: 400;
height: 31px;
width: 31px;
background: transparent url(https://cdn-static.findly.com/wp-content/uploads/sites/936/2020/05/question-number.png) no-repeat 0 0;
color: #fff;
display: block;
left: 2px;
line-height: 33px;
position: absolute;
text-align: center;
top: 4px;
}
.career-tool-info .question-changer {
margin-bottom: 18px;
}
.career-tool-info .state,.career-tool-info .question-field {
display: none;
}
.career-tool-info .state-default {
display: block;
}
@media screen and (min-width: 1190px) {
.career-tool-info .state-default .inner-wrap,.career-tool-info .state-finished .inner-wrap {
font-size: 24px;
}
.career-tool-info .state-quiz {
font-size: 20px;
}
}
.career-tool-info .state .inner-wrap {
float: left;
}
@media screen and (min-width: 730px) {
.career-tool-info .state .inner-wrap {
width: 60%;
}
}
@media screen and (min-width: 1190px) {
.career-tool-info .state .inner-wrap {
padding-top: 35px;
padding-right: 25px;
}
}
@media screen and (min-width: 730px) {
.career-tool-info .state .inner-wrap-right {
float: right;
width: 40%;
}
}
@media screen and (max-width: 729px) {
.career-tool-info .state img.pull-right {
display: none;
}
}
@media screen and (min-width: 730px) {
.career-tool-info .state img.pull-right {
margin-bottom: -25px;
margin-right: -25px;
margin-top: -25px;
width: 40%;
}
}
.career-tool-info .quiz-startOver {
text-decoration: underline;
}
@media screen and (min-width: 730px) {
.career-tool-info .pie-chart,.career-tool-info .legend {
float: left;
padding: 0 1%;
width: 48%;
}
}
.career-tool-info .pie-chart img {
display: block;
height: auto;
max-width: 100%;
}
@media screen and (max-width: 729px) {
.career-tool-info .pie-chart {
display: none;
}
}
@media screen and (min-width: 730px) {
.career-tool-info .legend {
margin-top: 20px;
}
}
.career-tool-info .opportunity {
margin-bottom: 18px;
}
.career-tool-info .opportunity:before,.career-tool-info .opportunity:after {
content: " ";
/* 1 */
display: table;
/* 2 */
}
.career-tool-info .opportunity:after {
clear: both;
}
@media screen and (min-width: 470px) {
.career-tool-info {
padding: 25px;
}
}
@media screen and (min-width: 730px) {
.career-tool-info .score,.career-tool-info .position {
float: left;
}
.career-tool-info .score {
width: 40%;
}
.career-tool-info .position {
width: 60%;
}
.career-tool-info .key {
height: 20px;
width: 20px;
background: #fbc81b;
display: block;
float: left;
margin-right: 15px;
}
.career-tool-info .key2 {
background: #9b9998;
}
.career-tool-info .key3 {
background: #3f3f3f;
}
}
.progress-indicator {
height: 18px;
width: 18px;
display: inline-block;
*display: inline;
*zoom: 1;
background: transparent url(https://cdn-static.findly.com/wp-content/uploads/sites/936/2020/05/progress-indicator.png) no-repeat 0 0;
}
.progress-indicator.active {
background-image: url(https://cdn-static.findly.com/wp-content/uploads/sites/936/2020/05/progress-indicator-active.png);
}
/* /end .comp-careerFitTool */
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://careers.edwardjones.com/images/highcharts.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
</head>
<body>
<section class="comp-careerFitTool l-spacer" data-features="careerFitTool">
<div class="career-tool-intro">
<h2>Test highcharts after 3 questions</h2>
<p>Find the Right Opportunity for You.</p>
</div>
<div class="career-tool-info">
<form action="">
<div class="state state-default">
<div class="inner-wrap">
<h3>Unsure of what role may be right for you?</h3>
<p>Take a short quiz to see where your interests fit best at Edward Jones.</p>
<p><a class="button-cta quiz-start" href="javascript:;">Let's get started</a></p>
</div>
<img src="https://cdn-static.findly.com/wp-content/uploads/sites/936/2020/05/career-fit-tool.png" alt="Career fit tool" class="pull-right">
</div>
<div class="state state-quiz">
<div class="questions">
<fieldset id="questionDiv1" aria-live="assertive" class="question-field">
<legend>
<span aria-label="question number 1 of 8" class="question-number">1</span>
<p class="questions-intro">Please select the option below that best applies to you.</p>
<p class="question">The type of role that interests me more:</p>
</legend>
<div>
<p><label for="question100"> <input type="radio" id="question100" name="group1" class="answer" value="Financial Advisor">Entrepreneurial/Business Development</label></p>
<p><label for="question200"> <input type="radio" id="question200" name="group1" class="answer" value="Branch Office Administrator">Support someone building their business</label></p>
</div>
</fieldset>
<fieldset id="questionDiv2" aria-live="assertive" class="question-field">
<legend>
<img src="https://cdn-static.findly.com/wp-content/uploads/sites/936/2020/05/career-fit-tool.png" alt="career fit tool" class="pull-right">
<span aria-label="question number 2 of 8" class="question-number">2</span>
<p class="questions-intro">Please select the option below that best applies to you.</p>
<p class="question">How I would like to be compensated for my work:</p>
</legend>
<div>
<p><label for="question101"> <input type="radio" id="question101" name="group2" class="answer" value="Financial Advisor">Commissions</label></p>
<p><label for="question201"> <input type="radio" id="question201" name="group2" class="answer" value="Branch Office Administrator,Headquarters">Salary or hourly</label></p>
</div>
</fieldset>
<fieldset id="questionDiv3" aria-live="assertive" class="question-field">
<legend>
<span aria-label="question number 3 of 8" class="question-number">3</span>
<p class="questions-intro">Please select the option below that best applies to you.</p>
<p class="question">My preferred work style:</p>
</legend>
<div>
<p><label for="question102"> <input type="radio" id="question102" name="group3" class="answer" value="Financial Advisor,Branch Office Administrator">Work autonomously</label></p>
<p><label for="question202"> <input type="radio" id="question202" name="group3" class="answer" value="Headquarters">Work collaboratively on a team</label></p>
</div>
</fieldset>
</div>
<p aria-live="assertive" class="question-changer">
<a aria-label="go to previous question" class="button-previous previous-question" href="javascript:;">Previous</a>
<a aria-label="go to next question" class="button-cta next-question disabled" href="javascript:;">Next</a>
</p>
<p class="question-progress">
<span aria-live="assertive" class="progress-indicator"></span>
<span aria-live="assertive" class="progress-indicator"></span>
<span aria-live="assertive" class="progress-indicator"></span>
</p>
</div>
<div aria-live="assertive" class="state state-finished">
<div class="inner-wrap">
<h3>You're Finished</h3>
<p>Based on your responses, we recommend you explore career opportunities as a</p>
<p id="faOutcome">Financial Advisor</p>
<p id="boaOutcome">Branch Office Administrator</p>
<p id="hqOutcome">Headquarters Professional</p>
</div>
<div class="inner-wrap-right">
<div id="pieChartContainer" tabindex="0"></div>
</div>
<p id="faResultLink">Discover more about this opportunity here <a href="/explore-opportunities/new-financial-advisors/index.html" class="button-arrow-only" title="Discover more about this opportunity here"> </a></p>
<p id="boaResultLink">Discover more about this opportunity here <a href="/explore-opportunities/branch-support/index.html" class="button-arrow-only" title="Discover more about this opportunity here"> </a></p>
<p id="hqResultLink">Discover more about this opportunity here <a href="/explore-opportunities/hq/index.html" class="button-arrow-only" title="Discover more about this opportunity here"> </a></p>
<p><a class="quiz-startOver" href="javascript:;">Start Over</a></p>
</div>
</form>
</div>
</section>
</body>
</html>