Announcement

Collapse
No announcement yet.

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

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

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

    Leave a comment:


  • dreamingdigital
    replied
    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

    Leave a comment:


  • Matt Zimmermann
    replied
    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.

    Leave a comment:


  • dreamingdigital
    replied
    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?

    Leave a comment:


  • Matt Zimmermann
    replied
    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.

    Leave a comment:


  • dreamingdigital
    replied
    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.

    Leave a comment:


  • Bruce - PhosphorMedia
    replied
    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.

    Leave a comment:


  • Matt Zimmermann
    replied
    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.

    Leave a comment:


  • dreamingdigital
    started a topic display.css: aria-hidden='true' why?

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

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

    Code:
    /**
     * 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.
Working...
X