Accessibility... again

part 1 of 2

Visual Considerations

• Contrast checker
• Chrome plugin
• Accessibility colour palette how to

ALT text

make it meaningful

Forms

• Every form field includes a real label
• Placeholders DON'T count
• Labels can include help, required, error text
• Provide meaningful message and action on form error

Form with error

<label for "inputFirstName">
    <span class="txt-label">First Name*</span>
    <span class="txt-error">Required, please provide your first name</span>
</label>
<input type="text" id="inputFirstName" required/>

Forms in modals

onModalOpen = function($modalWrapper) {
    $modalWrapper.attr('tabindex','-1').focus();
};

ARia!

landmark Roles

main

banner

navigation

search

complimentary

contentinfo

form

<main>

<header>

<nav>

<form>

<aside>

<footer>