Announcement

Collapse
No announcement yet.

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

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

    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.
    Colin Puttick
    Miva Web Developer @ Glendale Designs

    #2
    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.
    Matt Zimmermann
    Front-End Development Director / Miva, Inc.

    Comment


      #3
      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.
      Bruce Golub
      Phosphor Media - "Your Success is our Business"

      Improve Your Customer Service | Get MORE Customers | Edit CSS/Javascript/HTML Easily | Make Your Site Faster | Get Indexed by Google | Free Modules | Follow Us on Facebook
      phosphormedia.com

      Comment


        #4
        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.
        Colin Puttick
        Miva Web Developer @ Glendale Designs

        Comment


          #5
          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.
          Matt Zimmermann
          Front-End Development Director / Miva, Inc.

          Comment


            #6
            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?
            Colin Puttick
            Miva Web Developer @ Glendale Designs

            Comment


              #7
              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.
              Matt Zimmermann
              Front-End Development Director / Miva, Inc.

              Comment


                #8
                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
                Colin Puttick
                Miva Web Developer @ Glendale Designs

                Comment


                  #9
                  Here's some more information on where things are heading with the ReadyThemes: https://www.miva.com/forums/forum/de...-accessibility
                  Matt Zimmermann
                  Front-End Development Director / Miva, Inc.

                  Comment

                  Working...
                  X