- From: Fred Esch <fesch@us.ibm.com>
- Date: Thu, 4 Feb 2016 16:14:30 -0500
- To: "Chaals McCathie Nevile" <chaals@yandex-team.ru>
- Cc: public-svg-a11y@w3.org
- Message-Id: <201602042117.u14LHLFt017330@d03av04.boulder.ibm.com>
Chaals,
Given that the SVG are inline and not using an HTML img element, they can't
use a longdesc. An alternative is to use aria-describedby on the SVG
element or parent div element. Is this an appropriate use case for SVG
markup or should we be more concerned about existing usability?
I forgot to provide the link to CSS Media Queries Level 4 in the initial
email. https://www.w3.org/TR/mediaqueries-4/
Regards,
Fred Esch
Watson, IBM, W3C
Accessibility
IBM Watson Watson Release Management and Quality
From: "Chaals McCathie Nevile" <chaals@yandex-team.ru>
To: public-svg-a11y@w3.org, Fred Esch/Arlington/IBM@IBMUS
Date: 02/03/2016 08:52 PM
Subject: Re: syntax diagrams in CSS Media Queries Level 4
On Wed, 03 Feb 2016 22:31:38 +0100, Fred Esch <fesch@us.ibm.com> wrote:
> 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?
In general the surrounding text explains what you need, but rather more
verbosely.
> How should the SVG diagrams be made accessible?
About the same way as
http://svg-access-w3cg.github.io/use-case-examples/rectrack2-notes.html
Links, highlighting, simple structure.
You could make the things where there are a set of options into a single
group and describe it in one hit.
> Do you think these diagrams should be referred to as 'railroad diagrams'
> or 'syntax diagrams'?
I don't care. But it should be consistent throughout the document.
> 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.
I'd rather a longdesc. In many cases the content required is already
somewhere, and you don't want to repeat it twice over.
> What are your opinions on how to provide accessibility to the diagrams?
What I said above.
> 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.
I don't think caption is the way to explain everything, but the A is good
enough for a caption with something like the B in longdesc.
cheers
> 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 diagramA. 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 EschWatson, IBM, W3C Accessibility
>
> [IBM Watson] Watson Release Management and Quality
>
>
>
--
Charles McCathie Nevile - web standards - CTO Office, Yandex
chaals@yandex-team.ru - - - Find more at http://yandex.com
--1__
BBF5DCDFDEEDF88f9e8a93df938690918c0ABBF5DCDFDEEDF8
Content-Transfer-Encoding: quoted-printable
Content-type: text/html; charset=US-ASCII
Content-Disposition: inline
<html><body><p>Chaals,<br><br>Given that the SVG are inline and not using an HTML img element, they can't use a longdesc. An alternative is to use aria-describedby on the SVG element or parent div element. Is this an appropriate use case for SVG markup or should we be more concerned about existing usability?<br><br>I forgot to provide the link to CSS Media Queries Level 4 in the initial email. <a href="https://www.w3.org/TR/mediaqueries-4/">https://www.w3.org/TR/mediaqueries-4/</a><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__=0ABBF5DCDFDEEDF88f9e8a93df938690918c0AB@" 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><img width="16" height="16" src="cid:2__=0ABBF5DCDFDEEDF88f9e8a93df938690918c0AB@" border="0" alt="Inactive hide details for "Chaals McCathie Nevile" ---02/03/2016 08:52:17 PM---On Wed, 03 Feb 2016 22:31:38 +0100, Fred Esch <f"><font color="#424282">"Chaals McCathie Nevile" ---02/03/2016 08:52:17 PM---On Wed, 03 Feb 2016 22:31:38 +0100, Fred Esch <fesch@us.ibm.com> wrote: > All,</font><br><br><font size="2" color="#5F5F5F">From: </font><font size="2">"Chaals McCathie Nevile" <chaals@yandex-team.ru></font><br><font size="2" color="#5F5F5F">To: </font><font size="2">public-svg-a11y@w3.org, Fred Esch/Arlington/IBM@IBMUS</font><br><font size="2" color="#5F5F5F">Date: </font><font size="2">02/03/2016 08:52 PM</font><br><font size="2" color="#5F5F5F">Subject: </font><font size="2">Re: syntax diagrams in CSS Media Queries Level 4</font><br><hr width="100%" size="2" align="left" noshade style="color:#8091A5; "><br><br><br><tt>On Wed, 03 Feb 2016 22:31:38 +0100, Fred Esch <fesch@us.ibm.com> wrote:<br><br>> All,<br>><br>> Media Queries Level 4 has 4 SVG diagrams. I would like us to provide <br>> recommendations to the CSS WG >on how the SVG files should be handled <br>> and provide text descriptions for them if appropriate. Here are some <br>> questions.<br><br>> Is some form of accessibility or label needed or is the surrounding text <br>> enough?<br><br>In general the surrounding text explains what you need, but rather more <br>verbosely.<br><br>> How should the SVG diagrams be made accessible?<br><br>About the same way as <br></tt><tt><a href="http://svg-access-w3cg.github.io/use-case-examples/rectrack2-notes.html">http://svg-access-w3cg.github.io/use-case-examples/rectrack2-notes.html</a></tt><tt><br><br>Links, highlighting, simple structure.<br><br>You could make the things where there are a set of options into a single <br>group and describe it in one hit.<br><br>> Do you think these diagrams should be referred to as 'railroad diagrams'<br>> or 'syntax diagrams'?<br><br>I don't care. But it should be consistent throughout the document.<br><br>> Given the state of SVG accessibility I think they should wrap the SVG in <br>> a HTML figure element and provide a HTML figcaption element for each.<br><br>I'd rather a longdesc. In many cases the content required is already <br>somewhere, and you don't want to repeat it twice over.<br><br>> What are your opinions on how to provide accessibility to the diagrams?<br><br>What I said above.<br><br>> I have two proposals for captions for each diagram, provided below. <br>> What do you all think would be appropriate (assuming you agree that a <br>> caption is the way to go). Also note, in the suggested captions I use <br>> the term syntax diagram - since they are talking about the syntax of CSS <br>> media queries, whereas they use the term 'railroad diagram' in section 3.<br><br>I don't think caption is the way to explain everything, but the A is good <br>enough for a caption with something like the B in longdesc.<br><br>cheers<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> <br>> alternate route may have either an <em>only</em>, <em>not</em> or no <br>> modifier and then goes through a <em>media type</em> then route either <br>> goes through an empty branch or a branch with <em>and</em> and an <br>> <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>, <br>> alternate empty branch, alternate main route with a <em>comma</em> in a <br>> loop<br>><br>> Sec 2.4 svg railroad diagram<br>> A. syntax diagram showing three forms of media feature: a feature name <br>> with a value, only a feature name or a range form.B. syntax diagram: <br>> three routes available, route 1 has a <em>feature name</em> <em>:</em> <br>> ><em>feature value</em>, route 2 has (only) a <em>feature name</em>, <br>> route 3 has a <em>range form</em><br>><br>> Sec 2.4.3 svg railroad diagramA. syntax diagram showing range forms. <br>> there are two range forms one has a pair of feature name/values <br>> separated by one of the following operators (= < <= > >=). The second <br>> form has a value operator feature name operator value. There are two <br>> flavors of the second form one flavor uses either < or <= operators and <br>> the other flavor use either > or >= operators.<br>> B. syntax diagram: three main routes, the first route goes through a <br>> <em>feature name/value</em> >then it has a branch for each of the <br>> operators <em>=</em> <em><</em> <em><=</em> <em>></em> <em>>=</>em> that <br>> rejoin then goes through a second <em>feature name/value</em>. The <br>> second route goes >through a <em>value</em> and branches for each <br>> operator <em><</em> and <em><=</em> rejoining then ><em>feature <br>> name</em> and branches for each operator <em><</em> and <em><=</em> and <br>> rejoining for >the second <em>value</em>. The third route goes through a <br>> <em>value</em> and branches for each >operator <em>></em> and <br>> <em>>=</em> rejoining then <em>feature name</em> and branches for each <br>> >operator <em>></em> and <em>>=</em> and rejoining for the second <br>> <em>value</em>.<br>><br>><br>><br>>>> Regards,<br>><br>> Fred EschWatson, IBM, W3C Accessibility<br>><br>> [IBM Watson] Watson Release Management and Quality<br><br>><br>><br>><br><br><br><br>-- <br>Charles McCathie Nevile - web standards - CTO Office, Yandex<br> chaals@yandex-team.ru - - - Find more at </tt><tt><a href="http://yandex.com">http://yandex.com</a></tt><tt><br><br></tt><br><BR>
</body></html>
--1__
BBF5DCDFDEEDF88f9e8a93df938690918c0ABBF5DCDFDEEDF8--
--0__
BBF5DCDFDEEDF88f9e8a93df938690918c0ABBF5DCDFDEEDF8
Content-type: image/gif;
name="0A479066.gif"
Content-Disposition: inline; filename="0A479066.gif"
Content-ID: <1__
BBF5DCDFDEEDF88f9e8a93df938690918c0AB@>
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__
BBF5DCDFDEEDF88f9e8a93df938690918c0ABBF5DCDFDEEDF8
Content-type: image/gif;
name="graycol.gif"
Content-Disposition: inline; filename="graycol.gif"
Content-ID: <2__
BBF5DCDFDEEDF88f9e8a93df938690918c0AB@>
Content-Transfer-Encoding: base64
R0lGODlhEAAQAKECAMzMzAAAAP///wAAACH5BAEAAAIALAAAAAAQABAAAAIXlI+py+0PopwxUbpu
ZRfKZ2zgSJbmSRYAIf4fT3B0aW1pemVkIGJ5IFVsZWFkIFNtYXJ0U2F2ZXIhAAA7
--0__
BBF5DCDFDEEDF88f9e8a93df938690918c0ABBF5DCDFDEEDF8--
Received on Thursday, 4 February 2016 21:18:00 UTC