WordPress Comment form customisation (inc HTML5 validation and accessibility improvements)

comments.php

<?php
/*
 * If the current post is protected by a password and the visitor has not yet
 * entered the password we will return early without loading the comments.
 */
if ( post_password_required() ) {
	return;
}
?>

<section class="comments-area grid__item one-whole">
	<?php if ( have_comments() ) : ?>

	<h2 class="comments-title">
		<?php
			printf( _n( 'One comment', '%1$s comments', get_comments_number(), 'javelin' ),
				number_format_i18n( get_comments_number() ), get_the_title() );
		?>
	</h2>

	<ul class="comment-list">
		<?php foreach ($comments as $comment) : ?>
  	<li class="comment">
    	<?php echo get_avatar( $comment, 105 ); ?>
    	<div class="grid__item four-fifths">
      	<cite><?php _e('By'); ?> <span class="author"><?php comment_author_link() ?></span> <?php _e('on'); ?> <?php comment_date('F j, Y') ?> <?php _e('at'); ?> <?php comment_time() ?> <?php comment_reply_link( 'Reply', get_comment_ID(), get_the_ID() ); ?></cite>
      	<?php comment_text(); ?>
      </div>
  	</li>
    <?php endforeach; ?>
	</ul><!-- .comment-list -->

	<?php if ( get_comment_pages_count() > 1 && get_option( 'page_comments' ) ) : ?>
	<nav id="comment-nav-below" class="navigation comment-navigation" role="navigation">
		<h3 class="screen-reader-text"><?php _e( 'Comment navigation', 'javelin' ); ?></h3>
		<div class="nav-previous"><?php previous_comments_link( __( '&larr; Older Comments', 'javelin' ) ); ?></div>
		<div class="nav-next"><?php next_comments_link( __( 'Newer Comments &rarr;', 'javelin' ) ); ?></div>
	</nav><!-- #comment-nav-below -->
	<?php endif; // Check for comment navigation. ?>

	<?php if ( ! comments_open() ) : ?>
	<p class="no-comments"><?php _e( 'Comments are closed.', 'javelin' ); ?></p>
	<?php endif; ?>

	<?php endif; // have_comments() ?>
  
  <?php $args = array(
    'fields' => array(
      'author' => '<p class="comment-form-author">' . '<label for="author">' . __( 'Name' ) . '</label> ' .
      '<input name="author" type="text" required aria-required="true" value="' . esc_attr( $commenter['comment_author'] ) . '" size="20" placeholder="Name (required)" /></p>',
      'email'  => '<p class="comment-form-email"><label for="email">' . __( 'Email' ) . '</label> ' .
      '<input name="email" type="email" required aria-required="true" value="' . esc_attr(  $commenter['comment_author_email'] ) . '" size="20" placeholder="Email (required)" /></p>'
    ),
    'comment_field' => '<p class="comment-form-comment"><label for="comment">' . __( 'Comment' ) . '</label> ' .
      '<textarea name="comment" required aria-required="true" cols="45" rows="8" placeholder="Comment (required)"></textarea></p>',
    'comment_notes_before' => '',
    'comment_notes_after' => '',
    'label_submit' => __( 'Submit comment' ),
    'class_submit' => 'button'
  ); ?>
  <?php comment_form( $args ); ?>
</section><!-- .comments-area -->