Remaining accessibility issues

[noahmanger]

Home Page

• In glossary, update span text on minimize buttons to say, collapse, or minimize, etc
• Focus is lost when tabbing after the contact links
• Focus is lost off screen at the end of the page
• Skip nav should focus on first element

Registration and Reporting

• Update alt tags in campaign guides to include all text seen in images
• "Find by District" should be associated with the two fields either with a legend, or included in their aria labels
• The first TD in each row in TBODY should be scope='row' so its clear to the screen reader that those fields belong to that document

https://fec-dev-web.18f.gov/candidates

• The first TD in each row in TBODY should be scope='row' so its clear to the screen reader that those fields belong to that candidate

https://fec-dev-web.18f.gov/elections/

• "Find by District" should be associated with the two fields either with a legend, or included in their aria labels

https://fec-dev-web.18f.gov/filings

• Run code sniffer on the filters, missing labels and duplicate ids
• For radio buttons, label for only works with id's, need to use fieldset and legend to label radio buttons.
• The first TD in each row in TBODY should be scope='row' so its clear to the screen reader that those fields belong to that document
• Filters should be removed from tab order when hidden

https://fec-dev-web.18f.gov/receipts

• Run code sniffer on the filters, missing labels
• For radio buttons, label for only works with id's, need to use fieldset and legend to label radio buttons.
• The first TD in each row in TBODY should be scope='row' so its clear to the screen reader that those fields belong to that contributor

https://fec-dev-web.18f.gov/disbursements

See above

https://fec-dev-web.18f.gov/committee/

• Tabs aren't keyboard accessible (includes sub tabs "compare by")
• Select dropdown is missing label, see codesniffer
• When tabbing to the end of the page, the style is "messed" up

Remaining tasks:

• Disabled links on the nave aren't contrast compliant
• "Help improve FEC" pop up, the close button isn't keyboard accessible
• Code sniffer is throwing an error on the leaflet img tags missing an alt, if you can add a blank alt to those, that would be great
• year select should be labeled by neighboring text to give it more context

[noahmanger]

@jenniferthibault need some design help: the disabled links in the header still need to pass contrast requirements. Do you have any ideas how we should do this?

[jenniferthibault]

Ohhhh interesting! I was basing that choice on beta.consumerfinance, but it looks like their TBD content links aren't 508 compliant either.

What do you think about this?

• Make text gray #737373 and 100% opacity for disabled links
• Add parenthesis ( x ) around any disabled link to make it visually side-noted
• Change TBD to Content TBD or Page TBD to make it more specific

That would look like this:

If we REALLY want to do it up, we could add a tooltip explaining what Page TBD means, but that might be overkill. My gut says the above will be enough. Though obviously testing would be good here, I don't think 100% necessary to test that before launch given that we've heard from previous feedback that the rest of the page makes it clear.

[noahmanger]

I like it. Thanks.

[noahmanger]

Ok, got those fixed in a PR. That leaves the last three items on that list.

@jmcarp do you mind adding a little javascript to add alt-tags to the leaflet tiles? And if you have an idea for adding a tabindex to ethnio close button that should solve the problem of allowing that to be closed with the keyboard. But if not I think it's ok.

The last point about the year cycle select needing a label I take as more of a recommendation. The proper aria-label is there, and I believe we've seen in usability testing that people understand what it does.

[noahmanger]

Alt tags have been added to the tiles, and I made a separate issue for the Ethnio popup. I don't think we need to worrry about the year select, so I'm closing this out.