All right! I finished watching a new video about accessibility from the playlist that I mentioned in one previous post. This time, I decided to go a little bit beyond only taking notes on the things mentioned in the video and I decided to research a little bit more about the each topic mentioned. Let’s get started with the learning notes:

Steps 11-20

• ARIA stands for Accessible Rich Internet Applications and it’s a set of attributes for HTML tags that define ways to make the Web more accessible.

This wasn’t mentioned in the video but I decided to add it first since I think it covers many of the following things to mention.

• role attribute to indicate the purpose behind an element on a page for assistive technologies.

• aria-label allows users to define a string that labels an element.

This is useful for elements that don’t have a visible text.

<segment role="region" aria-label="Main content"></segment>

• aria-labelledby enables authors to reference other elements on the page to define an accessible name.

This is useful when there are visible text within an element but we want other text to be used by assistive technologies.

<button aria-label="Blue" aria-labelledby="color">Your favorite color</button>
<span id="color">Green</span>

• label associated to input fields

<form>
    <label for="name" aria>Name: </label>
    <input id="name" />

    <label for="last-name" aria>Lastname: </label>
    <input id="last-name" />
</form>

We don’t have forms in this blog post so this is not necessary but it’s useful to remind.

These fields seem a little bit more useful for assistive technologies and I can use a screen reader to actually get that information and use it!