How I learned to stop worrying and become an Accessibility Expert Engineer

Semantic HTML

Buttons

Semantic HTML

Images

What's wrong with this code?

<img src="/images/frog.jpg" />

Show Answer

Why is this correct?

<img src="/images/frog.jpg" alt="A green frog resting on a palm frond" />

Semantic HTML

Landmarks

W3C Guidelines

<div class="header">
<div class="nav"></div>
</div>
<div class="main">
<div class="announcement"></div>
<div class="offers"></div>
</div>
<div class="footer"></div>

<header>
<nav></nav>
</header>
<main>
<section class="announcement"></section>
<section class="offers"></section>
</main>
<footer ></footer>

Semantic HTML

Form Labels and Inputs

<p>Name:
<input type="text" />
</p>
<p>
<input type="checkbox" /> I am a human
</p>

<p>
<label for="name">
Name:
</label>
<input id="name" type="text" />
</p>
<p>
<input id="human" type="checkbox" />
<label for="human">
I am a human
</label>
</p>

Semantic HTML

Form Labels and Inputs

<p>Loan Type:</p>
<input name="loanType" id="loan_car" type="radio" value="Car" /><label for="loan_car">Car</label>
<input name="loanType" id="loan_car" type="radio" value="House" /><label for="loan_house">House</label>
<input name="loanType" id="loan_spaceship" type="radio" value="Spaceship" />
<label for="human" class="loan_spaceship" style="display: none;">
Spaceship
</label>
<span class="custom-label">Spaceship</span>

<fieldset>
<legend>Loan Type:</legend>
<input name="loanType_correct" id="loan_car_correct" type="radio" value="Car"/><label for="loan_car_correct">Car</label>
<input name="loanType_correct" id="loan_house_correct" type="radio" value="House"/><label for="loan_house_correct">House</label>
<input name="loanType_correct" id="loan_spaceship_correct" type="radio" value="Spaceship"/>
<label for="loan_spaceship_correct" class="sr-only">Spaceship</label>
<span class="custom-label" onclick="checkRadioButton('loan_spaceship_correct')" style="background: ...">Spaceship</span>
</fieldset>

ARIA

List of ARIA Roles

Roles

ARIA roles are predefined designations that provide meaning to content, specifically on elements that are not codified by native HTML or not fully supported by the browser. This assures interactions with the element is consistent. Roles are in place to support, not replace semantic HTML.

Radio Group

<div role="radiogroup" aria-labelledby="legend_aria_group">
<p is="legend_aria_group">Loan Type:</p>
<span class="fake-radio" role="radio" aria-checked="false" tabindex="0" aria-labelledby="loan_car_aria" data-value="Car"></span><label id="loan_car_aria">Car</label>
<span class="fake-radio" role="radio" aria-checked="false" tabindex="0" aria-labelledby="loan_house_aria" data-value="House"></span><label id="loan_house_aria">House</label>
</div>

ARIA

Roles

Here are some of the most commonly used ARIA roles:

1. role="alert": Used to provide important, usually time-sensitive, information to the user where it's crucial for the user to be notified about it immediately.
2. role="banner": Represents a container for introductory content or a set of navigational links. Typically used for the header of a page.
3. role="button": Makes an element behave like a button, typically used on elements that trigger an action when clicked.
4. role="complementary": Designates a section of the page as complementary to the main content, like a sidebar.
5. role="contentinfo": Usually used for metadata about the document or application, often placed in the footer.
6. role="dialog": Indicates a dialog box or other type of window that separates content or interaction from the rest of the application or page.
7. role="form": Identifies a form element as a container for form-related elements, enhancing form navigation for assistive technologies.
8. role="heading": Used to define headings in the document, improving document structure understanding.
9. role="img": Indicates that the element is an image. This can be useful when creating images from non-img elements (like CSS or SVG).
10. role="link": Used on elements other than the native anchor (<a>) tag to indicate a hyperlink.
11. role="list": Identifies a list of items. This can be useful for unordered lists (<ul>), ordered lists (<ol>), or simply a group of related items.
12. role="listitem": Identifies an item within a list.
13. role="main": Denotes the main content of a document. Helps users to quickly navigate to the primary content area.
14. role="navigation": Indicates a section of the page intended for navigation, often used for menus or tabs.
15. role="region": Used to define a section of content that is sufficiently important to be considered a landmark.
16. role="search": Used to label a section of the page as a search tool.
17. role="tabpanel": Used within a tab interface to contain the content associated with a tab.

Remember, the correct use of semantic HTML elements often reduces the need for ARIA roles, as many HTML elements have implicit roles that are automatically recognized by assistive technologies. For instance, <nav> implicitly has the navigation role, and <main> implicitly has the main role. Use ARIA roles primarily when semantic HTML does not provide an equivalent.

ARIA

Roles

Is this right or wrong?

• <button role="button">I am a button</button>

  Show Answer

• <img role="img" src="..." alt="" />

  Show Answer

• <svg role="img" alt="" />...</svg>

  Show Answer

• <nav role="navigation">Main Navigation</nav>

  Show Answer

• <div role="heading" aria-level="1" >Main heading of a page</div>

  Show Answer

ARIA

List of ARIA Attributes

Attributes

ARIA attributes enable modifying an element's states and properties as defined in the accessibility tree.

<button aria-label="Close">
<svg
aria-hidden="true"
focusable="false"
xmlns="http://www.w3.org/2000/svg">
<path d="m.967 14.217 5.8-5.906-5.765-5.89L3.094.26l5.783 5.888L14.66.26l2.092 2.162-5.766 5.889 5.801 5.906-2.092 2.162-5.818-5.924-5.818 5.924-2.092-2.162Z" />
</svg>
</button>

<button aria-expanded="false" aria-controls="widget1">Show Widget</button>

Keyboard Navigation

Focusable Elements: Only specific elements can receive focus, which is why it is imperative to use semantic html and not remove focusability via css.

Focus indicator:The focus indicator is a visual aid which indicates which element currently has focus.

TabIndex: The tabindex attribute indicates that its element can be focused, and where it participates in sequential keyboard navigation. Be wary of setting tabindex! Much like ARIA Roles, by choosing to manually set tabindex, means you have to account for ALL tab instances.

Do NOT set outline to 0 in your CSS declarations!

What can you do today, tomorrow, and days to come?

Sign up to be on the AAT!

Keep accessibility in mind

Be a proponent for improving our process.

Thank you. Any questions?