background preloader

ACCESSIBILITY

Facebook Twitter

Colorable. Color combination contrast tester Takes a set color palette and shows contrast values for every possible combination.

colorable

This is useful for finding safe color combinations with predefined colors and includes pass/fail scores for the WCAG accessibility guidelines. Getting Started.

Tools

ARIA, il serait temps de s’y mettre ! 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.

ARIA, il serait temps de s’y mettre !

“Utilisateurs de lecteurs d’écrans” avez-vous dit, késako ? Welcome to GOV.UK. Practical ARIA Examples. Accessible input tooltips with no javascript The HTML.

Practical ARIA Examples

Using ARIA - Accessibility. Roles Composite roles The techniques below describes each composite role as well as their required and optional child roles.

Using ARIA - Accessibility

Combobox Grid (including row, gridcell, rowheader, columnheader roles) Listbox (including option role) Menu Menubar Radiogroup (see radio role) Tablist (including tab and tabpanel roles) Tree Treegrid Document structure roles. ARIA in HTML. Abstract This specification defines the web developer rules (author conformance requirements) for the use of [wai-aria-1.1] attributes on [HTML51] elements.

ARIA in HTML

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. "It's Alive!": Apps That Feed Back Accessibly. It’s one thing to create a web application and quite another to create an accessible web application.

"It's Alive!": Apps That Feed Back Accessibly

That’s why Heydon Pickering1, both author and editor at Smashing Magazine, wrote an eBook Apps For All: Coding Accessible Web Applications2, outlining the roadmap for the accessible applications we should all be making. The following is an extract from the chapter “It’s Alive” from Heydon’s book, which explores how to use ARIA live regions. Javascript applications are driven by events and the user should be informed of what important events are happening in the interface. Live regions help us provide accessible messaging systems, keeping users informed of events in a way that is compatible with assistive technologies. Getting The Message Link.

On HTML belts and ARIA braces (The Default Implicit ARIA semantics they didn’t want you to know about) The question of whether HTML elements need the addition of ARIA role attibutes to expose their semantics, is one that surfaces on a regular basis.

On HTML belts and ARIA braces (The Default Implicit ARIA semantics they didn’t want you to know about)

The answer is maybe for a subset of elements, but increasingly no. Patrick Lauke modelling last seasons must have; HTML5 casual Polo neck with lumbar support [button] belt and [role] braces combo. ARIA roles add nothing to default semantics of most elements In some cases the semantics of a HTML element can be expressed by an ARIA role, state or property. Accessible Technology. UW Promotes IT Accessibility Guidelines The University of Washington values diverse experiences and perspectives and strives to fully include everyone who engages with the UW.

Accessible Technology

Inaccessible information technology (IT) negatively impacts people with a variety of disabilities, including mobility/orthopedic impairments, sensory impairments, specific learning disabilities, attention deficits, autism spectrum disorders, speech impairments, health impairments, and psychiatric conditions. For many years, UW-IT Accessible Technology Services and other IT leaders have consulted with campus units in making IT accessible to all faculty, students, staff and visitors. Introduction à WAI ARIA (traduction) · Les intégristes.

Aural UI of HTML elements. How HTML elements are supported by screen readers Typical support patterns of HTML elements by screen readers: Identification of an element by role as the user moves through the content.

Aural UI of HTML elements

Announcement of the text content of an element. Announcement of the start and end of an element. Change in voice as the content of an element is announced. Note: The combination of patterns supported varies from element to element and support for a particular element varies between screen reader software. Accessibility in HTML5 – Clarissa Peterson. This is a summary of my session on HTML5 accessibility at Accessibility Camp Toronto (I didn’t use slides for my talk, so you’re getting this instead).

Accessibility in HTML5 – Clarissa Peterson

Accessibility is not a niche area of web design: everybody who works on the web needs to be interested in accessibility. You should try to make your websites as accessible as possible. For some of you it’s a legal obligation, but for everyone else it’s just the right thing to do. What Is Accessibility Accessibility for the web means making sure that our web pages and applications are available to everyone, including people with disabilities. People who are blind use assistive technology such as screen reader software (which reads the contents of the page out loud), and less frequently a braille display that converts text on the screen to braille. For those who are hearing impaired, most of the web is accessible, except for video and audio content, so for those we need to provide a text alternative, such as captioning or a transcription.

WHY ACCESSIBILITY ?

AccDC Technical Style Guide. An ARIA Menu is a simple control type that can easily be made accessible. Expected behaviors: A keyboard accessible mechanism opens the menu, the arrow keys are used to browse available menu items or open and close submenus, pressing Tab will close all open menus, and pressing Escape will close the currently open menu. ARIA menus can be implemented in two ways, horizontally or vertically. This has nothing to do with what they look like, since the CSS styling can be set to whatever you like, but rather, refers to the keyboard interaction model for each menu. A vertical menu is navigated using the Up and Down arrow keys to scroll through menu items, and Left and Right are used to close or open submenus.

A horizontal menu is navigated using the Left and Right arrow keys to scroll through menu items, and Up and Down are used to close or open submenus. Additionally, a menu may be triggered using either the left or right click, with accompanying behaviors for each. The ARIA Role Conformance Matrices. The Row role establishes a relationship between owned Columnheader, Rowheader, and Gridcell elements. The Row role must include child elements with role="columnheader", role="rowheader", or role="gridcell". Row is a structural equivalent to the tr element in an HTML table element. The Visual ARIA Bookmarklet. Visual ARIA can be used within classrooms by educators to physically show sighted students what ARIA does and how it works, and how the improper use of ARIA causes accessibility issues when misapplied. Sighted students can use Visual ARIA to evaluate their own projects as they learn accessible coding practices, with real-time feedback to identify their mistakes and coach them when necessary.

Online learning programs can incorporate Visual ARIA to provide real-time feedback as students build test widgets to practice through experience and repetition. Sighted Quality Analysis teams can use Visual ARIA to reliably evaluate ARIA usage and related interactivity for all public and private services and products, without having to first understand or have experience using Assistive Technologies in advance. The bookmarklet script includes a small amount of JavaScript, which loads the Visual ARIA JavaScript setup file. Guide sur l'ergonomie et l'accessibilité du Web avec WAI-ARIA.

Generalities

Best Practices. Accessibility API. Keyboard accessibility. Patterns - The A11Y Project. Practical ARIA Examples. Accessible input tooltips with no javascript The HTML (ARIA and ARIA-associated attributes displayed in green) <form action=""><fieldset><legend>Login form</legend><div><label for="username">Your username</label><input type="text" id="username" aria-describedby="username-tip" required /><div role="tooltip" id="username-tip">Your username is your email address</div></div><div><label for="password">Your password</label><input type="text" id="password" aria-describedby="password-tip" required /><div role="tooltip" id="password-tip">Was emailed to you when you signed up</div></div></fieldset></form> A few notes No javascript is required because no states (attributes) need switching — the aria-describedby and id relationships are just there.

Button controlled input with live feedback Because number input support is sort of patchy. The aria-live="assertive" attribute means that the value of the text field will be spoken whenever it changes. Léonie Watson: Design like we give a damn! ARIA-level (Property) - Maxability. The aria-level (property) defines the hierarchical structure of an element within a document. Similar to all other ARIA roles, states and properties aria-level (property) is used only when the native semantics cannot provide the structural level of an element, or when the user agent including assistive technologies cannot identify the level of any element.

Aria-level is used for defining a heading structure, level of a list item within a list, nested tablist, treeitems within a tree structure , nested grids etc. The aria-level property will have the value as integer greater than or equal to one. The increase in level defines the depth of the level. Saying this in the same section multiple elements can have same level. The aria-level property has to be given to the child element when the widget or component have parent – child relationship. WAI-ARIA 1.0 User Agent Implementation Guide. This section is informative. In traditional desktop graphical user interface (GUI) applications, components of the user interface (UI) are displayed when needed and hidden when not needed based on user interactions. Accessibility application programming interfaces (APIs) are used to communicate semantic information about the user interface to assistive technology software used by people with disabilities. These APIs constitute a contract between applications and assistive technologies, such as screen readers, magnifiers, alternate input devices, and speech command and control, to enable them to access the appropriate semantics needed to produce a usable alternative to interactive applications.

For example, screen reading software for blind users can determine whether a particular UI component is a menu, button, text field, list box, etc. In traditional static Web pages, the HTML elements provided the necessary semantic information.

Breadcrumb

Dropdown. Error message. Form. List. Menu. Modal. Tabs. Tooltip. Tree. The plague of outline:0. I am seeing an increasingly alarming trend in the implementation of CSS on web sites – the inclusion of outline:0 or outline:none. The outline CSS property allows you to define the visual outline that displays when elements are selected or have focus. Otherwise known as the focus indicator, it is seen as the dotted lines that surround links and buttons when you tab to them with the keyboard.

In some rare instances where designs are rigidly defined with pixel precision and when the browser improperly changes the size of an element when the outline appears, pages can break (even though the CSS spec indicates that the outline should take no space). In other cases, designers are annoyed by the fact that the focus indicator remains visible when a user activates a link and then returns to the original page. As a result, developers are more and more removing the outline behavior from their page elements. For example, try to navigate cnn.com in Firefox while using only your keyboard. CSS outline property - outline: none and outline: 0. The Paciello Group – Your Accessibility Partner (WCAG 2.0/508 audits, VPAT, usability and accessible user experience)

Will HTML5 make the use of WAI-ARIA in HTML redundant? The short answer is definitley not. Clean markup plea — Anne’s Blog. Yesterday there was some noise surrounding HTML5 and the myth of WAI-ARIA redundance. HTML5 and WAI-ARIA. I’ve recently been struck by a parallel: the differences between usability and accessibility are very similar to the differences between writing the HTML5 spec and covering accessibility requirements. Creating the HTML5 spec is like usability practice.