Accessibility
This site is meant to be read by everyone, including people who use screen readers, keyboards, magnification, or who see color differently. Here is what that means in practice, how it is tested, and the design choices behind it.
The standard
The target is the Web Content Accessibility Guidelines (WCAG) 2.2 (opens in a new tab) at level AA. Every page, in English and Filipino and in both light and dark mode, is checked with the open-source axe-core (opens in a new tab) engine against WCAG 2.0, 2.1, and 2.2 A and AA rules, and currently reports no violations. Automated checks catch only part of the picture, so the site is also checked by hand with the keyboard alone, at a 390-pixel phone width, in print, and in grayscale.
If something on this site does not work for you, please email me and I will fix it.
What is built in
- Readable typeEvery word is set in Atkinson Hyperlegible Next, a typeface designed with the Braille Institute so that easily confused letters and numbers (I, l, 1; O, 0; b, d) look distinct. Body text is 18 pixels with generous line spacing, and lines are capped at about 70 characters.
- Strong contrastBody text is 15.6 to 1 against the background in light mode and 21 to 1 in dark mode, well above the 4.5 to 1 that AA requires. Secondary text is at least 7.1 to 1, which meets the stricter AAA level.
- Color is never the only signalThe site is deliberately near-black and off-white. Nothing depends on telling red from green or blue from purple. Links are underlined, the current page is marked with a bar and bold text, and on/off states use words and filled or hollow dots.
- Light and darkThe site follows your device's light or dark setting, and the button in the header lets you switch. Your choice is remembered on your device only.
- KeyboardEverything can be reached with Tab and activated with Enter or Space. A thick blue focus ring (at least 4.6 to 1 against the background) shows where you are, and a "Skip to content" link is the first thing the keyboard reaches.
- Screen readersPages use proper landmarks (header, navigation, main, footer) and one heading outline per page. Every photograph and graphic has a written description. Decorative shapes are hidden from assistive technology.
- TouchButtons and links are at least 48 pixels tall, larger than the 24-pixel minimum in WCAG 2.2, and nothing scrolls sideways on a phone.
- MotionButtons sink about 4 pixels when pressed. If your device asks for reduced motion, the animation is removed and click sounds start switched off.
- SoundButtons click once when pressed and once when released, like a physical key. Links wait 60 milliseconds so the second click is heard. The sounds are generated in the browser, each lasts under a hundredth of a second, never carry information, and can be turned off with the "Sound" button in the header.
- Two languagesEvery page has a Filipino version, and each page links to its counterpart. Text in the other language is tagged so screen readers pronounce it correctly.
- Enlarged photosSelecting a photo opens it larger on the same page. A labeled Close button sits at the top, and Escape or a click on the dark area also closes it. The left and right arrow keys, or a swipe on a phone, step through the photos in that group, and focus returns to the photo you opened.
- VideoThe timelapses have no sound track. They play while they are on screen and stop when you scroll past, and each has the browser's own controls, which work with the keyboard, so you can pause it. If your device asks for reduced motion or data saving, they stay still until you press play. Each has a written caption.
- Links that leave the siteLinks to other websites, PDFs and the virtual labs open in a new tab, so this page stays where you left it. Screen readers announce "opens in a new tab" for each one. Links within the site open in the same tab.
- Explained termsNames, places and Philippine terms that readers may not know, mostly on the page about my dad, have a dotted underline. Hovering shows a short explanation; clicking, tapping, Enter or Space keeps it open, and Escape closes it. Each explanation is a button that screen readers announce as expanded or collapsed, and many include a link to learn more.
- Wide screensOn large monitors the layout spreads into columns to use the width, but paragraphs keep their roughly 70-character line length so they stay easy to read.
- SharingThe Share button in the header opens a small menu with the page's link and a story-sized image of the page. You can share the image to Instagram Stories (on a computer, download it instead), share the link through your device's share sheet, or copy the link. Escape or Close dismisses the menu.
- PrintPrinting hides the header and buttons and prints black on white.
- PrivacyNo trackers, analytics, cookies, or third-party scripts. The only thing stored is your theme and sound choice, on your own device.
Known limits
The CE 323 virtual labs are visual simulations drawn on a canvas. Their controls are keyboard-accessible and each drawing has a text description, but following the apparatus itself depends on sight. The Pinoy Scientists cards are images of text; their full text is in each image's description. The publications link to journal pages that I do not control.
Design style
The design borrows from transit signage, the kind of sign you can read while walking past it. A black band holds the name and navigation. Sections open with a heavy rule. Information sits in framed boxes or on a "departure board" of rows, and timelines are drawn as a train line with stations. Buttons stand slightly off the page and sink when pressed, the way a physical button does. It is the same visual system as the Microbe Busters team hub I built for a Development Engineering course.
The rules behind it are simple. One typeface in two weights. Five type sizes. Near-black ink on warm paper in light mode, white on black in dark mode. Color is used for focus only, never to carry meaning.
Palette
Each swatch shows the light value, then the dark value. Ratios are contrast against the page background.
- Ink · headings and body text
- Secondary ink · captions, dates, notes
- Paper · page background
- Surface · cards and boxes
- Sunk · hover and quotes
- Rule · thin dividers
- Focus · keyboard focus ring
The focus blue comes from the Okabe and Ito palette, which was designed to stay distinguishable for people with the common forms of color vision deficiency.