Designing for Accessibility - Annotating Wireframes
We talk a lot about the importance of starting projects with accessibility in mind. So, let’s imagine that you’ve already developed the requirements for your project and constructed a plan of sorts, whether that is formal or informal. Maybe you’ve even some some UX research to frame your project, and, if you have, hopefully you’ve heard from disabled users about the usability of your product idea.
You may be at the phase of developing low or high fidelity mock ups. This is an extremely important time to consider accessibility, and there are a ton of steps you can take to ensure accessibility is baked into the design of your components. Marking up mock ups with html elements to clarify heading structure, color contrast, programmatic name, role, value, and behavior can make sure that as you develop a product or website, accessibility is defined and thought out. Having a little bit of HTML/Javascript/general front-end web experience can be helpful, but is not required. Additionally, if you do design in Figma, there is an accessibility annotation kit which you may find helpful.