Posted on Leave a comment

Block: Image

Welcome to image alignment! If you recognize this post, it is because these are blocks that have been converted from the classic Markup: Image Alignment post. The best way to demonstrate the ebb and flow of the various image positioning options is to nestle them snuggly among an ocean of words. Grab a paddle and let’s get started. Be sure to try it in RTL mode. Left should stay left and right should stay right for both reading directions.

Continue reading Block: Image
Posted on Leave a comment

Block: Cover

Adaptogen woke health goth, chicharrones tofu mustache salvia venmo cardigan locavore actually fanny pack. Waistcoat sartorial hoodie sustainable keffiyeh. Brooklyn vegan photo booth skateboard, retro bicycle rights cornhole. Tousled snackwave ugh shabby chic authentic semiotics waistcoat, lumbersexual post-ironic vice umami cray swag. Everyday carry tumblr paleo neutra williamsburg jianbing cloud bread air plant snackwave beard venmo enamel pin subway tile try-hard.

Continue reading Block: Cover
Posted on Leave a comment

Block: Columns

Photo by cottonbro

Poke poutine kombucha leggings. Semiotics pabst viral, kombucha hell of post-ironic man braid artisan readymade fashion axe offal gentrify drinking vinegar everyday carry hashtag. Enamel pin kogi gentrify, gochujang jianbing tote bag +1 selvage church-key squid tousled pabst shabby chic. Artisan kombucha skateboard fanny pack ramps.

Continue reading Block: Columns
Posted on Leave a comment

Block category: Widgets

Poke poutine kombucha leggings. Semiotics pabst viral, kombucha hell of post-ironic man braid artisan readymade fashion axe offal gentrify drinking vinegar everyday carry hashtag. Enamel pin kogi gentrify, gochujang jianbing tote bag +1 selvage church-key squid tousled pabst shabby chic. Artisan kombucha skateboard fanny pack ramps.

Continue reading Block category: Widgets
Posted on

Keyboard navigation

There are many different ways to use the web besides a mouse and a pair of eyes. Users navigate for example with a keyboard only or with their voice.

All the functionality, including menus, links and forms should work using a keyboard only. This is essential for all assistive technology to work properly. The only way to test this, at the moment, is manually. The best time to test this is during development.

How to keyboard test:

Tab through your pages, links and forms to do the following tests:

  • Confirm that all links can be reached and activated via keyboard, including any in dropdown submenus.
  • Confirm that all links get a visible focus indicator (e.g., a border highlight).
  • Confirm that all visually hidden links (e.g. skip links) become visible when in focus.
  • Confirm that all form input fields and buttons can be accessed and used via keyboard.
  • Confirm that all interactions, buttons, and other controls can be triggered via keyboard — any action you can complete with a mouse must also be performable via keyboard.
  • Confirm that focus doesn’t move in unexpected ways around the page.
  • Confirm that using shift+tab to move backwards works as well.

Resources