Use tabs, tables, or lists to convey your rates.
Your district can organize rates by service type, customer class, fee category – whatever makes sense for your residents. The tabs adapt to your content while maintaining full accessibility. See a description of how these elements are accessible below the tabs.
2025 Water Rates
Use a table that you can easily edit, or list for your rates:
- Tier 1: $5.55
- Tier 2: $6.55
- Tier 3: $7.00
| Meter Size | Monthly Customer Fixed Service Charge | Minimum Shares Required |
|---|---|---|
| 5/8″ Displacement | $22.00 | 5 |
| 3/4″ Displacement | $26.65 | 5 |
| 1″ Displacement | $35.95 | 10 |
| 1-1/2″ Displacement | $59.20 | 15 |
| 2″ Displacement | $87.10 | 25 |
| 2″ Turbine | $101.05 | 30 |
| 3″ Turbine | $215.00 | 65 |
| 4″ Turbine | $361.45 | 180 |
| 6″ Turbine | $756.70 | 360 |
| 8″ Turbine | $1,315.00 | 630 |
How This Page Meets WCAG 2.2/2.1 AA
- Visual Indicators Beyond Color (WCAG 1.4.1 Use of Color): selected tabs are identified by an icon AND color ensuring users who can’t perceive color differences can still navigate effectively. Choose from 200+ icons to match your brand.
- Keyboard Navigation (WCAG 2.1.1 Keyboard): navigate tabs using arrow keys, activate with Enter or Space which is standard keyboard behavior that assistive technology users expect.
- Focus Management (WCAG 2.4.3 Focus Order, 2.4.7 Focus Visible): clear focus indicators show exactly which tab is active, and focus moves logically through content.
- Screen Reader Support (WCAG 4.1.2 Name, Role, Value): proper ARIA attributes tell screen readers which tab is selected, how many tabs exist, and what content each tab controls.
- Semantic Structure (WCAG 1.3.1 Info and Relationships): tabs are programmatically associated with their content panels, maintaining relationships that assistive technology can interpret.
- Accessible Data Tables (WCAG 1.3.1 Info and Relationships): tables include proper
<th>headers and scope attributes, so screen readers can announce “Row 2, Column 3: Transfer of Title Fee” instead of just reading numbers randomly. - Structured Lists (WCAG 1.3.1 Info and Relationships): proper
<ul>and<li>markup tells screen readers “list with X items,” helping users understand content structure before diving in.
