Regarding labels and descriptions, "If they can't
get this right, there's really no hope for them to build an accessible
app."
That's true, however labeling with ARIA can
encompass supplementary descriptive text as well as explicit label text, and if
role=dialog is applied and one of these, such as form field constraint data for
example, is missing, it renders the critical data entirely inaccessible for NVDA
users, since only active elements can receive keyboard focus within a container
including role=dialog, because Browse Mode is not allowed.
"We don't document general programming
practices."
I understand that, but if you are adding
role=dialog automatically, you are forcing developers to either remove it
manually or for them to be susceptible to all of the associated pitfalls without
general guidance on how to ensure accessibility as a result.
Regarding the use of tabindex=0 and role=document,
"How is this related to the dialog? Placing aria-hidden on the entirety of the
page is equivalent to a modal (which is all ARIA really supports, right?) So the
user isn't going to be navigating to other content regions while a modal dialog
is open anyway."
Since you are providing an empty container that
developers can populate with any type of markup, it's necessary to ensure that
all types can be accessed by screen readers. I understand that the assumption is
that only active elements will be included within a modal, but I've found that
this is rare, since descriptive static text is often included to identify the
purpose, supplementary details such as license data or help text, and various
other types of content. Also, structured data can also be added, such as data
table markup in some cases. Since it's literally impossible to enter Browse Mode
using NVDA within a container including role=dialog, all of this static content
will be 100% inaccessible unless it is marked up using a method such as
role=document and tabindex=0 within the dialog container.
From the W3C Roles Model: http://www.w3.org/TR/wai-aria/roles#document
"When
the user navigates an element assigned the role of document, assistive
technologies that typically intercept standard keyboard events SHOULD switch to
document browsing mode, as opposed to passing keyboard events through to the web
application. The document role informs user agents of the need to augment
browser keyboard support in order to allow users to visit and read any content
within the document region. In contrast, additional commands are not necessary
for screen reader users to read text within a region with the application role,
where if coded in an accessible manner, all text will be semantically associated
with focusable elements. An important trait of documents is that they have text
which is not associated with widgets or groups thereof."
"Can you provide concrete examples where not using
the role is better than using the role?"
Yes, of course.
I've built three identical dialog content
containers that include mixed content. All of the elements within the container
are ones I've seen implemented publically in the past three years. I've not
included any visual styling since it's not applicable for the demo.
The first includes no role=dialog, and is fully
accessible in IE, FF, Chrome, and Safari using JAWS, NVDA, and VoiceOver.
http://whatsock.com/test/without-role-dialog.htm
A
screen reader user can arrow through the content in the Virtual Buffer or tab
between the active elements, and all of the textual information is
accessible.
This second page includes role=dialog on the same
container, as well as all of the requisite ARIA attributes including tabindex=0
and role=document to ensure accessibility for NVDA users.
http://whatsock.com/test/with-role-dialog.htm
Even
so, in FF using NVDA, it's impossible to read the explicit label for the File
Upload field because the edit field is automatically taken out of the tab order
by the browser.
Now, this third page includes only role=dialog and
aria-label and includes no other ARIA attributes to ensure accessibility for the
embedded content. If a developer is unaware of what role=dialog actually does,
and there is no general ARIA guidance to indicate what is required, then this is
the most likely way that this will be implemented.
http://whatsock.com/test/with-only-role-dialog.htm
You
can see that all of the static content and supplementary form field text is
totally inaccessible for NVDA users in IE, FF, and Chrome.
So basically, all of the markup changes done in the
second dialog are to fix major accessibility issues caused by adding role=dialog
on the first dialog that is already fully accessible without
role=dialog.
As a side note, all of the same issues occur for
role=alertdialog and role=application as well.
Also, if you want to hide the background content
for VoiceOver users on iOS touch screen devices, role=dialog won't do anything.
Only the aria-hidden method works for this.
----- Original Message -----
Sent: Sunday, January 19, 2014 1:04
PM
Subject: Re: [free-aria] jQuery UI 1.10.4
is out with bug fixes and accessibility improvements