Digital Hall of Fame Optgroup Audit: Make Sport and Era Filters Understandable
A digital hall of fame sport or era filter built with a native <select> element and <optgroup> groups gives visitors a familiar, browser-native control: they open a dropdown, see labeled categories like "Fall Sports" or "1990s Era," and choose an option. When the groups are labeled correctly and the markup is well-formed, the control works without any JavaScript and is operable by keyboard and assistive technology by default. When the groups are missing their label attribute, when a group label is mistakenly treated as a selectable choice, or when a disabled group silently blocks all child selections, visitors — including those using screen readers or keyboard navigation — encounter a filter that behaves unexpectedly. A digital hall of fame optgroup audit examines every native select sport and era filter on the platform to confirm the required label attribute is present and descriptive, that group labels are correctly distinguished from selectable options, that disabled groups are applied deliberately and consistently, that nesting is not attempted, and that the select element itself retains a visible label for context. This guide walks athletic directors, recognition-program staff, and school IT reviewers through exactly that audit. What a Native Select Optgroup Does — and Why Labels Matter A <select> element presents a list of <option> items a visitor can choose from. An <optgroup> element groups those options under a shared label, making a long list of sports or era ranges scannable at a glance. Instead of seeing forty sport names in a flat list, a visitor sees “Fall Sports,” “Winter Sports,” and “Spring Sports” as visible headers, with the relevant sport names indented beneath each.
Read More
Digital Hall of Fame Focus Order Audit for Inductee Search and Filters
When a parent, alum, or community member sits down at a keyboard to find a former athlete in a school's digital hall of fame, the sequence in which Tab moves through the search field, sport filters, decade selectors, and result cards determines whether they can complete that search independently — or give up before finding the inductee they came to celebrate. A digital hall of fame focus order audit verifies that keyboard Tab sequence through the search-and-filter interface follows a logical, predictable path: search field reachable early, filters accessible in consistent order, results following filters, and focus returning to a sensible position after every interaction. WCAG 2.1 SC 2.4.3 (Focus Order, Level A) requires this predictability on any page where sequential navigation affects meaning or operation — and a hall of fame search interface is exactly that kind of page. This guide walks school IT staff, athletic directors, and accessibility coordinators through every step of a focus order audit: the technical foundation, a practical numbered procedure, a decision table for post-interaction focus destinations, and the most common failure patterns found on school recognition platforms. What Focus Order Is — and Why Inductee Search Needs It Focus order is the sequence in which keyboard focus moves through a page’s interactive elements when a visitor presses Tab. The browser determines this sequence primarily from DOM order — the order in which elements appear in the HTML source — modified by any explicit tabindex attribute values. When a hall of fame interface renders an inductee search field, a filter panel, a results roster, and pagination controls, the Tab sequence should mirror the natural reading and task flow: reach the search field first, navigate filters next, move into results, reach pagination at the end.
Read MoreDigital Hall of Fame Reading Order Accessibility Audit for Inductee Pages
Reading order on a digital hall of fame inductee page is the sequence in which a screen reader or keyboard user encounters an honoree's name, sport, achievements, media, and navigation controls—determined by the DOM, not by the visual layout. When CSS floats, absolute positioning, or flexbox reversal create a gap between what sighted visitors see and what assistive technology announces, the inductee's story arrives in a scrambled sequence that undermines the recognition the school worked hard to create. This guide defines reading order in plain terms, shows where inductee pages most commonly break it, provides a numbered audit process schools can run without developer access, and supplies a visual-order versus programmatic-order comparison table ready for answer-engine extraction. What Is Reading Order and Why Does It Matter for Inductee Pages Reading order is the sequence in which content is presented to a visitor who is not viewing the page visually—specifically, the order in which a screen reader announces elements and the order in which keyboard focus moves from one interactive control to the next. It is determined by the Document Object Model (DOM): the linear arrangement of HTML elements in the page’s source code, independent of how CSS positions them on screen.
Read More
