{"id":2347,"date":"2026-05-28T13:40:04","date_gmt":"2026-05-28T11:40:04","guid":{"rendered":"https:\/\/kisio.com-preprod.fr\/?post_type=case-study&#038;p=2347"},"modified":"2026-06-15T11:56:19","modified_gmt":"2026-06-15T09:56:19","slug":"accessibilite-des-interfaces-de-lautomate-en-gare-transilien","status":"publish","type":"case-study","link":"https:\/\/kisio.com\/en\/cas-clients\/accessibilite-des-interfaces-de-lautomate-en-gare-transilien\/","title":{"rendered":"Accessibilit\u00e9 des interfaces de l\u2019automate en gare"},"content":{"rendered":"\n<section id=\"k-hero-editorial-block_fc2132d151bb8c23d9dea65f1c5f66be\"\n         data-header-theme=\"light\"\n         class=\"kisio-container k-hero-editorial font-body text-bleu-nuit \">\n\n    <div class=\"kisio-row\">\n        <div class=\"kisio-grid\">\n                            <!-- \u2500\u2500 Variante SANS image \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n                <div class=\"mx-auto w-full col-span-12 md:col-span-8 md:col-start-3 mt-[100px]\">\n                        <p class=\"mb-6 md:mb-8 flex items-center gap-2 surtitre\">\n        <svg class=\"h-2 w-5\" viewBox=\"0 0 24 10\" aria-hidden=\"true\">\n            <circle cx=\"5\"  cy=\"5\" r=\"4\" fill=\"currentColor\"\/>\n            <line x1=\"9\" y1=\"5\" x2=\"14\" y2=\"5\" stroke=\"currentColor\" stroke-width=\"2\"\/>\n            <circle cx=\"18\" cy=\"5\" r=\"4\" fill=\"currentColor\"\/>\n        <\/svg>\n        CAS CLIENT    <\/p>\n\n    <h1 class=\"font-heading text-headline-s md:text-headline-m max-w-[20ch]\">\n        Interface d\u2019achat de titres de transport accessible aux personnes en situation de handicap    <\/h1>\n\n    <p class=\"mt-6 max-w-[60ch] text-headline-xs md:text-headline-s\">\n        Conception des interfaces d&#8217;un automate en gare, pour une exp\u00e9rience d\u2019achat de titres de transport accessible au plus grand nombre de voyageurs.    <\/p>\n\n    <ul class=\"mt-8 md:mt-10 flex flex-wrap items-center gap-x-6 gap-y-2 text-label-s\">\n                            <li class=\"before:content-['\u00b7'] before:mr-6 before:opacity-60\">1er juin 2026<\/li>\n                    <\/ul>\n                <\/div>\n                    <\/div>\n\n    <\/div>\n\n\n<\/section>\n\n\n\n<section id=\"k-edito-image-credit-block_cff850d2d9a619a067f9e06457bbb473\" class=\"kisio-container k-edito-image-credit !py-6 md:!py-10 font-body text-bleu-nuit\">\n            <figure class=\"!my-0 !mx-auto w-full max-w-[1180px]\">\n            <div class=\"w-full overflow-hidden rounded-big\">\n                <img decoding=\"async\" src=\"https:\/\/kisio.com\/app\/uploads\/2026\/05\/Cas-UX.webp\" alt=\"\" class=\"w-full h-auto object-cover\" loading=\"lazy\" width=\"1600\" height=\"1067\"\/>            <\/div>\n                            <figcaption class=\"mt-3 text-center text-body-s2 opacity-70\">\n                    Accompagnement d&#039;un transporteur en Ile-de-France pour la conception des interfaces d&#039;un automate de distribution.                <\/figcaption>\n                    <\/figure>\n    <\/section>\n\n\n\n<!-- data-header-theme=\"light\" : force le header en mode `is-on-light` quand\n     ce bloc est derri\u00e8re \u2192 logo radiant (fonc\u00e9) au lieu de blanc. -->\n<section id=\"k-edito-chapeau-block_f0cd0aad97f4635f56ee105bcdc08ee4\"\n         data-header-theme=\"light\"\n         class=\"kisio-container k-edito-chapeau font-body\">\n        <div class=\"kisio-row\">\n        <div class=\"kisio-grid\">\n            <!-- Specs Figma : Body-M Montserrat 18\/23.76 weight 500 color #4A5565,\n                 sur 6 cols centr\u00e9s (col-start-4 col-span-6). Mobile : pleine largeur. -->\n            <div class=\"wysiwyg text-body-m font-medium text-[#4A5565] col-span-12 md:col-span-6 md:col-start-4\">\n                <p><strong>Dans le cadre du Programme de Modernisation de la Billettique francilienne et conform\u00e9ment aux exigences europ\u00e9ennes, Kisio a assist\u00e9 un op\u00e9rateur de transport dans la conception des parcours d&#8217;achat en mode adapt\u00e9 d&#8217;un nouvel automate en gare, afin de garantir l\u2019accessibilit\u00e9 et l\u2019autonomie des personnes en situation de handicap. <\/strong><\/p>\n<p>&nbsp;<\/p>\n<p><span style=\"font-weight: 400\">Pendant 3 ans, Kisio a men\u00e9 une d\u00e9marche it\u00e9rative m\u00ealant analyse de l\u2019existant et des besoins usagers, conception de parcours d\u2019achat accessibles, prototypage, tests utilisateurs et validation des parcours en conditions r\u00e9elles.<\/span><\/p>\n            <\/div>\n        <\/div>\n    <\/div>\n\n    <\/section>\n\n\n\n<section id=\"k-edito-encadre-block_c48fb2286a5d78f583ea8f3e35569edd\" class=\"kisio-container k-edito-encadre has-bg font-body\">\n    <div class=\"mx-auto w-full max-w-[1140px]\">\n        <div class=\"bg-bleu-nuit text-blanc rounded-big p-8 md:p-14\">\n                            <h2 class=\"font-heading text-headline-s md:text-headline-m mb-6 md:mb-8 md:max-w-[66.67%]\">\n                    ENJEUX &amp; CHIFFRES CL\u00c9S                 <\/h2>\n                                        <div class=\"wysiwyg text-white text-body-m max-w-[80ch]\">\n                    <ul>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">\u00catre utilisable par les personnes ayant des limitations visuelles, auditives, motrices et cognitives<\/span><\/li>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">Garantir une exp\u00e9rience d\u2019achat autonome et accessible aux voyageurs en situation de handicap<\/span><\/li>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">Simplifier l\u2019exp\u00e9rience d\u2019achat malgr\u00e9 la complexit\u00e9 des parcours et des contraintes m\u00e9tiers<\/span><\/li>\n<\/ul>\n                <\/div>\n                    <\/div>\n    <\/div>\n<\/section>\n\n\n\n<section id=\"k-solutions-block_5257695b82dfd908f7291b0c653f0673\"\n         class=\"kisio-container k-solutions font-body bg-white text-bleu-nuit\">\n\n    \n            <div class=\"kisio-row\" >\n                            <div class=\"kisio-grid items-start solution-item\">\n\n                    <!-- Item spanning 10 cols starting at col 3 -->\n                    <div class=\"col-span-12 md:col-span-10 md:col-start-3 py-6 md:py-14 border-b border-gray-300\">\n                        <div class=\"grid grid-cols-10 gap-x-4 items-start\">\n\n                            <!-- Left: icon + title (5\/10 cols)\n                                 Mobile : empil\u00e9 (picto au-dessus, titre en dessous) avec gap r\u00e9duit.\n                                 Desktop : align\u00e9 c\u00f4te-\u00e0-c\u00f4te comme avant. -->\n                            <div class=\"col-span-10 md:col-span-5 flex flex-col items-start gap-3 md:flex-row md:items-center md:gap-5 mb-4 md:mb-0\">\n                                \n                                                                    <h3 class=\"font-heading text-headline-s md:text-headline-m\">\n                                        1 fran\u00e7ais sur 6                                    <\/h3>\n                                                            <\/div>\n\n                            <!-- Right: description + link (5\/10 cols) -->\n                            <div class=\"col-span-10 md:col-span-5 md:col-start-6\">\n                                                    <!-- Specs Figma : Body-S Montserrat 16\/21 weight 500 color #4A5565.\n                                 En mobile uniquement (md+ garde Body-M par d\u00e9faut). -->\n                            <p class=\"text-body-s text-[#4A5565] md:text-body-m md:text-bleu-nuit mb-6\">\n                                est concern\u00e9 par une forme de handicap.                            <\/p>\n                        \n                                                    <\/div>\n\n                        <\/div>\n                    <\/div>\n\n                <\/div>\n                            <div class=\"kisio-grid items-start solution-item\">\n\n                    <!-- Item spanning 10 cols starting at col 3 -->\n                    <div class=\"col-span-12 md:col-span-10 md:col-start-3 py-6 md:py-14 border-b border-gray-300\">\n                        <div class=\"grid grid-cols-10 gap-x-4 items-start\">\n\n                            <!-- Left: icon + title (5\/10 cols)\n                                 Mobile : empil\u00e9 (picto au-dessus, titre en dessous) avec gap r\u00e9duit.\n                                 Desktop : align\u00e9 c\u00f4te-\u00e0-c\u00f4te comme avant. -->\n                            <div class=\"col-span-10 md:col-span-5 flex flex-col items-start gap-3 md:flex-row md:items-center md:gap-5 mb-4 md:mb-0\">\n                                \n                                                                    <h3 class=\"font-heading text-headline-s md:text-headline-m\">\n                                        35 testeurs                                    <\/h3>\n                                                            <\/div>\n\n                            <!-- Right: description + link (5\/10 cols) -->\n                            <div class=\"col-span-10 md:col-span-5 md:col-start-6\">\n                                                    <!-- Specs Figma : Body-S Montserrat 16\/21 weight 500 color #4A5565.\n                                 En mobile uniquement (md+ garde Body-M par d\u00e9faut). -->\n                            <p class=\"text-body-s text-[#4A5565] md:text-body-m md:text-bleu-nuit mb-6\">\n                                en situation de handicap.                            <\/p>\n                        \n                                                    <\/div>\n\n                        <\/div>\n                    <\/div>\n\n                <\/div>\n                            <div class=\"kisio-grid items-start solution-item\">\n\n                    <!-- Item spanning 10 cols starting at col 3 -->\n                    <div class=\"col-span-12 md:col-span-10 md:col-start-3 py-6 md:py-14 border-b border-gray-300\">\n                        <div class=\"grid grid-cols-10 gap-x-4 items-start\">\n\n                            <!-- Left: icon + title (5\/10 cols)\n                                 Mobile : empil\u00e9 (picto au-dessus, titre en dessous) avec gap r\u00e9duit.\n                                 Desktop : align\u00e9 c\u00f4te-\u00e0-c\u00f4te comme avant. -->\n                            <div class=\"col-span-10 md:col-span-5 flex flex-col items-start gap-3 md:flex-row md:items-center md:gap-5 mb-4 md:mb-0\">\n                                \n                                                                    <h3 class=\"font-heading text-headline-s md:text-headline-m\">\n                                        2 modes                                    <\/h3>\n                                                            <\/div>\n\n                            <!-- Right: description + link (5\/10 cols) -->\n                            <div class=\"col-span-10 md:col-span-5 md:col-start-6\">\n                                                    <!-- Specs Figma : Body-S Montserrat 16\/21 weight 500 color #4A5565.\n                                 En mobile uniquement (md+ garde Body-M par d\u00e9faut). -->\n                            <p class=\"text-body-s text-[#4A5565] md:text-body-m md:text-bleu-nuit mb-6\">\n                                d&#8217;interaction cr\u00e9\u00e9s dont le swipe adapt\u00e9 aux non-voyants.                            <\/p>\n                        \n                                                    <\/div>\n\n                        <\/div>\n                    <\/div>\n\n                <\/div>\n                    <\/div>\n    \n<\/section>\n\n\n\n<section id=\"k-edito-text-image-block_2b1768674b4068a2486abef2f1a41a0d\" class=\"kisio-container k-edito-text-image font-body bg-white text-bleu-nuit\">\n    <div class=\"kisio-row\">\n        <div class=\"kisio-grid\">\n\n            \n            <!-- Image column -->\n                            <div class=\"col-span-12 md:col-span-4 mb-4 lg:mb-0 md:col-start-3 md:order-1\">\n                    <div class=\"w-full overflow-hidden rounded-s aspect-square\">\n                        <img decoding=\"async\" src=\"https:\/\/kisio.com\/app\/uploads\/2026\/05\/SOLUTION.png\" alt=\"\" class=\"w-full h-full object-cover\" loading=\"lazy\" width=\"800\" height=\"800\"\/>                    <\/div>\n                <\/div>\n            \n            <!-- Text column\n                 - Avec image : col-span-4 + paddings inline (configuration 2 colonnes)\n                 - Sans image : col-span-8 col-start-3 (texte centr\u00e9, pleine largeur de lecture) -->\n                        <div class=\"col-span-12 md:col-span-4 md:col-start-7 md:order-2 md:pl-6\">\n                                    <h2 class=\"font-heading text-headline-s md:text-headline-m mb-6 md:mb-8 max-w-[20ch]\">\n                        SOLUTION MOBILIS\u00c9ES                    <\/h2>\n                \n                                    <div class=\"wysiwyg text-body-s max-w-[60ch]\">\n                        <ul>\n<li style=\"font-weight: 400\"><b>Recherche utilisateurs<\/b><span style=\"font-weight: 400\">\u00a0<\/span><span style=\"font-weight: 400\"><br \/>\n<\/span><span style=\"font-weight: 400\">Collecte des contraintes, des modes d\u2019appropriation et des bonnes pratiques propres \u00e0 chaque handicap. <\/span><span style=\"font-weight: 400\">\u00a0<\/span><\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<ul>\n<li style=\"font-weight: 400\"><b>Product \/ UX \/ UI Design &amp; innovation<\/b><b><br \/>\n<\/b><span style=\"font-weight: 400\">Cocr\u00e9ation d\u2019une exp\u00e9rience d\u2019achat accessible, notamment d\u2019un mode d\u2019interaction innovant pour les non-voyants.<\/span><span style=\"font-weight: 400\"><br \/>\n<\/span><b><\/b><\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<ul>\n<li style=\"font-weight: 400\"><b>Conduite d\u2019exp\u00e9rimentations<\/b> <b>&amp; \u00e9valuation<br \/>\n<\/b>Conception de protocoles de test et d\u2019\u00e9valuation adapt\u00e9s aux sp\u00e9cificit\u00e9s des profils d\u2019usagers.<\/li>\n<\/ul>\n                    <\/div>\n                            <\/div>\n\n        <\/div>\n    <\/div>\n<\/section>\n\n\n\n<section id=\"k-edito-text-image-block_8ce28e0824cbd5d1dba0e1240e5f8d61\" class=\"kisio-container k-edito-text-image font-body bg-white text-bleu-nuit\">\n    <div class=\"kisio-row\">\n        <div class=\"kisio-grid\">\n\n            \n            <!-- Image column -->\n                            <div class=\"col-span-12 md:col-span-4 mb-4 lg:mb-0 md:col-start-7 md:order-2\">\n                    <div class=\"w-full overflow-hidden rounded-s aspect-square\">\n                        <img decoding=\"async\" src=\"https:\/\/kisio.com\/app\/uploads\/2026\/05\/LIVRABLES.png\" alt=\"\" class=\"w-full h-full object-cover\" loading=\"lazy\" width=\"800\" height=\"800\"\/>                    <\/div>\n                <\/div>\n            \n            <!-- Text column\n                 - Avec image : col-span-4 + paddings inline (configuration 2 colonnes)\n                 - Sans image : col-span-8 col-start-3 (texte centr\u00e9, pleine largeur de lecture) -->\n                        <div class=\"col-span-12 md:col-span-4 md:col-start-3 md:order-1 pr-6\">\n                                    <h2 class=\"font-heading text-headline-s md:text-headline-m mb-6 md:mb-8 max-w-[20ch]\">\n                        R\u00c9ALISATIONS                    <\/h2>\n                \n                                    <div class=\"wysiwyg text-body-s max-w-[60ch]\">\n                        <ul>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">Une interface adapt\u00e9e pour l\u2019ensemble des parcours de vente de l\u2019automate.<\/span><\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<ul>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">Un rapport d\u2019analyse consolidant les retours des tests r\u00e9alis\u00e9s.<\/span><\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<ul>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">Un document de r\u00e9f\u00e9rence d\u00e9taillant les parcours et tous les \u00e9crans.<\/span><\/li>\n<\/ul>\n                    <\/div>\n                            <\/div>\n\n        <\/div>\n    <\/div>\n<\/section>\n\n\n\n<!-- data-header-theme=\"light\" : force le header en mode `is-on-light` quand\n     ce bloc est derri\u00e8re \u2192 logo radiant (fonc\u00e9) au lieu de blanc. -->\n<section id=\"k-edito-chapeau-block_7ca5c09b528831a0df80fcc6a417a420\"\n         data-header-theme=\"light\"\n         class=\"kisio-container k-edito-chapeau font-body\">\n        <div class=\"kisio-row\">\n        <div class=\"kisio-grid\">\n            <!-- Specs Figma : Body-M Montserrat 18\/23.76 weight 500 color #4A5565,\n                 sur 6 cols centr\u00e9s (col-start-4 col-span-6). Mobile : pleine largeur. -->\n            <div class=\"wysiwyg text-body-m font-medium text-[#4A5565] col-span-12 md:col-span-6 md:col-start-4\">\n                <p><span style=\"font-weight: 400\">L\u2019accompagnement a permis \u00e0 l&#8217;op\u00e9rateur de transport de proposer sur ses automates en gare une interface accessible aux personnes pr\u00e9sentant diff\u00e9rentes typologies de handicap.<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400\"><strong>Une vraie prise en compte des enjeux d\u2019accessibilit\u00e9 dans la conception des parcours sur automate.<\/strong><\/li>\n<li style=\"font-weight: 400\"><strong>2 modes de navigation propos\u00e9s pour s\u2019adresser au plus grand nombre.<\/strong><\/li>\n<\/ul>\n            <\/div>\n        <\/div>\n    <\/div>\n\n    <\/section>\n\n\n\n<section id=\"k-edito-encadre-block_ddec789915d3597ae4fa911d2528b01d\" class=\"kisio-container k-edito-encadre has-bg font-body\">\n    <div class=\"mx-auto w-full max-w-[1140px]\">\n        <div class=\"bg-bleu-nuit text-blanc rounded-big p-8 md:p-14\">\n                            <h2 class=\"font-heading text-headline-s md:text-headline-m mb-6 md:mb-8 md:max-w-[66.67%]\">\n                    R\u00c9SULTATS                <\/h2>\n                                        <div class=\"wysiwyg text-white text-body-m max-w-[80ch]\">\n                    <ul>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">Une interface simplifi\u00e9e, pens\u00e9e pour diff\u00e9rents types de handicaps.<\/span><\/li>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">Un mode de navigation innovant, jamais vu sur automate.<\/span><\/li>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">Une meilleure autonomie d\u2019usage sur les automates en gare.<\/span><\/li>\n<\/ul>\n                <\/div>\n                    <\/div>\n    <\/div>\n<\/section>\n\n\n\n<section id=\"k-edito-citation-block_ae59a7ab45494907a6b2c778dbaf3e7e\" class=\"kisio-container k-edito-citation font-body bg-white text-bleu-nuit\">\n    <div class=\"mx-auto w-full kisio-row\">\n        <div class=\"kisio-grid\">\n            <div class=\"col-span-12 md:col-span-8 md:col-start-3 relative\">\n                <div class=\"k-edito-citation-mark absolute top-[-44px] left-[-9px] md:left-[-40px]\">\n                    <!-- SVG inline (et non via le sprite) parce que le gradient \u00e0 l'int\u00e9rieur\n                         d'un <symbol> ne se r\u00e9sout pas syst\u00e9matiquement quand on l'instancie\n                         via <use> dans un autre contexte. ID du gradient suffix\u00e9 par l'unique\n                         $id du bloc pour \u00e9viter toute collision si plusieurs citations dans\n                         la m\u00eame page. -->\n                                        <svg class=\"h-14 w-14 md:h-20 md:w-20\" viewBox=\"0 0 144 144\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" aria-hidden=\"true\">\n                        <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" fill=\"url(#k-edito-quote-grad-k-edito-citation-block_ae59a7ab45494907a6b2c778dbaf3e7e)\"\n                              d=\"M46.4707 36C59.7156 36.0001 70.44 46.7369 70.4521 59.9697C70.4521 60.3574 70.4397 60.7209 70.4033 61.46C69.749 75.262 63.8962 85.3196 62.4297 87.7314C57.1464 96.432 50.5908 101.74 46.4707 104.563C50.2756 98.1653 52.4448 91.2094 52.9658 84.4961C53.0022 83.9993 53.0139 83.5143 53.0381 83.0176C50.9539 83.6113 48.7487 83.9512 46.4707 83.9512C33.2378 83.9512 22.501 73.2264 22.501 59.9814C22.5011 46.7366 33.2258 36 46.4707 36ZM102.019 36C115.263 36.0001 125.988 46.7373 126 59.958C126 60.3456 125.988 60.7094 125.951 61.4482C125.297 75.2505 119.444 85.3083 117.978 87.7197C112.694 96.4204 106.139 101.728 102.019 104.552C105.824 98.1535 107.993 91.1977 108.514 84.4844C108.55 83.9875 108.562 83.5027 108.586 83.0059C106.502 83.5996 104.297 83.9394 102.019 83.9395C88.7857 83.9395 78.0489 73.2147 78.0488 59.9697C78.0488 46.7369 88.7736 36 102.019 36Z\"\/>\n                        <defs>\n                            <linearGradient id=\"k-edito-quote-grad-k-edito-citation-block_ae59a7ab45494907a6b2c778dbaf3e7e\" x1=\"22.501\" y1=\"104.455\" x2=\"75.0243\" y2=\"13.8423\" gradientUnits=\"userSpaceOnUse\">\n                                <stop stop-color=\"#FF9A42\"\/>\n                                <stop offset=\"1\" stop-color=\"#BC3BC2\"\/>\n                            <\/linearGradient>\n                        <\/defs>\n                    <\/svg>\n                <\/div>\n\n                                    <blockquote class=\"font-heading text-headline-s md:text-headline-m max-w-[60ch]\">\n                        Franchement, j\u2019ai retrouv\u00e9 les m\u00eames gestes que sur mon smartphone, c\u2019\u00e9tait super intuitif. Le swipe fonctionne bien et je n\u2019ai pas eu besoin d\u2019aide pour naviguer et acheter mon ticket.                    <\/blockquote>\n                \n                                    <figcaption class=\"mt-8 flex items-center gap-3\">\n                                                <span class=\"leading-tight\">\n                                            <strong class=\"block text-label-s font-bold\">Testeur non-voyant<\/strong>\n                                                                <\/span>\n                    <\/figcaption>\n                            <\/div>\n        <\/div>\n\n    <\/div>\n<\/section>\n\n\n\n<section id=\"k-enjeux-block_5a0157fbd77d8de6fdcf32657b33f1b5\"\n         class=\"kisio-container k-enjeux font-body k-enjeux--slider k-enjeux--grid-mode has-bg\">\n    <!-- rounded-big appliqu\u00e9 UNIQUEMENT quand on a un fond gradient\/couleur.\n         Sans fond (theme=light \u2192 bg blanc = bg \"naturel\" du body), on retire\n         les coins arrondis pour ne pas cr\u00e9er un cadre artificiel. -->\n    <div class=\"overflow-hidden kisio-row rounded-big py-12 lg:py-20\"\n         style=\"background-image: var(--gradient-04);\">\n\n                    <p class=\"mb-6 flex items-center gap-2 surtitre text-blanc font-body\">\n                <svg class=\"h-2 w-5\" viewBox=\"0 0 24 9\" aria-hidden=\"true\">\n                            <use xlink:href=\"#icon-surtitre_picto\"\/>\n                        <\/svg>\n                VOS ENJEUX MOBILIT\u00c9S            <\/p>\n        \n                    <h2 class=\"font-heading text-headline-s md:text-headline-m text-blanc md:max-w-[66.67%] mb-6 md:mb-14\">\n                Et vous quels sont vos enjeux ?            <\/h2>\n        \n        \n                        <div class=\"k-enjeux-swiper swiper overflow-visible k-enjeux-swiper--grid\">\n                <div class=\"swiper-wrapper align-stretch\">\n                                            <div class=\"swiper-slide h-auto\">\n                            <div class=\"flex flex-col rounded-card bg-blanc\/20 backdrop-blur-sm border-card overflow-hidden h-full\">\n    <div class=\"flex flex-1 flex-col p-5 md:p-6 justify-between\">\n                    <h3 class=\"font-heading text-headline-s text-blanc mb-2\">\n                Am\u00e9liorer l\u2019exp\u00e9rience voyageur            <\/h3>\n        \n        \n                    <a href=\"https:\/\/kisio.com\/en\/enjeux\/ameliorer-lexperience-voyageur\/\"\n               target=\"_self\"\n               class=\"mt-auto inline-flex items-center gap-2 text-body-s2 font-body mt-4 lg:mt-8 font-bold text-blanc hover:text-blanc\/80 transition-colors\">\n                D\u00e9couvrir cet enjeu                <svg class=\"h-3 w-3\" aria-hidden=\"true\"><use xlink:href=\"#icon-arrow_right\"\/><\/svg>\n            <\/a>\n            <\/div>\n\n            <div class=\"aspect-[280\/192] w-full\">\n            <img decoding=\"async\" class=\"aspect-[280\/192] h-full w-full object-cover\"\n                 src=\"https:\/\/kisio.com\/app\/uploads\/2026\/05\/experience-voyageur-enjeu-kisio-768x429.webp\"\n                 alt=\"\"\n                 loading=\"lazy\"\/>\n        <\/div>\n    <\/div>\n                        <\/div>\n                                            <div class=\"swiper-slide h-auto\">\n                            <div class=\"flex flex-col rounded-card bg-blanc\/20 backdrop-blur-sm border-card overflow-hidden h-full\">\n    <div class=\"flex flex-1 flex-col p-5 md:p-6 justify-between\">\n                    <h3 class=\"font-heading text-headline-s text-blanc mb-2\">\n                Acc\u00e9l\u00e9rer la transformation num\u00e9rique, la donn\u00e9e et l\u2019interop\u00e9rabilit\u00e9            <\/h3>\n        \n        \n                    <a href=\"https:\/\/kisio.com\/en\/enjeux\/accelerer-la-transformation-numerique-la-donnee-et-linteroperabilite\/\"\n               target=\"_self\"\n               class=\"mt-auto inline-flex items-center gap-2 text-body-s2 font-body mt-4 lg:mt-8 font-bold text-blanc hover:text-blanc\/80 transition-colors\">\n                D\u00e9couvrir cet enjeu                <svg class=\"h-3 w-3\" aria-hidden=\"true\"><use xlink:href=\"#icon-arrow_right\"\/><\/svg>\n            <\/a>\n            <\/div>\n\n            <div class=\"aspect-[280\/192] w-full\">\n            <img decoding=\"async\" class=\"aspect-[280\/192] h-full w-full object-cover\"\n                 src=\"https:\/\/kisio.com\/app\/uploads\/2026\/05\/transfo-numerique-enjeu-kisio-1-768x432.webp\"\n                 alt=\"\"\n                 loading=\"lazy\"\/>\n        <\/div>\n    <\/div>\n                        <\/div>\n                                            <div class=\"swiper-slide h-auto\">\n                            <div class=\"flex flex-col rounded-card bg-blanc\/20 backdrop-blur-sm border-card overflow-hidden h-full\">\n    <div class=\"flex flex-1 flex-col p-5 md:p-6 justify-between\">\n                    <h3 class=\"font-heading text-headline-s text-blanc mb-2\">\n                Orchestrer une gouvernance multi-acteurs et territoriale coh\u00e9rente            <\/h3>\n        \n        \n                    <a href=\"https:\/\/kisio.com\/en\/enjeux\/orchestrer-une-gouvernance-multi-acteurs-et-territoriale-coherente\/\"\n               target=\"_self\"\n               class=\"mt-auto inline-flex items-center gap-2 text-body-s2 font-body mt-4 lg:mt-8 font-bold text-blanc hover:text-blanc\/80 transition-colors\">\n                D\u00e9couvrir cet enjeu                <svg class=\"h-3 w-3\" aria-hidden=\"true\"><use xlink:href=\"#icon-arrow_right\"\/><\/svg>\n            <\/a>\n            <\/div>\n\n            <div class=\"aspect-[280\/192] w-full\">\n            <img decoding=\"async\" class=\"aspect-[280\/192] h-full w-full object-cover\"\n                 src=\"https:\/\/kisio.com\/app\/uploads\/2026\/05\/gouvernance-enjeu-kisio-768x512.webp\"\n                 alt=\"\"\n                 loading=\"lazy\"\/>\n        <\/div>\n    <\/div>\n                        <\/div>\n                                            <div class=\"swiper-slide h-auto\">\n                            <div class=\"flex flex-col rounded-card bg-blanc\/20 backdrop-blur-sm border-card overflow-hidden h-full\">\n    <div class=\"flex flex-1 flex-col p-5 md:p-6 justify-between\">\n                    <h3 class=\"font-heading text-headline-s text-blanc mb-2\">\n                Piloter la transition environnementale et la conformit\u00e9 r\u00e9glementaire QSE            <\/h3>\n        \n        \n                    <a href=\"https:\/\/kisio.com\/en\/enjeux\/piloter-la-transition-environnementale-et-la-conformite-reglementaire-qse\/\"\n               target=\"_self\"\n               class=\"mt-auto inline-flex items-center gap-2 text-body-s2 font-body mt-4 lg:mt-8 font-bold text-blanc hover:text-blanc\/80 transition-colors\">\n                D\u00e9couvrir cet enjeu                <svg class=\"h-3 w-3\" aria-hidden=\"true\"><use xlink:href=\"#icon-arrow_right\"\/><\/svg>\n            <\/a>\n            <\/div>\n\n            <div class=\"aspect-[280\/192] w-full\">\n            <img decoding=\"async\" class=\"aspect-[280\/192] h-full w-full object-cover\"\n                 src=\"https:\/\/kisio.com\/app\/uploads\/2026\/05\/transition-environnementale-enjeu-kisio-768x460.webp\"\n                 alt=\"\"\n                 loading=\"lazy\"\/>\n        <\/div>\n    <\/div>\n                        <\/div>\n                                            <div class=\"swiper-slide h-auto\">\n                            <div class=\"flex flex-col rounded-card bg-blanc\/20 backdrop-blur-sm border-card overflow-hidden h-full\">\n    <div class=\"flex flex-1 flex-col p-5 md:p-6 justify-between\">\n                    <h3 class=\"font-heading text-headline-s text-blanc mb-2\">\n                Assurer la soutenabilit\u00e9 \u00e9conomique et la p\u00e9rennit\u00e9 des investissements            <\/h3>\n        \n        \n                    <a href=\"https:\/\/kisio.com\/en\/enjeux\/assurer-la-soutenabilite-economique-et-la-perennite-des-investissements\/\"\n               target=\"_self\"\n               class=\"mt-auto inline-flex items-center gap-2 text-body-s2 font-body mt-4 lg:mt-8 font-bold text-blanc hover:text-blanc\/80 transition-colors\">\n                D\u00e9couvrir cet enjeu                <svg class=\"h-3 w-3\" aria-hidden=\"true\"><use xlink:href=\"#icon-arrow_right\"\/><\/svg>\n            <\/a>\n            <\/div>\n\n            <div class=\"aspect-[280\/192] w-full\">\n            <img decoding=\"async\" class=\"aspect-[280\/192] h-full w-full object-cover\"\n                 src=\"https:\/\/kisio.com\/app\/uploads\/2026\/05\/soutenabilite-economique-enjeu-kisio-768x474.webp\"\n                 alt=\"\"\n                 loading=\"lazy\"\/>\n        <\/div>\n    <\/div>\n                        <\/div>\n                                    <\/div>\n                <div class=\"swiper-pagination k-swiper-pagination\"><\/div>\n            <\/div>\n\n        \n            <\/div>\n<\/section>\n\n\n\n<section id=\"k-subfooter-block_323a9fc5e868ce1f571abb45c9b140a5\"\n         class=\"kisio-container k-subfooter has-bg !py-0 !px-0 font-body\">\n    <div class=\"relative flex items-center overflow-hidden  min-h-[380px] md:min-h-[500px]\">\n\n                    <img decoding=\"async\" class=\"absolute inset-0 h-full w-full object-cover object-right\"\n                 src=\"https:\/\/kisio.com\/app\/uploads\/2026\/05\/kisio-projet2.webp\"\n                 alt=\"\"\n                 loading=\"lazy\"\/>\n        \n        <div class=\"relative z-10 w-full max-w-full px-8 py-12 md:max-w-[55%] md:px-16 md:py-16 text-blanc\">\n\n                            <h2 class=\"font-heading text-headline-s md:text-headline-m md:max-w-[66.67%] mb-8\">\n                    Vous avez un projet de mobilit\u00e9 ?                <\/h2>\n            \n                            <a href=\"https:\/\/kisio.com\/contact\/?form=projet\"\n                   target=\"_self\"\n                   class=\"inline-flex items-center gap-3 rounded-full px-7 py-4 text-label-m font-body transition-colors bg-blanc text-bleu-nuit hover:bg-system-200\">\n                    Contactez-nous                <\/a>\n            \n        <\/div>\n    <\/div>\n<\/section>\n","protected":false},"excerpt":{"rendered":"<p>Conception des interfaces de l\u2019automate en gare, pour une exp\u00e9rience d\u2019achat de titres de transport accessible au plus grand nombre de voyageurs.<\/p>\n","protected":false},"featured_media":3428,"template":"","kisio-formats":[],"enjeu-thematique":[14],"class_list":["post-2347","case-study","type-case-study","status-publish","has-post-thumbnail","hentry","enjeu-thematique-qualite-service"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.7 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Cas client Op\u00e9rateur de transport francilien \u2014\u2026 | Kisio<\/title>\n<meta name=\"description\" content=\"Conception des interfaces de l\u2019automate en gare, pour une exp\u00e9rience d\u2019achat de titres de transport accessible au plus grand nombre de voyageurs.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kisio.com\/cas-clients\/accessibilite-des-interfaces-de-lautomate-en-gare-transilien\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Cas client Op\u00e9rateur de transport francilien \u2014\u2026 | Kisio\" \/>\n<meta property=\"og:description\" content=\"Conception des interfaces de l\u2019automate en gare, pour une exp\u00e9rience d\u2019achat de titres de transport accessible au plus grand nombre de voyageurs.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kisio.com\/cas-clients\/accessibilite-des-interfaces-de-lautomate-en-gare-transilien\/\" \/>\n<meta property=\"og:site_name\" content=\"Kisio\" \/>\n<meta property=\"article:modified_time\" content=\"2026-06-15T09:56:19+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kisio.com\/app\/uploads\/2026\/05\/Transilien-Accessibilite-des-interfaces-vignette.webp\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/kisio.com\\\/cas-clients\\\/accessibilite-des-interfaces-de-lautomate-en-gare-transilien\\\/\",\"url\":\"https:\\\/\\\/kisio.com\\\/cas-clients\\\/accessibilite-des-interfaces-de-lautomate-en-gare-transilien\\\/\",\"name\":\"Cas client Op\u00e9rateur de transport francilien \u2014\u2026 | Kisio\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/kisio.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/kisio.com\\\/cas-clients\\\/accessibilite-des-interfaces-de-lautomate-en-gare-transilien\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/kisio.com\\\/cas-clients\\\/accessibilite-des-interfaces-de-lautomate-en-gare-transilien\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/kisio.com\\\/app\\\/uploads\\\/2026\\\/05\\\/Cas-UX.webp\",\"datePublished\":\"2026-05-28T11:40:04+00:00\",\"dateModified\":\"2026-06-15T09:56:19+00:00\",\"description\":\"Conception des interfaces de l\u2019automate en gare, pour une exp\u00e9rience d\u2019achat de titres de transport accessible au plus grand nombre de voyageurs.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/kisio.com\\\/cas-clients\\\/accessibilite-des-interfaces-de-lautomate-en-gare-transilien\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/kisio.com\\\/cas-clients\\\/accessibilite-des-interfaces-de-lautomate-en-gare-transilien\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/kisio.com\\\/cas-clients\\\/accessibilite-des-interfaces-de-lautomate-en-gare-transilien\\\/#primaryimage\",\"url\":\"https:\\\/\\\/kisio.com\\\/app\\\/uploads\\\/2026\\\/05\\\/Cas-UX.webp\",\"contentUrl\":\"https:\\\/\\\/kisio.com\\\/app\\\/uploads\\\/2026\\\/05\\\/Cas-UX.webp\",\"width\":1600,\"height\":1067},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/kisio.com\\\/cas-clients\\\/accessibilite-des-interfaces-de-lautomate-en-gare-transilien\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/kisio.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Accessibilit\u00e9 des interfaces de l\u2019automate en gare\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/kisio.com\\\/#website\",\"url\":\"https:\\\/\\\/kisio.com\\\/\",\"name\":\"Kisio\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/kisio.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Cas client Op\u00e9rateur de transport francilien \u2014\u2026 | Kisio","description":"Conception des interfaces de l\u2019automate en gare, pour une exp\u00e9rience d\u2019achat de titres de transport accessible au plus grand nombre de voyageurs.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/kisio.com\/cas-clients\/accessibilite-des-interfaces-de-lautomate-en-gare-transilien\/","og_locale":"en_US","og_type":"article","og_title":"Cas client Op\u00e9rateur de transport francilien \u2014\u2026 | Kisio","og_description":"Conception des interfaces de l\u2019automate en gare, pour une exp\u00e9rience d\u2019achat de titres de transport accessible au plus grand nombre de voyageurs.","og_url":"https:\/\/kisio.com\/cas-clients\/accessibilite-des-interfaces-de-lautomate-en-gare-transilien\/","og_site_name":"Kisio","article_modified_time":"2026-06-15T09:56:19+00:00","og_image":[{"url":"https:\/\/kisio.com\/app\/uploads\/2026\/05\/Transilien-Accessibilite-des-interfaces-vignette.webp","type":"","width":"","height":""}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/kisio.com\/cas-clients\/accessibilite-des-interfaces-de-lautomate-en-gare-transilien\/","url":"https:\/\/kisio.com\/cas-clients\/accessibilite-des-interfaces-de-lautomate-en-gare-transilien\/","name":"Cas client Op\u00e9rateur de transport francilien \u2014\u2026 | Kisio","isPartOf":{"@id":"https:\/\/kisio.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kisio.com\/cas-clients\/accessibilite-des-interfaces-de-lautomate-en-gare-transilien\/#primaryimage"},"image":{"@id":"https:\/\/kisio.com\/cas-clients\/accessibilite-des-interfaces-de-lautomate-en-gare-transilien\/#primaryimage"},"thumbnailUrl":"https:\/\/kisio.com\/app\/uploads\/2026\/05\/Cas-UX.webp","datePublished":"2026-05-28T11:40:04+00:00","dateModified":"2026-06-15T09:56:19+00:00","description":"Conception des interfaces de l\u2019automate en gare, pour une exp\u00e9rience d\u2019achat de titres de transport accessible au plus grand nombre de voyageurs.","breadcrumb":{"@id":"https:\/\/kisio.com\/cas-clients\/accessibilite-des-interfaces-de-lautomate-en-gare-transilien\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kisio.com\/cas-clients\/accessibilite-des-interfaces-de-lautomate-en-gare-transilien\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/kisio.com\/cas-clients\/accessibilite-des-interfaces-de-lautomate-en-gare-transilien\/#primaryimage","url":"https:\/\/kisio.com\/app\/uploads\/2026\/05\/Cas-UX.webp","contentUrl":"https:\/\/kisio.com\/app\/uploads\/2026\/05\/Cas-UX.webp","width":1600,"height":1067},{"@type":"BreadcrumbList","@id":"https:\/\/kisio.com\/cas-clients\/accessibilite-des-interfaces-de-lautomate-en-gare-transilien\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kisio.com\/"},{"@type":"ListItem","position":2,"name":"Accessibilit\u00e9 des interfaces de l\u2019automate en gare"}]},{"@type":"WebSite","@id":"https:\/\/kisio.com\/#website","url":"https:\/\/kisio.com\/","name":"Kisio","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kisio.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"}]}},"_links":{"self":[{"href":"https:\/\/kisio.com\/en\/wp-json\/wp\/v2\/case-study\/2347","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kisio.com\/en\/wp-json\/wp\/v2\/case-study"}],"about":[{"href":"https:\/\/kisio.com\/en\/wp-json\/wp\/v2\/types\/case-study"}],"version-history":[{"count":16,"href":"https:\/\/kisio.com\/en\/wp-json\/wp\/v2\/case-study\/2347\/revisions"}],"predecessor-version":[{"id":3431,"href":"https:\/\/kisio.com\/en\/wp-json\/wp\/v2\/case-study\/2347\/revisions\/3431"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kisio.com\/en\/wp-json\/wp\/v2\/media\/3428"}],"wp:attachment":[{"href":"https:\/\/kisio.com\/en\/wp-json\/wp\/v2\/media?parent=2347"}],"wp:term":[{"taxonomy":"format","embeddable":true,"href":"https:\/\/kisio.com\/en\/wp-json\/wp\/v2\/kisio-formats?post=2347"},{"taxonomy":"enjeu-thematique","embeddable":true,"href":"https:\/\/kisio.com\/en\/wp-json\/wp\/v2\/enjeu-thematique?post=2347"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}