Re: Informative components of w3c specifications

Hi Mark,

Thanks for the use case.  Some thoughts:

> For a sighted user, it is clear when the note ends (its contained
> within a box with a green background.  How does a screen reader user know when
> the non-normative note ends and the normative text resumes?  My suggested
> solution was to add a region role to the div with a aria-label of "informative."

Adding role="note" should be sufficient.  Here is the current structure 
of a Note -- I took this example from the Core Accessibility API 
Mappings 1.1, assuming it is typical.

> <div class="note">
>   <div class="note-title" aria-level="3" role="heading" id="h_note_3">
>     <span>Note</span>
>   </div>
>   <p class="">
>     Note: refer to the <a href="#focus_state_event_table">Table of 
> accessibility <abbr title="Application Programming 
> Interfaces">APIs</abbr> for focus states and events</a> for the rules 
> in this section.
>   </p>
> </div>

First, the entire note is wrapped in a <div class="note">. Even though 
this is relatively semantically neutral, it is exposed as a separate 
accessible object in the a11y tree -- see 
http://rawgit.com/w3c/html-api-map/master/index.html#el-div. Also, the 
inner div has a role of heading, resulting in a heading accessible in 
the a11y tree.  FF exposes these IA2 mappings in the a11y tree:

- section
-- heading, level 3.
--- text:  "Note"
-- paragraph
--- text:  "Note: refer to the"
--- link
---- text: "Table of accessibility Application Programming Interfaces 
for focus states and events
--- text: "for the rules in this section."

The entire note is contained in a separate accessible with role 
IA2_ROLE_SECTION.  The screen reader has information about the 
beginning, end, and contents of the note.

Still, IA2_ROLE_SECTION is relatively bland, and it would be much better 
to use a role of note on the outer <div>.  That results in a 
IA2_ROLE_NOTE accessible:

- note
-- heading, level 3.
--- text:  "Note"
-- paragraph
--- text:  "Note: refer to the"
--- link
---- text: "Table of accessibility Application Programming Interfaces 
for focus states and events
--- text: "for the rules in this section."

> ... with a aria-label of "informative."

Two comments regarding using "informative" as label text:  First, as I 
noted before, that doesn't fit in the sense of the name of a note.  It 
feels more like a description of the section.  Secondly, and more 
importantly, if it is important to inform the screen reader user that 
the section is informative, why not inform all users?  The reason *I* 
know that all notes are informative is because as an editor, I have been 
asked to remove or reword notes that contained normative language.  
Ergo, notes aren't normative.  But, a web developer (i.e, not a W3C spec 
geek) wouldn't automatically know that  a note is only informative.  So, 
if it is important to convey a note's informative status, how about 
including that text in the note itself?  Something like this:

<div role="note" class="note">
   <div class="note-title" aria-level="3" role="heading" id="h_note_3">
     <span>Note (informative) </span>
   </div>
   <p>
     Refer to the ... for the rules in this section.
   </p>
</div>

-- 
;;;;joseph.

'Array(16).join("wat" - 1) + " Batman!"'
            - G. Bernhardt -

Received on Friday, 11 July 2014 14:35:45 UTC