From: Daniel Gustafsson <daniel@yesql.se>
Content-Type: multipart/mixed;
	boundary="Apple-Mail=_9E7FEAE1-2D3E-4D8F-BC10-06AE82DCD826"
Mime-Version: 1.0 (Mac OS X Mail 16.0 \(3696.120.41.1.3\))
Subject: Website accessibility
Message-Id: <E2630670-269E-494F-A552-A003358123CA@yesql.se>
Date: Mon, 6 Nov 2023 14:09:27 +0100
To: pgsql-www@lists.postgresql.org
Archived-At: 
 <https://www.postgresql.org/message-id/E2630670-269E-494F-A552-A003358123CA%40yesql.se>
Precedence: bulk


--Apple-Mail=_9E7FEAE1-2D3E-4D8F-BC10-06AE82DCD826
Content-Transfer-Encoding: quoted-printable
Content-Type: text/plain;
	charset=us-ascii

I took the Accessibility Insights plugin in Edge for a testdrive over a =
sample
of the website, and thankfully it reported very few issues.  Making sure =
we
have good support for screen readers is important so I had a look at =
fixing the
issues.

    * There are interactive elements which lacks labels: the search =
buttons and
    the theme button.  The easiest fix here is to add aria-label =
attributes on
    these.

    * The version toggles on the featurematrix lacks labels.  This =
turned out
    to be a bug in the template, there is a label but it's assembled =
without
    all its parts so the end result doesn't point to the checkbox.

There are a few reports against the docs as well, but I think they =
mainly fall
into the false positivies category.

The attached patches address the above top two things, which should make =
the
accessibility report green on most of the site pages.

--
Daniel Gustafsson


--Apple-Mail=_9E7FEAE1-2D3E-4D8F-BC10-06AE82DCD826
Content-Disposition: attachment;
	filename=0001-Set-aria-label-on-interactive-icon-elements.patch
Content-Type: application/octet-stream;
	x-unix-mode=0644;
	name="0001-Set-aria-label-on-interactive-icon-elements.patch"
Content-Transfer-Encoding: quoted-printable

=46rom=206d7a959f347492a9e94c59946ab3a0a76c32fd54=20Mon=20Sep=2017=20=
00:00:00=202001=0AFrom:=20Daniel=20Gustafsson=20<daniel@yesql.se>=0A=
Date:=20Mon,=206=20Nov=202023=2013:45:26=20+0100=0ASubject:=20[PATCH=20=
1/2]=20Set=20aria-label=20on=20interactive=20icon=20elements=0A=0A=
Interactive=20elements=20without=20a=20clear=20textual=20label,=20such=20=
as=20these=20which=0Ause=20an=20icon,=20need=20additional=20labelling=20=
to=20aid=20screen=20readers.=20This=20adds=0Aaria-label=20attributes=20=
on=20site=20search,=20documentation=20search=20and=20selector=0Afor=20=
theme.=0A---=0A=20templates/base/base.html=20=20=20=20=20|=204=20++--=0A=20=
templates/docs/docspage.html=20|=206=20+++---=0A=202=20files=20changed,=20=
5=20insertions(+),=205=20deletions(-)=0A=0Adiff=20--git=20=
a/templates/base/base.html=20b/templates/base/base.html=0Aindex=20=
1936a03b..4c4201f3=20100644=0A---=20a/templates/base/base.html=0A+++=20=
b/templates/base/base.html=0A@@=20-60,12=20+60,12=20@@=0A=20=20=20=20=20=20=
=20=20=20=20=20=20=20=20=20=20=20<div=20class=3D"input-group">=0A=20=20=20=
=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20<input=20id=3D"q"=20=
name=3D"q"=20type=3D"text"=20size=3D"20"=20maxlength=3D"255"=20=
accesskey=3D"s"=20=20class=3D"form-control"=20placeholder=3D"Search=20=
for...">=0A=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=
<span=20class=3D"input-group-btn">=0A-=20=20=20=20=20=20=20=20=20=20=20=20=
=20=20=20=20=20=20=20=20<button=20class=3D"btn=20btn-default"=20=
type=3D"submit"><i=20class=3D"fas=20fa-search"></i></button>=0A+=20=20=20=
=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20<button=20class=3D"btn=20=
btn-default"=20type=3D"submit"=20aria-label=3D"Site=20search"><i=20=
class=3D"fas=20fa-search"></i></button>=0A=20=20=20=20=20=20=20=20=20=20=20=
=20=20=20=20=20=20=20=20</span>=0A=20=20=20=20=20=20=20=20=20=20=20=20=20=
=20=20=20=20</div><!--=20/input-group=20-->=0A=20=20=20=20=20=20=20=20=20=
=20=20=20=20=20=20</form>=0A=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=
<form=20id=3D"form-theme"=20class=3D"form-inline=20d-none">=0A-=20=20=20=20=
=20=20=20=20=20=20=20=20=20=20=20=20<button=20id=3D"btn-theme"=20=
class=3D"btn=20btn-default=20ml-1"=20type=3D"button"></button>=0A+=20=20=20=
=20=20=20=20=20=20=20=20=20=20=20=20=20<button=20id=3D"btn-theme"=20=
class=3D"btn=20btn-default=20ml-1"=20type=3D"button"=20=
aria-label=3D"Visual=20theme=20selector"></button>=0A=20=20=20=20=20=20=20=
=20=20=20=20=20=20=20=20</form>=0A=20=20=20=20=20=20=20=20=20=20=20=20=20=
</div>=0A=20=20=20=20=20=20=20=20=20=20=20</nav>=0Adiff=20--git=20=
a/templates/docs/docspage.html=20b/templates/docs/docspage.html=0Aindex=20=
b1ad7164..33f749e1=20100644=0A---=20a/templates/docs/docspage.html=0A+++=20=
b/templates/docs/docspage.html=0A@@=20-63,12=20+63,12=20@@=0A=20=20=20=20=
=20=20=20=20=20=20=20=20=20=20=20=20=20<div=20class=3D"input-group">=0A=20=
=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20<input=20id=3D"q"=20=
name=3D"q"=20type=3D"text"=20size=3D"20"=20maxlength=3D"255"=20=
accesskey=3D"s"=20=20class=3D"form-control"=20placeholder=3D"Search=20=
for...">=0A=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=
<span=20class=3D"input-group-btn">=0A-=20=20=20=20=20=20=20=20=20=20=20=20=
=20=20=20=20=20=20=20=20<button=20class=3D"btn=20btn-default"=20=
type=3D"submit"><i=20class=3D"fas=20fa-search"></i></button>=0A+=20=20=20=
=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20<button=20class=3D"btn=20=
btn-default"=20type=3D"submit"=20aria-label=3D"Site=20search"><i=20=
class=3D"fas=20fa-search"></i></button>=0A=20=20=20=20=20=20=20=20=20=20=20=
=20=20=20=20=20=20=20=20</span>=0A=20=20=20=20=20=20=20=20=20=20=20=20=20=
=20=20=20=20</div><!--=20/input-group=20-->=0A=20=20=20=20=20=20=20=20=20=
=20=20=20=20=20=20</form>=0A=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=
<form=20id=3D"form-theme"=20class=3D"form-inline=20d-none">=0A-=20=20=20=20=
=20=20=20=20=20=20=20=20=20=20=20=20<button=20id=3D"btn-theme"=20=
class=3D"btn=20btn-default=20ml-1"=20type=3D"button"></button>=0A+=20=20=20=
=20=20=20=20=20=20=20=20=20=20=20=20=20<button=20id=3D"btn-theme"=20=
class=3D"btn=20btn-default=20ml-1"=20type=3D"button"=20=
aria-label=3D"Visual=20theme=20selector"></button>=0A=20=20=20=20=20=20=20=
=20=20=20=20=20=20=20=20</form>=0A=20=20=20=20=20=20=20=20=20=20=20=20=20=
</div>=0A=20=20=20=20=20=20=20=20=20=20=20</nav>=0A@@=20-135,7=20+135,7=20=
@@=0A=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20<div=20=
class=3D"input-group">=0A=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=
=20=20=20<input=20type=3D"text"=20id=3D"q"=20name=3D"q"=20=
class=3D"form-control"=20placeholder=3D"Search=20the=20documentation=20=
for..."/>=0A=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=
<span=20class=3D"input-group-btn">=0A-=20=20=20=20=20=20=20=20=20=20=20=20=
=20=20=20=20=20=20=20=20<button=20class=3D"btn=20btn-default"=20=
type=3D"submit"><i=20class=3D"fas=20fa-search"></i></button>=0A+=20=20=20=
=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20<button=20class=3D"btn=20=
btn-default"=20type=3D"submit"=20aria-label=3D"Documentation=20=
Search"><i=20class=3D"fas=20fa-search"></i></button>=0A=20=20=20=20=20=20=
=20=20=20=20=20=20=20=20=20=20=20=20=20</span>=0A=20=20=20=20=20=20=20=20=
=20=20=20=20=20=20=20=20=20</div><!--=20/input-group=20-->=0A=20=20=20=20=
=20=20=20=20=20=20=20=20=20=20=20</form>=0A--=20=0A2.32.1=20(Apple=20=
Git-133)=0A=0A=

--Apple-Mail=_9E7FEAE1-2D3E-4D8F-BC10-06AE82DCD826
Content-Disposition: attachment;
	filename=0002-Fix-labelling-bug-on-featurematrix.patch
Content-Type: application/octet-stream;
	x-unix-mode=0644;
	name="0002-Fix-labelling-bug-on-featurematrix.patch"
Content-Transfer-Encoding: quoted-printable

=46rom=207443f0d2b9fc9a6454b3e018d1c68541474ef7e0=20Mon=20Sep=2017=20=
00:00:00=202001=0AFrom:=20Daniel=20Gustafsson=20<daniel@yesql.se>=0A=
Date:=20Mon,=206=20Nov=202023=2013:51:03=20+0100=0ASubject:=20[PATCH=20=
2/2]=20Fix=20labelling=20bug=20on=20featurematrix=0A=0AThe=20labels=20=
for=20version=20toggles=20on=20the=20featurematrix=20were=20using=20the=0A=
wrong=20id=20for=20the=20input=20element.=0A---=0A=20=
templates/featurematrix/featurematrix.html=20|=202=20+-=0A=201=20file=20=
changed,=201=20insertion(+),=201=20deletion(-)=0A=0Adiff=20--git=20=
a/templates/featurematrix/featurematrix.html=20=
b/templates/featurematrix/featurematrix.html=0Aindex=20=
0401ebba..bb39fc5d=20100644=0A---=20=
a/templates/featurematrix/featurematrix.html=0A+++=20=
b/templates/featurematrix/featurematrix.html=0A@@=20-25,7=20+25,7=20@@=20=
the=20text.=0A=20=20=20<div=20id=3D"feature-matrix-filter"=20=
class=3D"col-8=20offset-2=20border">=0A=20=20=20=20=20<form=20=
id=3D"featurematrix_version_filter"><h5>Filter=20by=20version</h5>=0A=20=20=
=20=20=20=20=20{%=20for=20version=20in=20versions=20%}=0A-=20=20=20=20=20=
=20=20=20<label=20for=3D"{{=20version.numtree|cut:"."=20}}">{{=20=
version.numtree=20}}</label>=0A+=20=20=20=20=20=20=20=20<label=20=
for=3D"toggle_{{=20version.numtree|cut:"."=20}}">{{=20version.numtree=20=
}}</label>=0A=20=20=20=20=20=20=20=20=20<input=20type=3D"checkbox"=20=
id=3D"toggle_{{=20version.numtree|cut:"."=20}}"=20=
class=3D"featurematrix_version"=20{%=20if=20version.supported=20or=20=
version.testing=20%}checked{%=20endif=20%}=20value=3D"{{=20=
version.numtree=20}}"=20/>=0A=20=20=20=20=20=20=20{%=20endfor=20%}=0A=20=20=
=20=20=20=20=20<hr=20id=3D"featurematrix_version_divider"=20/>=0A--=20=0A=
2.32.1=20(Apple=20Git-133)=0A=0A=

--Apple-Mail=_9E7FEAE1-2D3E-4D8F-BC10-06AE82DCD826--