I start by creating a variable to keep track of the mostly recently active cell, which I’ll initialize as the first cell in the grid. With the grid markup in place, I can now implement the keyboard navigation and selection logic for the bingo board. My initial markup for each cell looks something like this: Additionally, a toggle button provides the user the flexibility to uncheck a phrase if they made a mistake – no false bingos here! The aria-pressed stateful attribute succinctly communicates whether a phrase has been checked. There are many ways one could build a stateful interactive component I chose to use a toggle button using aria-pressed. As phrases come up, players check them off on their boards. We’ll dig into the keyboard navigation of the grid in a moment, but first let’s explore the markup for each of the cells:Įach phrase on our bingo board starts out untouched. I prefer to use these table elements as it makes the code easier to read, provides built-in table styling, and sets up my bingo board code to more easily support the traditional American bingo board, where the letters B-I-N-G-O are presented as column headers. Īs I’m using explicit ARIA roles, I could implement this as a bunch of nested s rather than using an HTML table, table rows, and table cells. I start my board with a element assigned an explicit role of grid, containing rows of cells with explicit gridcell roles. In a properly implemented ARIA grid, users can navigate easily between cells with their arrow keys. ARIA grids are super cool because of the clean keyboard navigation they introduce for two-dimensional containers. Building the gridįor a totally static bingo board, I would use a, but an interactive bingo game turns out to be the perfect use case for the ARIA grid role. Today I’d like to share how I’ve approached its implementation with accessibility in mind. It’s still a work in progress, but I invite you to try out the web app: here’s a game board featuring words from this article, which you can check off while reading, and you can also check out the source code. I wanted it to be a seamless experience for all players, whether they play with mouse, touchscreen, keyboard, and/or screen reader. The app would be dynamic, mobile-friendly, and, most importantly, accessible. The app would pull from a lexicon of phrases, generate a randomized NxN grid of said phrases, and keep track of players’ current board states. Itching to write some code, I began designing a multiplayer bingo web app, using React for my components and Firebase for storing game metadata. My teammates and I were about to attend a large meeting and were guessing at which common phrases would come up: words like “roadmap,” “innovation,” and the noun form of “ask.” What if we turned this into a bingo game? It started the way a lot of side projects these days seem to, with a “What if…” sent absent-mindedly over Slack.
0 Comments
Leave a Reply. |