Add accessibility.

src/ds4.scss

@@ -8,6 +8,7 @@
 @import "scss/global/window";
 @import "scss/global/grid";
 @import "scss/global/flex";
+@import "scss/global/accessibility";
 
 /* Styles limited to ds4 sheets */
 .ds4 {

src/scss/components/_character_progression.scss

@@ -11,7 +11,7 @@
             font-family: $font-heading;
             display: block;
             height: 50px;
-            padding: 0px;
+            padding: 0;
             color: $c-light-grey;
             border: none;
             line-height: 50px;

src/scss/global/_accessibility.scss

@@ -0,0 +1,3 @@
+.hidden {
+    display: none;
+}

src/templates/actor/actor-sheet.hbs

@@ -1,52 +1,68 @@
 <form class="{{cssClass}} flexcol" autocomplete="off">
     {{!-- Sheet Header --}}
     <header class="sheet-header">
-        <img class="profile-img" src="{{actor.img}}" data-edit="img" title="{{actor.name}}" height="100" width="100" />
+        <img class="profile-img" src="{{actor.img}}" data-edit="img" alt="Actor Icon" title="{{actor.name}}"
+             height="100" width="100" />
         <div class="header-fields flexrow">
-            <h1 class="charname"><input name="name" type="text" value="{{actor.name}}" placeholder="Name" /></h1>
+            <h1 class="charname">
+                <label for="actor.name" class="hidden">Name</label>
+                <input name="name" type="text" id="actor.name" value="{{actor.name}}" placeholder="Name" />
+            </h1>
             {{> systems/ds4/templates/actor/partials/character-progression.hbs}}
 
             <div class="flexrow basic-properties">
                 <div class="basic-property">
                     <label class="basic-property-label" for="data.baseInfo.race">{{config.baseInfo.race}}</label>
-                    <input type="text" name="data.baseInfo.race" value="{{data.baseInfo.race}}" data-dtype="String" />
+                    <input type="text" name="data.baseInfo.race" id="data.baseInfo.race" value="{{data.baseInfo.race}}"
+                           data-dtype="String" />
                 </div>
                 <div class="basic-property">
                     <label class="basic-property-label" for="data.baseInfo.culture">{{config.baseInfo.culture}}</label>
-                    <input type="text" name="data.baseInfo.culture" value="{{data.baseInfo.culture}}"
+                    <input id="data.baseInfo.culture" type="text" name="data.baseInfo.culture"
-                        data-dtype="String" />
+                           value="{{data.baseInfo.culture}}"
+                           data-dtype="String" />
                 </div>
                 <div class="basic-property flex125">
                     <label class="basic-property-label"
-                        for="data.progression.progressPoints.used">{{config.progression.progressPoints}}</label>
+                           for="data.progression.progressPoints.used">{{config.progression.progressPoints}}</label>
                     <div class="flexrow">
-                        <input type="number" name="data.progression.progressPoints.used"
+                        <input id="data.progression.progressPoints.used" type="number"
-                            value="{{data.progression.progressPoints.used}}" data-dtype="Number" /><span
+                               name="data.progression.progressPoints.used"
-                            class="input-divider"> /
+                               value="{{data.progression.progressPoints.used}}" data-dtype="Number" />
-                        </span><input type="number" name="data.progression.progressPoints.total"
+                        <span class="input-divider"> / </span>
-                            value="{{data.progression.progressPoints.total}}" data-dtype="Number" />
+                        <label class="hidden" for="data.progression.progressPoints.total">Total
+                            Progression Points</label>
+                        <input type="number"
+                               id="data.progression.progressPoints.total"
+                               name="data.progression.progressPoints.total"
+                               value="{{data.progression.progressPoints.total}}"
+                               data-dtype="Number" />
                     </div>
                 </div>
                 <div class="basic-property flex125">
                     <label class="basic-property-label"
-                        for="data.progression.talentPoints.used">{{config.progression.talentPoints}}</label>
+                           for="data.progression.talentPoints.used">{{config.progression.talentPoints}}</label>
                     <div class="flexrow">
                         <input type="number" name="data.progression.talentPoints.used"
-                            value="{{data.progression.talentPoints.used}}" data-dtype="Number" /><span
+                               id="data.progression.talentPoints.used"
-                            class="input-divider"> /
+                               value="{{data.progression.talentPoints.used}}" data-dtype="Number" />
-                        </span><input type="number" name="data.progression.talentPoints.total"
+                        <span class="input-divider"> / </span>
-                            value="{{data.progression.talentPoints.total}}" data-dtype="Number" />
+                        <label for="data.progression.talentPoints.total" class="hidden">Total Talent Points</label>
+                        <input type="number" name="data.progression.talentPoints.total" id="data.progression.talentPoints.total"
+                               value="{{data.progression.talentPoints.total}}" data-dtype="Number" />
                     </div>
                 </div>
                 <div class="basic-property">
                     <label class="basic-property-label" for="data.baseInfo.class">{{config.baseInfo.class}}</label>
-                    <input type="text" name="data.baseInfo.class" value="{{data.baseInfo.class}}" data-dtype="String" />
+                    <input type="text" id="data.baseInfo.class" name="data.baseInfo.class"
+                           value="{{data.baseInfo.class}}" data-dtype="String" />
                 </div>
                 <div class="basic-property">
                     <label class="basic-property-label"
-                        for="data.baseInfo.heroClass">{{config.baseInfo.heroClass}}</label>
+                           for="data.baseInfo.heroClass">{{config.baseInfo.heroClass}}</label>
-                    <input type="text" name="data.baseInfo.heroClass" value="{{data.baseInfo.heroClass}}"
+                    <input type="text" id="data.baseInfo.heroClass" name="data.baseInfo.heroClass"
-                        data-dtype="String" />
+                           value="{{data.baseInfo.heroClass}}"
+                           data-dtype="String" />
                 </div>
             </div>
         </div>

src/templates/actor/partials/character-progression.hbs

@@ -2,14 +2,16 @@
     <div class="progression-entry">
         <h2 class="progression-label"><label for="data.progression.level">{{config.progression.level}}</label>
         </h2>
-        <input class="progression-value" type="number" name="data.progression.level" value="{{data.progression.level}}"
+        <label for="data.progression.level" class="hidden">Progression Level</label>
+        <input class="progression-value" type="number" name="data.progression.level" id="data.progression.level" value="{{data.progression.level}}"
             data-dtype="Number" />
     </div>
     <div class="progression-entry">
         <h2 class="progression-label"><label
                 for="data.progression.experiencePoints">{{config.progression.experiencePoints}}</label>
         </h2>
-        <input class="progression-value" type="number" name="data.progression.experiencePoints"
+        <label for="data.progression.experiencePoints" class="hidden">Experience Points</label>
+        <input class="progression-value" type="number" name="data.progression.experiencePoints" id="data.progression.experiencePoints"
             value="{{data.progression.experiencePoints}}" data-dtype="Number" />
     </div>
 </div>