RachelRVasquez

##How to implement and use a screen reader text class

There is one class that should be in every developer's toolbox. This one class can make various features on a site accessible friendly - ranging from icon fonts, links that warn a user that a new window or tab is about to opened, or in general, better UI for screen reader users. This class is handy because there may be text on the site that you want to hide from sighted users, but still have available for those using a screen reader.

You can name the class whatever you’d like. For purposes of this demo, we can call it screen-reader-text. This will be our class for hiding content on a site without hiding it for screen reader users.

When we create this class, we’ll need to write the Css so that it’s cross browser compatible and moves the text out of view without removing it. By removing it, I mean using Css like display: none or visibility: hidden. These will hide the content from both sighted users and screen reader users. This isn’t what we want to use

RachelRVasquez

##Choosing between a Button or a Link

One of the habits that make such a huge difference is knowing when to choose a button and when to choose a link during development. Before making that decision, there's one question that can clear everything up.

Does this GO to another url or does this DO something instead?

In other words, does this go somewhere like another page within or outside the site? Or does this do an action - like prompt a modal, submit a form, trigger the mobile menu to appear, reveal hidden content, and so on?

If it's an action - and not a destination, then a button element is what we want to use. This is why a link looks strange when we write it like this:

RachelRVasquez

Article: How to use placeholders on input elements.

Form input placeholder attributes are helpful for providing hints to (sighted) users in forms. Often times, due to design decisions, a placeholder is used to replace a more semantic label element. Unfortunately, accessible placeholder browser support isn't complete and placeholders often lack sufficient color contrast by default.

Now, there's nothing wrong with using placeholders - they can still be used. However, they should be used in addition to a label, not as a replacement. What happens when we don't use a label for an input element, is a screen reader will get to that field, but won't have any information for the user on what the input element is for. So the screen reader user doesn't know what information to fill out. Also, a placeholder dissapears when the input element is in focus, and can be an issue for people with memory impairments.

Make your forms accessible by using one of the following methods (in order of preference):

1. Rede

RachelRVasquez

#What is Color Contrast?

##Color Theory

Colors from different segments of the color wheel are contrasting colors. In color theory, complementary colors (or "opposite" colors) that are directly across from one another on a basic color wheel provide maximum contrast. This means they stand out from one another the strongest compaired to being paired with other colors. Complementary colors are two colors that cancel one another out and produce a white/gray-scale color.

Oftentimes companies implement complementary colors to provide the most contrast in their brand. Examples in the wild are the Laker's logo that uses purple and yellow or the Knick's logo that uses blue and orange. Purple and yellow are on opposite sides of the color wheel from each other. So are orange and blue. You may also see complementary colors during the end of the year holidays - as red and green are also complementary to one another.

##What does this mean for web accessibility?

RachelRVasquez

<!-- #1: No Polyfill markup example -->
<div class="card">
	<div class="card-content-wrapper">
		<div class="card-hero-block-left">
			<div class="ds-card-hero-bg" style="background-image: url('http://placehold.it/780x480/777777/ffffff?text=Image+Cap');">
				<img src="http://placehold.it/780x480/777777/ffffff?text=Image+Cap"/>
			</div>
		</div>

		<div class="card-hero-block-right">

RachelRVasquez

<!-- Possibility for IE and object-fit markup w/o Polyfill -->
<div class="card">
	<div class="card-content-wrapper">
		<div class="card-hero-block-left">
			<!--[if IE]>
			<div class="ds-card-hero-bg" style="background-image: url('http://placehold.it/780x480/777777/ffffff?text=Image+Cap');">
			<![endif]-->
				<img src="http://placehold.it/780x480/777777/ffffff?text=Image+Cap"/>
			<!--[if IE]>
			</div>

RachelRVasquez

add_action( 'post_submitbox_misc_actions', 'add_help_text_to_publish' );

function add_help_text_to_publish( $post_obj ) {
		global $post;
    //whatever custom post type 
		if ( 'custom-post-type' === $post->post_type ) {
			echo '<p style="padding-left: 15px;"><strong>Note:</strong> Some helpful text here.</p>';
		}
}