{"id":1007,"date":"2022-12-16T00:00:00","date_gmt":"2022-12-15T23:00:00","guid":{"rendered":"https:\/\/programaraciegas.net\/?p=1007"},"modified":"2022-12-06T08:42:05","modified_gmt":"2022-12-06T07:42:05","slug":"trabajar-de-forma-mas-accesible-con-visualstudio-code-usando-lector-de-pantallas","status":"publish","type":"post","link":"https:\/\/programaraciegas.net\/?p=1007","title":{"rendered":"Trabajar de forma m\u00e1s accesible con VisualStudio Code usando lector de pantallas"},"content":{"rendered":"

El editor de c\u00f3digo VisualStudio code<\/a> o m\u00e1s conocido como VSCode incluye en sus \u00faltimas versiones la opci\u00f3n de activaci\u00f3n del soporte de accesibilidad para usuarios de lectores de pantalla.<\/p>\n

VSCode accesible en todas las plataformas<\/h2>\n

Aunque VSCode parece que proporciona accesibilidad en todas las plataformas no lo hace con la misma calidad o estabilidad.<\/p>\n

Accesibilidad en Windows<\/h3>\n

Seg\u00fan la documentaci\u00f3n oficial el soporte de accesibilidad para lectores de pantalla incluye a JAWS y NVDA aunque para este \u00faltimo se recomienda el uso de NVDA en modo foco en lugar del modo navegaci\u00f3n.<\/p>\n

Adem\u00e1s tambi\u00e9n para NVDA existe una extensi\u00f3n de NVDA para VSCode<\/a> para mejorar su comportamiento con este lector de pantallas.<\/p>\n

En cualquier caso y con cualquier lector de pantallas se recomienda la navegaci\u00f3n por salto por tabulaci\u00f3n y el uso de las teclas para navegar entre paneles, pesta\u00f1as y ventanas hijas.<\/p>\n

Accesibilidad en MacOS<\/h3>\n

Al abrirse VSCode se detecta la presencia de VoiceOver y se abre un di\u00e1logo para activar la compatibilidad con lectores de pantalla.<\/p>\n

La interfaz, aunque generada con tecnolog\u00eda web, resulta bastante accesible con el modo de navegaci\u00f3n por grupos de las opciones de Internet de VoiceOver.<\/p>\n

Quiz\u00e1s lo m\u00e1s problem\u00e1tico sean los mensajes emergentes para completar el c\u00f3digo de forma autom\u00e1tica o revisar el resultado en un simulador. Por suerte para los usuarios de VoiceOver todas estas opciones se pueden configurar.<\/p>\n

En MacOS existe una opci\u00f3n para ver el estado de accesibilidad de VSCode. Pulsando el atajo de teclado Opcion+F1<\/strong> accederemos a esta informaci\u00f3n.<\/p>\n

Accesibilidad en Linux<\/h3>\n

Aunque el soporte para el lector de pantallas Orca<\/a> est\u00e1 incluido para VSCode hay que mencionar que la estabilidad del lector de pantalla es a\u00fan menor cuando abrimos varias pesta\u00f1as en VSCode.<\/p>\n

El area de edici\u00f3n de c\u00f3digo si resulta legible con Orca pero otros paneles como los mensajes de depuraci\u00f3n o los paneles para acceder a ciertos elementos de configuraci\u00f3n o de instalaci\u00f3n de extensiones resultan totalmente inaccesibles para este lector de pantallas.<\/p>\n

Accesibilidad en ChromeOS<\/h3>\n

Aunque VSCode dice soportar todas las plataformas el uso de esta aplicaci\u00f3n utilizando ChromeVox, el lector de pantallas de ChromeOS, resulta totalmente improductivo ya que la experiencia es la de utilizar una p\u00e1gina web con multitud de \u00e1reas din\u00e1micas que carecen de encabezados o marcas sem\u00e1nticas.<\/p>\n

Adem\u00e1s el uso del teclado es conflictivo entre Chromevox y los propios atajos de VSCode.<\/p>\n

Navegaci\u00f3n en el completado de c\u00f3digo<\/h2>\n

Para la funci\u00f3n de completado de c\u00f3digo autom\u00e1tico aparece un mensaje emergente con una lista de opciones. Podemos navegar en esta lista de opciones utilizando los atajos de teclado Control+Flecha arriba<\/strong> y Control+Flecha abajo<\/strong> para seleccionar una de las posibles opciones.<\/p>\n

En el caso de MacOS con VoiceOver es suficiente utilizar las flechas de arriba o abajo para moverse por la lista.<\/p>\n

En cualquier caso es recomendable desactivar el completado autom\u00e1tico de c\u00f3digo y usarlo de forma manual con el atajo de teclado Control+Espacio<\/strong>.<\/p>\n

Documentaci\u00f3n oficial<\/p>\n

El equipo de VSCode ha publicado informaci\u00f3n \u00fatil sobre las caracter\u00edsticas de accesibilidad de este editor para diversos perfiles de accesibilidad. Puedes leer toda esta informaci\u00f3n en la p\u00e1gina en ingl\u00e9s de accesibilidad de VSCode<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"

El editor de c\u00f3digo VisualStudio code o m\u00e1s conocido como VSCode incluye en sus \u00faltimas versiones la opci\u00f3n de activaci\u00f3n del soporte de accesibilidad para usuarios de lectores de pantalla. VSCode accesible en todas las plataformas Aunque VSCode parece que proporciona accesibilidad en todas las plataformas no lo hace con la misma calidad o estabilidad. … <\/p>\n

Continuar leyendo \u00abTrabajar de forma m\u00e1s accesible con VisualStudio Code usando lector de pantallas\u00bb<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9,37,6],"tags":[11,19,421],"class_list":["post-1007","post","type-post","status-publish","format-standard","hentry","category-software-accesible","category-herramientas-software","category-programacion","tag-accesibilidad-2","tag-lector-de-pantallas","tag-vscode"],"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/programaraciegas.net\/index.php?rest_route=\/wp\/v2\/posts\/1007","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/programaraciegas.net\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/programaraciegas.net\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/programaraciegas.net\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/programaraciegas.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1007"}],"version-history":[{"count":0,"href":"https:\/\/programaraciegas.net\/index.php?rest_route=\/wp\/v2\/posts\/1007\/revisions"}],"wp:attachment":[{"href":"https:\/\/programaraciegas.net\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1007"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/programaraciegas.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1007"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/programaraciegas.net\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1007"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}