Accessibility and design notes
What changed from today's site, why, and how accessibility is built in.
This concept keeps the content of the current City site and folds in the newcomer and economic story from Choose Cranbrook. The structure borrows proven patterns from larger BC cities.
| Issue on today’s site | Change in this concept | Borrowed from |
|---|---|---|
Homepage quick links are vague (“Faq”, “Data Portal”) and several are dead (# links) | Nine plain-language top tasks, each with a description, plus popular searches | Surrey, Victoria |
| Search is a small icon that opens a separate form | Search is the hero, with instant results drawn from the full service list | Victoria, Kamloops |
| Four mega menus with well over 150 links and inconsistent labels (Licenses / Licences, two “Land Development” items) | Six task-based sections, each with its own landing page and an A to Z index | Kamloops, Nanaimo |
Menu headings use javascript:; links, which are not real controls | Menus are real buttons with aria-expanded, Escape to close, and full keyboard support | WCAG 2.2 (4.1.2) |
| Logo text alternative misspells the city (“Cranbook”) | Text-based wordmark; decorative graphics are hidden from screen readers | WCAG 1.1.1 |
| Some form links open the wrong file (e.g. Canadian Police Certificate opens a recycling PDF; sewer connection permit opens an image) | PDF links are labelled “PDF”; the mis-wired links are left out until fixed | Content audit |
| Weather widget shows “–“; social links appear twice | “Today in Cranbrook” strip: City Hall open or closed in real time, election countdown, next meeting, conditions | Kelowna, Nanaimo |
| Newcomer and investment content lives on a separate site | “Basecamp of the Kootenays” section with key facts, sectors and the newcomers guide | Kamloops, Surrey |
| No land acknowledgement on the homepage | Acknowledgement of ʔamakʔis Ktunaxa above the footer | Kamloops, Victoria, Kelowna |
| Most permits are PDFs to print, sign and drop off (the special event application runs to more than 20 pages) | The special event and park booking application is an online form: it asks only the questions that apply, checks answers as you go, totals electrical loads, flags the 14-day deadline and after-hours approvals, and ends with a review page | GOV.UK and BC Gov design patterns |
| Job postings live in a small widget with no page for each job | A careers page reads the same UKG feed as the current widget, adds search and department filters, and gives every job its own page with full details and an Apply button | Kamloops, Victoria |
| Weather widget in the footer shows “–“ | Live current conditions, a three-day forecast, sunrise and sunset, and Environment Canada warnings in the Today panel, with warnings also shown in the notice bar | Kelowna, Nanaimo |
| News opens on a separate page per item, and the old news widget is an auto-rotating carousel | A lead story with photo and headlines on the home page, a searchable news page, and a full page for every story, all from the City’s news feed. No auto-rotation, so stories stay put for keyboard and screen reader users | Surrey, Nanaimo |
| Council video and meeting dates live in separate widgets and pages | Upcoming meetings with agenda and calendar links, the latest meeting video, and an automatic switch to the live stream during meetings, on the home page and a Council meetings page | Kamloops, Nanaimo |
| Web colours drift from the brand | Logo, colour palette, mountain silhouette, sun rays and colour bar follow the City of Cranbrook Corporate Identity Standards Guide; text colours were chosen from the palette to pass WCAG AA | Corporate Identity Standards Guide |
| Site feedback is a pop-up form | Simple “Did you find what you needed?” on every page | Surrey, Nanaimo |
| Reporting a problem online needs a CitySourced account and log-in, and category questions appear one screen at a time | A Report a problem form with no account needed: search the problem types, find an address or drop a pin, answer the questions for that type, add photos (resized, with location data removed), and check for open requests nearby before submitting. A relay sends it to Cityworks, and a status page shows progress by request number | GOV.UK form patterns, Cityworks API |
| One long page per topic, or PDFs, with no shared layout | Every topic in the menu has its own page with the same layout: a plain-language summary, steps, fee tables, a contact box, related links and a link to the source page on cranbrook.ca | GOV.UK, Surrey |
| Plans and reports are published on issuu, a third-party service, or as PDF downloads that are hard to read on a phone | A publication library and a built-in flipbook reader for the City’s own PDFs: page turns, two-page spreads on wide screens, thumbnails, contents, search, zoom, full screen, links to a page, and a text view for screen readers. PDF links across the site open in it, except forms | issuu, Calgary and Edmonton publication pages |
Accessibility built in
- Atkinson Hyperlegible Next for body text, a typeface designed for readers with low vision.
- Colour contrast meets WCAG 2.2 AA in light and dark modes using brand colours: Pantone 1805 red and 3155 teal on white, white on 1815 red. The approved white knock-out logo is used in dark mode. Links are underlined.
- Skip links to content and search, one H1 per view, labelled landmarks, and focus moved to the page heading on navigation.
- Text-size control, dark mode that follows your device, and motion that turns off when you ask your device to reduce motion.
- Touch targets of at least 44 by 44 pixels; external links and PDFs are marked visually and for screen readers.
How this site is built
Every page is a plain HTML file that works without JavaScript. Scripts add live information: City Hall hours, weather, news, Council meetings and jobs, each read from the same feeds the City already publishes at warp.cranbrook.ca. Page content was rewritten in plain language from cranbrook.ca in October 2026, and each page links to its source.