Aksesibilidad

Ang pamantayan

Ang layunin ay ang Web Content Accessibility Guidelines (WCAG) 2.2 (magbubukas sa bagong tab) sa antas na AA. Bawat pahina, sa Ingles at Filipino at sa maliwanag at madilim na mode, ay sinusuri gamit ang open-source na axe-core (magbubukas sa bagong tab) laban sa mga patakaran ng WCAG 2.0, 2.1, at 2.2 A at AA, at sa kasalukuyan ay walang naiuulat na paglabag. Bahagi lamang ng larawan ang nahuhuli ng awtomatikong pagsusuri, kaya sinusuri rin ang site nang mano-mano: keyboard lamang, sa lapad ng telepono na 390 pixel, sa pag-print, at sa grayscale.

Kung may bahagi ng site na hindi gumagana para sa iyo, mag-email sa akin at aayusin ko ito.

Mga nakapaloob na tampok

• Madaling basahing titikNakatipa ang lahat sa Atkinson Hyperlegible Next, isang typeface na idinisenyo kasama ang Braille Institute upang magkaiba ang hitsura ng mga titik at numerong madaling mapagkamalan (I, l, 1; O, 0; b, d). 18 pixel ang body text na may maluwag na pagitan ng linya, at hanggang mga 70 titik lamang bawat linya.
• Malakas na contrast15.6 sa 1 ang body text laban sa background sa maliwanag na mode at 21 sa 1 sa madilim, higit pa sa 4.5 sa 1 na hinihingi ng AA. Hindi bababa sa 7.1 sa 1 ang pangalawang teksto, na umaabot sa mas mahigpit na antas na AAA.
• Hindi kailanman kulay lamang ang senyalesSadyang halos-itim at puti ang site. Walang bahaging nakasalalay sa pagkilala ng pula sa berde o ng asul sa lila. May salungguhit ang mga link, may bar at makapal na titik ang kasalukuyang pahina, at gumagamit ng salita at puno o butas na tuldok ang mga on/off na estado.
• Maliwanag at madilimSinusundan ng site ang setting ng iyong device, at mapapalitan ito ng button sa header. Sa iyong device lamang naaalala ang pinili mo.
• KeyboardMaaabot ang lahat gamit ang Tab at mapipindot gamit ang Enter o Space. Ipinapakita ng makapal na asul na focus ring (hindi bababa sa 4.6 sa 1 laban sa background) kung nasaan ka, at ang "Lumaktaw sa nilalaman" ang unang naaabot ng keyboard.
• Screen readerGumagamit ang mga pahina ng wastong landmark (header, nabigasyon, nilalaman, footer) at iisang balangkas ng heading bawat pahina. May nakasulat na paglalarawan ang bawat larawan at graphic. Nakatago sa assistive technology ang mga palamuting hugis.
• TouchHindi bababa sa 48 pixel ang taas ng mga button at link, mas malaki sa 24 pixel na minimum ng WCAG 2.2, at walang pahalang na pag-scroll sa telepono.
• GalawLumulubog nang mga 4 pixel ang mga button kapag pinindot. Kung humihingi ang iyong device ng reduced motion, inaalis ang animation at nakapatay ang tunog sa simula.
• TunogIsang click kapag pinindot at isa pa kapag binitawan ang mga button, gaya ng tunay na key. Naghihintay nang 60 millisecond ang mga link upang marinig ang ikalawang click. Ginagawa ang tunog sa browser, wala pang isang daan ng segundo bawat isa, hindi nagdadala ng impormasyon, at mapapatay gamit ang button na "Tunog" sa header.
• Dalawang wikaMay bersiyong Ingles at Filipino ang bawat pahina, at magkakaugnay ang mga ito. Naka-tag ang teksto sa ibang wika upang tama ang bigkas ng screen reader.
• Pinalaking larawanKapag pinili ang isang larawan, lumalaki ito sa parehong pahina. May button na Isara sa itaas, at nagsasara rin ito sa Escape o sa pag-click sa madilim na bahagi. Ginagamit ang kaliwa at kanang arrow key, o pag-swipe sa telepono, upang lumipat sa mga larawan sa grupong iyon, at bumabalik ang focus sa larawang binuksan mo.
• VideoWalang tunog ang mga timelapse. Tumutugtog ang mga ito habang nasa screen at humihinto kapag nilampasan mo, at may sariling kontrol ng browser ang bawat isa, na gumagana sa keyboard, kaya mapapahinto mo ito. Kung humihingi ang iyong device ng reduced motion o pagtitipid ng data, hindi gumagalaw ang mga ito hanggang pindutin mo ang play. May nakasulat na caption ang bawat isa.
• Mga link palabas ng siteNagbubukas sa bagong tab ang mga link sa ibang website, mga PDF at ang mga virtual lab, kaya nananatili ang pahinang ito kung saan mo iniwan. Sinasabi ng screen reader na "magbubukas sa bagong tab" ang bawat isa. Sa parehong tab nagbubukas ang mga link sa loob ng site.
• Mga ipinaliwanag na salitaMay tuldok-tuldok na salungguhit ang mga pangalan, lugar at salitang Pilipino na maaaring hindi pamilyar sa mambabasa, karamihan sa pahina tungkol kay Dad. Lumalabas ang maikling paliwanag kapag itinapat ang cursor; nananatili itong bukas kapag pinindot, ni-tap, o ginamitan ng Enter o Space, at nagsasara sa Escape. Button ang bawat paliwanag na sinasabi ng screen reader kung bukas o sarado, at marami ang may link para matuto pa.
• Malalapad na screenSa malalaking monitor, kumakalat sa mga column ang layout upang magamit ang lapad, ngunit nananatili sa mga 70 titik bawat linya ang mga talata upang madali pa ring basahin.
• PagbabahagiNagbubukas ang button na Ibahagi sa header ng maliit na menu na may link ng pahina at larawang kasinlaki ng story. Maibabahagi mo ang larawan sa Instagram Stories (sa computer, i-download ito), maibabahagi ang link sa share sheet ng iyong device, o makokopya ang link. Isinasara ito ng Escape o Isara.
• Pag-printItinatago ang header at mga button kapag nagpi-print, at itim sa puti ang lumalabas.
• PrivacyWalang tracker, analytics, cookie, o script mula sa ibang partido. Ang tanging iniimbak ay ang pinili mong tema at tunog, sa sarili mong device.

Mga kilalang limitasyon

Ang mga virtual lab ng CE 323 ay mga biswal na simulasyong iginuhit sa canvas. Naaabot ng keyboard ang kanilang mga kontrol at may paglalarawan ang bawat guhit, ngunit nakasalalay sa paningin ang pagsubaybay sa mismong kagamitan. Mga larawan ng teksto ang mga card ng Pinoy Scientists; nasa paglalarawan ng bawat larawan ang buong teksto. Ang mga publikasyon ay naka-link sa mga pahina ng journal na hindi ko hawak.

Istilo ng disenyo

Hango ang disenyo sa mga karatula ng pampublikong transportasyon, ang uri ng karatulang nababasa habang naglalakad. Isang itim na banda ang may hawak ng pangalan at nabigasyon. Nagsisimula ang bawat seksiyon sa makapal na linya. Nasa mga kahon o sa "departure board" ng mga hanay ang impormasyon, at iginuguhit ang mga timeline bilang linya ng tren na may mga istasyon. Bahagyang nakaangat ang mga button at lumulubog kapag pinindot, gaya ng tunay na button. Ito rin ang biswal na sistema ng Microbe Busters team hub na ginawa ko para sa isang kurso sa Development Engineering.

Simple ang mga patakaran. Iisang typeface sa dalawang kapal. Limang laki ng titik. Halos-itim na tinta sa mainit na papel sa maliwanag na mode, puti sa itim sa madilim. Ginagamit lamang ang kulay para sa focus, hindi kailanman para magdala ng kahulugan.

Paleta

Ipinapakita ng bawat swatch ang halaga sa maliwanag, saka sa madilim. Ang ratio ay contrast laban sa background ng pahina.

• Tinta · mga heading at teksto
  Maliwanag #1b1a17 (15.6:1) · Madilim #ffffff (21:1)
• Pangalawang tinta · caption, petsa, tala
  Maliwanag #4d4a43 (7.9:1) · Madilim #c9c9c9 (12.7:1)
• Papel · background ng pahina
  Maliwanag #f6f2e9 (n/a) · Madilim #000000 (n/a)
• Ibabaw · mga card at kahon
  Maliwanag #fcfaf5 (n/a) · Madilim #121212 (n/a)
• Lubog · hover at sipi
  Maliwanag #ece6d8 (n/a) · Madilim #1c1c1c (n/a)
• Linya · manipis na hati
  Maliwanag #d4ccbb (n/a) · Madilim #3d3d3d (n/a)
• Focus · focus ring ng keyboard
  Maliwanag #0072b2 (4.6:1) · Madilim #56b4e9 (9.1:1)

Mula sa paleta nina Okabe at Ito ang asul ng focus, na idinisenyong manatiling makikilala ng mga taong may karaniwang uri ng color vision deficiency.