WebAIM - Web Accessibility In Mind

E-mail List Archives

small screen concerns for NCAA tournament brackets

for

From: jeffgutsell
Date: Feb 24, 2023 11:06AM

Hi All,
I got to thinking about the recent thread concerning page zoom as I was pondering ideas for creating an accessible basketball bracket page.
I think it should be fairly straightforward to create the bracket for large screens and support 200% magnification. Beyond that, I am puzzled what to do and am interested in hearing ideas.

Briefly, here is my idea so far:
The four regions and the final four would be organized in 3 columns The first would have the West and South regions. The second column would contain the East and Midwest regions. The third would have the Final Four block.
I would use flex boxes to swap the display of columns 2 and 3. I would also use flex boxes to control the display of the individual rounds. Normally, of course, this type of re-ordering would be an accessibility disaster, but in this case, it would enable screen reader users to read the brackets in the same order as sighted users. For those who have not seen brackets, the right side of the page gets read from right to left.
I know that WCAG 1.4 provides flexibility for diagrams, and I think the brackets qualify as a type of diagram.
but I think I should take some measures to avoid horizontal scrolling.
I would love to hear suggestions for media queries to support zooming and small screens.
I am guessing that I could display the 3 columns as one in viewports smaller than something like 500 pixels. Is it necessary to go beyond that and display all rounds in one column for viewports under 320 pixels? I am guessing this is what would be needed to avoid horizontal scrolling with 400% zoom.

Obviously, I will not have anything drafted by this year's tournament start. It is just one of my little projects to keep me out of retirement mischief.
Jeff Gutsell