View source for Front-End Developer Responsibilities Mapping

Parent document: https://www.w3.org/WAI/EO/wiki/ARRM_Project_-_Accessibility_Roles_and_Responsibilities_Mapping

=== Front-End Developer ===
Front end development typically builds the parts of a product that will be interacted with by the user - specifically, the user interface. For the purpose of this resource, front end development refers to the implementation or codification of the design in functional templates for a product using technologies such as HTML, CSS and JavaScript.

<div style="border: 1px solid #ccc; margin: 1em 0 0.5em; padding: 1em; border-left: 10px solid #ddd;">
'''Key Deliverables'''
* HTML and CSS files
* Client-side scripting
* JavaScript libraries and frameworks
* Etc.
</div>

<div style="border: 1px solid #ccc; margin: 1em 0 0.5em; padding: 1em; border-left: 10px solid #ddd;">
'''Tasks include'''
* Pattern libraries and prototypes
* Template functionalities
* Semantically-rich HTML document structures and widgets
* Use and adapt frameworks and content management systems
* Etc.
</div>

<div style="border: 1px solid #ccc; background: #eee; margin: 0 0 1em; padding: 1em; border-left: 10px solid #ddd;">
'''Example job titles for this role'''

Front End Developer, Web Developer, Full-Stack Developer, UI/UX Developer, JavaScript Developer, UI/UX Engineer
</div>

<h2>Front-End Development Checkpoints – Starter List </h2>

Here is a list of checkpoints for front-end developers and engineers to get started.  If these checkpoints aren't met, your code can cause significant barriers to users.

This list is taken from the full list of Front-end Development checkpoints.

For all role checkpoints, see the [[https://www.w3.org/WAI/EO/wiki/Accessibility_Checkpoint_Full_List|Accessibility Checkpoint Full List]].
<table>
<tr>
    <th rowspan="2" style="background: #555; color: #fff; text-align: left; padding: 0.25em 0.5em; vertical-align: top;">ID</th>
    <th rowspan="2" style="background: #555; color: #fff; text-align: left; padding: 0.25em 0.5em; vertical-align: top; white-space: nowrap;">WCAG SC</th>
    <th rowspan="2" style="background: #555; color: #fff; text-align: left; padding: 0.25em 0.5em; vertical-align: top;">Conformance Level</th>
    <th rowspan="2" style="background: #555; color: #fff; text-align: left; padding: 0.25em 0.5em; vertical-align: top;">Content Type</th>
    <th rowspan="2" style="background: #555; color: #fff; text-align: left; padding: 0.25em 0.5em; vertical-align: top; white-space: nowrap;">Checkpoint</th>
    <th rowspan="2" style="background: #555; color: #fff; text-align: left; padding: 0.25em 0.5em; vertical-align: top;">Main Role</th>
    <th colspan="3" style="background: #555; color: #fff; text-align: left; padding: 0.25em 0.5em; vertical-align: top;">Role Ownership</th>
  </tr>
  <tr>
    <th style="border: 1px solid #aaa; background: #ccc; vertical-align: top; text-align: left; padding: 0.25em 0.5em;">Primary</th>
    <th style="border: 1px solid #aaa; background: #ccc; vertical-align: top; text-align: left; padding: 0.25em 0.5em;">Secondary</th>
    <th style="border: 1px solid #aaa; background: #ccc; vertical-align: top; text-align: left; padding: 0.25em 0.5em;">Contributor(s)</th>
  </tr>
  <tr>
    <td id="SEM-002" style="border: 1px solid #aaa; background: #eee; white-space: nowrap; padding: 0.25em 0.5em; vertical-align: top; text-align: left;">[[Accessibility_Checkpoint_Full_List#SEM-002|SEM-002]]</td>
    <td style="border: 1px solid #aaa; padding: 0.25em 0.5em; vertical-align: top; text-align: left;">[https://www.w3.org/TR/WCAG21/#info-and-relationships 1.3.1]</td>
    <td style="border: 1px solid #aaa; padding: 0.25em 0.5em; vertical-align: top; text-align: left;">A</td>
    <td style="border: 1px solid #aaa; padding: 0.25em 0.5em; vertical-align: top; text-align: left;">Semantic Structure</td>
    <td style="border: 1px solid #aaa; padding: 0.25em 0.5em; vertical-align: top; text-align: left;">HTML elements are used according to the HTML specification.</td>
    <td style="border: 1px solid #aaa; padding: 0.25em 0.5em; vertical-align: top; text-align: left;">[[Role_definition_document#Development_Role_Group|Development]]</td>
    <td style="border: 1px solid #aaa; padding: 0.25em 0.5em; vertical-align: top; text-align: left;">Front-End Development</td>
    <td style="border: 1px solid #aaa; padding: 0.25em 0.5em; vertical-align: top; text-align: left;">UX Design</td>
    <td style="border: 1px solid #aaa; padding: 0.25em 0.5em; vertical-align: top; text-align: left;">none</td>
  </tr>
  <tr>
    <td id="SEM-008" style="border: 1px solid #aaa; background: #eee; white-space: nowrap; padding: 0.25em 0.5em; vertical-align: top; text-align: left;">[[Accessibility_Checkpoint_Full_List#SEM-008|SEM-008]]</td>
    <td style="border: 1px solid #aaa; padding: 0.25em 0.5em; vertical-align: top; text-align: left;">[https://www.w3.org/TR/WCAG21/#info-and-relationships 1.3.1]</td>
    <td style="border: 1px solid #aaa; padding: 0.25em 0.5em; vertical-align: top; text-align: left;">A</td>
    <td style="border: 1px solid #aaa; padding: 0.25em 0.5em; vertical-align: top; text-align: left;">Semantic Structure</td>
    <td style="border: 1px solid #aaa; padding: 0.25em 0.5em; vertical-align: top; text-align: left;">HTML elements are used based on the semantics they provide, not based on what they look like.</td>
    <td style="border: 1px solid #aaa; padding: 0.25em 0.5em; vertical-align: top; text-align: left;">[[Role_definition_document#Development_Role_Group|Development]]</td>
    <td style="border: 1px solid #aaa; padding: 0.25em 0.5em; vertical-align: top; text-align: left;">Front-End Development</td>
    <td style="border: 1px solid #aaa; padding: 0.25em 0.5em; vertical-align: top; text-align: left;">UX Design</td>
    <td style="border: 1px solid #aaa; padding: 0.25em 0.5em; vertical-align: top; text-align: left;">none</td>
  </tr>
  <tr>
    <td id="SEM-011" style="border: 1px solid #aaa; background: #eee; white-space: nowrap; padding: 0.25em 0.5em; vertical-align: top; text-align: left;">[[Accessibility_Checkpoint_Full_List#SEM-011|SEM-011]]</td>
    <td style="border: 1px solid #aaa; padding: 0.25em 0.5em; vertical-align: top; text-align: left;">[https://www.w3.org/TR/WCAG21/#info-and-relationships 1.3.1]</td>
    <td style="border: 1px solid #aaa; padding: 0.25em 0.5em; vertical-align: top; text-align: left;">A</td>
    <td style="border: 1px solid #aaa; padding: 0.25em 0.5em; vertical-align: top; text-align: left;">Semantic Structure</td>
    <td style="border: 1px solid #aaa; padding: 0.25em 0.5em; vertical-align: top; text-align: left;">Elements that act as headings are marked up as such.</td>
    <td style="border: 1px solid #aaa; padding: 0.25em 0.5em; vertical-align: top; text-align: left;">[[Role_definition_document#Development_Role_Group|Development]]</td>
    <td style="border: 1px solid #aaa; padding: 0.25em 0.5em; vertical-align: top; text-align: left; white-space: nowrap;">Front-End Development</td>
    <td style="border: 1px solid #aaa; padding: 0.25em 0.5em; vertical-align: top; text-align: left;">UX Design</td>
    <td style="border: 1px solid #aaa; padding: 0.25em 0.5em; vertical-align: top; text-align: left;">none</td>
  </tr>
  <tr>
    <td id="SEM-017" style="border: 1px solid #aaa; background: #eee; white-space: nowrap; padding: 0.25em 0.5em; vertical-align: top; text-align: left;">[[Accessibility_Checkpoint_Full_List#SEM-017|SEM-017]]</td>
    <td style="border: 1px solid #aaa; padding: 0.25em 0.5em; vertical-align: top; text-align: left;">[https://www.w3.org/TR/WCAG21/#meaningful-sequence 1.3.2]</td>
    <td style="border: 1px solid #aaa; padding: 0.25em 0.5em; vertical-align: top; text-align: left;">A</td>
    <td style="border: 1px solid #aaa; padding: 0.25em 0.5em; vertical-align: top; text-align: left;">Document Structure</td>
    <td style="border: 1px solid #aaa; padding: 0.25em 0.5em; vertical-align: top; text-align: left;">The source code (or DOM) order matches the suggested visual order of the design.</td>
    <td style="border: 1px solid #aaa; padding: 0.25em 0.5em; vertical-align: top; text-align: left;">[[Role_definition_document#Development_Role_Group|Development]]</td>
    <td style="border: 1px solid #aaa; padding: 0.25em 0.5em; vertical-align: top; text-align: left;">Front-End Development</td>
    <td style="border: 1px solid #aaa; padding: 0.25em 0.5em; vertical-align: top; text-align: left;">UX Design</td>
    <td style="border: 1px solid #aaa; padding: 0.25em 0.5em; vertical-align: top; text-align: left;">none</td>
  </tr>
  <tr>
    <td id="INP-004" style="border: 1px solid #aaa; background: #eee; white-space: nowrap; padding: 0.25em 0.5em; vertical-align: top; text-align: left;">[[Accessibility_Checkpoint_Full_List#INP-004|INP-004]]</td>
    <td style="border: 1px solid #aaa; padding: 0.25em 0.5em; vertical-align: top; text-align: left;">[https://www.w3.org/TR/WCAG21/#keyboard 2.1.1]</td>
    <td style="border: 1px solid #aaa; padding: 0.25em 0.5em; vertical-align: top; text-align: left;">A</td>
    <td style="border: 1px solid #aaa; padding: 0.25em 0.5em; vertical-align: top; text-align: left;">Input Methods</td>
    <td style="border: 1px solid #aaa; padding: 0.25em 0.5em; vertical-align: top; text-align: left;">All actionable elements can be reached, using only the keyboard.</td>
    <td style="border: 1px solid #aaa; padding: 0.25em 0.5em; vertical-align: top; text-align: left;">[[Role_definition_document#Development_Role_Group|Development]]</td>
    <td style="border: 1px solid #aaa; padding: 0.25em 0.5em; vertical-align: top; text-align: left;">Front-End Development</td>
    <td style="border: 1px solid #aaa; padding: 0.25em 0.5em; vertical-align: top; text-align: left;">UX Design</td>
    <td style="border: 1px solid #aaa; padding: 0.25em 0.5em; vertical-align: top; text-align: left;">none</td>
  </tr>
  <tr>
    <td id="INP-005" style="border: 1px solid #aaa; background: #eee; white-space: nowrap; padding: 0.25em 0.5em; vertical-align: top; text-align: left;">[[Accessibility_Checkpoint_Full_List#INP-005|INP-005]]</td>
    <td style="border: 1px solid #aaa; padding: 0.25em 0.5em; vertical-align: top; text-align: left;">[https://www.w3.org/TR/WCAG21/#keyboard 2.1.1]</td>
    <td style="border: 1px solid #aaa; padding: 0.25em 0.5em; vertical-align: top; text-align: left;">A</td>
    <td style="border: 1px solid #aaa; padding: 0.25em 0.5em; vertical-align: top; text-align: left;">Input Methods</td>
    <td style="border: 1px solid #aaa; padding: 0.25em 0.5em; vertical-align: top; text-align: left;">All active elements can be triggered, using only the keyboard.</td>
    <td style="border: 1px solid #aaa; padding: 0.25em 0.5em; vertical-align: top; text-align: left;">[[Role_definition_document#Development_Role_Group|Development]]</td>
    <td style="border: 1px solid #aaa; padding: 0.25em 0.5em; vertical-align: top; text-align: left;">Front-End Development</td>
    <td style="border: 1px solid #aaa; padding: 0.25em 0.5em; vertical-align: top; text-align: left;">UX Design</td>
    <td style="border: 1px solid #aaa; padding: 0.25em 0.5em; vertical-align: top; text-align: left;">none</td>
  </tr>
  <tr>
    <td id="INP-012" style="border: 1px solid #aaa; background: #eee; white-space: nowrap; padding: 0.25em 0.5em; vertical-align: top; text-align: left;">[[Accessibility_Checkpoint_Full_List#INP-012|INP-012]]</td>
    <td style="border: 1px solid #aaa; padding: 0.25em 0.5em; vertical-align: top; text-align: left;">[https://www.w3.org/TR/WCAG21/#no-keyboard-trap 2.1.2]</td>
    <td style="border: 1px solid #aaa; padding: 0.25em 0.5em; vertical-align: top; text-align: left;">A</td>
    <td style="border: 1px solid #aaa; padding: 0.25em 0.5em; vertical-align: top; text-align: left;">Input Methods</td>
    <td style="border: 1px solid #aaa; padding: 0.25em 0.5em; vertical-align: top; text-align: left;">Users can navigate away from all active elements, using only the keyboard.</td>
    <td style="border: 1px solid #aaa; padding: 0.25em 0.5em; vertical-align: top; text-align: left;">[[Role_definition_document#Development_Role_Group|Development]]</td>
    <td style="border: 1px solid #aaa; padding: 0.25em 0.5em; vertical-align: top; text-align: left;">Front-End Development</td>
    <td style="border: 1px solid #aaa; padding: 0.25em 0.5em; vertical-align: top; text-align: left;">none</td>
    <td style="border: 1px solid #aaa; padding: 0.25em 0.5em; vertical-align: top; text-align: left;">none</td>
  </tr>
  <tr>
    <td id="INP-015" style="border: 1px solid #aaa; background: #eee; padding: 0.25em 0.5em; vertical-align: top; text-align: left;">[[Accessibility_Checkpoint_Full_List#INP-015|INP-015]]</td>
    <td style="border: 1px solid #aaa; padding: 0.25em 0.5em; vertical-align: top; text-align: left;">[https://www.w3.org/TR/WCAG21/#focus-order 2.4.3]</td>
    <td style="border: 1px solid #aaa; padding: 0.25em 0.5em; vertical-align: top; text-align: left;">A</td>
    <td style="border: 1px solid #aaa; padding: 0.25em 0.5em; vertical-align: top; text-align: left;">Input Methods</td>
    <td style="border: 1px solid #aaa; padding: 0.25em 0.5em; vertical-align: top; text-align: left;">Users can tab through active elements in an order that reflects the intended interaction order of the design.</td>
    <td style="border: 1px solid #aaa; padding: 0.25em 0.5em; vertical-align: top; text-align: left;">[[Role_definition_document#Development_Role_Group|Development]]</td>
    <td style="border: 1px solid #aaa; padding: 0.25em 0.5em; vertical-align: top; text-align: left;">Front-End Development</td>
    <td style="border: 1px solid #aaa; padding: 0.25em 0.5em; vertical-align: top; text-align: left;">UX Design, Visual Design</td>
    <td style="border: 1px solid #aaa; padding: 0.25em 0.5em; vertical-align: top; text-align: left;">none</td>
  </tr>
  <tr>
    <td id="INP-018" style="border: 1px solid #aaa; background: #eee; white-space: nowrap; padding: 0.25em 0.5em; vertical-align: top; text-align: left;">[[Accessibility_Checkpoint_Full_List#INP-018|INP-018]]</td>
    <td style="border: 1px solid #aaa; padding: 0.25em 0.5em; vertical-align: top; text-align: left;">[https://www.w3.org/TR/WCAG21/#focus-visible 2.4.7]</td>
    <td style="border: 1px solid #aaa; padding: 0.25em 0.5em; vertical-align: top; text-align: left;">AA</td>
    <td style="border: 1px solid #aaa; padding: 0.25em 0.5em; vertical-align: top; text-align: left;">Input Methods</td>
    <td style="border: 1px solid #aaa; padding: 0.25em 0.5em; vertical-align: top; text-align: left;">Every element that receives keyboard focus displays a visible focus indicator.</td>
    <td style="border: 1px solid #aaa; padding: 0.25em 0.5em; vertical-align: top; text-align: left;">[[Role_definition_document#Development_Role_Group|Development]]</td>
    <td style="border: 1px solid #aaa; padding: 0.25em 0.5em; vertical-align: top; text-align: left;">Front-End Development</td>
    <td style="border: 1px solid #aaa; padding: 0.25em 0.5em; vertical-align: top; text-align: left;">Visual Design</td>
    <td style="border: 1px solid #aaa; padding: 0.25em 0.5em; vertical-align: top; text-align: left;">none</td>
  </tr>
  <tr>
    <td id="FRM-001" style="border: 1px solid #aaa; background: #eee; white-space: nowrap; padding: 0.25em 0.5em; vertical-align: top; text-align: left;">[[Accessibility_Checkpoint_Full_List#FRM-001|FRM-001]]</td>
    <td style="border: 1px solid #aaa; padding: 0.25em 0.5em; vertical-align: top; text-align: left;">[https://www.w3.org/TR/WCAG21/#info-and-relationships 1.3.1]</td>
    <td style="border: 1px solid #aaa; padding: 0.25em 0.5em; vertical-align: top; text-align: left;">A</td>
    <td style="border: 1px solid #aaa; padding: 0.25em 0.5em; vertical-align: top; text-align: left;">Form Interactions</td>
    <td style="border: 1px solid #aaa; padding: 0.25em 0.5em; vertical-align: top; text-align: left;">Text labels are marked up using the label element or other equivalent means.</td>
    <td style="border: 1px solid #aaa; padding: 0.25em 0.5em; vertical-align: top; text-align: left;">[[Role_definition_document#Development_Role_Group|Development]]</td>
    <td style="border: 1px solid #aaa; padding: 0.25em 0.5em; vertical-align: top; text-align: left;">Front-End Development</td>
    <td style="border: 1px solid #aaa; padding: 0.25em 0.5em; vertical-align: top; text-align: left;">UX Design</td>
    <td style="border: 1px solid #aaa; padding: 0.25em 0.5em; vertical-align: top; text-align: left;">none</td>
  </tr>
  <tr>
    <td id="FRM-007" style="border: 1px solid #aaa; background: #eee; white-space: nowrap; padding: 0.25em 0.5em; vertical-align: top; text-align: left;">[[Accessibility_Checkpoint_Full_List#FRM-007|FRM-007]]</td>
    <td style="border: 1px solid #aaa; padding: 0.25em 0.5em; vertical-align: top; text-align: left;">[https://www.w3.org/TR/WCAG21/#info-and-relationships 1.3.1]</td>
    <td style="border: 1px solid #aaa; padding: 0.25em 0.5em; vertical-align: top; text-align: left;">A</td>
    <td style="border: 1px solid #aaa; padding: 0.25em 0.5em; vertical-align: top; text-align: left;">Form Interactions</td>
    <td style="border: 1px solid #aaa; padding: 0.25em 0.5em; vertical-align: top; text-align: left;">Instructions and messages are programmatically conveyed to assistive technologies.</td>
    <td style="border: 1px solid #aaa; padding: 0.25em 0.5em; vertical-align: top; text-align: left;">[[Role_definition_document#Development_Role_Group|Development]]</td>
    <td style="border: 1px solid #aaa; padding: 0.25em 0.5em; vertical-align: top; text-align: left;">Front-End Development</td>
    <td style="border: 1px solid #aaa; padding: 0.25em 0.5em; vertical-align: top; text-align: left;">UX Design</td>
    <td style="border: 1px solid #aaa; padding: 0.25em 0.5em; vertical-align: top; text-align: left;">none</td>
  </tr>
  <tr>
    <td id="FRM-009" style="border: 1px solid #aaa; background: #eee; white-space: nowrap; padding: 0.25em 0.5em; vertical-align: top; text-align: left;">[[Accessibility_Checkpoint_Full_List#FRM-009|FRM-009]]</td>
    <td style="border: 1px solid #aaa; padding: 0.25em 0.5em; vertical-align: top; text-align: left;">[https://www.w3.org/TR/WCAG21/#info-and-relationships 1.3.1]</td>
    <td style="border: 1px solid #aaa; padding: 0.25em 0.5em; vertical-align: top; text-align: left;">A</td>
    <td style="border: 1px solid #aaa; padding: 0.25em 0.5em; vertical-align: top; text-align: left;">Form Interactions</td>
    <td style="border: 1px solid #aaa; padding: 0.25em 0.5em; vertical-align: top; text-align: left;">Required fields are programmatically conveyed as such to assistive technologies.</td>
    <td style="border: 1px solid #aaa; padding: 0.25em 0.5em; vertical-align: top; text-align: left;">[[Role_definition_document#Development_Role_Group|Development]]</td>
    <td style="border: 1px solid #aaa; padding: 0.25em 0.5em; vertical-align: top; text-align: left;">Front-End Development</td>
    <td style="border: 1px solid #aaa; padding: 0.25em 0.5em; vertical-align: top; text-align: left;">UX Design</td>
    <td style="border: 1px solid #aaa; padding: 0.25em 0.5em; vertical-align: top; text-align: left;">none</td>
  </tr>

  <tr>
    <td id="NAV-012" style="border: 1px solid #aaa; background: #eee; white-space: nowrap; padding: 0.25em 0.5em; vertical-align: top; text-align: left;">[[Accessibility_Checkpoint_Full_List#NAV-012|NAV-012]]</td>
    <td style="border: 1px solid #aaa; padding: 0.25em 0.5em; vertical-align: top; text-align: left;">[https://www.w3.org/TR/WCAG21/#bypass-blocks 2.4.1]</td>
    <td style="border: 1px solid #aaa; padding: 0.25em 0.5em; vertical-align: top; text-align: left;">A</td>
    <td style="border: 1px solid #aaa; padding: 0.25em 0.5em; vertical-align: top; text-align: left;">Navigation</td>
    <td style="border: 1px solid #aaa; padding: 0.25em 0.5em; vertical-align: top; text-align: left;">Skip links and similar mechanisms point to the expected destination.</td>
    <td style="border: 1px solid #aaa; padding: 0.25em 0.5em; vertical-align: top; text-align: left;">[[Role_definition_document#Development_Role_Group|Development]]</td>
    <td style="border: 1px solid #aaa; padding: 0.25em 0.5em; vertical-align: top; text-align: left;">Front-End Development</td>
    <td style="border: 1px solid #aaa; padding: 0.25em 0.5em; vertical-align: top; text-align: left;">UX Design</td>
    <td style="border: 1px solid #aaa; padding: 0.25em 0.5em; vertical-align: top; text-align: left;">none</td>
  </tr>
  <tr>
    <td id="DYN-003" style="border: 1px solid #aaa; background: #eee; white-space: nowrap; padding: 0.25em 0.5em; vertical-align: top; text-align: left;">[[Accessibility_Checkpoint_Full_List#DYN-003|DYN-003]]</td>
    <td style="border: 1px solid #aaa; padding: 0.25em 0.5em; vertical-align: top; text-align: left;">[https://www.w3.org/TR/WCAG21/#status-messages 4.1.3]</td>
    <td style="border: 1px solid #aaa; padding: 0.25em 0.5em; vertical-align: top; text-align: left;">AA</td>
    <td style="border: 1px solid #aaa; padding: 0.25em 0.5em; vertical-align: top; text-align: left;">Dynamic Content</td>
    <td style="border: 1px solid #aaa; padding: 0.25em 0.5em; vertical-align: top; text-align: left;">Status, toast, or similar messages are programmatically determined through WAI-ARIA roles or properties, so they can be presented to assistive technology users without receiving focus.</td>
    <td style="border: 1px solid #aaa; padding: 0.25em 0.5em; vertical-align: top; text-align: left;">[[Role_definition_document#Development_Role_Group|Development]]</td>
    <td style="border: 1px solid #aaa; padding: 0.25em 0.5em; vertical-align: top; text-align: left;">Front-End Development</td>
    <td style="border: 1px solid #aaa; padding: 0.25em 0.5em; vertical-align: top; text-align: left;">UX Design</td>
    <td style="border: 1px solid #aaa; padding: 0.25em 0.5em; vertical-align: top; text-align: left;">none</td>
  </tr>
  <tr>
    <td id="CSS-014" style="border: 1px solid #aaa; background: #eee; white-space: nowrap; padding: 0.25em 0.5em; vertical-align: top; text-align: left;">[[Accessibility_Checkpoint_Full_List#CSS-014|CSS-014]]</td>
    <td style="border: 1px solid #aaa; padding: 0.25em 0.5em; vertical-align: top; text-align: left;">[https://www.w3.org/TR/WCAG21/#resize-text 1.4.4]</td>
    <td style="border: 1px solid #aaa; padding: 0.25em 0.5em; vertical-align: top; text-align: left;">AA</td>
    <td style="border: 1px solid #aaa; padding: 0.25em 0.5em; vertical-align: top; text-align: left;">CSS</td>
    <td style="border: 1px solid #aaa; padding: 0.25em 0.5em; vertical-align: top; text-align: left;">CSS techniques are used to ensure that content doesn't overflow, overlap or get truncated as a result of increasing the text size.</td>
    <td style="border: 1px solid #aaa; padding: 0.25em 0.5em; vertical-align: top; text-align: left;">[[Role_definition_document#Development_Role_Group|Development]]</td>
    <td style="border: 1px solid #aaa; padding: 0.25em 0.5em; vertical-align: top; text-align: left;">Front-End Development</td>
    <td style="border: 1px solid #aaa; padding: 0.25em 0.5em; vertical-align: top; text-align: left;">Visual Design</td>
    <td style="border: 1px solid #aaa; padding: 0.25em 0.5em; vertical-align: top; text-align: left;">UX Design</td>
  </tr>
</table>

== Case Study: How to use the Starter List  ==

A good way to get familiar with the checkpoints is to do a short case study.  Think about how you might tackle the checkpoint in your role. 

Then, think of how meeting this checkpoint impacts an end user. 

===Checkpoint:===

INP-004: All actionable elements can be reached, using only the keyboard.

===Primary Role: Front-end Developer ===

As a front-end developer, I will code all functionality of the content, on a web page and/or within individual components and elements, to ensure it is operable through a keyboard interface only.  This also allows switch control systems to operate. 

===Secondary Role: UX Designer ===

As the UX designer in support of the Front-end Developer, I will ensure to annotate my designs, wireframes and prototypes to clearly define the functionality of components on the page and the expected reading order to allow a keyboard user access to the page content.  

===End User persona 1: Kaseem, teenager who is deaf and blind===

Kaseem is a teenager who is deaf and recently became legally blind too, which means she can see only small portions of a screen and read text when it is significantly enlarged.  She uses screen magnification software to enlarge the text on websites to a suitable font size, displays text on a refreshable Braille device and a large computer screen with high resolution and high luminosity (brightness).

The viewport, or area that Kaseem sees when the screen is magnified, is very small.  So the focus must be in or very close to that 'viewport' at all times. Shifting it unexpectedly to a completely different areas of the screen makes it very difficult to find and then move to that area, especially if she has no idea where the focus has landed.  The focus could move to another area on the page, or to a completely new page.   

===End user persona 2: Alex, reporter with repetitive stress injury===

Alex has worked as a reporter for more than 20 years and has developed a repetitive strain injury that makes it painful to use a mouse and to type for extended periods of time.  Alex encounters problems when websites and other online content cannot be navigated by keyboard commands alone. 

If when navigating the web page, if the keyboard focus shifts unexpectedly, can Alex get back to the task he was doing? 

===End user persona 3: Ilya, senior staff member who is blind===

Ilya is blind. She is the chief accountant at an insurance company that uses web-based documents and forms over a corporate intranet and like many other blind computer users, she does not read Braille.

Ilya relies on the screen reader assistive technology to let her know where she is on the web page. Moving the focus unexpectedly breaks the context of the page and her mental map or perception of the page. 

[https://www.w3.org/WAI/people-use-web/user-stories/#reporter Read the full user stories]

===Resources===
* Use the [https://www.w3.org/WAI/tips/developing/ WAI Tips for Developing] to get started.
* See the [https://www.w3.org/WAI/tutorials/ WAI Tutorials] for menus, tables, forms and more. 
* Review the [https://www.w3.org/WAI/ARIA/apg/ WAI-ARIA Authoring Practices Guide (APG)] for keyboard functionality for ARIA components.

== Exercise: Role-based Decision Tree Example ==
<h3>Who is the primary owner of checkpoint INP-004?</h3>

<p>Let's get started on INP-004: All actionable elements can be reached, using only the keyboard. </p>
<p>Using the [[Role-Based_Decision_Tree|Role-based Decision Tree]], let's see how we might assign ownership.</p>

<div style="border: 1px solid #ccc; margin: 1em 0 0; padding: 1em 2em; border-left: 10px solid #ddd;">
<h4>Step A: Is this checkpoint business-related?</h4>

<p>No. As it's a functional issue, a Business Analyst wouldn't be involved.</p>

<h4>Step B: Is this checkpoint about content authoring?</h4>

<p>No. A Content Author provides the textual content and accessible content for the elements but is not directly involved in decisions about their functionality. </p>

<h4>Step C: Is this checkpoint about UX Design?</h4>

<p>No. The UX Designer is the one to select the element type and have intentions about the behaviour and functionality of the element - for example, that it is accessible and operable by keyboard.  However, this checkpoint is about the implementation of the keyboard function.</p>

<h4>Step D:  Is this checkpoint about visual design?</h4>

<p>No. A Visual Designer designs the look and feel (presentation) of the elements, but this checkpoint is related to their compatibility with assistive technology (i.e. keyboard and/or switch control functionality) and not with presentation.</p>

<h4>Step E: Is this checkpoint about implementation?</h4>
<p>Yes. As their skillset is implementation and code, it is the responsibility of the Front-end Developer to build this into all actionable elements. </p>

<h4>Step F: Is this checkpoint about testing?</h4>
<p>No.</p>

<p> The exercise ends at Question 5 because it's been determined that the <strong>primary owner</strong> of the checkpoint is the Front-end Developer.</p>

</div>

<div style="border: 1px solid #ccc; margin: 1em 0 0; padding: 1em 2em; border-left: 10px solid #ddd;">

<h3> Does this checkpoint require a secondary owner?</h3>

<p> Yes.  This checkpoint is about front-end implementation, however a UX Designer is also responsible for including the keyboard specifications for reading and tabbing order in their design documentation that is shared with the Front-end Developer.</p>

</div>

<div style="border: 1px solid #ccc; margin: 1em 0 0; padding: 1em 2em; border-left: 10px solid #ddd;">

<h3> Does this checkpoint require a contributor?</h3>
<p>No. </p>

</div>

<h3> Try it for yourself! </h3> 

<p> Try the exercise with another checkpoint from the Starter List above.</p>