RE: accessibility toolbar
<[email protected]> Wed, 20 May 2020 14:07:59 -0400
| Newsgroups | gmane.org.w3c.accessibility.general |
|---|---|
| Message-ID | <[email protected]> |
<html xmlns:o=3D"urn:schemas-microsoft-com:office:office" xmlns:w=3D"urn:sc=
hemas-microsoft-com:office:word" xmlns:m=3D"http://schemas.microsoft.com/of=
fice/2004/12/omml" xmlns=3D"http://www.w3.org/TR/REC-html40"><head><meta ht=
tp-equiv=3DContent-Type content=3D"text/html; charset=3Dutf-8"><meta name=
=3DGenerator content=3D"Microsoft Word 15 (filtered medium)"><style><!--
/* Font Definitions */
@font-face
{font-family:"Cambria Math";
panose-1:2 4 5 3 5 4 6 3 2 4;}
@font-face
{font-family:Calibri;
panose-1:2 15 5 2 2 2 4 3 2 4;}
/* Style Definitions */
p.MsoNormal, li.MsoNormal, div.MsoNormal
{margin:0in;
margin-bottom:.0001pt;
font-size:11.0pt;
font-family:"Calibri",sans-serif;}
a:link, span.MsoHyperlink
{mso-style-priority:99;
color:blue;
text-decoration:underline;}
.MsoChpDefault
{mso-style-type:export-only;}
@page WordSection1
{size:8.5in 11.0in;
margin:1.0in 1.0in 1.0in 1.0in;}
div.WordSection1
{page:WordSection1;}
--></style></head><body lang=3DEN-US link=3Dblue vlink=3D"#954F72"><div cla=
ss=3DWordSection1><p class=3DMsoNormal>Char,</p><p class=3DMsoNormal><o:p>&=
nbsp;</o:p></p><p class=3DMsoNormal>The toolbar looks very helpful.</p><p c=
lass=3DMsoNormal>These offer a lot of value to end users.</p><p class=3DMso=
Normal>However, they do not necessarily make the site WCAG compliant.</p><p=
class=3DMsoNormal><o:p> </o:p></p><p class=3DMsoNormal>For example, I=
found these issues on the home page after only a few minutes of checking t=
he page with JAWS:</p><p class=3DMsoNormal><o:p> </o:p></p><p class=3D=
MsoNormal>This tool would be more helpful if it was one of the first links/=
buttons on the page and not nearly the last link/button at the very bottom =
of the page.</p><p class=3DMsoNormal>The Skip to content does not work prop=
erly.</p><p class=3DMsoNormal>=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=
=A0=C2=A0=C2=A0 It moves the page up so that visually the navigation items =
are skipped.</p><p class=3DMsoNormal>=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=
=C2=A0=C2=A0=C2=A0=C2=A0 However, from a tabbing and screen reader reading =
order perspective, the both start at the top of the page.</p><p class=3DMso=
Normal>=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0 Therefo=
re, both have not =E2=80=9Cskipped to content=E2=80=9D.</p><p class=3DMsoNo=
rmal>Headings are out of order.</p><p class=3DMsoNormal style=3D'text-inden=
t:.5in'>H2 is immediately followed by h4.</p><p class=3DMsoNormal style=3D'=
text-indent:.5in'>There is an h3 that does not make sense.</p><p class=3DMs=
oNormal style=3D'text-indent:.5in'>H3 is immediately followed by h5.</p><p =
class=3DMsoNormal>There are two regions for Main: one is Main and the other=
is Main navigation Navigation.</p><p class=3DMsoNormal style=3D'text-inden=
t:.5in'>The labeling is not the correct way to label a region since it is r=
epeating the term of the region in its label.</p><p class=3DMsoNormal>The m=
ain menus announce their label and then the term link.</p><p class=3DMsoNor=
mal style=3D'text-indent:.5in'>They do not announce that they are menus tha=
t will show more sub-menus.</p><p class=3DMsoNormal style=3D'text-indent:.5=
in'>Or that they have expanded and are showing those sub-menus.</p><p class=
=3DMsoNormal style=3D'text-indent:.5in'>They are links that also show sub-m=
enus and should announce that fact.</p><p class=3DMsoNormal style=3D'text-i=
ndent:.5in'>Main menus should not be links in and of them selves.</p><p cla=
ss=3DMsoNormal style=3D'text-indent:.5in'>Their sub-menus do the same thing=
.</p><p class=3DMsoNormal style=3D'margin-left:.5in'>This is not the proper=
way to code main menus with sub-menus that also have more sub-menus for no=
n-visual users.<o:p></o:p></p><p class=3DMsoNormal>In the row of years, eac=
h function as tabs but do not announce that fact or which one is selected a=
nd showing its data.</p><p class=3DMsoNormal>The Cookware and Bakeware elem=
ents have this same issue with being tabs but not announcing that fact or w=
hich one is selected and showing its data.</p><p class=3DMsoNormal>In the c=
ontent of these two tabs, there are two links for each item.</p><p class=3D=
MsoNormal style=3D'text-indent:.5in'>One is the image link and the other is=
the text link.</p><p class=3DMsoNormal style=3D'text-indent:.5in'>With ima=
ge links, the image is considered decorative and is not needed as a link if=
the adjacent text is the same label. Only one needs to be a link.</p><p c=
lass=3DMsoNormal>Near the top of the page there are image links and text li=
nks for different utensils with similar issues.</p><p class=3DMsoNormal>=C2=
=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0 The image link an=
nounces a long file name and does not have a proper label.</p><p class=3DMs=
oNormal style=3D'text-indent:.5in'>One is the image link and the other is t=
he text link.<o:p></o:p></p><p class=3DMsoNormal style=3D'text-indent:.5in'=
>With image links, the image is considered decorative and is not needed as =
a link if the adjacent text is the same label. Only one needs to be a link=
.</p><p class=3DMsoNormal style=3D'text-indent:.5in'><o:p> </o:p></p><=
p class=3DMsoNormal><o:p> </o:p></p><p class=3DMsoNormal><o:p> </=
o:p></p><p class=3DMsoNormal style=3D'text-indent:.5in'><o:p> </o:p></=
p><p class=3DMsoNormal style=3D'text-indent:.5in'><o:p> </o:p></p><p c=
lass=3DMsoNormal><o:p> </o:p></p><p class=3DMsoNormal><o:p> </o:p=
></p><p class=3DMsoNormal>Alan Smith</p><p class=3DMsoNormal><o:p> </o=
:p></p><div style=3D'mso-element:para-border-div;border:none;border-top:sol=
id #E1E1E1 1.0pt;padding:3.0pt 0in 0in 0in'><p class=3DMsoNormal style=3D'b=
order:none;padding:0in'><b>From: </b><a href=3D"mailto:ceaster@seattletimes=
.com">Char Easter</a><br><b>Sent: </b>Wednesday, May 20, 2020 1:40 PM<br><b=
>To: </b><a href=3D"mailto:[email protected]">[email protected]</a><br><b>S=
ubject: </b>accessibility toolbar</p></div><p class=3DMsoNormal><o:p> =
</o:p></p><p class=3DMsoNormal><span style=3D'font-size:12.0pt'>Any thought=
s on this accessibility toolbar? <span style=3D'color:black'>It appears on =
the site, <a href=3D"https://farberwarecookware.com/"><span style=3D'color:=
#0563C1'>https://farberwarecookware.com/</span></a></span><o:p></o:p></span=
></p><p class=3DMsoNormal><span style=3D'font-size:12.0pt;color:black'><o:p=
> </o:p></span></p><p class=3DMsoNormal><span style=3D'font-size:12.0p=
t;color:black'>The tool is authored by, </span><span style=3D'font-size:12.=
0pt'><a href=3D"https://hikeorders.com/accessibility/main-accessibility-fea=
tures/#accessibility-tools"><span style=3D'color:#0563C1'>https://hikeorder=
s.com/accessibility/main-accessibility-features/#accessibility-tools</span>=
</a><o:p></o:p></span></p><p class=3DMsoNormal><span style=3D'font-size:12.=
0pt;color:black'><o:p> </o:p></span></p><p class=3DMsoNormal><span sty=
le=3D'font-size:12.0pt'>Thanks,<o:p></o:p></span></p><p class=3DMsoNormal><=
span style=3D'font-size:12.0pt'><o:p> </o:p></span></p><div><p class=
=3DMsoNormal><b><span style=3D'font-size:10.5pt;color:black'>Char Easter</s=
pan></b><span style=3D'font-size:10.5pt;color:black'><o:p></o:p></span></p>=
</div><div><p class=3DMsoNormal><span style=3D'font-size:10.5pt;color:black=
'>UX Designer at The Seattle Times<o:p></o:p></span></p></div><div><p class=
=3DMsoNormal><span style=3D'font-size:10.0pt;font-family:"Arial",sans-serif=
;color:black'>p: 206.464.2945</span><span style=3D'color:black'><o:p></o:p>=
</span></p><p class=3DMsoNormal><span style=3D'font-size:10.0pt;font-family=
:"Arial",sans-serif;color:black'>e: [email protected]</span><sp=
an style=3D'color:black'><o:p></o:p></span></p><p class=3DMsoNormal><span s=
tyle=3D'font-size:10.0pt;font-family:"Arial",sans-serif;color:black'>m: 206=
.779.2427</span><span style=3D'color:black'><o:p></o:p></span></p></div><p =
class=3DMsoNormal><span style=3D'font-size:12.0pt'><o:p> </o:p></span>=
</p><p class=3DMsoNormal><span style=3D'font-size:12.0pt'><o:p> </o:p>=
</span></p></div></body></html>=