From 107643dfb53a6c455a7e2dab7371b3f69491f3fc Mon Sep 17 00:00:00 2001 From: Rohan Kumar Date: Thu, 14 Apr 2022 22:51:05 -0700 Subject: [PATCH] Add missing screenshot of focus indicators --- assets/p/focus.png | Bin 0 -> 2392 bytes assets/p/focus_dark.png | Bin 0 -> 2514 bytes assets/p/focus_dark.webp | Bin 0 -> 2374 bytes content/posts/website-best-practices.gmi | 8 ++++++-- content/posts/website-best-practices.md | 11 +++++++++-- 5 files changed, 15 insertions(+), 4 deletions(-) create mode 100644 assets/p/focus.png create mode 100644 assets/p/focus_dark.png create mode 100644 assets/p/focus_dark.webp diff --git a/assets/p/focus.png b/assets/p/focus.png new file mode 100644 index 0000000000000000000000000000000000000000..a7175bfa2f6c426376f70e3bb8008dd39f7a635e GIT binary patch literal 2392 zcmYjTdpHwp8y^cfrioD4J|r|ghtzVKGKZOC)*R#!(y?Hj*fS!w;-{WatF7jCYc(CedAG!m1 z8>SoJJ6!439J)NVej|pmUCrPH`l_{QM&n&L`3;3Em$_kx7W@uHT;3Ewr^Q`9ku2hM zKa7)SF!vOG&yDjT%6!G1D}HcsL-Vi@pKdGP>J*SS#&pMT8Y-8FJsVc3Y$IK#Y^pg< zFs;6YAoHfBV^y#kpCP!4K9{6f&KRmV<}m4eV99AW$QQ3-t%nq8gCDHOyh`mp-QtV4?P=jpvRw9PN0{a&5si9y2>9vt!!Hx>4u`vW&IJm9kk- z|0b)xKH~T|(k`@!_f3o=sR?eKHR>f>dM@qyCC>;8^a1IHkUXiKR(<7AV!^pI0h16- zlQ}=y{n9Pr8EMPH&7RXDcVJ5S_f@0%$pTSvF#67Lyi9(n+4~cwpJ#*pgpDhbd%<=_ zz0dWiI@{;%Z|WUbR9lb9UJz3&P)j%aF+1Kf<$5=xEcwh38?1*sVdT}2s8^8pWB>{)lon-BeC!x!MhDp2#Ip@`$sxn5V? z*k#SV>G$&h);bkc*kSE$9YdNpaxIdJ5UWRX7Q$Q!$P@v>LS5HkCC-%aY6EwXTcL>f zP(*&nZ-jLJLVxmchU6xJx8~YP-29G?&X`j19BeMRV74J&Uo8A5#4D3K=nSA z2qeuU9F9ouZ_n2v?~rU^Cktte3_xUfvs~3g*8`IrzCpQF=p;Bya-&Iz9b0t zcl6fvNS0bUz^Etr5p-teL@F3Sx~taCTANr9KFvrWHCf6qbu)>8S`*C;ihRsCa zNo!#HWzhMZg6>o|s8ezY7EoW1+R%xCT5E@K7bdUy$lkW9SY-q-%rEa)~-@=M$ETJ6I!@Hi* zya?s|wMJ@M-8GxE#9gWc?NlwJZ3AKCs(&m2{Y$u-uz;VT?UoWuF9o`a1S;SN*b>T-<=UJhscYa&8 zdvpQSuHA;yJ5`Xq1$if!F{Wl&G6W?r72@3k7s>tnq$bUG2W!F2nNl^W3MOKRe}2VX z4_G-rBzHBGq&i~ZX;l&OO1xm^#-OK>;+c76xqi&nCM6h(3H8;L67j2b@n*_h)oD14 zgUgBmn?Uk1B|h)j+3r613Gc^48x@XJ6yGA`v62CnYWJF^R95reD&POqsQdx40jDP7 zU=b=sLX3lfO})N7!pENK82~<@CVk)26h5&PYKXWC(`L`R#+(X*KvUKTXN;kI{s<%c z!2l>dzPGY@+NpHjXL(Sk-S*Vry;c)u*4zb$tN?UCm=5HjVML_o4KFv*<_Sop(2?Db z%Z71W1A4tlVBhr?W%a!>=NOu$0dTQ&>r>FKkhz)P>*Kl+t4b#!6YjOfK6_gC@Q=?z zo3Gg^=n&nR?pE9=?>Z;sI0-a*c&-0Sm-Fk&+aI`{M2M7=VDL8kKW<){GJe)MLiqNzc@lfK^16VX`jijQ^WdLC^a>C_6P=j7xl zJjUi=bK}c0)hD*sm@G9E{dT}4uP=%RgnY&Gu zE(VvOdYV>mS)D#UK4)avjhhTtBh6(Ang2Q^xN$jx`$ge8FlIn(*GT!Ln`DO6F%T-dtc zeU%UmlfVx51=WdJm15vD7eSRl-NK7d!^lsXsSd2DOTW5a>tjb3#ykE= z{ZEL70<{V=U&vkmNw^}RlqzVY^Dozoa!dy?=o-6vf^(_vRDA;)%7O->S-}avD5ttp s4Gm7vwM}}0vCTlImch@BkB@6gS`#t1ww+J!|6%~v2s`u2^BxcW0+LgdA^-pY literal 0 HcmV?d00001 diff --git a/assets/p/focus_dark.png b/assets/p/focus_dark.png new file mode 100644 index 0000000000000000000000000000000000000000..e843f34e61ec35ec76c82318f9c8793e9e639528 GIT binary patch literal 2514 zcmZWrcTf}f5)MQ}AtFVZ6zPaGArwJ`C~$_31dtN+NGK8`#n3^zF+c!4B!sR~Bmv<7 zL+5n75X4YUAoPG2M5GgeNE0r;_vX#KdAqaw{dVS?{dQ*m_-(qglj z>+O`3ID@$t=nMByRhDNmnMX%QYinx-1qGd*okwf9M+tT?N4-gU#Mklo?fKM>`hYML zr1&@Y_Z{e0FK%6oZ%73IPHNj&U3HC~T*>DjLMRHSEvkZ#{W)_~yAK>THPdWeH_<9Ro@HQt0v zFlx9W@6>fgE+;boQXifyqF!|?Zn`sa^1AiIrbq<3REz|For@V)XimCmDYO#XDjgCR zzqHNyINTL=V{P~Alhgb+SEn(o`)0Nw^U+#&sW;}7m|q*xQ*?~o`vc)B$zqB{VE}X0 zx}+N&)EF&qh6l)+IWHC>Ii=vNZ*?h?^q_2c;0PA{c?~E+y0f#f?q~lWY#H!WMXSh}0bOH}P z&z7NQK$8+wvU!70ImAoi!W^CQ7f{wxUaF_}tYdNcIe*FIcj4H|~CsWqy)fy7} zN(58O^WiS*0D_MGsx3Cmf=#JZi5CSLrU!~H)ua~zf~x*l(Mv3iKwJo(=`k=7%bopZ zKBH!|OeLq}RDt2jR81C0G_d7b=i!$|mF>{Qwf+dFm1HYi1WVp%HW;6{*nl;_9zhU= zeNhqf9ebpnlcB1WDCeZ7?l=>Sl#@U4Fg*X^13173cEL+4Ji`J_h>5t>7>GVKYhowyuLauTQ<0Rc*F)a*xtIV_jh@@WO|5T)AkMq9+#X} znw?`SKB0Q}PQFVR0D7nZ2v@8~9I1>xx-59&t=%8qP!J##>$nu4w4Z~5Y zr>+MD1#bmfi?{E5Ro8%`%+>78P1N^!dW1VPsLoA@{=opVM^I`BZU?z+<65A%{QG&( zJ!q^!OpGdlrwJiZgB*%|RxRFO`)m{ZC9v|C$fn_8f4~ZWE}ZYt)Fi)gPenmu;XZGt z5^L#R>Gc=EJ<(JxiXEf~D3{E_?mli;s)JB;Bo%B2(A}G?bSD}w+iVQe~Hy3jpP|2XL1{inrOM>&OBKD8v8eOnmMtn@NjG^x?T$SxPy&V zJXt^WTc)1H5NL}n*06gZ8c!QWvTQLz=m&qfJ?Le0xKPJES*lg zYu*Z5%;c1M)b;N#5yOqjyzO-M!3{w2a0YY&9|3vqa(XLV0J^8Pt$?H*2vYfx2Kf!g ztKxrFNT5bLe=A0<}5Ue?uqO@k9XzJyu`cBzyZ4{2*)#zRK+|*<@mQM**n8?1#rV~bs zsE#nwm7`3E6Pl-tKfgSxw-c@b}i$#BB~sCl*{TS?e)B z!vtov<~l-Pq44_PDeI4?0BS~aiYaIG_uo}2B~d#s>wUSI{?If#a5HA-vCpvlb~_w9 z^rNvyR4_jtgt^_zBQ{$DhJL=;##s;_0Fn|dnzwpCpu1(DswmgkBtpqKE{j`MdR2J^RQ+A)#T6vTe{73J>c~Hr z`?Vp{=RdlR7dzq8&j}6|aW*h|k`M(%B>A6PH_5y_qOahl4K)2X7?J%KR4E{+8$Ib2 zYQn>rp0thfeC151xl_;yoxx$uS^^IVC4JF7yvFNz1=)XJ@^%8Zohqf4RxMAdJ#?mX zwCk2p(vQgm9=ZR5a0OxYwwc?_5&dVD+Hr@4HU6`jjK)Q&uiX9;lod>kmysNhOAmFT z)J9hOZz8!gpbO(C8yJA{tgQBjJo=a1Tjoe(;r|T$b8eXSR8w@P4wqH!HM+BYkL)$t za>-45*;|%Gpy)Wd(f1@?lKmfKS~41G-6T}OY>v;0rZsmPeOyDgo%_A7U literal 0 HcmV?d00001 diff --git a/assets/p/focus_dark.webp b/assets/p/focus_dark.webp new file mode 100644 index 0000000000000000000000000000000000000000..b512a2a77d419137c9080c4c630e8150787e10c0 GIT binary patch literal 2374 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 literal 0 HcmV?d00001 diff --git a/content/posts/website-best-practices.gmi b/content/posts/website-best-practices.gmi index c81eb03..8320e4c 100644 --- a/content/posts/website-best-practices.gmi +++ b/content/posts/website-best-practices.gmi @@ -1116,9 +1116,13 @@ kbd { ### Focus indicators -The default focus indicators in certain browsers are hard to see, especially when the focused element has a border (see the "Color overrides and accessibility" section). +The default focus indicators are hard to see in certain browsers (e.g. Firefox and WebKit), especially when the focused element already has a border. We can override them to make them more accessible. -(TODO: add a screenshot). +Here's a screenshot demonstrating what I mean: + +=> gemini://seirdy.one/misc/focus.png Two screenshots of a focused link, one with a thin dotted outline and one with a thick solid outline. + +The top image is a screenshot of Firefox's default focus indicator. The bottom image is the focus indicator after my adjustments. On one hand, users who need enhanced focus visibility may override the default focus indicators in their browser preferences; I'd like to support such overrides. On the other hand, relying on these customizations would violate the "accessible by default" directive. This would exclude Tor Browser and fingerprinting-averse readers, as well as anybody who has to borrow a machine or browser they don't own or haven't customized yet. This is another one of the few areas where I'd recommend overriding browser default stylesheets. diff --git a/content/posts/website-best-practices.md b/content/posts/website-best-practices.md index 62a2a88..d5d403d 100644 --- a/content/posts/website-best-practices.md +++ b/content/posts/website-best-practices.md @@ -1086,9 +1086,16 @@ kbd { ### Focus indicators -The default focus indicators are hard to see in certain browsers, especially when the focused element already has a border. +The default focus indicators are hard to see in certain browsers (e.g. Firefox and WebKit), especially when the focused element already has a border. We can override them to make them more accessible. -(TODO: add a screenshot). +
+{{< picture name="focus" alt="Two screenshots of a focused link, one with a thin dotted outline and one with a thick solid outline." >}} +
+ +Top: a screenshot of Firefox's default focus indicator. Bottom: the focus indicator after my adjustments. + +
+
On one hand, users who need enhanced focus visibility may override the default focus indicators in their browser preferences; I'd like to support such overrides. On the other hand, relying on these customizations would violate the "accessible by default" directive. This would exclude Tor Browser and fingerprinting-averse readers, as well as anybody who has to borrow a machine or browser they don't own or haven't customized yet. This is another one of the few areas where I'd recommend overriding browser default stylesheets.