Blog : HTML Adventures! – Marjorie Ober

Pour accéder à toutes les fonctionnalités de ce site, vous devez activer JavaScript. Voici les instructions pour activer JavaScript dans votre navigateur Web. main .no-js-msg { font-weight: bold; line-height: 1.75rem; margin: 1rem; } main .no-js-msg, main .no-js-msg a { font-size: 1.25rem; } main .no-js-msg a { color: blue !important; text-decoration: underline !important; background-color: transparent; } main .no-js-msg a:hover, main .no-js-msg a:active, main .no-js-msg a:focus { color: blue !important; text-decoration: underline !important; background-color: transparent; } @media (min-width: 767px) and (min-height: 767px) { body main .no-js-msg, main .no-js-msg a { font-size: 1.5rem; } } body.accessible-mode main .no-js-msg, body.accessible-mode main .no-js-msg a { color: #F5F5F5 !important; } body.accessible-mode main .no-js-msg a:hover, body.accessible-mode .no-js-msg a:active, body.accessible-mode .no-js-msg a:focus { color: #F5F5F5 !important; }

HTML Adventures!

Web
Accessibilité
Cybercabanes

28 juin 2020

Page d'accueil de la cybercabane HTML Adventures! — Un nouveau type de cybercabane, qui pour l'instant va dans le sens du jeu de rôle au format web. Grâce à un lecteur d'écran (guide sur les lecteurs d'écran de la DINUM — Nouvelle fenêtre), on navigue au clavier dans un site invisible et on se laisse porter par une expérience audio. Premier essai où je prends pleinement le parti de la description, en proposant une image dans laquelle se promener, pour donner un cadre. On pourrait imaginer une succession de pages à explorer, et dans lesquelles l'utilisateurice pourrait effectuer des actions, faire des choix, etc.

Image décrite lors de l'exploration sonore — Il y a encore tout à inventer, mais voici un premier prototype en ligne, un tout début de piste, qu'il convient de consulter avec un lecteur d'écran : cybercabane HTML Adventures! — Nouvelle fenêtre Une démo vidéo sur Nextcloud — Nouvelle fenêtre existe également, pour celleux qui n'auraient pas de lecteur d'écran type Orca. Affaire à suivre !

EDIT : un test plus avancé retraçant l'existence de la radioastronome australienne Ruby Payne-Scott, coconçu avec l'autrice luvan — Nouvelle fenêtre, existe désormais et est disponible sur mon serveur à l'adresse https://testing.marjorieober.com/orca — Nouvelle fenêtre, bonne visite ! J'ai également donné accès au répertoire du projet sur Gitlab — Nouvelle fenêtre.

/* all */ header.banner #pages.hide, .projects main #list > ul > li .content.hide { display: flex; } body.about .event-container.hidden, header.banner #pages #blog-pages-list-container ul#blog-select-page.hide, body.posts main #post-pages-menu #post-pages-list.hidden, body.posts main #post-pages-menu .articles.hidden, body.posts main #list .content.hide { display: block; } body.contact main .credits { display: none !important; } body.projects main #list > ul > li .project { flex-direction: column; } body.posts:not(.accessible-mode) main #post-pages-menu #post-pages-list li:not(:first-of-type) .articles { top: unset; left: unset; width: 100%; } #videoDesc.hide { display: block; } .media-button.extra-bottom-margin { margin-bottom: unset !important; } /* non a11y mode */ body:not(.accessible-mode).home footer { position: relative; } @media (min-width: 677px) and (max-width: 766px) { body:not(.accessible-mode).about main > div section.right > div:last-of-type:not(.english) { padding-bottom: 100px !important; } } body.resources main section.reads, body.resources.accessible-mode main section.reads { padding-top: unset; } /* small devices */ @media (max-width: 766px), (max-height: 766px) { body:not(.accessible-mode) header.banner #pages.select-page { position: absolute; } body:not(.accessible-mode).projects main #list > ul > li .project time { margin: 10px 0 0 1rem; text-align: left; z-index: 999; padding: 0; } body:not(.accessible-mode).projects main #list > ul > li .project > div { border-left: unset; } body:not(.accessible-mode).about footer, body:not(.accessible-mode).resources footer, body:not(.accessible-mode).texts footer, body:not(.accessible-mode).text footer, body:not(.accessible-mode).sitemap footer, body:not(.accessible-mode).legal-notices footer, body:not(.accessible-mode).accessibility footer { position: absolute; bottom: 50px; } body:not(.accessible-mode).about footer nav, body:not(.accessible-mode).resources footer nav, body:not(.accessible-mode).text footer nav, body:not(.accessible-mode).texts footer nav, body:not(.accessible-mode).sitemap footer nav { bottom: -50px; } body:not(.accessible-mode).about main > div section.right > div:last-of-type:not(.english), body:not(.accessible-mode).about main > div section.right > div:last-of-type.english, body:not(.accessible-mode).resources main section.web { padding-bottom: 375px; } body:not(.accessible-mode).contact footer.flex-line > div { display: block; visibility: hidden; } body:not(.accessible-mode).contact footer.flex-line > div p { visibility: visible; width: 100%; height: 100%; position: absolute; bottom: 0; margin: 0; padding: 15px; background-color: #F5F5F5; text-align: center; } body:not(.accessible-mode).contact footer.flex-line > div p, body:not(.accessible-mode).contact footer.flex-line > div p a { color: #3A3B3C; } body:not(.home):not(.about):not(.projects):not(.contact):not(.resources):not(.posts):not(.texts):not(.text):not(.cv):not(.contact):not(.sitemap):not(.legal-notices):not(.accessibility):not(.accessible-mode) main > div { margin: 25px 0 0 1rem; } body.posts main #post-pages-menu #post-pages-list > li:not(.hidden) > button { border-bottom: unset; } body.resources main section.reads > div:first-of-type h2, body.resources.accessible-mode main section.reads > div:first-of-type h2 { margin-top: 25px; } } /* about last div bottom padding considering fr/en + resources */ @media (min-width: 185px) and (max-width: 766px) { body:not(.accessible-mode).about main > div section.right > div:last-of-type.english { padding-bottom: 350px; } } @media (min-width: 201px) and (max-width: 766px) { body:not(.accessible-mode).about main > div section.right > div:last-of-type.english { padding-bottom: 300px; } } @media (min-width: 206px) and (max-width: 766px) { body:not(.accessible-mode).about main > div section.right > div:last-of-type:not(.english), body:not(.accessible-mode).resources main section.web, body.text:not(.accessible-mode) main article.two { padding-bottom: 350px; } } @media (min-width: 245px) and (max-width: 766px) { body:not(.accessible-mode).about main > div section.right > div:last-of-type.english { padding-bottom: 275px; } body:not(.accessible-mode).about main > div section.right > div:last-of-type:not(.english), body:not(.accessible-mode).resources main section.web, body.text:not(.accessible-mode) main article.two { padding-bottom: 300px; } } @media (min-width: 351px) and (max-width: 766px) { body:not(.accessible-mode).about main > div section.right > div:last-of-type:not(.english), body:not(.accessible-mode).resources main section.web, body.text:not(.accessible-mode) main article.two { padding-bottom: 275px; } } @media (min-width: 355px) and (max-width: 766px) { body:not(.accessible-mode).about main > div section.right > div:last-of-type.english { padding-bottom: 250px; } } @media (min-width: 356px) and (max-width: 766px) { body:not(.accessible-mode).about main > div section.right > div:last-of-type.english { padding-bottom: 200px; } body:not(.accessible-mode).about main > div section.right > div:last-of-type:not(.english), body:not(.accessible-mode).resources main section.web, body.text:not(.accessible-mode) main article.two { padding-bottom: 225px; } } @media (min-width: 372px) and (max-width: 766px) { body:not(.accessible-mode).about main > div section.right > div:last-of-type:not(.english), body:not(.accessible-mode).resources main section.web, body.text:not(.accessible-mode) main article.two { padding-bottom: 200px; } } @media (min-width: 448px) and (max-width: 997px) { body:not(.accessible-mode).about main > div section.right > div:last-of-type.english { padding-bottom: 150px; } } @media (min-width: 677px) and (max-width: 997px) { body:not(.accessible-mode).about main > div section.right > div:last-of-type:not(.english), body:not(.accessible-mode).resources main section.web, body.text:not(.accessible-mode) main article.two { padding-bottom: 150px; } } @media (min-width: 998px) and (max-height: 766px) { body:not(.accessible-mode).about main > div section.right > div:last-of-type:not(.english), body:not(.accessible-mode).about main > div section.right > div:last-of-type.english { padding-bottom: 50px; } body:not(.accessible-mode).resources main section.web, body.text:not(.accessible-mode) main article.two { padding-bottom: 150px; } } @media (min-width: 767px) and (min-height: 767px) { body:not(.accessible-mode).about main > div section.right > div:last-of-type:not(.english), body:not(.accessible-mode).about main > div section.right > div:last-of-type.english { padding-bottom: 100px; } @media (min-width: 767px) and (min-height: 767px) and (max-width: 1279px), (min-width: 767px) and (min-height: 767px) and (max-height: 899px) { body:not(.accessible-mode).resources main section.web { padding-bottom: 200px; } } } /* desktop */ @media (min-width: 767px) and (min-height: 767px) { body:not(.accessible-mode) header.banner #pages, body:not(.accessible-mode) header.banner #pages.select-page { position: absolute; width: 100%; height: 50px; flex-direction: row; justify-content: space-between; align-items: center; margin-left: unset; padding: 0 50px; } body:not(.accessible-mode) header.banner #pages.select-page { border-top: unset; } body:not(.accessible-mode) header.banner #pages.select-page > li, body:not(.accessible-mode) header.banner #pages.select-page > li:not(:last-of-type) { border: none; width: unset; } body:not(.accessible-mode) header.banner #pages.select-page > li a, body:not(.accessible-mode) header.banner #pages.select-page > li button { font-weight: normal; } body:not(.accessible-mode) header.banner #pages.select-page > li a.selected, body:not(.accessible-mode) header.banner #pages.select-page > li a:hover, body:not(.accessible-mode) header.banner #pages.select-page > li a:active, body:not(.accessible-mode) header.banner #pages.select-page > li a:focus, body:not(.accessible-mode) header.banner #pages.select-page > li button.selected, body:not(.accessible-mode) header.banner #pages.select-page > li button:hover, body:not(.accessible-mode) header.banner #pages.select-page > li button:active, body:not(.accessible-mode) header.banner #pages.select-page > li button:focus { font-weight: bold; background-color: unset; color: #F5F5F5; } body:not(.accessible-mode).projects:not(.accessible-mode) main { margin: 50px 50px 0 50px; } body:not(.accessible-mode).projects main #list { margin-bottom: 120px; } body:not(.accessible-mode).projects main #list > ul > li .project { flex-direction: row; } body:not(.cv):not(.accessible-mode) footer { bottom: 50px !important; } body:not(.home):not(.projects):not(.posts):not(.texts):not(.cv):not(.contact):not(.accessible-mode).about main, body.texts:not(.accessible-mode) main { height: calc(100vh - 200px); } body.contact:not(.home):not(.projects):not(.cv):not(.accessible-mode) main, body:not(.home):not(.projects):not(.posts):not(.texts):not(.cv):not(.contact):not(.accessible-mode).about main, body:not(.home):not(.projects):not(.posts):not(.texts):not(.cv):not(.contact):not(.accessible-mode).sitemap main, body:not(.home):not(.projects):not(.posts):not(.texts):not(.cv):not(.contact):not(.accessible-mode).legal-notices main, body:not(.home):not(.projects):not(.posts):not(.texts):not(.cv):not(.contact):not(.accessible-mode).accessibility main, body.posts:not(.accessible-mode) main, body:not(.home):not(.projects):not(.posts):not(.texts):not(.cv):not(.contact):not(.accessible-mode).resources main, body.texts:not(.accessible-mode) main, body:not(.home):not(.projects):not(.posts):not(.texts):not(.cv):not(.contact):not(.accessible-mode).text main { margin-top: 50px } body:not(.home):not(.projects):not(.posts):not(.texts):not(.cv):not(.contact):not(.accessible-mode).sitemap main, body:not(.home):not(.projects):not(.posts):not(.texts):not(.cv):not(.contact):not(.accessible-mode).legal-notices main, body:not(.home):not(.projects):not(.posts):not(.texts):not(.cv):not(.contact):not(.accessible-mode).accessibility main { height: calc(100vh - 170px); } body:not(.home):not(.about):not(.projects):not(.contact):not(.resources):not(.posts):not(.texts):not(.text):not(.cv):not(.contact):not(.sitemap):not(.legal-notices):not(.accessibility):not(.accessible-mode) main > div { margin: 100px 0 0 50px; } body:not(.accessible-mode).posts main #post-pages-menu #post-pages-list > li:not(.hidden) > button { border-right: unset; } body:not(.accessible-mode).posts main #post-pages-menu .post-page:not(:last-of-type) .articles.hidden { border-bottom: unset; } body:not(.accessible-mode).posts main #post-pages-menu #post-pages-list > li:not(.hidden) > button { border-top: 3px solid #C300C3; } body:not(.accessible-mode) header.banner #pages.select-page > li:first-of-type a, body:not(.accessible-mode) header.banner #pages.select-page > li:last-of-type a { white-space: nowrap; } body:not(.home):not(.projects):not(.posts):not(.texts):not(.cv):not(.contact):not(.accessible-mode).text main { height: calc(100vh - 200px); } body.text:not(.accessible-mode) .source-link { margin-bottom: 50px; } body.resources main section.reads > div:first-of-type h2, body.resources.accessible-mode main section.reads > div:first-of-type h2 { margin-top: 50px; } } @media (min-width: 998px) { body:not(.home):not(.projects):not(.posts):not(.texts):not(.cv):not(.contact):not(.accessible-mode).about main { height: calc(100vh - 150px); } } @media (min-width: 767px) and (min-height: 767px) and (max-width: 1279px), (min-width: 767px) and (min-height: 767px) and (max-height: 899px) { body.text:not(.accessible-mode) main article.two > div { padding-bottom: unset; } } @media (min-width: 1280px) and (min-height: 900px) { body:not(.accessible-mode).resources main section.web, body.text:not(.accessible-mode) main article.two { padding-bottom: 50px; } body.text:not(.accessible-mode) .source-link { margin-bottom: unset; } } /* a11y mode */ body.accessible-mode header.banner #accessible-mode-btn { width: unset; } body:not(.home).accessible-mode header.banner #top-accessible-banner li:not(:last-of-type) { margin-bottom: 1rem; } body.accessible-mode header.banner #menu { border-bottom: 3px solid #F5F5F5; } body.projects.accessible-mode main #list > ul > li .project-type { margin-left: 0; } body.projects.accessible-mode main #list > ul > li .project, body.projects.accessible-mode main #list > ul > li button { color: #3A3B3C; background-color: #F5F5F5; } body.projects.accessible-mode main #list > ul > li:not(:first-of-type):not(:last-of-type) { border-top: 3px solid #3A3B3C; } body.projects.accessible-mode main #list > ul > li .project time { margin: 1rem 0 0 1rem; } body.projects.accessible-mode main #list > ul > li .project:hover time, body.projects.accessible-mode main #list > ul > li .project:active time, body.projects.accessible-mode main #list > ul > li .project:focus time { color: #3A3B3C; } body.projects.accessible-mode main #list > ul > li .project:hover .project-type ul .tag, body.projects.accessible-mode main #list > ul > li .project:active .project-type ul .tag, body.projects.accessible-mode main #list > ul > li .project:focus .project-type ul .tag { color: #F5F5F5; background-color: #3A3B3C; } body.projects.accessible-mode main #list > ul > li:not(:first-of-type) .project, body.projects.accessible-mode main #list > ul > li:not(:first-of-type) .project:hover, .projects.accessible-mode main #list > ul > li:not(:first-of-type) .project:active, .projects.accessible-mode main #list > ul > li:not(:first-of-type) .project:focus { border-top: unset; } body.about.accessible-mode main > div section.left > div:first-of-type > ul > li:last-of-type li:first-of-type { border-color: #F5F5F5; } body.contact.accessible-mode footer { display: block; } body.contact.accessible-mode footer.flex-line > div { margin-left: 1rem; } body.posts.accessible-mode main #post-pages-menu input, body.posts.accessible-mode main #post-pages-menu #post-pages-list > li:not(.hidden) > button { border-bottom: unset; }