An error occurred while fetching the assigned milestone of the selected merge_request.
_posts
2013-01-11-how-to-hide-content.md +25 -17
2013-01-14-aria-landmark-roles.md +3 -2
2013-01-14-never-use-maximum-scale.md +2 -2
2013-04-22-title-attributes.md +1 -1
2013-05-11-skip-nav-links.md +2 -2
2013-05-15-understanding-vestibular-disorders.md +3 -3
2013-07-17-using-caption-services-with-html5-video.md +23 -19
2014-05-15-getting-started-aria.md +30 -30
2016-01-07-placeholder-input-elements.md +8 -6
2016-03-05-accessible-data-tables.md +3 -2
+ 25
- 17
@@ -19,22 +19,26 @@ Developers commonly use `display: none` to hide content on the page. Unfortunate
There are real world situations where you might need to hide elements visually (e.g., a form `label`), but keep the element text available to be announced by a screen reader. The "clip pattern" accomplishes this task for you; hide the content visually, yet provide the content to screen readers. Unlike CSS positioning and negative text-indent techniques, the "clip pattern" also works with RTL (Right-to-left) languages for localization. See the article *[Hiding Content for Accessibility](https://snook.ca/archives/html_and_css/hiding-content-for-accessibility)* for more information on the visually-hidden pattern.
It is possible to apply the `.visually-hidden` class to content that contains natively focusable elements (such as `a`, `button`, `input`, etc). It's important to show these elements visually when they receive focus, otherwise a keyboard-only user might not know which element currently has focus. CSS for this might look something like:
@@ -44,10 +48,14 @@ The `aria-hidden="true"` HTML attribute is the logical opposite of the `.visuall
@@ -65,7 +65,8 @@ The following are common landmark roles that tend to be useful on many pages:
@@ -73,7 +74,7 @@ Implementing landmarks in your documents is a straight forward process. Simply a
@@ -18,13 +18,13 @@ By setting `maximum-scale=1.0`, you are disabling the functionality to use pinch
@@ -39,7 +39,7 @@ Based on the intended behavior for Text Alternative Computation the precedence f
@@ -17,7 +17,7 @@ Skip nav links are useful for users who use keyboard navigation only, but screen
@@ -31,7 +31,7 @@ Skip nav links are useful for users who use keyboard navigation only, but screen
**Disclaimer**: The mechanism by which skip navigation links work had for some time been broken in Webkit based browsers and has only [recently been fixed](https://code.google.com/p/chromium/issues/detail?id=37721). Until these browsers release the fixes, you may need to use a JavaScript polyfill to make skip nav links work.