Removed Aria-pressed label for html validation reasons #2981
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
Hey thanks for the PR and especially for including a demo. Can you link to an article discussing this? My recollection is that the w3 validator isn't always 100%, and I wonder if, since it applies to Thanks |
|
I believe the issue is that the |
|
Cool thanks for the clarification and the links @cappadona. I think this adds up to me. @cielt @jasonday @scottaohara this jive with y'all? |
|
@leggomuhgreggo, I think @cappadona is correct - |
|
Cool thanks for weighing in @jasonday. I'm going to merge this sucker. Thanks for making the PR @tbirdsall |
|
Nice edit @tbirdsall 👍 Sorry, just catching up with this, but to add to the rationale for removing |
cappadona
added a commit
to cul-it/mann-wagon
that referenced
this pull request
Jul 27, 2017
PARTIAL FIX! Addresses: * Redundant WAI-ARIA attribute (drop `nav` role for <nav>) Persists: * Invalid WAI-ARIA role, state or property (invalid `aria-pressed` state on `tab` role -- see kenwheeler/slick#2981)
cappadona
added a commit
to cul-it/mann-wagon
that referenced
this pull request
Jul 28, 2017
* 1.1.1 Non-text Content Alt attribute for meet our experts headshots on the homepage. * 1.3.1 Info and Relationships * Input field is a missing a description (search in header) * Naming generic landmarks (homepage sections) * Non-distinguishable landmarks (multiple unlabeled nav elements) Several additional warnings and errors related to Slick carousels (spotlights & meet our experts) persists, but hope to address these with latest v1.7.0 release [1]: * 'Select box' without a description * Use unique identification for elements * Incorrect reference for 'aria-describedby' And there's also a warning that can be attributed to Font Awesome, which I may or may not address depending on feasibility of using CDN and playing nicely with Semantic UI [2]: * Avoid using the 'i' tag [1] https://github.com/kenwheeler/slick/releases/tag/1.7.0 [2] http://fontawesome.io/accessibility * Update to latest slick-carousel v1.7.0 Fresh off the press & not yet published to npm so using GitHub repo for source. Addresses following errors from 1.3.1 Info and Relationships * 'Select box' without a description * Incorrect reference for 'aria-describedby' Still have one remaining error (unique ID for dots)... * Single bundle for homepage carousels Results in calling slick-carousel a single time to build both carousels, which allows for Slick's internal incrementing to properly assign unique IDs and in turn addresses final error for 1.3.1 Info and Relationships: * Use unique identification for elements * 2.4.1 Bypass Blocks * Skip repeated content (skip to main content link - visible on focus) * 2.4.4 Link Purpose (In Context) * Non-distinguishable links More specific titles on anchors for computer availbility, experts and events. * 3.2.2 On Input * Missing button in form Add & hide submit button for search. Refactor accessibility related styles into their own helper as they probably should have been from the beginning. * 4.1.2 Name, Role, Value PARTIAL FIX! Addresses: * Redundant WAI-ARIA attribute (drop `nav` role for <nav>) Persists: * Invalid WAI-ARIA role, state or property (invalid `aria-pressed` state on `tab` role -- see kenwheeler/slick#2981) * 2.4.4 Link Purpose (In Context) -- revisited * Non-distinguishable links Even more specific titles on anchors for repeating events by including date. * 1.3.1 Info and Relationships -- revisited * Content outside of landmarks (ove skip-content link into <header>) Additional instances of this error remain but are tied to LibCal MyScheduler widget so at the moment, they're out of our hand. * Non-distinguishable landmarks (label breadcrumbs, hours, projects & section nav) * 1.1.1 Non-text Content -- revisited Alt attribute for staff headshots (meet our experts & staff directory), news, and section photos. * 2.4.4 Link Purpose (In Context) -- revisited again * The link text is not sufficient (aria-label for link to Tumblr post) * Non-distinguishable links (combine news photo & title) * A11y tweaks for LibCal workshops widget (iframe) 1.3.1 Info and Relationships * Presentational attributes used (drop frameborder & scrolling attr) 4.1.2 Name, Role, Value * The iFrame is missing a description (add title attr) * Accessible forms 1.3.1 Info and Relationships 3.3.2 Labels or Instructions 4.1.2 Name, Role, Value * Group form elements * Input field is missing a description * 'Select box' without a description * 'Text area' is missing a description * The instruction is not connected to anything Boils down to linking labels to their corresponding form elements via `for` attribute on label and `id` on target element. For those exceptions where no `<label>` is present, `aria-label` attribute fills in. Covers all forms across the site: * consultation request * course reserves * events calendar (toggle courses) * instruction request * site feedback * site search * software request * special collections * 2.4.4 Link Purpose (In Context) -- revisited 3x * Non-distinguishable links Apply same tweaks (more specific anchor titles) to events calendar that were previously introduced for homepage events in cd567b2 (additional dates) & 3d9882c (repeating event headings).
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
In order to pass HTML5 validation (https://validator.w3.org/nu) and be fully WCAG AA compliant, the Aria-pressed label was removed, as it is not allowed on an li element at that point.
Codepen for test cases https://codepen.io/tbirdsall/pen/PjXwGW