:::
Daily Life Information
An Accesserty UI Kit accessibility demonstration. The current example is a daily dashboard for time, weather, air quality, UV, sunrise, sunset, and moon phase.
Current time
Weather Information
Data source: Open-Meteo.Get today's weather
Choose a city to get started.
Accessibility patterns this page demonstrates
This page is a working tool as well as a demonstration. Here is what it chose to do, and why.
- Asynchronous status has to be announced
- Weather data loads only after a city is chosen. Loading, locating, failure, and completion all write into a persistent aria-live region, so screen readers announce the change instead of leaving people waiting on a screen that appears unchanged (WCAG 4.1.3 Status Messages).
- Not everything that changes should be announced
- The current time updates every minute, but it deliberately has no aria-live. Announcing the time continuously interrupts screen reader users rather than helping them. Content that moves is not the same as content that needs to interrupt.
- Icons never carry the information
- Weather, moon phase, and level emoji are marked aria-hidden, and the real information sits in the adjacent text. The page still reads correctly when the icons do not render.
- Levels are not conveyed by colour alone
- Air quality and UV levels show an icon together with the level name in text, and the full level table can be opened for context. Information carried only by colour is unavailable to people with colour vision deficiency or anyone reading in bright light (WCAG 1.4.1 Use of Color).
- Native HTML first
- City search uses a native datalist rather than a custom dropdown. Native elements already carry keyboard behaviour and assistive technology support, so there is nothing to rebuild with ARIA.
These patterns come from Accesserty UI Kit. A demonstration is not a guarantee: real pages still need human review and assistive-technology testing.