{"id":1487,"date":"2013-01-09T09:04:58","date_gmt":"2013-01-09T14:04:58","guid":{"rendered":"http:\/\/www.equipmentlink.org\/blog\/?p=1487"},"modified":"2013-01-09T14:07:20","modified_gmt":"2013-01-09T19:07:20","slug":"web-tip-aria-attributes-and-styles-1913","status":"publish","type":"post","link":"http:\/\/www.equipmentlink.org\/blog\/?p=1487","title":{"rendered":"Web Tip, ARIA Attributes and Styles, 1\/9\/13"},"content":{"rendered":"<h2>ARIA Attributes and Element Styles<\/h2>\n<p>ARIA attributes are often necessary for optimal accessibility of web applications. They can be used to present information and meaning that otherwise would only be presented visually. For example, a red border or red text might be used to identify errant form fields (such as a form field that was not completed properly). This color-only designation would not be accessible to screen reader users. However, adding <code>aria-invalid=\"true\"<\/code> would provide an indication to a screen reader user that this field is invalid or broken. With CSS, visual styles can be applied to elements based on their ARIA attribute values. Instead of setting the ARIA attribute and also styling the form control to present a red border, CSS styles of <code>[aria-invalid=true] {border: 2px solid red;}<\/code> could be used to automatically style the element based on its ARIA attribute.<\/p>\n<div class=\"al2fb_like_button\"><div id=\"fb-root\"><\/div><script type=\"text\/javascript\">\n(function(d, s, id) {\n  var js, fjs = d.getElementsByTagName(s)[0];\n  if (d.getElementById(id)) return;\n  js = d.createElement(s); js.id = id;\n  js.src = \"\/\/connect.facebook.net\/en_US\/all.js#xfbml=1&appId=149587675112835\";\n  fjs.parentNode.insertBefore(js, fjs);\n}(document, \"script\", \"facebook-jssdk\"));\n<\/script>\n<fb:like href=\"http:\/\/www.equipmentlink.org\/blog\/?p=1487\" layout=\"standard\" show_faces=\"true\" share=\"false\" width=\"450\" action=\"like\" font=\"arial\" colorscheme=\"light\" ref=\"AL2FB\"><\/fb:like><\/div>","protected":false},"excerpt":{"rendered":"<p>ARIA Attributes and Element Styles ARIA attributes are often necessary for optimal accessibility of web applications. They can be used to present information and meaning that otherwise would only be presented visually. For example, a red border or red text might be used to identify errant form fields (such as a form field that was [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_s2mail":"yes","ngg_post_thumbnail":0,"footnotes":""},"categories":[14,5,29,35],"tags":[],"_links":{"self":[{"href":"http:\/\/www.equipmentlink.org\/blog\/index.php?rest_route=\/wp\/v2\/posts\/1487"}],"collection":[{"href":"http:\/\/www.equipmentlink.org\/blog\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.equipmentlink.org\/blog\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.equipmentlink.org\/blog\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.equipmentlink.org\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1487"}],"version-history":[{"count":4,"href":"http:\/\/www.equipmentlink.org\/blog\/index.php?rest_route=\/wp\/v2\/posts\/1487\/revisions"}],"predecessor-version":[{"id":1491,"href":"http:\/\/www.equipmentlink.org\/blog\/index.php?rest_route=\/wp\/v2\/posts\/1487\/revisions\/1491"}],"wp:attachment":[{"href":"http:\/\/www.equipmentlink.org\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1487"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.equipmentlink.org\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1487"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.equipmentlink.org\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1487"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}