Daily Dashboard: Accessibility UI Example
Explore loading messages, text-based levels, and decorative icons in a time and weather tool. This example combines Accesserty UI Kit with native HTML; it is an implementation reference, not a completed accessibility audit.
Current time
Weather Information
Weather data by WeatherAPI.com
Weather is for general information only. Forecasts are uncertain and may not match conditions at your location or time. For personal safety, aviation, marine navigation, emergency planning or other safety-critical decisions, consult official meteorological services and relevant authorities rather than relying on this page alone.
Enter at least two characters, press Enter or Search cities, then choose a city from the results below. Your choice is remembered on this device.
Your device location is requested only when you choose “Use my location”. This site does not write those coordinates to local storage or reuse them on your next visit. A city you select manually is saved on this device and used on your next visit; using your location does not replace that saved city.
City search terms and lookup coordinates go through Accesserty's Cloudflare weather service to WeatherAPI. Coordinates are rounded to two decimal places before sending, but still indicate an approximate location. Service providers may retain request logs under their own policies. Read WeatherAPI's privacy notice
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
- After a city is selected, loading, locating, failure, and completion update a persistent aria-live region so assistive technology can notify people without moving focus. Adding the attribute is not a test result: check actual browser and screen-reader combinations for missing, repeated, or disruptive announcements.
- Not everything that changes should be announced
- The clock shows this device’s time to the minute without aria-live, so each update does not request an announcement. Readers can still navigate to the time themselves. Changing content does not always need 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).
- Visible, keyboard-operable search results
- City search uses a UI Kit input and displays results as native HTML buttons, without relying on a browser suggestion popup. Press Enter to search, Tab to a city, and Enter to select it. Focus returns to the input after selection. Screen-reader announcements and use when zoomed in still need testing.
The input comes from Accesserty UI Kit; this page implements the status messages, decorative markers, and text-based levels. Test these choices in your own tasks rather than treating the example as evidence of WCAG 2.2 AA conformance.