display.css: aria-hidden='true' why?

[dreamingdigital]

Just wondering why in core/css/utilities/display.css on line ~40

/**
 * Hide visually and from screen readers.
 */
[aria-hidden='true'],
.u-hidden {
    display: none;
}

Because that makes no sense to me. In fact in my opinion that entire [aria-hidden='true'], should be deleted.

Matt Zimmermann please elaborate.

[Matt Zimmermann]

Hi Colin,

This is a catch-all which should probably be changed to include the `hidden` attribute as well. The HTML5 'hidden' attribute tells browsers not to display the element, the same way 'display: none;' works. The 'aria-hidden' property tells screen-readers if they should ignore the element as well.

This is something that will be evaluated as the ReadyThemes go though more accessibility testing and cleanup.

[Bruce - PhosphorMedia]

ARIA (Accessible Rich Internet Applications) defines a way to make web content and applications more accessible to people with disabilities.

The hidden attribute is new in HTML5 and tells browsers not to display the element. The aria-hidden property tells screen-readers and other application if they should ignore the element.

[dreamingdigital]

Things like the mobile shopping cart trigger in the header -- that is useless on a screen reader, as well as the transfigure navigation menu, or hidden form inputs. I want to hide those for screen readers but not for trad. browsers. What "aria" do you recommend putting on those? Because of the CSS in display.css I can't just aria-hidden="true" on those items without having them also not show up for everything else.

[Matt Zimmermann]

HI Colin,

In that case, I would remove [aria-hidden='true'] for the site you are working on. If I remember correctly, aria attributes were not implemented yet in Elements.

[dreamingdigital]

Thanks Matt. I will remove that 1 line of CSS :)
Yes, I'm in the process of adding a11y compliance stuff to some Shadows sites. Basically a lot of the core is there but a lot of the details the a11y tools are looking for aren't there. Is somebody going to go over Shadows and add all this stuff in the future?

[Matt Zimmermann]

Hi Colin,

Yes, I will be.

Now that Colossus is live, the next focus is accessibility. Shadows will be refit to pass WCAG-A, WCAG-AA, and Section 508 with no errors/violations. This will include making sure that any JavaScript, which adds or modifies display, will alter the ARIA tags as needed.

[dreamingdigital]

Thanks Matt. That will be great. Basically finding a lot of missing labels, empty buttons, duplicate alt and title tags, etc etc. Plus the order of things should probably be a little different. Adding a jump to main content area, etc. These W3 docs is so incredibly difficult to understand and have no real-world examples. https://www.w3.org/WAI/PF/aria/state...es#aria-hidden

[Matt Zimmermann]

Here's some more information on where things are heading with the ReadyThemes: https://www.miva.com/forums/forum/de...-accessibility