{"id":6358,"date":"2024-08-21T10:32:04","date_gmt":"2024-08-21T10:32:04","guid":{"rendered":"https:\/\/itopdev.wpenginepowered.com\/itsm-accessible-for-everyone-with-itop\/"},"modified":"2026-02-03T14:59:12","modified_gmt":"2026-02-03T14:59:12","slug":"itsm-accessible-pour-tous-avec-itop","status":"publish","type":"post","link":"https:\/\/combodo.com\/fr\/itop-fr\/itsm-accessible-pour-tous-avec-itop\/","title":{"rendered":"ITSM accessible pour tous avec iTop"},"content":{"rendered":"

Dans un souci d\u2019apporter une exp\u00e9rience utilisateur toujours meilleure, Combodo s\u2019engage envers l\u2019accessibilit\u00e9.<\/strong>
\nDepuis plusieurs ann\u00e9es nous nous sensibilisons et essayons d\u2019assurer l\u2019acc\u00e8s de nos produits \u00e0 toutes et tous, que ce soit en facilitant leur utilisation ou en am\u00e9liorant les interfaces, mais aussi par l\u2019am\u00e9lioration progressive d\u2019une solution ITSM accessible qui aide principalement les personnes souffrant de handicap.<\/p>\n

Au travers de ces actions pour rendre iTop le plus accessible, Combodo applique d\u2019une certaine mani\u00e8re son credo \u00ab\u00a0ITIL pour tous\u00a0\u00bb.<\/p>\n

Aujourd\u2019hui nous suivons rigoureusement l\u2019ensemble des\u00a0r\u00e8gles WCAG AA<\/a>. D\u00e9couvrons ensemble les diff\u00e9rentes actions men\u00e9es par nos \u00e9quipes depuis iTop 3.0.<\/strong><\/p>\n

L\u2019origine des \u00e9volutions<\/h2>\n

O\u00f9 sont cach\u00e9es les meta donn\u00e9es ?<\/h3>\n

Lors de nos d\u00e9veloppements sur l\u2019ancienne interface d\u2019iTop, le passage de m\u00e9ta-information pour les logiciels d\u2019accessibilit\u00e9 n\u2019\u00e9taient pas toujours facile, les informations et l\u2019affichage en lui m\u00eame n\u2019\u00e9taient pas centralis\u00e9s. Mais efforts apr\u00e8s efforts individuels et collectifs, nous sommes parvenus \u00e0 donner \u00e0 notre ancienne interface un minimum d\u2019accessibilit\u00e9 pour les logiciels de lecture d\u2019\u00e9cran.
\nEn apprenant petit \u00e0 petit \u00e0 lier l\u2019information affich\u00e9e \u00e0 celle interpr\u00e9t\u00e9e par un lecteur d\u2019\u00e9cran nous avons navigu\u00e9 dans tous les \u00e9crans d\u2019iTop pour am\u00e9liorer sa lisibilit\u00e9.<\/p>\n

Couleurs<\/h3>\n

Et c\u2019est l\u00e0 qu\u2019un autre probl\u00e8me flagrant s\u2019est d\u00e9clar\u00e9, nous n\u2019utilisons pas les couleurs \u00e0 des fins s\u00e9mantiques.<\/p>\n

Sur les interfaces legacy des versions d\u2019iTop jusque la 2.7, toutes les actions sont oranges avec un texte blanc ou noir dessus, ce qui ne remplit aucune r\u00e8gle d\u2019accessibilit\u00e9 des couleurs.<\/p>\n

\n

\"Contraste<\/p>\n

Contraste du orange utilis\u00e9 dans iTop sur du blanc<\/p>\n<\/div>\n

<\/h1>\n

iTop 3.0: un tournant vers l\u2019accessibilit\u00e9<\/h2>\n

De nouvelles structures accessibles<\/h3>\n

Lors de la conception d\u2019iTop 3.0 et de son design\u00a0Fullmoon<\/a>, ces pr\u00e9c\u00e9dentes exp\u00e9riences ont particip\u00e9 au d\u00e9veloppement des fondations de cette version.
\nAyant compl\u00e8tement retravaill\u00e9 l\u2019affichage des donn\u00e9es et de l\u2019ensemble de l\u2019interface utilisateur, nous avons pu nous efforcer d\u2019inclure un maximum d\u2019informations pour les lecteurs d\u2019\u00e9cran et la cr\u00e9ation d\u2019un design contrast\u00e9 qui respecte les normes WCAG AA, et qui peut \u00eatre \u00e9tendu pour respecter les normes WCAG AAA.<\/p>\n

\n

\"\"<\/p>\n

Score lighthouse d\u2019iTop<\/p>\n<\/div>\n

La facilitation de la navigation au clavier a \u00e9galement \u00e9t\u00e9 revue, afin de rendre plus ais\u00e9 la navigation dans l\u2019application.<\/p>\n

Au del\u00e0 de la conception de la solution, afin d\u2019optimiser l\u2019exp\u00e9rience utilisateur, il fallait apporter d\u2019autres modifications au niveau des th\u00e8mes, afin de faciliter l\u2019utilisation \u00e0 des populations avec handicaps.<\/p>\n

Des th\u00e8mes suppl\u00e9mentaires pour iTop console<\/h3>\n

L\u2019essai du th\u00e8me \u00ab\u00a0high contrast\u00a0\u00bb du portail<\/h4>\n

A l\u2019origine des changements sur la console iTop (back-office agents) que l\u2019on va d\u00e9couvrir\u00a0un peu plus bas<\/a>, un second besoin nous avait \u00e9t\u00e9 remont\u00e9 par plusieurs clients sur le portail iTop.<\/p>\n

Il \u00e9tait d\u00e9j\u00e0 possible d\u2019ajouter des th\u00e8mes au portail, mais ces clients souhaitaient avant tout proposer un th\u00e8me \u00e0 contraste \u00e9lev\u00e9 (high contrast) pour des personnes ayant une d\u00e9ficience visuelle.<\/p>\n

Le d\u00e9veloppement d\u2019un th\u00e8me \u00e0 contraste \u00e9lev\u00e9 a donc \u00e9t\u00e9 r\u00e9alis\u00e9 sur un profil particulier pour un client. On voit bien ci-dessous la diff\u00e9rence avec le th\u00e8me standard.<\/p>\n

\n

\"Diff\u00e9rence<\/p>\n

Diff\u00e9rences entre les th\u00e8mes standard et high contrast du portail<\/p>\n<\/div>\n

\n

\"Diff\u00e9rences<\/p>\n

Diff\u00e9rences entre les th\u00e8mes dans l\u2019\u00e9dition de ticket<\/p>\n<\/div>\n

Il s\u2019est av\u00e9r\u00e9 cependant difficile de g\u00e9n\u00e9raliser au portail standard iTop ce qui avait \u00e9t\u00e9 d\u00e9velopp\u00e9 pour un projet particulier, du fait de la structure technique actuelle du portail iTop.<\/p>\n

Cependant, si vous souhaitez faire en sorte qu\u2019iTop propose un portail ITSM accessible \u00e0 vos utilisateurs, il est toujours possible de le personnaliser, comme l\u2019ensemble de la solution.<\/p>\n

Apr\u00e8s les exp\u00e9rimentations sur iTop 3.0 concernant le th\u00e8me du portail \u00e0 contraste \u00e9lev\u00e9, d\u2019autres recherches ont ensuite \u00e9t\u00e9 men\u00e9es sur la console iTop, et ont abouti \u00e0 l\u2019ajout dans la console iTop 3.2 de trois th\u00e8mes suppl\u00e9mentaires.<\/p>\n

\n

Th\u00e8mes pour les daltoniens<\/h4>\n

Con\u00e7us pour aider les utilisateurs atteints de daltonisme, il a \u00e9t\u00e9 ajout\u00e9 deux th\u00e8mes s\u2019adressant \u00e0 des cas sp\u00e9cifiques :<\/p>\n<\/div>\n

\n