A beginner’s guide to web accessibility
ARIA Landmark Roles are helpful landmarks that can be used by AT to navigate a website.
Note: When you validate html using landmark roles, you’ll receive a warning stating these roles are redundant. In HTML5, several of the landmark roles are implicit via the native structural element which is supported by most modern desktop browsers with the exception of IE and iOS Safari. So, if you support IE and iOS browsers, you’ll want to use the landmark roles. For more information, read Quick Tip: Aria Landmark Roles and HTML5 Implicit Mapping.
In dealing with role=”presentation” and aria-hidden=”true” you may find that they both have deceptively similar functions when it relates to how they interact with assistive technology (screen readers). Before we dig into the difference between these two attributes we first need to learn a little bit about how accessibility in a Web browser works and this thing called: The Accessibility Tree
The Accessibility Tree
The accessibility tree is a mapping of objects within an HTML document that need to be exposed to assistive technology (if you’re familiar with the DOM, it’s a subset of the DOM). Anything that communicates aspects of the UI or has a property or relationship that needs to be exposed, gets added to the tree.
Curated by (Lifekludger)
Read full article at Source: The Accessibility Difference Between Aria-hidden and role=”presentation”
No prior knowledge of WAI-ARIA is assumed, although it is recommended you read my introduction to WAI-ARIA article before starting this article. A basic knowledge of scripting is assumed, and is necessary to understand exactly what is going on in the code example, but this knowledge is not necessary to understand the basic concepts discussed.
After reading this article you will have an understanding of how to structure applications with drag and drop functionality so they are accessible.The term drag and drop infers using a mouse to move an object from one location to another.
Curated by (Lifekludger)
Read full article at Source: Dev.Opera — Accessible Drag and Drop Using WAI-ARIA
The basics of getting started with accessibility and AngularJS. Includes an introduction to ARIA, keyboard navigation, Angular’s ngAria module, and how thinking about accessibility can lead to better code and an improved user experience for all users.
The question of whether HTML elements need the addition of ARIA
roleattibutes to expose their semantics, is one that surfaces on a regular basis. The answer is maybe for a subset of elements, but increasingly no.
In some cases the semantics of a HTML element can be expressed by an ARIA role, state or property. This is fiendishly known as the element’s ‘Default Implicit ARIA semantics‘ARIA roles add nothing to default semantics of most elements
None of the elements defined in HTML4 need ARIA roles added to expose their default semantics. Adding an ARIA role is extra work for no gain and could lead to pain for you or somebody else. The new features defined in HTML5 , where implemented, now have their default semantics exposed by most browsers.
Visual ARIA allows engineers, testers, educators, and students to physically observe ARIA usage within web technologies, including ARIA 1.1 structural, live region, and widget roles, proper nesting and focus management, plus requisite and optional supporting attributes to aid in development.
At the top level, the first concept to understand is the platform Accessibility API, which is an integral part of each Operating System. This is MSAA/UIA/IAccessible2 on Windows, AT-SPI/IAccessible2 on Linux, the OS X Accessibility Protocol on Mac and iOS, and so on.It may not be obvious, but these top level accessibility APIs have a direct relationship with web technology development, and are critical for the accessibility of interactive ARIA Widgets in particular.
For example, at the platform level in the Windows OS, there is a Checkbox control type. This is documented at the Microsoft Developer Network’s Checkbox Class.When a control such as this, or of any other type, is rendered as part of the Graphical User Interface (GUI), the control and all of its public properties and states, is included in the Accessibility Tree.
The Accessibility Tree is a hierarchical construct of objects that include accessible names and descriptions, plus supporting states and properties, which Assistive Technologies can interface with to enhance accessibility.
Curated by (Lifekludger)
Read full article at Source: The Accessibility Tree: A Training Guide for Advanced Web Development
That’s it. That’s the meat of the post. The title covers it all. You don’t need to read any further. You are, of course, welcome to continue since I spent all this time writing it.
For those who aren’t familiar with , the element is intended to be a container for the primary content of your page.
2.1 First rule of ARIA use
If you can use a native HTML element [HTML51] or attribute with the semantics and behaviour you require already built in, instead of re-purposing an element and adding an ARIA role, state or property to make it accessible, then do so.