First steps
1. Basics
☑️ Tag ➡ semantinc
☑️ Never use HTML tags for styling
☑️ Semantic layout
☑️ Scalable texts (zoom)
1. Basics
☑️ Semantic layout
<header>
<h1>Header</h1>
</header>
<nav>
<!-- main navigation in here -->
</nav>
<!-- Here is our page's main content -->
<main>
<!-- It contains an article -->
<article>
<h2>Article heading</h2>
<!-- article content in here -->
</article>
<aside>
<h2>Related</h2>
<!-- aside content in here -->
</aside>
</main>
<footer>
<!-- footer-->
</footer>
☑️ Links/Buttons/... shape feedback
☑️ Actions (Hover/Focus): outline, color blindness
☑️ Forms:
Examples:
⛔️ Hover button, error input...
2. UX/UI
☑️ Color contrast
2. UX/UI
☑️ Storybook A11y addon
What's in our hands
3. CODE
Readers matters 🔎
@ openbank
3. CODE
☑️ Background images only for decorative purposes
☑️ Use alt properly.
☑️ Decorative images: alt="".
Avoid reading the src
❌ atl="logo of Openbank"
✅ atl="Go to homepage"
3. CODE
☑️ Iconos (IE RRSS):
<a src="/blabla" aria-label="Follow company on IG" >
<svg aria-hidden="true">
......
</svg>
</div>
Decorative icons aria-hidden="true"
3. CODE
☑️ Tip: never use aria-labelledby
☑️ Tip: Images with relevant text,
describe it within the alt attribute
3. CODE
☑️ Tip: try to avoid them
☑️ role="button" & tabindex=0
☑️ Accesible: Needs JS to be able to interact with space & enter.
3. CODE
☑️ Use buttons
☑️ aria-expanded=true/false modify via JS
☑️ Content collapsed → tabindex="-1" avoiding readers to access it.
3. CODE
Burger Menu example 🍔
☑️ aria-expanded=true/false
☑️ Button con aria-label="Menu"
☑️ Svg dentro con aria-hidden="true"
3. CODE
☑️ Only on focus (keyboard/readers navigation)
☑️ Links to the main content, contact forms... etc
3. CODE
☑️ Contrast
☑️ New window link:
☑️ Try to avoid "here/aqui" links
☑️ links focus/active/visited shape & color
3. CODE
☑️ nav > ul> li > a
☑️ Identify the main navigation element (topbar) aria-label="Main"
☑️ aria-current="page" with the active element
3. CODE
☑️ IE scrollable elements that comes into view: tabindex="-1"
3. CODE
☑️ labels associated with inputs for="" & id=""
☑️ Placehoder contrasts
☑️ Required fields with required attribute or aria-required=true
☑️ If we use asterisks: aria-hidden="true", or explain them
☑️ button: type="submit". Use of descriptive texts
3. CODE
<p id="caption">
My Hobbies
</p>
<div aria-describedby="caption" class="table" role="grid">
<div class="tr" role="row">
<div class="th" role="columnheader">
Name
</div>
<div class="th" role="columnheader">
Description
</div>
<div class="th" role="columnheader">
Additional Resources
</div>
</div>
<div class="tr" role="row">
<div class="th" role="rowheader">
Playing Soccer
</div>
<div class="td" role="gridcell">
Soccer is a team sport played between two teams of eleven players with a spherical ball.
</div>
<div class="td" role="gridcell">
<a href="https://en.wikipedia.org/wiki/Association_football">Wikipedia</a>
</div>
</div>
<div class="tr" role="row">
<div class="th" role="rowheader">
Dancing
</div>
<div class="td" role="gridcell">
Dance is a performing art form consisting of purposefully selected sequences of human movement.
</div>
<div class="td" role="gridcell">
<a href="https://en.wikipedia.org/wiki/Dance">Wikipedia</a>
</div>
</div>
<div class="tr" role="row">
<div class="th" role="rowheader">
Gardening
</div>
<div class="td" role="gridcell">
Gardening is the practice of growing and cultivating plants as part of horticulture.
</div>
<div class="td" role="gridcell">
<a href="https://en.wikipedia.org/wiki/Gardening">Wikipedia</a>
</div>
</div>
</div>
3. CODE
☑️ Controls size
☑️ aria-labels in navigation controls
☑️ Hidden elements with tabindex="-1"
☑️ Controls Contrast
3. CODE
☑️ Avoid autoplay
☑️ Video description
☑️ Accesible media controllers (by readers)
3. CODE
Tips
☑️ Color blindness
☑️ Keyboard/automated navigation: tabindex, roles, use of buttons, links...
☑️ Readers: alt, aria-label... etc
☑️ Zoom
4. TOOLS
☑️ wcag
☑️ a11yproject
4. TOOLS
☑️ arc-toolkit
4. TOOLS
rules: {
//....
'jsx-a11y/img-redundant-alt': [
2,
{
components: ['MbImg'],
words: ['Foto', 'Logo'],
},
],
'jsx-a11y/alt-text': [
2,
{
img: ['MbImg'],
},
],
}
4. TOOLS
4. TOOLS
4. TOOLS
4. TOOLS
calos.perezjimeno@gruposantander.com