Je travaille sur une application unique page (SPA) où nous simuler une application de plusieurs pages avec HTML 5 history.pushState code> . Il semble bien visuellement, mais il ne se comporte pas correctement dans iOS VoiceOver. (Je suppose que cela ne fonctionnerait pas dans un lecteur d'écran, mais VoiceOver est ce que je suis en train d'abord.)
Voici un exemple du comportement que je suis en train de réaliser. Voici deux pages web ordinaires: p>
1.html code> p> console.log("load");
attachHandler();
function attachHandler() {
document.querySelector('a').onclick = function(event) {
event.preventDefault();
history.pushState(null, null, this.href);
drawPage();
}
}
function drawPage() {
var page, otherPage;
// in real life, we'd do an AJAX call here or something
if (/spa1.html$/.test(window.location.pathname)) {
page = 1;
otherPage = 2;
} else {
page = 2;
otherPage = 1;
}
document.body.innerHTML = "This is page " + page +
".\n<a href='spa"+otherPage+".html'>Click here for page " +
otherPage + ".</a>";
attachHandler();
}
window.onpopstate = function() {
drawPage();
};
3 Réponses :
Je ne possède pas d'iPhone, mais une solution est fournie dans un autre Stackoverflow thread . Enroulez le contenu dans un élément avec un Tabindex de -1 et définissez par programme la mise au point sur cet élément.
function drawPage() {
var page, otherPage;
// in real life, we'd do an AJAX call here or something
if (/spa1.html$/.test(window.location.pathname)) {
page = 1;
otherPage = 2;
} else {
page = 2;
otherPage = 1;
}
document.body.innerHTML = '<div tabindex="-1" id="page' + page + '">This is page ' + page +
'.\n<a href='spa'+otherPage+'.html'>Click here for page ' +
otherPage + '.</a></div>';
document.getElementById('page' + page).focus();
attachHandler();
}
L'exemple de code ici dispose d'erreurs de syntaxe (numéros de citation de la section
Posté ma propre réponse, mais si vous mettez à jour votre réponse dans le délai de grâce, je vous accorderai la prime. innerhtml ), mais même une fois ces erreurs fixées, cela ne fonctionne pas. Cependant, cela m'a fait remarquer dans une direction que a fait trouver le correctif, donc si vous modifiez votre solution, je suis prêt à vous accorder la prime. Le correctif réel n'était pas d'envelopper la page entière dans un mais plutôt de créer un
La réponse de Jorgen , qui est basée sur Un autre thread Stackoverflow m'a sur la bonne voie.
Le correctif réel n'était pas d'envelopper la page entière dans un < code>
autour de la première partie ("Ceci est la page n") et concentrez-vous cela. < / p> xxx note dans cet exemple, nous avons également la mise au point dans un délai; Sinon, les navigateurs de lecteur non-écran dessineront un rectangle de mise au point bleu visible autour de la portée, ce qui n'est pas ce que nous voulons. Floue L'accent n'affecte pas le foyer du lecteur iOS VO.
Voici une nouvelle amélioration, en réponse à La réponse de Dan Fabulich .
La question portait sur la mise à jour d'une page avec pushstate () code>, donc je vais commencer par une structure HTML sémantique contenant une zone de contenu principale à Mise à jour. P> function updatePage(pageNumber, pageTitle, pagePath) {
var mainContent;
if (pageNumber == 1) {
mainContent = '<p>Lorem ipsum</p>';
} else if (pageNumber == 2) {
mainContent = '<p>Dolor sit amet</p>';
} else {
return;
}
document.getElementById('maincontent').innerHTML = mainContent;
// TODO: Update the address bar with pushState()
// TODO: Update the nav links, so only one link has aria-current="true"
// Keep the browser title bar in sync with the content.
document.title = pageTitle + ' - My Example Site';
// Set focus on the visible heading, so screen readers will announce it.
var mainTitleElement = document.getElementById('maintitle');
mainTitleElement.innerHTML = pageTitle;
mainTitleElement.focus(); // TODO: Add a 0ms timer, to ensure the DOM is ready.
}
flou () code>. Les lecteurs d'écran peuvent souvent récupérer, mais ils ne peuvent pas relancer la ligne actuelle et c'est un wcag no-no. Li>
span {contour: aucun} code>, mais c'est risqué. Je ne l'utiliserais que sur du texte statique avec tabindex = -1 code> et ce n'est pas idéal car il est désorientant pour les utilisateurs de clavier d'observation. LI>