Aksesibilidad

Ang mga pamantayan

1. Skip link at mga landmark

   2.4.1 Bypass Blocks · A

   Ang isang bisitang gumagamit ng keyboard ay unang napupunta sa isang Skip to content na link na tumatalon lampas sa chrome patungo sa main region. Ang pahina ay binuo mula sa tunay na mga landmark: isang main, mga naka-label na navigation element, at isang footer.

2. Nakikitang focus

   2.4.7 Focus Visible · AA

   Ang bawat control ay nagpo-focus sa isang two-pixel na green ring na nakalagay ng dalawang pixel mula sa gilid, ipinapakita para sa keyboard focus at hindi para sa pag-click ng mouse.

3. Laki ng target

   2.5.8 AA · 2.5.5 AAA

   Ang mga pangunahing touch control (ang tab dock, sheet row, ang call-to-action pill) ay 44 hanggang 48 pixel; ang pinakamaliit na pointer control ay lumalampas pa rin sa 24. Kaya bawat control ay umaabot sa AA minimum, at ang mga touch control ay umaabot sa mas mahigpit na AAA na laki.

4. Reduced motion

   2.3.3 · AAA

   Kapag humingi ng mas kaunting galaw ang sistema ng bisita, ibinababa ng site ang bawat animation at transition sa halos zero, at ginagawang payak na paglundag ang smooth scrolling.

5. Pagkakapantay ng theme, walang flash

   Parehong first-class ang light at dark: bawat surface ay dinisenyo sa pareho, at ang theme ay nareresolba bago ang unang paint kaya ang isang dark-mode na bisita ay hindi kailanman makakakuha ng puting flash.

6. Hindi kulay ang tanging senyas

   1.4.1 Use of Colour · A

   Ang mga link sa prosa ng artikulo ay may salungguhit, kaya ang kahulugan ng mga ito ay hindi kailanman nakasalalay sa green lamang.

Ang trade-off para sa nababasang green

Ang brand green ay isang maliwanag na lime, at ang maliwanag na lime ay hindi nababasa bilang teksto sa puti. Sinukat laban sa WCAG, ang #6dc402 sa puti ay mga 2.2 to 1: mas mababa pa sa 3-to-1 na pamantayan para sa malaking teksto. Kaya't may umiiral na pangalawang token: ibinababa ng --color-green-text ang green sa #5aa302, na lumalampas sa 3 to 1. Sapat na iyon para sa malaki o bold na teksto, para sa mga heading, at para sa mga interface accent tulad ng focus ring, at ginagamit iyon para sa mga iyon, hindi para sa body copy.

Pumapasa sa AA Malaking teksto at UI lamang Bumabagsak sa pamantayan

Ang tapat na bahagi: sa laki ng pagbabasa ng body sa isang maliwanag na background, ang isang green na link ay nasa mga 3.2 to 1: lampas sa pamantayan para sa malaking teksto, kulang sa 4.5-to-1 na pamantayan para sa normal na teksto. Tinatanggap ng site ang trade-off na iyon upang mapanatili ang iisa nitong brand na kulay, at pinapalambot ito sa dalawang paraan. Ang mga link sa artikulo ay may salungguhit, kaya ang kulay ay hindi kailanman ang tanging senyas; at ganap itong nireresolba ng dark mode, kung saan ang parehong lime sa halos itim ay nababasa sa mga 8.6 to 1. Ang body copy mismo ay laging neutral, at laging pumapasa.

Saklaw

Sinasaklaw nito ang website. Ang React Native app at ang mga email template ay sarili nilang mga surface, na may sarili nilang mga pamantayan, at hindi dokumentado rito.