Thinking about Accessibility & Security

Jeffrey de Wit

  • Front End Developer @WebdevStudios
  • WP a11y team member

What we'll cover

Accessibility Considerations

Can I still get what I need from the feature if:

  • I can't use a mouse (or don't have one!)
  • I can't see the image/video (or it doesn't load!)
  • I can't hear the audio (or it doesn't load!)
  • I can't distinguish colour very well

Can't use a mouse?

  • Keyboard accessibility:
    • Interact with functionality
    • Focus styles
    • Focus management and keyboard traps
    • Use semantic HTML

Focus styles


a:focus {
	text-decoration: underline; /* or something else */
}

Keyboard traps

A situation you can get into, but not out of, with a keyboard

  • Modals with only a clickable close button
  • Poor handling of keydown events on links/inputs

Can't see the page,
or hear the audio

  • Text alternatives:
    • Provide for alt attributes
    • Provide for transcripts
  • Provide feedback:

Can't (easily) distinguish colour

  • Don't use colour as the only indicator
  • Contrast ratio of at least:
    • 4.5:1 for normal text
    • 3:1 for large text

Security Considerations

  • Do I know what it is and where it came from?
  • Am I allowed to do this?
Stay paranoid and trust no one

Most common security issues

  • SQL Injections
  • Cross-site scripting (XSS)
  • Cross-site Request Forgery (CSRF)

SQL Injections

$wpdb->query(
	"SELECT * FROM 'my_table'
	WHERE ID = $id"
);

Validate and Sanitize inputs

Basic validation





$quantity = intval( $_POST['qty'] );

But what if...



$tagline = sanitize_text_field( $_POST['tagline'] );
Codex: Sanitization functions

Use the API

$wpdb->update(
	'my_table',
	array( 'my_value' => '$new_value' ), 
	array( 'ID' => $id )
);
Codex: wpdb class reference

XSS

<?php echo $some_variable; ?>
<?php $some_variable = "safe string"; ?>
<?php $some_variable = $_GET['url_param']; ?>
http://mysite.com/?url_param=
<?php echo esc_html($some_variable); ?>
Codex: Escape functions

CSRF

Tricking victims into doing something legit with malicious intent. For example, getting them to transfer funds to the attacker's account.

Nonces

Unique, session specific, values to help verify a request's origin

Codex: Nonces

Resources