The AccessibilityAccessibilityAccessibility (commonly shortened to a11y) refers to the design of products, devices, services, or environments for people with disabilities. The concept of accessible design ensures both “direct access” (i.e. unassisted) and “indirect access” meaning compatibility with a person’s assistive technology (for example, computer screen readers). (https://en.wikipedia.org/wiki/Accessibility) Team shares accessibility expertise across the project to improve the accessibility of WordPress coreCoreCore is the set of software required to run WordPress. The Core Development Team builds WordPress. and resources.
to hide text visually that is primarily needed for screen reader users.
for skip links to ensure keyboard navigation visibility when the link gets focus.
The CSSCSSCSS is an acronym for cascading style sheets. This is what controls the design or look and feel of a site. class screen-reader-text is a WordPress Generated Class. Each theme should have these styles in its CSS.
The :focus style is primarily used by skip links. The colors, borders and padding of the focus style can be adjusted to match the styling of the theme. The styles defined below are those used by WordPress coreCoreCore is the set of software required to run WordPress. The Core Development Team builds WordPress. for Skip Links.
If you’re using the class ‘.screen-reader-text’ on any other focusable element (buttons, links, or form fields), then these focus styles will also apply. If this is the case, you may need to change the positioning rules, depending on the location of the focusable element.
Set width and height to 1 pixel, because some screen readers don’t announce an element with a size of 0 pixels.
margin: -1px; to hide it completely from sight
word-wrap: normal; to avoid screen readers reading the text letter for letter, as the text is placed in a 1 pixel wide space. Many screen reader and browser combinations announce broken words as they would appear visually.
clip is deprecated, but is added to support older browsers that don’t support clip-path yet.
Note: display: none; and visibility: hidden; hide text from screen, but also for a screen reader, so they can’t be used to give extra information to screen reader users.
Note: If you include screen-reader-text as a part of a longer string in your WordPress theme, make sure the construction is translatable as a whole string (see I18n for WordPress Developers), because the word order may vary in different languages.
// Don't do this, because it doesn't allow changing word order.
echo __( 'Continue reading', 'textdomain' ) . ' ' . get_the_title() . '';
// Do this, translators can now change the word order.
__( 'Continue reading "%s"', 'twentyseventeen' ),