Needs to come off production
Google Maps
Recent of Post Type Carousel
Boxed Element Holder
Venue Map
Sidebar List
ORIGINAL NOTES
NOT DONE – Title needs to be is an H2
Buttons
ORIGINAL NOTES
IS THIS DONE? – Under the “Traffic Impact Announcements,” “Connect With Us,” and “Sustainability Programs” headings, JAWS/Chrome and VoiceOver/Safari users encounter the decorative icons for the links as empty spaces when navigating by the ARROW keys or by FLICK. . These icons can be hidden so screen-reader users only encounter the adjacent link text instead. Apply span tags, utilize role="img", and then apply aria-hidden="true".
DONE – Remove all caps on blue and green
DONE – Change blue to #487b9d
DONE – Change green to #008265
Tabs
- I don’t see Tabs as a choice on Production
- Should be able to change Tab Heading sizes like we do with Accordions
- Should hear “expand” and “collapse” when opening each tab
- Remove – style, shape, etc.
ORIGINAL NOTES:
IS THIS DONE? Are the tabs in green accessible (do they show up as links and are the items within each tab accessible?
Answer: The tabs can be reached and accessed by all users. However, they are presented as links instead of tabs in a tab panel, and there is no indication which tab is currently active. Coding these elements as tabs will help users know what to expect in this area. Reference the W3C Tabs with Manual Activation page for guidance regarding tab panels.
WE’RE NOT ALLOWING ICONS: Are the icons within the tabs accessible?
Answer: The links within the tab panel can be reached and activated. However, JAWS/Chrome and VoiceOver/Safari screen-reader users encounter the decorative icons as blank spaces when navigating via ARROW or FLICK. This increases the amount of presses or FLICKS it takes to get through the links in this area. We recommend hiding the decorative icons so that only the links are encountered.
Accordions
announcing when opened and closed. This is great!
I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Blue Box
Looks good
Box
Looks good. Style options have been removed. Only creates white box with green border.
Alert Bars
ORIGNAL NOTES
DONE close button is coded as a link and not a button.
NOT DONE: Change to:
alert red
notice blue
info green
Call to Action
(use only with white text with the navy blue background)
subheading defaults to an H4….needs to be an H3
Heading - this is H2, with a link
Subheading - this is defaulting to H4 and can't be changed. Should be an H3
Nothing special about this Call to Action element.
Counter
ORIGINAL NOTES:
NOT DONE – title is white by default, weight the number 800 and title 18px
197
Counter Test134
Test number 2Embed Video
Single Image
Too many options like – border color, image shape, animation
Single Image Widget Title
List – DELETE
- Lorem Ipsum
- Lorem Ipsum
- Lorem Ipsum
Image Box
ORIGNAL NOTES
DONE – Remove “Link Image to this URL”
News Articles List
ORIGINAL NOTES
DONE – has option for excerpt, which adds the arrow link, want the exert but not the arrow or a “read more”
DONE – Title needs to be the link to article – remove the read more.
NOT DONE – need to underline links
Has carrots, do we care?
Round Chart
Are the available colors all tested for accessibility? Ideally we’d have patterns.
Has animation options and border color options – don’t want this
This a Round Chart
Section Header
ORIGINAL NOTES
DONE – only option should be green line
This is a Section Header
Tables
ORIGINAL NOTES
In the “Sort and Filter” table, the links to the volunteer opportunities receive focus twice when navigating via TAB. Ensure the links only receive focus once.
Add th tags to the header cells on the columns of the “Simple” table table. This will allow screen-reader users to navigate and understand the relationships of the data within the table.
The “Simple” table does not have the necessary markup. Utilize `scope=”col”` for the columns and `scope=”row”` for the rows to ensure screen-reader users can interact with the table in a meaningful way.
For the “Sortable,” “Sort and Filter,” and “Boulder County Tax Rates” tables, the sortable table headers are presented to screen-reader users as plain text. Add role=”button” to these elements or code them as HTML buttons so screen-reader users know they are sctionable.
On mobile, VoiceOver/Safari users do not receive any indication that the tables have been sorted when they activate one of the sortable columns in any of the sortable tables. This also occurs for JAWS/Chrome users when they activate the sortable columns while navigating with the ARROW keys.
For the “Sortable” and “Sort and Filter” tables, screen-reader users are not made aware the results filter automatically as they type. Use aria-live=”polite” or role=”status” to convey the results have changed.
When zoom is increased to 400%, part of the tables get cut off. Ensure no columns are pushed off-screen when zoom is increased to 400%.
2.4.3 int he report talks about a “top of page” issue thats happening when you click on sorting.
Notes from Alyssa
In follow-up to the discussion we had about focus order when tabbing through a table with links, I have figured out what is causing that particular issue. There is a Tabindex value of “0” placed on the table data cell <td> of each of the links. Since links have a default Tabindex of “0” and the <td> elements have had the Tabindex value placed on them, they both receive focus when navigating with the TAB key. If you remove the Tabindex values from the <td> elements that contain the links, the issue will likely be resolved.
https://www.w3.org/WAI/ARIA/apg/patterns/table/examples/sortable-table/
https://www.w3.org/WAI/tutorials/tables/two-headers/#table-with-header-cells-in-the-top-row-and-first-column
This is a Table Header. Set to H2 which is good!
| Row Header | How to you give this TR tags? | C |
| Boulder | red | 1 |
| Superior | yello | 2 |
| Louisville | blue | 3 |
| Project Sponsor | Track | Project Name | Subregional Share Funding Request | Total Cost |
|---|---|---|---|---|
| Boulder | AQ/MM | 30th St. Multimodal Improvements - Colorado Ave. to Baseline Rd. | 5840000 | $7,300,000 |
| Boulder | AQ/MM | Colorado Ave. Complete Streets Improvements: Folsom St. to Regent Dr. | 2160000 | 3600000 |
| Boulder | AQ/MM | Folsom St. Multimodal Study: Pine St. to Colorado Ave. | 1200000 | 1500000 |
| Boulder County | STBG | Boulder County Vision Zero Safe Routes to School Action Plan | 359000 | 450000 |
| Boulder County | STBG | Boulder Countywide Strategic Transit Plan | 1198000 | 1500000 |
| Boulder County | AQ/MM | Lafayette-Louisville-Boulder Protected Bikeway Feasibility Study | 382000 | 425000 |
| Boulder County | STBG | Longmont to Boulder (LOBO) Trail - Jay Road Connection Multimodal Improvements | 1353000 | 1700000 |
| Boulder County | STBG | SH-119 Bikeway: Airport Rd. to Hover St. | 7191000 | 9000000 |
| Boulder County | STBG | SH-119 Bikeway: Foothills Pkwy. to Jay Rd. | 5992000 | 7500000 |
| Boulder County | STBG | SH-119 Bikeway: Niwot Rd. to Airport Rd. | 3036000 | 3800000 |
| Boulder County | AQ/MM | SH-93 Bikeway Feasibility Study: SH-170 to Jefferson County Line | 314000 | 350000 |
| Boulder County | STBG | South Boulder Rd. BRT Study: SH-7 & 119th St. to Broadway & Table Mesa Dr. | 399000 | 500000 |
| Boulder County | AQ/MM | Southeast Boulder County SuperFlex Demand Response Transit Service | 3434000 | 3820000 |
| Erie | AQ/MM | Erie FlexRide Service | 540000 | 600000 |
| Longmont | AQ/MM | SH-119 BAT Lanes: Nelson Rd. to Pratt Pkwy. - Design | 3113000 | 3891000 |
| Longmont | AQ/MM | SH-66 Multi-use Path: Hover St. to Main St./US-287 | 2240000 | 2800000 |
| Longmont | AQ/MM | US-287 & 21st Ave. Bike/Ped Underpass | 9558000 | 11948000 |
| Louisville | AQ/MM | Via Appia Way Multimodal Improvements: South Boulder Rd. to McCaslin Blvd. | 2480000 | 3100000 |
| Louisville | STBG | SH-42 & South St. Bike/Ped Underpass | 7190000 | 9000000 |
| Superior | AQ/MM | McCaslin Multi-Use Underpass north of Rock Creek Pkwy | 4794000 | 6000000 |
Table Title Test
| - | date | time | location | fee |
|---|---|---|---|---|
| yoga | Feb. 26, 2025 | 8am | rec center | $10 |
| pilates | Feb. 27 | 9am | rec | $5 |
| cycling | Feb. 28 | 10am | rec | $15 |
| total body workout | March 1 | 11am | rec | $25 |