Third week we’ve been working on the UI and I think we’re finally almost done. There are a few minor bugs with the interface but I’ve left Ystallonne to fix those so I can start working on some back-end code. Chad spent some time with us on Thursday to help us make some of our custom elements more accessible. We created a custom drop-down list and checkbox so they would fit better with our theme. In order for a screen reader to know that an element is an interactive checkbox, the element needs to be assigned a “checkbox” role. Along with the checkbox role, the element also needs the “aria-checked” attribute to expose the checkbox’s state. That’s all there is to it! Additionally, we added a tab index to our checkboxes so they could be tabbed through with a keyboard. Here’s what the final HTML looks like:
<div class="component" style="z-index: 4;">
<div class="checkbox"> <span class="box" role="checkbox" aria-checked="true" tabindex="19" aria-labelledby="option1"></span>
<label class="checkmark"></label>
<label class="text" id="option1">Allow camera sharing.</label>
</div>
</div>