- From: Fred Esch <fesch@us.ibm.com>
- Date: Wed, 3 Feb 2016 16:31:38 -0500
- To: <public-svg-a11y@w3.org>
- Message-Id: <201602032141.u13Lfqag005433@d01av02.pok.ibm.com>
All,
Media Queries Level 4 has 4 SVG diagrams. I would like us to provide
recommendations to the CSS WG on how the SVG files should be handled and
provide text descriptions for them if appropriate. Here are some
questions. Is some form of accessibility or label needed or is the
surrounding text enough? How should the SVG diagrams be made accessible?
Do you think these diagrams should be referred to as 'railroad diagrams' or
'syntax diagrams'?
Given the state of SVG accessibility I think they should wrap the SVG in a
HTML figure element and provide a HTML figcaption element for each. What
are your opinions on how to provide accessibility to the diagrams?
I have two proposals for captions for each diagram, provided below. What
do you all think would be appropriate (assuming you agree that a caption is
the way to go). Also note, in the suggested captions I use the term syntax
diagram - since they are talking about the syntax of CSS media queries,
whereas they use the term 'railroad diagram' in section 3.
Sec 2. svg railroad diagram
A. syntax diagram of media query described in this section.
B. syntax diagram main route goes through a <em>media condition</em>
alternate route may have either an <em>only</em>, <em>not</em> or no
modifier and then goes through a <em>media type</em> then route either
goes through an empty branch or a branch with <em>and</em> and an <em>media
condition</em>
Sec 2.1 svg railroad diagram
A. syntax diagram of comma separated media query list.
B. syntax diagram: main route goes through a <em>media query</em>,
alternate empty branch, alternate main route with a <em>comma</em> in a
loop
Sec 2.4 svg railroad diagram
A. syntax diagram showing three forms of media feature: a feature name with
a value, only a feature name or a range form.
B. syntax diagram: three routes available, route 1 has a <em>feature
name</em> <em>:</em> <em>feature value</em>, route 2 has (only) a
<em>feature name</em>, route 3 has a <em>range form</em>
Sec 2.4.3 svg railroad diagram
A. syntax diagram showing range forms. there are two range forms one has a
pair of feature name/values separated by one of the following operators (=
< <= > >=). The second form has a value operator feature name operator
value. There are two flavors of the second form one flavor uses either < or
<= operators and the other flavor use either > or >= operators.
B. syntax diagram: three main routes, the first route goes through a
<em>feature name/value</em> then it has a branch for each of the operators
<em>=</em> <em><</em> <em><=</em> <em>></em> <em>>=</em> that rejoin then
goes through a second <em>feature name/value</em>. The second route goes
through a <em>value</em> and branches for each operator <em><</em> and
<em><=</em> rejoining then <em>feature name</em> and branches for each
operator <em><</em> and <em><=</em> and rejoining for the second
<em>value</em>. The third route goes through a <em>value</em> and branches
for each operator <em>></em> and <em>>=</em> rejoining then <em>feature
name</em> and branches for each operator <em>></em> and <em>>=</em> and
rejoining for the second <em>value</em>.
Regards,
Fred Esch
Watson, IBM, W3C
Accessibility
IBM Watson Watson Release Management and Quality
--1__
BBF5DDDFE7068C8f9e8a93df938690918c0ABBF5DDDFE7068C
Content-Transfer-Encoding: quoted-printable
Content-type: text/html; charset=US-ASCII
Content-Disposition: inline
<html><body><p>All,<br><br><br>Media Queries Level 4 has 4 SVG diagrams. I would like us to provide recommendations to the CSS WG on how the SVG files should be handled and provide text descriptions for them if appropriate. Here are some questions. Is some form of accessibility or label needed or is the surrounding text enough? How should the SVG diagrams be made accessible? Do you think these diagrams should be referred to as 'railroad diagrams' or 'syntax diagrams'? <br><br>Given the state of SVG accessibility I think they should wrap the SVG in a HTML figure element and provide a HTML figcaption element for each. What are your opinions on how to provide accessibility to the diagrams? <br><br>I have two proposals for captions for each diagram, provided below. What do you all think would be appropriate (assuming you agree that a caption is the way to go). Also note, in the suggested captions I use the term syntax diagram - since they are talking about the syntax of CSS media queries, whereas they use the term 'railroad diagram' in section 3.<br><br>Sec 2. svg railroad diagram<br>A. syntax diagram of media query described in this section.<br>B. syntax diagram main route goes through a <em>media condition</em> alternate route may have either an <em>only</em>, <em>not</em> or no modifier and then goes through a <em>media type</em> then route either goes through an empty branch or a branch with <em>and</em> and an <em>media condition</em><br><br>Sec 2.1 svg railroad diagram<br>A. syntax diagram of comma separated media query list.<br>B. syntax diagram: main route goes through a <em>media query</em>, alternate empty branch, alternate main route with a <em>comma</em> in a loop<br><br>Sec 2.4 svg railroad diagram<br>A. syntax diagram showing three forms of media feature: a feature name with a value, only a feature name or a range form. <br>B. syntax diagram: three routes available, route 1 has a <em>feature name</em> <em>:</em> <em>feature value</em>, route 2 has (only) a <em>feature name</em>, route 3 has a <em>range form</em><br><br>Sec 2.4.3 svg railroad diagram <br>A. syntax diagram showing range forms. there are two range forms one has a pair of feature name/values separated by one of the following operators (= < <= > >=). The second form has a value operator feature name operator value. There are two flavors of the second form one flavor uses either < or <= operators and the other flavor use either > or >= operators.<br>B. syntax diagram: three main routes, the first route goes through a <em>feature name/value</em> then it has a branch for each of the operators <em>=</em> <em><</em> <em><=</em> <em>></em> <em>>=</em> that rejoin then goes through a second <em>feature name/value</em>. The second route goes through a <em>value</em> and branches for each operator <em><</em> and <em><=</em> rejoining then <em>feature name</em> and branches for each operator <em><</em> and <em><=</em> and rejoining for the second <em>value</em>. The third route goes through a <em>value</em> and branches for each operator <em>></em> and <em>>=</em> rejoining then <em>feature name</em> and branches for each operator <em>></em> and <em>>=</em> and rejoining for the second <em>value</em>. <br><br><br>
<table border="0" cellspacing="0" cellpadding="0"><tr valign="top"><td width="473" colspan="2" valign="middle"><div align="center"><font size="4" face="Verdana">Regards, <br><br>Fred Esch <br>Watson, IBM, W3C Accessibility</font></div></td></tr>
<tr valign="top"><td width="130" valign="middle"><img src="cid:1__=0ABBF5DDDFE7068C8f9e8a93df938690918c0AB@" width="163" height="23" alt="IBM Watson" align="bottom"></td><td width="342" valign="middle"><font size="4" face="Verdana">Watson Release Management and Quality </font></td></tr></table><br><BR>
</body></html>
--1__
BBF5DDDFE7068C8f9e8a93df938690918c0ABBF5DDDFE7068C--
--0__
BBF5DDDFE7068C8f9e8a93df938690918c0ABBF5DDDFE7068C
Content-type: image/gif;
name="0F451056.gif"
Content-Disposition: inline; filename="0F451056.gif"
Content-ID: <1__
BBF5DDDFE7068C8f9e8a93df938690918c0AB@>
Content-Transfer-Encoding: base64
iVBORw0KGgoAAAANSUhEUgAAAKMAAAAXCAMAAABQ6Q/RAAADAFBMVEXIx8cxLS5MSUrW1dXx8fE/
Ozzj4+N2c3SRj49oZWaEgYKsq6uenZ26ubmbm5v29vZ7e3tTU1M7OzsfHx/FxcX39/eamppmZmaR
j5AgICCqqqrR0dFaV1gAAAAjHyD///8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAADe7fL7AAADE0lEQVR4nM2WiW7kIAyGTbhz9O6eCL//U6bYGJJOst2dlaqppUm4
+fhtnAH8+gb7sroZxodWGZfA5UxP52+Ic2qVEbLDxujTLXnOTHydSDxNdC7DR+NvYQK02PLQYBDn
z5dRw04GAPibKIBec2GKuZjyrtbosVZr72J397Xyc+suPshsiOUBvRb4xavlzYoA2tI+XEQTFDfT
rkCFiFLIec8Y82jQ0dIhjOU5lmWGa254owKe/J5xPDBqdYHLphZBm08Zi5/nOnEsEUmHwiG6cx3X
Z6k8ID5c6kgHHC4YlblkJHcNlotO7Xp0RVP6lLFIPtTmsuDQDn+FGT4YTy3OXcTFEy85VUYonQMQ
WHWopSIdR83aTYRs5bBD9cz+VjBjyI3RbVEkSu7ed/XF8r18ExXF25ZJiWnk/RhD1S1JlFT5mLGc
B0KYNJG5rtEkLhjPGUVz32Lh2iw+k68WnhqJjeZTldqBr27dFkCz2mlyooxcac0zJUyWM8YKFnn8
KLofdFy7brvwXLctZs+6KScOTrSr6uft2y4SmJqa+tUcxPeKY/iEcc4+W8qNfYUrdSTtYvnRrfE1
rgk1QOqBs207ideoc2gLJGFMtEQ6YQy53OvwA1DifmM86PhQKxSZ66+uI/o6zdVcMmwtRHrBiGbm
XWysp2FTjbERHHUEPXAgtDRxrY5Vfsvph6PebGnFvmcswSnp2PcDcECPdYzkz2M8ziBH9rtl8c/3
Gh/X9TtuOhphWyToedNUzEp0boyZ8zQNnHLrXIhLy5jplBHVINnHmKj+415Lamt+QAdWDkphmcC5
mh8lodvqNsOqDyHw5GjamHjKGLKEj66LuK7i5XfmsVbwdX1+leL9vTiLIiTy8qFFjHwygjQA7j46
sUc/oxpoY4w9YzRW+RbsZeJ135mnJ9ErCuv8T4yqCGH6zYoGOyOXDowSqJ5yRtq6jzq2/z2IL7+l
H58eaWxMiULLlRjUOCU2+kfKNkkDuam8KJP6eqPB0+eIU7PexswpjQdG5AAJEOL1X+vPt/7/cuLg
UP7L/QtHfANvSEKvsxvttAAAAABJRU5ErkJggg=
--0__
BBF5DDDFE7068C8f9e8a93df938690918c0ABBF5DDDFE7068C--
Received on Wednesday, 3 February 2016 21:42:30 UTC