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

    Miva Web Developer
    Alchemy Web Development
    https://www.alchemywebdev.com
    Site Development - Maintenance - Consultation

    Miva Certified Developer
    Miva Professional Developer

    https://www.dev4web.net | Twitter

    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

          Miva Web Developer
          Alchemy Web Development
          https://www.alchemywebdev.com
          Site Development - Maintenance - Consultation

          Miva Certified Developer
          Miva Professional Developer

          https://www.dev4web.net | Twitter

          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

              Miva Web Developer
              Alchemy Web Development
              https://www.alchemywebdev.com
              Site Development - Maintenance - Consultation

              Miva Certified Developer
              Miva Professional Developer

              https://www.dev4web.net | Twitter

              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

                  Miva Web Developer
                  Alchemy Web Development
                  https://www.alchemywebdev.com
                  Site Development - Maintenance - Consultation

                  Miva Certified Developer
                  Miva Professional Developer

                  https://www.dev4web.net | Twitter

                  Comment

                  Working...
                  X