background preloader

Generalities

Facebook Twitter

Aperçu sur le développement des applications Web et des Widgets accessibles - Accessibilité. Le Web est en pérpetuelle évolution. En effet, les sites à contenu statique sont de plus en plus remplacés par des sites dynamiques à l'utilisation assez proche des applications de bureaux. Les sites Web dynamiques utilisent abondement JavaScript et AJAX. Les designers créent des widgets et des éléments d'interface grâce aux languages du Web notemment HTML, CSS et Javascript.

Ce tournant dans l'histoire du Web permet d'améliorer grandement l'expérience utilisateur. Mais certains utilisateurs peuvent être exclus par manque d'accessibilité. En effet, JavaScript avait la réputation d'être inaccessible aux technologies d'assistance tel que les intérpreteurs d'écran. Problématique La plupart des libraries JavaScript proposent des composants côté client qui miment le comportement familier des interfaces de bureaux classiques.

Example 1: Code d'une tabulation sans informations ARIA. <! Les spécifications ARIA distinguent 3 types d'attributs : rôles, états et propriétés. <! Exemple 1a. Voir aussi. ARIA - Accessibility. Accessible Rich Internet Applications (ARIA) is a set of attributes that define ways to make Web content and Web applications (especially those developed with Ajax, JavaScript and more recent web technologies like Bootstrap) more accessible to people with disabilities.

For example, ARIA enables accessible navigation landmarks, JavaScript widgets, form hints and error messages, live content updates, and more. ARIA is a set of special accessibility attributes which can be added to any markup, but is especially suited to HTML. The role attribute defines a specific role for type of object (such as an article, alert, slider or a button). Additional ARIA attributes provide other useful properties, such as a description for a form or the current width of a progressbar. The aria-hidden attibute which tells the screen-readers if they should ignore the element, should not be confused with the hidden attibute in HTML5 which tells the browser not to display the element. Reference Role attribute-ARIA. Deque Systems | Web Accessibility | Software, Training, and Consulting. ARIA in HTML. Accessibility on Smashing Magazine. We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself?

E.g. upcoming SmashingConf Barcelona, dedicated to smart front-end techniques and design patterns. Posts Tagged ‘Accessibility’. We are pleased to present below all posts tagged with ‘Accessibility’. Meet “Inclusive Front-End Design Patterns”, A New Smashing Book We might not realize it, but as developers, we build inaccessible websites all the time. Now, accessibility has always been a slightly unsettling realm for web developers. Read more... Accessibility: Improving The UX For Color-Blind Users According to Colour Blind Awareness 4.5% of the population are color-blind. There are many types of color blindness but it comes down to not seeing color clearly, getting colors mixed up, or not being able to differentiate between certain colors.

Read more... Designing A Dementia-Friendly Website Read more... Accessibility Lipstick on a Usability Pig. Applying accessibility techniques to an unusable site is like putting lipstick on a pig. No matter how much you apply, it will always be a pig. There are many ways in which a web site might be made inaccessible. Believe me, we’ve seen them all. Occasionally we are asked to conduct an accessibility evaluation on a site that is almost entirely unusable.

Such efforts are usually pointless. No amount of technical accessibility can fix something that is not useful or usable. Often the approach to poor usability is to throw more accessibility code at a site. Types of accessibility lipstick commonly applied to usability pigs: Usability First Many accessibility techniques can be avoided by considering usability first. The answers to these questions affect both usability and accessibility for everyone, regardless of disability. The ARIA Hammer As ARIA is increasing in popularity, it is quickly becoming the accessibility lipstick of choice. ChromeVox Interactive TutorialStep 1 of 9 :Lesson 1: About ChromeVox and the Keyboard. With the help of ChromeVox spoken feedback, you can use your keyboard to explore the Web. After these 10 6 lessons, you’ll learn enough basic keyboard shortcuts to explore pages, find links and buttons, and have more than one page open at a time.

You’ll also learn where to get more information. Let’s start with what you need to use this guide. If you want to stop ChromeVox from talking at any time, press the Control key. If you need to turn ChromeVox off, press Control+Alt+Z. The Control and Alt keys pressed at the same time form a key combination called the ChromeVox keys. The Shift key is on the far left side of the keyboard, in the second row up from the bottom.

Next we’ll learn about navigating pages by level, controlling the level of detail by breaking pages into chunks. Continue to next section - Lesson 2: Level Navigation. AccessiWeb 2.2 - Liste Générale. Pourquoi AccessiWeb ? WCAG (Web Content Accessibility Guidelines) est la norme internationale du W3C pour l'accessibilité des contenus du Web. Cette norme est reconnue officiellement par la Commission Européenne qui en recommande l’adoption dans tous les pays membres de la communauté. L’administration française s’y réfère depuis 1999. Cependant, comme toute norme technique, les WCAG nécessitent des méthodes d’application adaptées aux activités qu’elles sont supposées encadrer : développement d’applications Web, développement de contenus, conception de l’interface, conception graphique, certification de conformité...

Dès 2003, l’association BrailleNet a créé et rendu publique la méthode AccessiWeb pour permettre une approche unifiée à la vérification de conformité aux WCAG des services Web. Les évolutions d’AccessiWeb Les quatre objectifs d’AccessiWeb 2.2 En réalisant ce nouveau référentiel BrailleNet et son groupe Expert Référent visaient quatre objectifs : Mode d'emploi Contact Remerciements. Accessible jQuery-ui Components Demo. Accessible jQuery-ui Components Demonstration Instructions for Screen Reader Users: This page contains some interactive controls that you would normally only find in desktop applications. Examples of such controls are tab lists, menu bars, sliders, and tree views. These controls are often operated using the arrow keys, which means your screen reader must temporarily switch off virtual navigation mode in order to interact with them. Some screen readers will automatically switch between modes depending on the control's type, while others require you to manually turn virtual mode off.

The list below shows how to switch between modes on some popular screen readers: JAWS KEY + Z, use twice to make switch permanent WindowEyes Ctrl + Shift + A Widgets Tabs About the Tree Widget How to use the Tree widget: The tree takes up one tab stop in the tab order. The tree is marked up as an ARIA tree widget. Accessibility Changes Made to the Original Tree: Demo: Tree View Containing Sample Documents My Documents.

How to toggle aria-expanded and other WAI-ARIA values with JavaScript - David MacDonald Web Accessibility Blog, testing, teaching, and discussion. How Not To Misuse ARIA States, Properties and Roles - SSB BART Group. Many content authors will put ARIA properties on content in an attempt to meet accessibility standards and make their content work with assistive technology (AT). Unfortunately, there is a lot of incorrect use of ARIA, with authors seemingly adding attributes until they get something that works with screen readers. One reason authors may continue to add incorrect ARIA properties is the lack of apparent issues when ARIA is misused – no harm is detected and thus people continue the practice.

While some people may be less concerned with technically invalid code, it’s harder to debug and maintain and may cause unexpected issues. This post will expound on the different things that I have seen and provide best practices for how to use ARIA attributes properly. Native and Implied Semantics Generally ARIA should not be added to HTML content that already has the desired implied semantics. Invalid Use of Roles, States, and Properties aria-selected aria-checked aria-haspopup aria-activedescendant. WAI-ARIA Authoring Practices 1.1. At this point you should have a basic understanding of how WAI-ARIA is used to support interoperability with assistive technologies. If you are not reusing a WAI-ARIA-enabled widget library and wish to create your own the following steps will guide you through the thought process for creating an accessible widget using WAI-ARIA.

ARIA in HTML. Abstract This specification defines the web developer rules (author conformance requirements) for the use of [wai-aria-1.1] and [dpub-aria-1.0] attributes on [HTML52] elements. It also defines requirements for Conformance Checking tools. Status of This Document This section describes the status of this document at the time of its publication. Other documents may supersede this document. ARIA in HTML is a [HTML52] specification module. Note Feedback and bug reports are welcome. This is a draft document and its contents are subject to change without notice. This document was published by the Web Platform Working Group as a Working Draft.

Publication as a Working Draft does not imply endorsement by the W3C Membership. This document was produced by a group operating under the W3C Patent Policy. This document is governed by the 1 February 2018 W3C Process Document. 1. Strong native semantics or are equal to the implicit ARIA semantics of a given HTML element. <button role="heading">search</button> ARIA - AnySurfer. ARIA, il serait temps de s’y mettre ! | Édition Nº8.

Bien que la mode du web 2.0 soit passée, l’usage massif de javascript pour réaliser des sites web ou désormais de véritables applications en ligne est bel et bien plus que d’actualité.Cette utilisation de javascript et ces nouveaux usages du web ne vont pas sans poser quelques difficultés aux utilisateurs de lecteurs d’écrans. “Utilisateurs de lecteurs d’écrans” avez-vous dit, késako ? Il s’agit principalement d’utilisateurs mal- ou non voyants qui manipulent et accèdent au contenu du web et de leur ordinateur à l’aide d’un outil qui restitue vocalement le contenu et donne des informations sur celui-ci.C’est dans le but de lever ces éventuelles difficultés que le W3C propose une spécification technique nommée ARIA « Accessible Rich Internet Application ».Nous allons donc en étudier les grands principes et voir comment l’utiliser. Qu’est ce qu’ARIA ? Explication ARIA est en fait une surcouche sémantique que l’on vient mettre par-dessus un langage existant tel que HTML, SVG, XML, etc.

Note. Supported States and Properties | Accessible Rich Internet Applications (WAI-ARIA) 1.0. 1. Introduction§ This section is non-normative. The goals of this specification include: expanding the accessibility information that may be supplied by the author; requiring that supporting host languages provide full keyboard support that may be implemented in a device-independent way, for example, by telephones, handheld devices, e-book readers, and televisions; improving the accessibility of dynamic content generated by scripts; and providing for interoperability with assistive technologies. WAI-ARIA is a technical specification that provides a framework to improve the accessibility and interoperability of web content and applications. This document is primarily for developers creating custom widgets and other web application components. This draft currently handles two aspects of roles: user interface functionality and structural relationships. The role taxonomy is designed in part to support the common roles found in platform accessibility APIs.

Note 1.2 Target Audience§ 2. Example 1. OpenAjax Accessibility: OpenAjax Examples. Introduction à WAI ARIA (traduction) · Les intégristes. Grégoire Dierendonck Cet article est destiné à des personnes ne connaissant pas ARIA. Vous devriez avoir une bonne connaissance du langage HTML et des problèmes que peuvent rencontrer les personnes handicapées sur le web. Connaître quelques application web « riches » (RIA) d’un point de vue utilisateur serait un plus. Après avoir lu cet article, vous comprendrez à quoi sert ARIA, comment l’intégrer à vos sites, et comment l’utiliser dès immédiatement et même sur le plus simple des sites pour le rendre plus accessible. Introduction Le langage HTML (HyperText Markup Language) n’a pas été conçu pour créer des applications web. Malheureusement, les techniques utilisées pour outrepasser ces limitations ne sont absolument pas accessibles.

Les mises à jour sont souvent mal perçues par les personnes utilisant une technologie d’assistance. Petit historique du langage HTML Applications web Reproduction d’applications bureau Requêtes serveur en arrière plan Reproduire des composants riches (widgets) main. DHTML Style Guide Working Group – AOL Access. The DHTML Style Guide Working Group (DSGWG) has come together to create a recommendation for keyboard shortcuts to be used in website widgets. We realize that many keystrokes are already in use by various operating systems, user interfaces, and assistive technology. Therefore our task is to recommend the best, most intuitive, most international friendly shortcut keys possible without regard to their current use.

It is hoped that developers, AT vendors, and Browser manufactures will use these as guidelines, but understand it may not be practical or possible given their individual constraints. For more information about Key-navigable custom JavaScript widgets see the Codetalks Wiki [codetalks.org no longer exists. Accordion See Tab Panel. Alert Example: A message with important information (ARIA Alert). Example: An alert (ARIA active region) does not require any keyboard support. Auto Complete Button Checkbox Combobox Date Picker Dialog (Modal) Using NVDA to Evaluate Web Accessibility. You are here: Home > Articles > Using NVDA to Evaluate Web Accessibility Introduction This article is designed to help users who are new to NonVisual Desktop Access (NVDA) learn the basic controls for testing web content, and to serve as a reference for the occasional NVDA user. NonVisual Desktop Access (NVDA) is a free and open source screen reader for the Microsoft Windows operating system. It supports over 20 languages and can run on any computer entirely from a USB drive with no installation.

It is important to evaluate the accessibility of web content with a screen reader, but screen readers can be very complicated programs for the occasional user, so many people avoid them. While reading this article, keep a few things in mind: This article does not contain a comprehensive list of NVDA shortcuts.

Getting Started NVDA is open-source software. Note The NVDA key is set to the Insert key by default, but it can be changed to the Caps lock key when installing NVDA for the first time. Reading. Accessibilité numérique : bonne ou mauvaise nouvelle ? Notes on ARIA by Taylor Hunt on CodePen.