Label It!

Making an accessible website/app is more straight forward than you might think. The first, and probably most important, thing to remember when implementing anything for screen readers is to label ALL elements. I can't count how many unlabelled buttons, links, and images I come across in a day, and it makes usage extremely difficult and frustrating, if not impossible, in some cases.

HTML has many ways to label elements on a page. I have included the text for each of the following four methods in the list below. The most basic method is to include text between the opening and closing tags of an element. This text is most often the text read by the screen reader with a couple of exceptions. For elements that have special content between the opening and closing tags, such as lists or select boxes, using an HTML label to reference or wrap the element is necessary. Putting extra text outside of the special list/option items like follows won't work:

<select>my select box<option>option 1</option><option>option 2</option></select>

If an element doesn't have a label or way to identify it, an aria label can be used to tell a screen reader user a bit more about the element they are on. Finally, be sure to label image elements with an appropriate alt text so that a screen reader can identify the image in a useful way, not just say 'image'. And just for reference, great alt text is often between 100 and 200 characters, which is around seventeen to thirty four words, and between one and two lines of text.

• <button type='button'>This is my button</button>
• <label>This is a select box with a label<select></select></label>
• <ul aria-label='this is my list'></ul>
• <img alt='this is a frog' src='frog.png'>

Even using these four techniques, you can make a website or app that is 100% accessible from the very start. The features you build on top of that will of course have to follow their own accessibility standards and guidelines, but starting with an accessible foundation is definitely half the battle. There are many tutorials and information online about the four features I discussed. You can find more info on them:

• Using HTML Labels
• Using Aria Labels
• Using Alt Text