Accessibility (a11y) - Turn-key research data management repository

<!doctype html> <html lang="en" class="no-js"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <link rel="canonical" href="https://inveniordm.docs.cern.ch/develop/best-practices/accessibility/"> <link rel="prev" href="../../process/"> <link rel="next" href="../commits/"> <link rel="icon" href="../../../images/favicon.svg"> <meta name="generator" content="mkdocs-1.6.1, mkdocs-material-9.5.40"> <title>Accessibility (a11y) - Turn-key research data management repository</title> <link rel="stylesheet" href="../../../assets/stylesheets/main.8c3ca2c6.min.css"> <link rel="stylesheet" href="../../../assets/stylesheets/palette.06af60db.min.css"> <link rel="stylesheet" href="../../../stylesheets/extra.css"> <script>__md_scope=new URL("../../..",location),__md_hash=e=>[...e].reduce(((e,_)=>(e<<5)-e+_.charCodeAt(0)),0),__md_get=(e,_=localStorage,t=__md_scope)=>JSON.parse(_.getItem(t.pathname+"."+e)),__md_set=(e,_,t=localStorage,a=__md_scope)=>{try{t.setItem(a.pathname+"."+e,JSON.stringify(_))}catch(e){}}</script> </head> <body dir="ltr" data-md-color-scheme="default" data-md-color-primary="custom" data-md-color-accent="custom"> <input class="md-toggle" data-md-toggle="drawer" type="checkbox" id="__drawer" autocomplete="off"> <input class="md-toggle" data-md-toggle="search" type="checkbox" id="__search" autocomplete="off"> <label class="md-overlay" for="__drawer"></label> <div data-md-component="skip"> <a href="#accessibility-a11y" class="md-skip"> Skip to content </a> </div> <div data-md-component="announce"> </div> <header class="md-header" data-md-component="header"> <nav class="md-header__inner md-grid" aria-label="Header"> <a href="../../.." title="Turn-key research data management repository" class="md-header__button md-logo" aria-label="Turn-key research data management repository" data-md-component="logo"> <img src="../../../images/logo-rdm.png" alt="logo"> </a> <label class="md-header__button md-icon" for="__drawer"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3 6h18v2H3zm0 5h18v2H3zm0 5h18v2H3z"/></svg> </label> <div class="md-header__title" data-md-component="header-title"> <div class="md-header__ellipsis"> <div class="md-header__topic"> Turn-key research data management repository </div> <div class="md-header__topic" data-md-component="header-topic"> Accessibility (a11y) </div> </div> </div> <form class="md-header__option" data-md-component="palette"> <input class="md-option" data-md-color-media="(prefers-color-scheme: light)" data-md-color-scheme="default" data-md-color-primary="custom" data-md-color-accent="custom" aria-label="Switch to dark mode" type="radio" name="__palette" id="__palette_0"> <label class="md-header__button md-icon" title="Switch to dark mode" for="__palette_1" hidden> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 8a4 4 0 0 0-4 4 4 4 0 0 0 4 4 4 4 0 0 0 4-4 4 4 0 0 0-4-4m0 10a6 6 0 0 1-6-6 6 6 0 0 1 6-6 6 6 0 0 1 6 6 6 6 0 0 1-6 6m8-9.31V4h-4.69L12 .69 8.69 4H4v4.69L.69 12 4 15.31V20h4.69L12 23.31 15.31 20H20v-4.69L23.31 12z"/></svg> </label> <input class="md-option" data-md-color-media="(prefers-color-scheme: dark)" data-md-color-scheme="slate" data-md-color-primary="black" data-md-color-accent="orange" aria-label="Switch to light mode" type="radio" name="__palette" id="__palette_1"> <label class="md-header__button md-icon" title="Switch to light mode" for="__palette_0" hidden> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 18c-.89 0-1.74-.2-2.5-.55C11.56 16.5 13 14.42 13 12s-1.44-4.5-3.5-5.45C10.26 6.2 11.11 6 12 6a6 6 0 0 1 6 6 6 6 0 0 1-6 6m8-9.31V4h-4.69L12 .69 8.69 4H4v4.69L.69 12 4 15.31V20h4.69L12 23.31 15.31 20H20v-4.69L23.31 12z"/></svg> </label> </form> <script>var palette=__md_get("__palette");if(palette&&palette.color){if("(prefers-color-scheme)"===palette.color.media){var media=matchMedia("(prefers-color-scheme: light)"),input=document.querySelector(media.matches?"[data-md-color-media='(prefers-color-scheme: light)']":"[data-md-color-media='(prefers-color-scheme: dark)']");palette.color.media=input.getAttribute("data-md-color-media"),palette.color.scheme=input.getAttribute("data-md-color-scheme"),palette.color.primary=input.getAttribute("data-md-color-primary"),palette.color.accent=input.getAttribute("data-md-color-accent")}for(var[key,value]of Object.entries(palette.color))document.body.setAttribute("data-md-color-"+key,value)}</script> <label class="md-header__button md-icon" for="__search"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9.5 3A6.5 6.5 0 0 1 16 9.5c0 1.61-.59 3.09-1.56 4.23l.27.27h.79l5 5-1.5 1.5-5-5v-.79l-.27-.27A6.52 6.52 0 0 1 9.5 16 6.5 6.5 0 0 1 3 9.5 6.5 6.5 0 0 1 9.5 3m0 2C7 5 5 7 5 9.5S7 14 9.5 14 14 12 14 9.5 12 5 9.5 5"/></svg> </label> <div class="md-search" data-md-component="search" role="dialog"> <label class="md-search__overlay" for="__search"></label> <div class="md-search__inner" role="search"> <form class="md-search__form" name="search"> <input type="text" class="md-search__input" name="query" aria-label="Search" placeholder="Search" autocapitalize="off" autocorrect="off" autocomplete="off" spellcheck="false" data-md-component="search-query" required> <label class="md-search__icon md-icon" for="__search"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9.5 3A6.5 6.5 0 0 1 16 9.5c0 1.61-.59 3.09-1.56 4.23l.27.27h.79l5 5-1.5 1.5-5-5v-.79l-.27-.27A6.52 6.52 0 0 1 9.5 16 6.5 6.5 0 0 1 3 9.5 6.5 6.5 0 0 1 9.5 3m0 2C7 5 5 7 5 9.5S7 14 9.5 14 14 12 14 9.5 12 5 9.5 5"/></svg> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 11v2H8l5.5 5.5-1.42 1.42L4.16 12l7.92-7.92L13.5 5.5 8 11z"/></svg> </label> <nav class="md-search__options" aria-label="Search"> <button type="reset" class="md-search__icon md-icon" title="Clear" aria-label="Clear" tabindex="-1"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg> </button> </nav> </form> <div class="md-search__output"> <div class="md-search__scrollwrap" tabindex="0" data-md-scrollfix> <div class="md-search-result" data-md-component="search-result"> <div class="md-search-result__meta"> Initializing search </div> <ol class="md-search-result__list" role="presentation"></ol> </div> </div> </div> </div> </div> <div class="md-header__source"> <a href="https://github.com/inveniosoftware/docs-invenio-rdm" title="Go to repository" class="md-source" data-md-component="source"> <div class="md-source__icon md-icon"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M439.55 236.05 244 40.45a28.87 28.87 0 0 0-40.81 0l-40.66 40.63 51.52 51.52c27.06-9.14 52.68 16.77 43.39 43.68l49.66 49.66c34.23-11.8 61.18 31 35.47 56.69-26.49 26.49-70.21-2.87-56-37.34L240.22 199v121.85c25.3 12.54 22.26 41.85 9.08 55a34.34 34.34 0 0 1-48.55 0c-17.57-17.6-11.07-46.91 11.25-56v-123c-20.8-8.51-24.6-30.74-18.64-45L142.57 101 8.45 235.14a28.86 28.86 0 0 0 0 40.81l195.61 195.6a28.86 28.86 0 0 0 40.8 0l194.69-194.69a28.86 28.86 0 0 0 0-40.81"/></svg> </div> <div class="md-source__repository"> GitHub </div> </a> </div> </nav> </header> <div class="md-container" data-md-component="container"> <nav class="md-tabs" aria-label="Tabs" data-md-component="tabs"> <div class="md-grid"> <ul class="md-tabs__list"> <li class="md-tabs__item"> <a href="../../.." class="md-tabs__link"> Home </a> </li> <li class="md-tabs__item"> <a href="../../../features/" class="md-tabs__link"> Features </a> </li> <li class="md-tabs__item"> <a href="../../../install/" class="md-tabs__link"> Install </a> </li> <li class="md-tabs__item"> <a href="../../../customize/" class="md-tabs__link"> Customize </a> </li> <li class="md-tabs__item md-tabs__item--active"> <a href="../../" class="md-tabs__link"> Develop </a> </li> <li class="md-tabs__item"> <a href="../../../deploy/" class="md-tabs__link"> Deploy </a> </li> <li class="md-tabs__item"> <a href="../../../reference/" class="md-tabs__link"> Reference </a> </li> <li class="md-tabs__item"> <a href="../../../releases/" class="md-tabs__link"> Releases </a> </li> <li class="md-tabs__item"> <a href="../../../maintenance/" class="md-tabs__link"> Maintainers </a> </li> <li class="md-tabs__item"> <a href="../../../contribute/" class="md-tabs__link"> Onboard & Contribute </a> </li> </ul> </div> </nav> <main class="md-main" data-md-component="main"> <div class="md-main__inner md-grid"> <div class="md-sidebar md-sidebar--primary" data-md-component="sidebar" data-md-type="navigation" > <div class="md-sidebar__scrollwrap"> <div class="md-sidebar__inner"> <nav class="md-nav md-nav--primary md-nav--lifted" aria-label="Navigation" data-md-level="0"> <label class="md-nav__title" for="__drawer"> <a href="../../.." title="Turn-key research data management repository" class="md-nav__button md-logo" aria-label="Turn-key research data management repository" data-md-component="logo"> <img src="../../../images/logo-rdm.png" alt="logo"> </a> Turn-key research data management repository </label> <div class="md-nav__source"> <a href="https://github.com/inveniosoftware/docs-invenio-rdm" title="Go to repository" class="md-source" data-md-component="source"> <div class="md-source__icon md-icon"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M439.55 236.05 244 40.45a28.87 28.87 0 0 0-40.81 0l-40.66 40.63 51.52 51.52c27.06-9.14 52.68 16.77 43.39 43.68l49.66 49.66c34.23-11.8 61.18 31 35.47 56.69-26.49 26.49-70.21-2.87-56-37.34L240.22 199v121.85c25.3 12.54 22.26 41.85 9.08 55a34.34 34.34 0 0 1-48.55 0c-17.57-17.6-11.07-46.91 11.25-56v-123c-20.8-8.51-24.6-30.74-18.64-45L142.57 101 8.45 235.14a28.86 28.86 0 0 0 0 40.81l195.61 195.6a28.86 28.86 0 0 0 40.8 0l194.69-194.69a28.86 28.86 0 0 0 0-40.81"/></svg> </div> <div class="md-source__repository"> GitHub </div> </a> </div> <ul class="md-nav__list" data-md-scrollfix> <li class="md-nav__item"> <a href="../../.." class="md-nav__link"> Home </a> </li> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_2" > <label class="md-nav__link" for="__nav_2" id="__nav_2_label" tabindex="0"> Features </label> <nav class="md-nav" data-md-level="1" aria-labelledby="__nav_2_label" aria-expanded="false"> <label class="md-nav__title" for="__nav_2"> Features </label> <ul class="md-nav__list" data-md-scrollfix> <li class="md-nav__item"> <a href="../../../features/" class="md-nav__link"> Overview </a> </li> <li class="md-nav__item"> <a href="../../../features/ux/" class="md-nav__link"> Beautiful UX </a> </li> <li class="md-nav__item"> <a href="../../../features/scalable/" class="md-nav__link"> Highly scalable </a> </li> <li class="md-nav__item"> <a href="../../../features/customization/" class="md-nav__link"> Customizable </a> </li> <li class="md-nav__item"> <a href="../../../features/interoperable/" class="md-nav__link"> Interoperable </a> </li> <li class="md-nav__item"> <a href="../../../features/powerful/" class="md-nav__link"> Powerful </a> </li> <li class="md-nav__item"> <a href="../../../features/secure/" class="md-nav__link"> Secure </a> </li> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_2_8" > <label class="md-nav__link" for="__nav_2_8" id="__nav_2_8_label" tabindex="0"> Features walk-through </label> <nav class="md-nav" data-md-level="2" aria-labelledby="__nav_2_8_label" aria-expanded="false"> <label class="md-nav__title" for="__nav_2_8"> Features walk-through </label> <ul class="md-nav__list" data-md-scrollfix> <li class="md-nav__item"> <a href="../../../features/features-walk-through/" class="md-nav__link"> Features overview </a> </li> <li class="md-nav__item"> <a href="../../../features/features-walk-through/banners/" class="md-nav__link"> Site banners </a> </li> <li class="md-nav__item"> <a href="../../../features/features-walk-through/notifications/" class="md-nav__link"> Notifications </a> </li> <li class="md-nav__item"> <a href="../../../features/features-walk-through/access_requests/" class="md-nav__link"> Access requests </a> </li> </ul> </nav> </li> </ul> </nav> </li> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_3" > <label class="md-nav__link" for="__nav_3" id="__nav_3_label" tabindex="0"> Install </label> <nav class="md-nav" data-md-level="1" aria-labelledby="__nav_3_label" aria-expanded="false"> <label class="md-nav__title" for="__nav_3"> Install </label> <ul class="md-nav__list" data-md-scrollfix> <li class="md-nav__item"> <a href="../../../install/" class="md-nav__link"> Quick start </a> </li> <li class="md-nav__item"> <a href="../../../install/requirements/" class="md-nav__link"> System requirements </a> </li> <li class="md-nav__item"> <a href="../../../install/cli/" class="md-nav__link"> Install CLI </a> </li> <li class="md-nav__item"> <a href="../../../install/scaffold/" class="md-nav__link"> Scaffold </a> </li> <li class="md-nav__item"> <a href="../../../install/build-setup-run/" class="md-nav__link"> Build, setup & run </a> </li> <li class="md-nav__item"> <a href="../../../install/configuration/" class="md-nav__link"> Configure </a> </li> <li class="md-nav__item"> <a href="../../../install/run/" class="md-nav__link"> Use </a> </li> <li class="md-nav__item"> <a href="../../../install/migrate/" class="md-nav__link"> Migrate </a> </li> <li class="md-nav__item"> <a href="../../../install/destroy/" class="md-nav__link"> Destroy </a> </li> <li class="md-nav__item"> <a href="../../../install/troubleshoot/" class="md-nav__link"> Troubleshooting </a> </li> </ul> </nav> </li> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_4" > <label class="md-nav__link" for="__nav_4" id="__nav_4_label" tabindex="0"> Customize </label> <nav class="md-nav" data-md-level="1" aria-labelledby="__nav_4_label" aria-expanded="false"> <label class="md-nav__title" for="__nav_4"> Customize </label> <ul class="md-nav__list" data-md-scrollfix> <li class="md-nav__item"> <a href="../../../customize/" class="md-nav__link"> Overview </a> </li> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_4_2" > <label class="md-nav__link" for="__nav_4_2" id="__nav_4_2_label" tabindex="0"> Look-and-feel </label> <nav class="md-nav" data-md-level="2" aria-labelledby="__nav_4_2_label" aria-expanded="false"> <label class="md-nav__title" for="__nav_4_2"> Look-and-feel </label> <ul class="md-nav__list" data-md-scrollfix> <li class="md-nav__item"> <a href="../../../customize/look-and-feel/" class="md-nav__link"> Overview </a> </li> <li class="md-nav__item"> <a href="../../../customize/look-and-feel/logo/" class="md-nav__link"> Change logo </a> </li> <li class="md-nav__item"> <a href="../../../customize/look-and-feel/templates/" class="md-nav__link"> Change templates </a> </li> <li class="md-nav__item"> <a href="../../../customize/look-and-feel/theme/" class="md-nav__link"> Change theme </a> </li> <li class="md-nav__item"> <a href="../../../customize/look-and-feel/font/" class="md-nav__link"> Change font </a> </li> </ul> </nav> </li> <li class="md-nav__item"> <a href="../../../customize/authentication/" class="md-nav__link"> Authentication </a> </li> <li class="md-nav__item"> <a href="../../../customize/emails/" class="md-nav__link"> Sending emails </a> </li> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_4_5" > <label class="md-nav__link" for="__nav_4_5" id="__nav_4_5_label" tabindex="0"> Search </label> <nav class="md-nav" data-md-level="2" aria-labelledby="__nav_4_5_label" aria-expanded="false"> <label class="md-nav__title" for="__nav_4_5"> Search </label> <ul class="md-nav__list" data-md-scrollfix> <li class="md-nav__item"> <a href="../../../customize/search/" class="md-nav__link"> Change facets/sorting </a> </li> </ul> </nav> </li> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_4_6" > <label class="md-nav__link" for="__nav_4_6" id="__nav_4_6_label" tabindex="0"> Vocabularies </label> <nav class="md-nav" data-md-level="2" aria-labelledby="__nav_4_6_label" aria-expanded="false"> <label class="md-nav__title" for="__nav_4_6"> Vocabularies </label> <ul class="md-nav__list" data-md-scrollfix> <li class="md-nav__item"> <a href="../../../customize/vocabularies/" class="md-nav__link"> Overview </a> </li> <li class="md-nav__item"> <a href="../../../customize/vocabularies/resource_types/" class="md-nav__link"> Resource types </a> </li> <li class="md-nav__item"> <a href="../../../customize/vocabularies/affiliations/" class="md-nav__link"> Affiliations </a> </li> <li class="md-nav__item"> <a href="../../../customize/vocabularies/names/" class="md-nav__link"> Names </a> </li> <li class="md-nav__item"> <a href="../../../customize/vocabularies/funding/" class="md-nav__link"> Funding </a> </li> <li class="md-nav__item"> <a href="../../../customize/vocabularies/subjects/" class="md-nav__link"> Subjects </a> </li> <li class="md-nav__item"> <a href="../../../customize/vocabularies/users/" class="md-nav__link"> Users </a> </li> </ul> </nav> </li> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_4_7" > <label class="md-nav__link" for="__nav_4_7" id="__nav_4_7_label" tabindex="0"> Metadata </label> <nav class="md-nav" data-md-level="2" aria-labelledby="__nav_4_7_label" aria-expanded="false"> <label class="md-nav__title" for="__nav_4_7"> Metadata </label> <ul class="md-nav__list" data-md-scrollfix> <li class="md-nav__item"> <a href="../../../customize/metadata/optional_fields/" class="md-nav__link"> Optional metadata </a> </li> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_4_7_2" > <label class="md-nav__link" for="__nav_4_7_2" id="__nav_4_7_2_label" tabindex="0"> Custom fields </label> <nav class="md-nav" data-md-level="3" aria-labelledby="__nav_4_7_2_label" aria-expanded="false"> <label class="md-nav__title" for="__nav_4_7_2"> Custom fields </label> <ul class="md-nav__list" data-md-scrollfix> <li class="md-nav__item"> <a href="../../../customize/metadata/custom_fields/records/" class="md-nav__link"> Add fields to records </a> </li> <li class="md-nav__item"> <a href="../../../customize/metadata/custom_fields/communities/" class="md-nav__link"> Add fields to communities </a> </li> </ul> </nav> </li> </ul> </nav> </li> <li class="md-nav__item"> <a href="../../../customize/record_landing_page/" class="md-nav__link"> Record landing page </a> </li> <li class="md-nav__item"> <a href="../../../customize/static_pages/" class="md-nav__link"> Static pages </a> </li> <li class="md-nav__item"> <a href="../../../customize/dois/" class="md-nav__link"> DOI registration </a> </li> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_4_11" > <label class="md-nav__link" for="__nav_4_11" id="__nav_4_11_label" tabindex="0"> Other PIDs integrations </label> <nav class="md-nav" data-md-level="2" aria-labelledby="__nav_4_11_label" aria-expanded="false"> <label class="md-nav__title" for="__nav_4_11"> Other PIDs integrations </label> <ul class="md-nav__list" data-md-scrollfix> <li class="md-nav__item"> <a href="../../../customize/other-pids/urns/" class="md-nav__link"> DNB URNs </a> </li> </ul> </nav> </li> <li class="md-nav__item"> <a href="../../../customize/s3/" class="md-nav__link"> Storage </a> </li> <li class="md-nav__item"> <a href="../../../customize/upload_limits/" class="md-nav__link"> Upload Limits </a> </li> <li class="md-nav__item"> <a href="../../../customize/metadata_only/" class="md-nav__link"> Metadata-only records </a> </li> <li class="md-nav__item"> <a href="../../../customize/Logging/" class="md-nav__link"> Logging </a> </li> <li class="md-nav__item"> <a href="../../../customize/i18n-and-l10n/" class="md-nav__link"> Internationalisation (i18n) and Localisation (l10n) </a> </li> <li class="md-nav__item"> <a href="../../../customize/notifications/" class="md-nav__link"> Notifications </a> </li> </ul> </nav> </li> <li class="md-nav__item md-nav__item--active md-nav__item--section md-nav__item--nested"> <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_5" checked> <label class="md-nav__link" for="__nav_5" id="__nav_5_label" tabindex=""> Develop </label> <nav class="md-nav" data-md-level="1" aria-labelledby="__nav_5_label" aria-expanded="true"> <label class="md-nav__title" for="__nav_5"> Develop </label> <ul class="md-nav__list" data-md-scrollfix> <li class="md-nav__item"> <a href="../../" class="md-nav__link"> Overview </a> </li> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_5_2" > <label class="md-nav__link" for="__nav_5_2" id="__nav_5_2_label" tabindex="0"> Getting started </label> <nav class="md-nav" data-md-level="2" aria-labelledby="__nav_5_2_label" aria-expanded="false"> <label class="md-nav__title" for="__nav_5_2"> Getting started </label> <ul class="md-nav__list" data-md-scrollfix> <li class="md-nav__item"> <a href="../../getting-started/source-code/" class="md-nav__link"> Source code </a> </li> <li class="md-nav__item"> <a href="../../getting-started/package-development/" class="md-nav__link"> Package development </a> </li> <li class="md-nav__item"> <a href="../../getting-started/instance-development/" class="md-nav__link"> Instance development </a> </li> <li class="md-nav__item"> <a href="../../getting-started/debugging/" class="md-nav__link"> Debugging </a> </li> <li class="md-nav__item"> <a href="../../getting-started/code-style/" class="md-nav__link"> Coding style </a> </li> <li class="md-nav__item"> <a href="../../getting-started/virtualenvs/" class="md-nav__link"> Virtual environments </a> </li> <li class="md-nav__item"> <a href="../../getting-started/help/" class="md-nav__link"> Getting help </a> </li> <li class="md-nav__item"> <a href="../../process/" class="md-nav__link"> Development process </a> </li> </ul> </nav> </li> <li class="md-nav__item md-nav__item--active md-nav__item--nested"> <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_5_3" checked> <label class="md-nav__link" for="__nav_5_3" id="__nav_5_3_label" tabindex="0"> Best practices </label> <nav class="md-nav" data-md-level="2" aria-labelledby="__nav_5_3_label" aria-expanded="true"> <label class="md-nav__title" for="__nav_5_3"> Best practices </label> <ul class="md-nav__list" data-md-scrollfix> <li class="md-nav__item md-nav__item--active"> <input class="md-nav__toggle md-toggle" type="checkbox" id="__toc"> <label class="md-nav__link md-nav__link--active" for="__toc"> Accessibility (a11y) </label> <a href="./" class="md-nav__link md-nav__link--active"> Accessibility (a11y) </a> <nav class="md-nav md-nav--secondary" aria-label="Table of contents"> <label class="md-nav__title" for="__toc"> Table of contents </label> <ul class="md-nav__list" data-md-component="toc" data-md-scrollfix> <li class="md-nav__item"> <a href="#intended-audience" class="md-nav__link"> Intended audience </a> </li> <li class="md-nav__item"> <a href="#accessibility-goal" class="md-nav__link"> Accessibility Goal </a> </li> <li class="md-nav__item"> <a href="#principles" class="md-nav__link"> Principles </a> </li> <li class="md-nav__item"> <a href="#testing" class="md-nav__link"> Testing </a> <nav class="md-nav" aria-label="Testing"> <ul class="md-nav__list"> <li class="md-nav__item"> <a href="#useful-evaluation-plugins" class="md-nav__link"> Useful evaluation plugins </a> </li> <li class="md-nav__item"> <a href="#screen-reader-software" class="md-nav__link"> Screen reader software </a> </li> </ul> </nav> </li> <li class="md-nav__item"> <a href="#best-practices" class="md-nav__link"> Best practices </a> <nav class="md-nav" aria-label="Best practices"> <ul class="md-nav__list"> <li class="md-nav__item"> <a href="#use-meaningful-markup" class="md-nav__link"> Use meaningful markup </a> </li> <li class="md-nav__item"> <a href="#increase-heading-levels-by-one" class="md-nav__link"> Increase heading levels by one </a> </li> <li class="md-nav__item"> <a href="#give-images-alt-tags" class="md-nav__link"> Give images alt tags </a> </li> <li class="md-nav__item"> <a href="#announce-important-messages" class="md-nav__link"> Announce important messages </a> <nav class="md-nav" aria-label="Announce important messages"> <ul class="md-nav__list"> <li class="md-nav__item"> <a href="#dynamic-messages" class="md-nav__link"> Dynamic messages </a> </li> <li class="md-nav__item"> <a href="#static-messages" class="md-nav__link"> Static messages </a> </li> </ul> </nav> </li> <li class="md-nav__item"> <a href="#use-aria-attributes-to-communicate-functionality" class="md-nav__link"> Use aria-attributes to communicate functionality </a> <nav class="md-nav" aria-label="Use aria-attributes to communicate functionality"> <ul class="md-nav__list"> <li class="md-nav__item"> <a href="#non-standard-interactive-elements" class="md-nav__link"> Non-standard interactive elements </a> </li> <li class="md-nav__item"> <a href="#interactive-elements-without-descriptive-text" class="md-nav__link"> Interactive elements without descriptive text </a> </li> </ul> </nav> </li> <li class="md-nav__item"> <a href="#provide-keyboard-accessibility" class="md-nav__link"> Provide keyboard accessibility </a> </li> <li class="md-nav__item"> <a href="#use-sufficient-color-contrast" class="md-nav__link"> Use sufficient color contrast </a> </li> </ul> </nav> </li> <li class="md-nav__item"> <a href="#read-more" class="md-nav__link"> Read more </a> </li> </ul> </nav> </li> <li class="md-nav__item"> <a href="../commits/" class="md-nav__link"> Commits, PRs & reviews </a> </li> <li class="md-nav__item"> <a href="../css-js/" class="md-nav__link"> CSS/JavaScript </a> </li> <li class="md-nav__item"> <a href="../react/" class="md-nav__link"> React </a> </li> <li class="md-nav__item"> <a href="../ui/" class="md-nav__link"> User interface </a> </li> </ul> </nav> </li> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_5_4" > <label class="md-nav__link" for="__nav_5_4" id="__nav_5_4_label" tabindex="0"> Topic guides </label> <nav class="md-nav" data-md-level="2" aria-labelledby="__nav_5_4_label" aria-expanded="false"> <label class="md-nav__title" for="__nav_5_4"> Topic guides </label> <ul class="md-nav__list" data-md-scrollfix> <li class="md-nav__item"> <a href="../../topics/resource/" class="md-nav__link"> Building resources </a> </li> <li class="md-nav__item"> <a href="../../topics/service/" class="md-nav__link"> Building services </a> </li> <li class="md-nav__item"> <a href="../../topics/serializers/" class="md-nav__link"> Building serializers </a> </li> <li class="md-nav__item"> <a href="../../topics/uow/" class="md-nav__link"> Grouping atomic operations </a> </li> <li class="md-nav__item"> <a href="../../topics/validation/" class="md-nav__link"> Sanitize input data </a> </li> <li class="md-nav__item"> <a href="../../topics/theming/" class="md-nav__link"> Theming </a> </li> <li class="md-nav__item"> <a href="../../topics/administration_panel/" class="md-nav__link"> Administration panel </a> </li> </ul> </nav> </li> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_5_5" > <label class="md-nav__link" for="__nav_5_5" id="__nav_5_5_label" tabindex="0"> How-to guides </label> <nav class="md-nav" data-md-level="2" aria-labelledby="__nav_5_5_label" aria-expanded="false"> <label class="md-nav__title" for="__nav_5_5"> How-to guides </label> <ul class="md-nav__list" data-md-scrollfix> <li class="md-nav__item"> <a href="../../howtos/i18n/" class="md-nav__link"> Translation (i18n) </a> </li> <li class="md-nav__item"> <a href="../../howtos/custom_fields/" class="md-nav__link"> Create a new custom field </a> </li> <li class="md-nav__item"> <a href="../../howtos/custom_code/" class="md-nav__link"> Create custom code and views </a> </li> <li class="md-nav__item"> <a href="../../howtos/add_javascript/" class="md-nav__link"> Add JavaScript </a> </li> <li class="md-nav__item"> <a href="../../howtos/override_components/" class="md-nav__link"> Override UI React components </a> </li> <li class="md-nav__item"> <a href="../../howtos/search_terms_migration/" class="md-nav__link"> Create search terms mappings </a> </li> <li class="md-nav__item"> <a href="../../howtos/alembic/" class="md-nav__link"> Create a database migration </a> </li> <li class="md-nav__item"> <a href="../../howtos/security-fix/" class="md-nav__link"> Fix a vulnerability </a> </li> <li class="md-nav__item"> <a href="../../howtos/dev_email/" class="md-nav__link"> Test emails locally </a> </li> <li class="md-nav__item"> <a href="../../howtos/route_migration/" class="md-nav__link"> Migrate legacy routes </a> </li> <li class="md-nav__item"> <a href="../../howtos/backup_search_indices/" class="md-nav__link"> Back up search indices </a> </li> <li class="md-nav__item"> <a href="../../howtos/restrict_access/" class="md-nav__link"> Restrict access to pages </a> </li> <li class="md-nav__item"> <a href="../../howtos/notifications/" class="md-nav__link"> Create and configure notifications </a> </li> </ul> </nav> </li> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_5_6" > <label class="md-nav__link" for="__nav_5_6" id="__nav_5_6_label" tabindex="0"> Architecture </label> <nav class="md-nav" data-md-level="2" aria-labelledby="__nav_5_6_label" aria-expanded="false"> <label class="md-nav__title" for="__nav_5_6"> Architecture </label> <ul class="md-nav__list" data-md-scrollfix> <li class="md-nav__item"> <a href="../../architecture/" class="md-nav__link"> Introduction </a> </li> <li class="md-nav__item"> <a href="../../architecture/infrastructure/" class="md-nav__link"> Infrastructure </a> </li> <li class="md-nav__item"> <a href="../../architecture/software/" class="md-nav__link"> Software </a> </li> <li class="md-nav__item"> <a href="../../architecture/runtime/" class="md-nav__link"> Runtime </a> </li> <li class="md-nav__item"> <a href="../../architecture/requests/" class="md-nav__link"> Requests </a> </li> <li class="md-nav__item"> <a href="../../architecture/communities/" class="md-nav__link"> Communities </a> </li> <li class="md-nav__item"> <a href="../../architecture/records/" class="md-nav__link"> Records </a> </li> <li class="md-nav__item"> <a href="../../architecture/event_handling/" class="md-nav__link"> Event handling </a> </li> <li class="md-nav__item"> <a href="../../architecture/notifications/" class="md-nav__link"> Notifications </a> </li> <li class="md-nav__item"> <a href="../../architecture/reading/" class="md-nav__link"> Recommended reading </a> </li> </ul> </nav> </li> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_5_7" > <label class="md-nav__link" for="__nav_5_7" id="__nav_5_7_label" tabindex="0"> Concepts </label> <nav class="md-nav" data-md-level="2" aria-labelledby="__nav_5_7_label" aria-expanded="false"> <label class="md-nav__title" for="__nav_5_7"> Concepts </label> <ul class="md-nav__list" data-md-scrollfix> <li class="md-nav__item"> <a href="../../concepts/concurrency-control/" class="md-nav__link"> Optimistic concurrency control </a> </li> <li class="md-nav__item"> <a href="../../concepts/transactions/" class="md-nav__link"> Database transaction management </a> </li> </ul> </nav> </li> </ul> </nav> </li> <li class="md-nav__item"> <a href="../../../deploy/" class="md-nav__link"> Deploy </a> </li> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_7" > <label class="md-nav__link" for="__nav_7" id="__nav_7_label" tabindex="0"> Reference </label> <nav class="md-nav" data-md-level="1" aria-labelledby="__nav_7_label" aria-expanded="false"> <label class="md-nav__title" for="__nav_7"> Reference </label> <ul class="md-nav__list" data-md-scrollfix> <li class="md-nav__item"> <a href="../../../reference/" class="md-nav__link"> Overview </a> </li> <li class="md-nav__item"> <a href="../../../reference/cli/" class="md-nav__link"> CLI </a> </li> <li class="md-nav__item"> <a href="../../../reference/configuration/" class="md-nav__link"> Configuration </a> </li> <li class="md-nav__item"> <a href="../../../reference/metadata/" class="md-nav__link"> Metadata </a> </li> <li class="md-nav__item"> <a href="../../../reference/metadata/optional_metadata/" class="md-nav__link"> Optional metadata </a> </li> <li class="md-nav__item"> <a href="../../../reference/oai_pmh/" class="md-nav__link"> OAI-PMH </a> </li> <li class="md-nav__item"> <a href="../../../reference/export_formats/" class="md-nav__link"> Export formats </a> </li> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_7_8" > <label class="md-nav__link" for="__nav_7_8" id="__nav_7_8_label" tabindex="0"> REST API </label> <nav class="md-nav" data-md-level="2" aria-labelledby="__nav_7_8_label" aria-expanded="false"> <label class="md-nav__title" for="__nav_7_8"> REST API </label> <ul class="md-nav__list" data-md-scrollfix> <li class="md-nav__item"> <a href="../../../reference/rest_api_index/" class="md-nav__link"> Overview </a> </li> <li class="md-nav__item"> <a href="../../../reference/rest_api_quickstart/" class="md-nav__link"> Quickstart </a> </li> <li class="md-nav__item"> <a href="../../../reference/rest_api_communities/" class="md-nav__link"> Communities </a> </li> <li class="md-nav__item"> <a href="../../../reference/rest_api_drafts_records/" class="md-nav__link"> Drafts and Records </a> </li> <li class="md-nav__item"> <a href="../../../reference/rest_api_groups/" class="md-nav__link"> Groups </a> </li> <li class="md-nav__item"> <a href="../../../reference/rest_api_members/" class="md-nav__link"> Members </a> </li> <li class="md-nav__item"> <a href="../../../reference/rest_api_requests/" class="md-nav__link"> Requests </a> </li> <li class="md-nav__item"> <a href="../../../reference/rest_api_users/" class="md-nav__link"> Users </a> </li> <li class="md-nav__item"> <a href="../../../reference/rest_api_reviews/" class="md-nav__link"> Reviews </a> </li> <li class="md-nav__item"> <a href="../../../reference/rest_api_vocabularies/" class="md-nav__link"> Vocabularies </a> </li> <li class="md-nav__item"> <a href="../../../reference/rest_api_names/" class="md-nav__link"> Names </a> </li> <li class="md-nav__item"> <a href="../../../reference/rest_api_funders/" class="md-nav__link"> Funders </a> </li> <li class="md-nav__item"> <a href="../../../reference/rest_api_awards/" class="md-nav__link"> Awards </a> </li> <li class="md-nav__item"> <a href="../../../reference/rest_api_oaipmh_sets/" class="md-nav__link"> OAI-PMH Sets </a> </li> <li class="md-nav__item"> <a href="../../../reference/rest_api_statistics/" class="md-nav__link"> Statistics </a> </li> </ul> </nav> </li> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_7_9" > <label class="md-nav__link" for="__nav_7_9" id="__nav_7_9_label" tabindex="0"> Custom fields </label> <nav class="md-nav" data-md-level="2" aria-labelledby="__nav_7_9_label" aria-expanded="false"> <label class="md-nav__title" for="__nav_7_9"> Custom fields </label> <ul class="md-nav__list" data-md-scrollfix> <li class="md-nav__item"> <a href="../../../reference/custom_fields/widgets/" class="md-nav__link"> UI widgets </a> </li> </ul> </nav> </li> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_7_10" > <label class="md-nav__link" for="__nav_7_10" id="__nav_7_10_label" tabindex="0"> Administration </label> <nav class="md-nav" data-md-level="2" aria-labelledby="__nav_7_10_label" aria-expanded="false"> <label class="md-nav__title" for="__nav_7_10"> Administration </label> <ul class="md-nav__list" data-md-scrollfix> <li class="md-nav__item"> <a href="../../../reference/administration_reference/" class="md-nav__link"> Reference </a> </li> </ul> </nav> </li> <li class="md-nav__item"> <a href="../../../reference/file_storage/" class="md-nav__link"> File storage </a> </li> <li class="md-nav__item"> <a href="../../../reference/statistics/" class="md-nav__link"> Usage statistics </a> </li> <li class="md-nav__item"> <a href="../../../reference/notifications/" class="md-nav__link"> Notifications </a> </li> </ul> </nav> </li> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_8" > <label class="md-nav__link" for="__nav_8" id="__nav_8_label" tabindex="0"> Releases </label> <nav class="md-nav" data-md-level="1" aria-labelledby="__nav_8_label" aria-expanded="false"> <label class="md-nav__title" for="__nav_8"> Releases </label> <ul class="md-nav__list" data-md-scrollfix> <li class="md-nav__item"> <a href="../../../releases/" class="md-nav__link"> Overview </a> </li> <li class="md-nav__item"> <a href="../../../releases/maintenance-policy/" class="md-nav__link"> Maintenance policy </a> </li> <li class="md-nav__item"> <a href="../../../releases/upgrade-policy/" class="md-nav__link"> Upgrade policy </a> </li> <li class="md-nav__item"> <a href="../../../releases/security-policy/" class="md-nav__link"> Security policy </a> </li> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_8_5" > <label class="md-nav__link" for="__nav_8_5" id="__nav_8_5_label" tabindex="0"> Version v12.0 LTS </label> <nav class="md-nav" data-md-level="2" aria-labelledby="__nav_8_5_label" aria-expanded="false"> <label class="md-nav__title" for="__nav_8_5"> Version v12.0 LTS </label> <ul class="md-nav__list" data-md-scrollfix> <li class="md-nav__item"> <a href="../../../releases/v12/version-v12.0.0/" class="md-nav__link"> Release Notes v12.0 </a> </li> <li class="md-nav__item"> <a href="../../../releases/v12/upgrade-v12.0/" class="md-nav__link"> Upgrade from v11 to v12 </a> </li> </ul> </nav> </li> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_8_6" > <label class="md-nav__link" for="__nav_8_6" id="__nav_8_6_label" tabindex="0"> Version v11.0 STS </label> <nav class="md-nav" data-md-level="2" aria-labelledby="__nav_8_6_label" aria-expanded="false"> <label class="md-nav__title" for="__nav_8_6"> Version v11.0 STS </label> <ul class="md-nav__list" data-md-scrollfix> <li class="md-nav__item"> <a href="../../../releases/v11/version-v11.0.0/" class="md-nav__link"> Release Notes v11.0 </a> </li> <li class="md-nav__item"> <a href="../../../releases/v11/upgrade-v11.0/" class="md-nav__link"> Upgrade from v10 to v11 </a> </li> </ul> </nav> </li> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_8_7" > <label class="md-nav__link" for="__nav_8_7" id="__nav_8_7_label" tabindex="0"> Version v9.1 LTS </label> <nav class="md-nav" data-md-level="2" aria-labelledby="__nav_8_7_label" aria-expanded="false"> <label class="md-nav__title" for="__nav_8_7"> Version v9.1 LTS </label> <ul class="md-nav__list" data-md-scrollfix> <li class="md-nav__item"> <a href="../../../releases/v9/version-v9.1.0/" class="md-nav__link"> Release Notes v9.1 </a> </li> <li class="md-nav__item"> <a href="../../../releases/v9/version-v9.0.0/" class="md-nav__link"> Release Notes v9.0 </a> </li> <li class="md-nav__item"> <a href="../../../releases/migrate-docker-images/" class="md-nav__link"> Migrate Docker images </a> </li> <li class="md-nav__item"> <a href="../../../releases/v9/migrate-opensearch-v9/" class="md-nav__link"> Migrate v9 to OpenSearch </a> </li> <li class="md-nav__item"> <a href="../../../releases/v9/upgrade-v9.0/" class="md-nav__link"> Upgrade from v8 to v9 </a> </li> </ul> </nav> </li> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_8_8" > <label class="md-nav__link" for="__nav_8_8" id="__nav_8_8_label" tabindex="0"> Legacy Versions </label> <nav class="md-nav" data-md-level="2" aria-labelledby="__nav_8_8_label" aria-expanded="false"> <label class="md-nav__title" for="__nav_8_8"> Legacy Versions </label> <ul class="md-nav__list" data-md-scrollfix> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_8_8_1" > <label class="md-nav__link" for="__nav_8_8_1" id="__nav_8_8_1_label" tabindex="0"> Version v10.1 </label> <nav class="md-nav" data-md-level="3" aria-labelledby="__nav_8_8_1_label" aria-expanded="false"> <label class="md-nav__title" for="__nav_8_8_1"> Version v10.1 </label> <ul class="md-nav__list" data-md-scrollfix> <li class="md-nav__item"> <a href="../../../releases/v10/version-v10.1.0/" class="md-nav__link"> Release Notes v10.1 </a> </li> <li class="md-nav__item"> <a href="../../../releases/v10/version-v10.0.0/" class="md-nav__link"> Release Notes v10.0 </a> </li> <li class="md-nav__item"> <a href="../../../releases/v10/upgrade-v10.0/" class="md-nav__link"> Upgrade from v9 to v10 </a> </li> <li class="md-nav__item"> <a href="../../../releases/migrate-docker-images/" class="md-nav__link"> Migrate Docker images </a> </li> </ul> </nav> </li> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_8_8_2" > <label class="md-nav__link" for="__nav_8_8_2" id="__nav_8_8_2_label" tabindex="0"> Version v8.0 </label> <nav class="md-nav" data-md-level="3" aria-labelledby="__nav_8_8_2_label" aria-expanded="false"> <label class="md-nav__title" for="__nav_8_8_2"> Version v8.0 </label> <ul class="md-nav__list" data-md-scrollfix> <li class="md-nav__item"> <a href="../../../releases/v8/version-v8.0.0/" class="md-nav__link"> Release Notes v8.0 </a> </li> <li class="md-nav__item"> <a href="../../../releases/v8/upgrade-v8.0/" class="md-nav__link"> Upgrade from v7 to v8 </a> </li> </ul> </nav> </li> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_8_8_3" > <label class="md-nav__link" for="__nav_8_8_3" id="__nav_8_8_3_label" tabindex="0"> Version v7.0 </label> <nav class="md-nav" data-md-level="3" aria-labelledby="__nav_8_8_3_label" aria-expanded="false"> <label class="md-nav__title" for="__nav_8_8_3"> Version v7.0 </label> <ul class="md-nav__list" data-md-scrollfix> <li class="md-nav__item"> <a href="../../../releases/v7/version-v7.0.0/" class="md-nav__link"> Release Notes v7.0 </a> </li> <li class="md-nav__item"> <a href="../../../releases/v7/upgrade-v7.0/" class="md-nav__link"> Upgrade from v6 to v7 </a> </li> </ul> </nav> </li> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_8_8_4" > <label class="md-nav__link" for="__nav_8_8_4" id="__nav_8_8_4_label" tabindex="0"> Version v6.0.5 </label> <nav class="md-nav" data-md-level="3" aria-labelledby="__nav_8_8_4_label" aria-expanded="false"> <label class="md-nav__title" for="__nav_8_8_4"> Version v6.0.5 </label> <ul class="md-nav__list" data-md-scrollfix> <li class="md-nav__item"> <a href="../../../releases/v6/version-v6.0.5/" class="md-nav__link"> Release Notes v6.0.5 </a> </li> <li class="md-nav__item"> <a href="../../../releases/v6/upgrade-v6.0.5/" class="md-nav__link"> Upgrade from v6.0.x to v6.0.5 </a> </li> <li class="md-nav__item"> <a href="../../../releases/v6/version-v6.0.0/" class="md-nav__link"> Release Notes v6.0.0 </a> </li> <li class="md-nav__item"> <a href="../../../releases/v6/upgrade-v6.0/" class="md-nav__link"> Upgrade from v4 to v6 </a> </li> </ul> </nav> </li> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_8_8_5" > <label class="md-nav__link" for="__nav_8_8_5" id="__nav_8_8_5_label" tabindex="0"> Version v5.0 </label> <nav class="md-nav" data-md-level="3" aria-labelledby="__nav_8_8_5_label" aria-expanded="false"> <label class="md-nav__title" for="__nav_8_8_5"> Version v5.0 </label> <ul class="md-nav__list" data-md-scrollfix> <li class="md-nav__item"> <a href="../../../releases/v5/version-v5.0.0/" class="md-nav__link"> Release Notes v5.0 </a> </li> </ul> </nav> </li> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_8_8_6" > <label class="md-nav__link" for="__nav_8_8_6" id="__nav_8_8_6_label" tabindex="0"> Version v4.0 </label> <nav class="md-nav" data-md-level="3" aria-labelledby="__nav_8_8_6_label" aria-expanded="false"> <label class="md-nav__title" for="__nav_8_8_6"> Version v4.0 </label> <ul class="md-nav__list" data-md-scrollfix> <li class="md-nav__item"> <a href="../../../releases/v4/version-v4.0.0/" class="md-nav__link"> Release Notes v4.0 </a> </li> <li class="md-nav__item"> <a href="../../../releases/v4/upgrade-v4.0/" class="md-nav__link"> Upgrade from v3 to v4 </a> </li> </ul> </nav> </li> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_8_8_7" > <label class="md-nav__link" for="__nav_8_8_7" id="__nav_8_8_7_label" tabindex="0"> Version v3.0 </label> <nav class="md-nav" data-md-level="3" aria-labelledby="__nav_8_8_7_label" aria-expanded="false"> <label class="md-nav__title" for="__nav_8_8_7"> Version v3.0 </label> <ul class="md-nav__list" data-md-scrollfix> <li class="md-nav__item"> <a href="../../../releases/v3/version-v3.0.0/" class="md-nav__link"> Release Notes v3.0 </a> </li> <li class="md-nav__item"> <a href="../../../releases/v3/upgrade-v3.0/" class="md-nav__link"> Upgrade from v2 to v3 </a> </li> </ul> </nav> </li> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_8_8_8" > <label class="md-nav__link" for="__nav_8_8_8" id="__nav_8_8_8_label" tabindex="0"> Version v2.0 </label> <nav class="md-nav" data-md-level="3" aria-labelledby="__nav_8_8_8_label" aria-expanded="false"> <label class="md-nav__title" for="__nav_8_8_8"> Version v2.0 </label> <ul class="md-nav__list" data-md-scrollfix> <li class="md-nav__item"> <a href="../../../releases/v2/version-v2.0.0/" class="md-nav__link"> Release Notes v2.0 </a> </li> <li class="md-nav__item"> <a href="../../../releases/v2/upgrade-v2.0/" class="md-nav__link"> Upgrade from v1 to v2 </a> </li> </ul> </nav> </li> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_8_8_9" > <label class="md-nav__link" for="__nav_8_8_9" id="__nav_8_8_9_label" tabindex="0"> Version v1.0 </label> <nav class="md-nav" data-md-level="3" aria-labelledby="__nav_8_8_9_label" aria-expanded="false"> <label class="md-nav__title" for="__nav_8_8_9"> Version v1.0 </label> <ul class="md-nav__list" data-md-scrollfix> <li class="md-nav__item"> <a href="../../../releases/v1/version-v1.0.0/" class="md-nav__link"> Release Notes v1.0 </a> </li> </ul> </nav> </li> </ul> </nav> </li> </ul> </nav> </li> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_9" > <label class="md-nav__link" for="__nav_9" id="__nav_9_label" tabindex="0"> Maintainers </label> <nav class="md-nav" data-md-level="1" aria-labelledby="__nav_9_label" aria-expanded="false"> <label class="md-nav__title" for="__nav_9"> Maintainers </label> <ul class="md-nav__list" data-md-scrollfix> <li class="md-nav__item"> <a href="../../../maintenance/" class="md-nav__link"> Overview </a> </li> <li class="md-nav__item"> <a href="../../../maintenance/newcomers/" class="md-nav__link"> Newcomers </a> </li> <li class="md-nav__item"> <a href="../../../maintenance/board-workflow/" class="md-nav__link"> Sprintboard workflow </a> </li> <li class="md-nav__item"> <a href="../../../maintenance/pr-community-board/" class="md-nav__link"> Community PR board </a> </li> <li class="md-nav__item"> <a href="../../../maintenance/release-management/" class="md-nav__link"> Release management </a> </li> <li class="md-nav__item"> <a href="../../../maintenance/modules/" class="md-nav__link"> Modules on GitHub </a> </li> <li class="md-nav__item"> <a href="../../../maintenance/branch-management/" class="md-nav__link"> Branch management </a> </li> <li class="md-nav__item"> <a href="../../../maintenance/demosite/" class="md-nav__link"> Demo site & docs </a> </li> <li class="md-nav__item"> <a href="../../../maintenance/docker-images/" class="md-nav__link"> Docker images </a> </li> <li class="md-nav__item"> <a href="../../../maintenance/rfcs/" class="md-nav__link"> RFCs </a> </li> <li class="md-nav__item"> <a href="../../../maintenance/documentation/" class="md-nav__link"> Writing documentation </a> </li> </ul> </nav> </li> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_10" > <label class="md-nav__link" for="__nav_10" id="__nav_10_label" tabindex="0"> Onboard & Contribute </label> <nav class="md-nav" data-md-level="1" aria-labelledby="__nav_10_label" aria-expanded="false"> <label class="md-nav__title" for="__nav_10"> Onboard & Contribute </label> <ul class="md-nav__list" data-md-scrollfix> <li class="md-nav__item"> <a href="../../../contribute/" class="md-nav__link"> Overview </a> </li> <li class="md-nav__item"> <a href="../../../contribute/onboarding/" class="md-nav__link"> Onboarding </a> </li> <li class="md-nav__item"> <a href="../../../contribute/code-of-conduct/" class="md-nav__link"> Code of conduct </a> </li> <li class="md-nav__item"> <a href="../../../contribute/copyright-policy/" class="md-nav__link"> Copyright policy </a> </li> <li class="md-nav__item"> <a href="../../../contribute/roadmap/" class="md-nav__link"> Roadmap </a> </li> <li class="md-nav__item"> <a href="../../../contribute/translators-guide/" class="md-nav__link"> Translators guide </a> </li> </ul> </nav> </li> </ul> </nav> </div> </div> </div> <div class="md-sidebar md-sidebar--secondary" data-md-component="sidebar" data-md-type="toc" > <div class="md-sidebar__scrollwrap"> <div class="md-sidebar__inner"> <nav class="md-nav md-nav--secondary" aria-label="Table of contents"> <label class="md-nav__title" for="__toc"> Table of contents </label> <ul class="md-nav__list" data-md-component="toc" data-md-scrollfix> <li class="md-nav__item"> <a href="#intended-audience" class="md-nav__link"> Intended audience </a> </li> <li class="md-nav__item"> <a href="#accessibility-goal" class="md-nav__link"> Accessibility Goal </a> </li> <li class="md-nav__item"> <a href="#principles" class="md-nav__link"> Principles </a> </li> <li class="md-nav__item"> <a href="#testing" class="md-nav__link"> Testing </a> <nav class="md-nav" aria-label="Testing"> <ul class="md-nav__list"> <li class="md-nav__item"> <a href="#useful-evaluation-plugins" class="md-nav__link"> Useful evaluation plugins </a> </li> <li class="md-nav__item"> <a href="#screen-reader-software" class="md-nav__link"> Screen reader software </a> </li> </ul> </nav> </li> <li class="md-nav__item"> <a href="#best-practices" class="md-nav__link"> Best practices </a> <nav class="md-nav" aria-label="Best practices"> <ul class="md-nav__list"> <li class="md-nav__item"> <a href="#use-meaningful-markup" class="md-nav__link"> Use meaningful markup </a> </li> <li class="md-nav__item"> <a href="#increase-heading-levels-by-one" class="md-nav__link"> Increase heading levels by one </a> </li> <li class="md-nav__item"> <a href="#give-images-alt-tags" class="md-nav__link"> Give images alt tags </a> </li> <li class="md-nav__item"> <a href="#announce-important-messages" class="md-nav__link"> Announce important messages </a> <nav class="md-nav" aria-label="Announce important messages"> <ul class="md-nav__list"> <li class="md-nav__item"> <a href="#dynamic-messages" class="md-nav__link"> Dynamic messages </a> </li> <li class="md-nav__item"> <a href="#static-messages" class="md-nav__link"> Static messages </a> </li> </ul> </nav> </li> <li class="md-nav__item"> <a href="#use-aria-attributes-to-communicate-functionality" class="md-nav__link"> Use aria-attributes to communicate functionality </a> <nav class="md-nav" aria-label="Use aria-attributes to communicate functionality"> <ul class="md-nav__list"> <li class="md-nav__item"> <a href="#non-standard-interactive-elements" class="md-nav__link"> Non-standard interactive elements </a> </li> <li class="md-nav__item"> <a href="#interactive-elements-without-descriptive-text" class="md-nav__link"> Interactive elements without descriptive text </a> </li> </ul> </nav> </li> <li class="md-nav__item"> <a href="#provide-keyboard-accessibility" class="md-nav__link"> Provide keyboard accessibility </a> </li> <li class="md-nav__item"> <a href="#use-sufficient-color-contrast" class="md-nav__link"> Use sufficient color contrast </a> </li> </ul> </nav> </li> <li class="md-nav__item"> <a href="#read-more" class="md-nav__link"> Read more </a> </li> </ul> </nav> </div> </div> </div> <div class="md-content" data-md-component="content"> <article class="md-content__inner md-typeset"> <h1 id="accessibility-a11y">Accessibility (a11y)<a class="headerlink" href="#accessibility-a11y" title="Permanent link">¶</a></h1> <h2 id="intended-audience">Intended audience<a class="headerlink" href="#intended-audience" title="Permanent link">¶</a></h2> This guide is intended for maintainers and developers of InvenioRDM itself. <h2 id="accessibility-goal">Accessibility Goal<a class="headerlink" href="#accessibility-goal" title="Permanent link">¶</a></h2> The goal is to ensure that the web application and its content can be used by those with diverse hearing, movement, sight, and cognitive abilities. InvenioRDM adheres to the <a href="https://www.w3.org/WAI/standards-guidelines/wcag/">Web Content Accessibility Guidelines (WCAG) 2.1 AA</a>. These guidelines provide testable success criteria, described by 4 principles. <h2 id="principles">Principles<a class="headerlink" href="#principles" title="Permanent link">¶</a></h2> Content and functionality should be Perceivable, Operable, Understandable, and Robust for all. (POUR is the mnemonic.) <ul> <li>Perceivable The user can perceive the site – either see it, hear it, or feel it (in the case of haptics or braille.)</li> <li>Operable The user can operate and control the interface using their chosen technologies – be it desktop browser with mouse and keyboard, mobile touchscreen device, screen reader, keyboard only, switches.</li> <li>Understandable The user can understand the site, because it is consistent, both internally and with common design patterns. It is appropriate to the audience in its voice and tone.</li> <li>Robust The technology is standards-compliant and performant.</li> </ul> <h2 id="testing">Testing<a class="headerlink" href="#testing" title="Permanent link">¶</a></h2> Some criteria can be tested with freely available tools. Other criteria will require manual review. We recommend all contributors test their code before submitting PRs. <h3 id="useful-evaluation-plugins">Useful evaluation plugins<a class="headerlink" href="#useful-evaluation-plugins" title="Permanent link">¶</a></h3> <ul> <li><a href="https://chrome.google.com/webstore/detail/lighthouse/blipmdconlkpinefehnmjammfjpmpbjk?hl=en">Lighthouse Chrome extension</a></li> <li><a href="https://chrome.google.com/webstore/detail/axe-devtools-web-accessib/lhdoppojpmngadmnindnejefpokejbdd">axe DevTools</a></li> <li><a href="https://chrome.google.com/webstore/detail/screen-reader/kgejglhpjiefppelpmljglcjbhoiplfn">Screen reader plugin</a></li> </ul> <h3 id="screen-reader-software">Screen reader software<a class="headerlink" href="#screen-reader-software" title="Permanent link">¶</a></h3> It's very useful to test a screen reader to understand how it works, and to see if your code is detected and announced the way you intended. <ul> <li><a href="https://support.apple.com/en-gb/guide/voiceover/vo28017/10/mac/12.0">VoiceOver</a> for MacOS. Comes with MacOS (just check your Launchpad!).</li> <li><a href="https://www.nvaccess.org/download/">NVDA</a> for Windows (free download).</li> </ul> <h2 id="best-practices">Best practices<a class="headerlink" href="#best-practices" title="Permanent link">¶</a></h2> For InvenioRDM to be accessible for everyone, there are a few things to consider when developing the frontend. For instance, all interactive elements should be accessible by keyboard, and the HTML should be optimized for assistive technologies. <h3 id="use-meaningful-markup">Use meaningful markup<a class="headerlink" href="#use-meaningful-markup" title="Permanent link">¶</a></h3> Semantic HTML should always be used, unless the element is only for styling purposes. Using Semantic HTML is probably one of the most important things we can do to ensure accessiblity. Semantic HTML provides context and meaning and to assistive technologies, as well as default keyboard accessibility for interactive elements. When using Semantic UI React, please be aware that the components are not always converted to an element with semantic meaning. In most cases, you must specify the element by adding <code>as={tagName}</code>. Pay attention to this by inspecting the elements in the browser. ✅ DO <div class="highlight"><pre><code> <header class="ui fluid container"> <div class="ui container"> <nav></nav> </div> </header> <main class="ui container"> <h1>My page</h1> <section> <h2>My section content</h2> <ul> <li>List item 1</li> <li>List item 2</li> </ul> <button>Button text</button> </section> </main> <footer class="ui fluid container"> Footer content </footer> </code></pre></div> With Semantic UI React: <div class="highlight"><pre><code>// Set the "as"-prop to the semantic HTML element you want <Container fluid as="header"> <Container> <Menu as="nav"></Menu> </Container> </Container> <Container as="main"> <Header as="h1">My page</Header> <Container as="section"> <Header as="h2">My section content</Header> <List as="ul"> <List.Item as="li">List item 1</List.Item> <List.Item as="li">List item 2</List.Item> </List> <Button>Button text</Button> </Container> </Container> <Container fluid as="footer"> Footer content </Container> </code></pre></div> Whenever you cannot avoid using a non-semantic element, but wish to provide meaning to that element, you can use aria-roles. For a list of available aria-roles, see <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles">WAI-ARIA roles</a> ❌ DON'T <div class="highlight"><pre><code> <div class="ui fluid container"> <div class="ui container"> <div class="navigation"></div> </div> </div> <div class="main"> <div class="page-header">My page</div> <div class="section"> <div class="section-header">My section content</div> <div class="list"> <div class="list-item">List item 1</div> <div class="list-item">List item 2</div> </div> <span class="button">Button text</span> </div> </div> <div class="ui fluid container"> Footer content </div> </code></pre></div> <h3 id="increase-heading-levels-by-one">Increase heading levels by one<a class="headerlink" href="#increase-heading-levels-by-one" title="Permanent link">¶</a></h3> Always use the correct level of heading. Each page should have one, and only one, <code><h1></code> heading, followed by increasing levels: <code><h2></code>,<code><h3></code>,<code><h4></code>... Headings should be followed by either the same heading-level or one level up, depending on the content structure. Never skip heading levels only for styling purposes. If you want a different size, use styling instead. Semantic UI already has classes you can combine with <code>.ui .header</code> as in the following example: <div class="highlight"><pre><code> <h2 class="ui huge header">Huge Header</h2> <h2 class="ui large header">Large Header</h2> <h2 class="ui medium header">Medium Header</h2> <h2 class="ui small header">Small Header</h2> <h2 class="ui tiny header">Tiny Header</h2> </code></pre></div> With Semantic UI React: <div class="highlight"><pre><code><Header as="h2" size='huge'>Huge Header</Header> <Header as="h2" size='large'>Large Header</Header> <Header as="h2" size='medium'>Medium Header</Header> <Header as="h2" size='small'>Small Header</Header> <Header as="h2" size='tiny'>Tiny Header</Header> </code></pre></div> ✅ DO <div class="highlight"><pre><code> <h1>Page title</h1> <h2>Section 1</h2> <h3>Sub heading 1</h3> <h3>Sub heading 2</h3> <h2>Section 2</h2> <h2>Section 3</h2> </code></pre></div> With Semantic UI React: <div class="highlight"><pre><code>/* Only one h1 per page, always specify your heading level in Semantic UI React, increase by one or zero */ <Header as='h1'>Page title</Header> <Header as='h2'>Section 1</Header> <Header as='h3'>Sub heading 1</Header> <Header as='h3'>Sub heading 2</Header> <Header as='h2'>Section 2</Header> <Header as='h2'>Section 3</Header> </code></pre></div> ❌ DON'T <div class="highlight"><pre><code> <h1>Page title</h1> <h1>Section 1</h1> <h4>Sub heading 1</h4> <h1>Section 2</h1> <h3>Section 3</h3> </code></pre></div> With Semantic UI React: <div class="highlight"><pre><code>// Don't leave out the as-prop <Header size="huge">Page title</Header> <Header size="large">Section 1</Header> <Header size="medium">Sub heading 1</Header> <Header size="large">Section 2</Header> <Header size="large">Section 3</Header> </code></pre></div> <h3 id="give-images-alt-tags">Give images alt tags<a class="headerlink" href="#give-images-alt-tags" title="Permanent link">¶</a></h3> All images should have a descriptive alt-tag. If the image is purely decorative, the alt-tag should be empty to hide the image from screen readers. ✅ DO <div class="highlight"><pre><code> <img src="/my-images/my-informative-image.png" alt="Image description"/> <img src="/my-images/my-decorative-image.png" alt=""/> </code></pre></div> With Semantic UI React: <div class="highlight"><pre><code>// Always include the alt-tag <Image src="/my-images/my-informative-image.png" alt="Image description"/> <Image src="/my-images/my-decorative-image.png" alt=""/> </code></pre></div> <h3 id="announce-important-messages">Announce important messages<a class="headerlink" href="#announce-important-messages" title="Permanent link">¶</a></h3> Whenever the user is given important feedback on their actions, the informative element should have the alert-role. These elements include those that can be considered info, warnings, errors and success. <h4 id="dynamic-messages">Dynamic messages<a class="headerlink" href="#dynamic-messages" title="Permanent link">¶</a></h4> If the info-message is dynamic, i.e. not available on page-load, you can simply give the container-element an alert-role without further thought. ✅ DO <div class="highlight"><pre><code> <div role="alert"> <p>{infoMessage}</p> </div> </code></pre></div> <h4 id="static-messages">Static messages<a class="headerlink" href="#static-messages" title="Permanent link">¶</a></h4> Some screen readers do not announce content that has not changed. This means that if the alert message is static (i.e. already available on page load), you will have to make sure that the content of the alert-element is changing right after page load. This can be done by simply changing the style of the content from <code>display:none;</code> to <code>display:block;</code>. ✅ DO <div class="highlight"><pre><code><div role="alert" id="info"> <p id="info-message" style="display:none;"> This information should be announced immediately by a screen reader </p> </div> </code></pre></div> <div class="highlight"><pre><code>/* Make sure that static messages are announced by screen readers by changing the content on page load. */ document.addEventListener('DOMContentLoaded', event => { jquery("#info #info-message").css('display', 'block'); }) </code></pre></div> <h3 id="use-aria-attributes-to-communicate-functionality">Use aria-attributes to communicate functionality<a class="headerlink" href="#use-aria-attributes-to-communicate-functionality" title="Permanent link">¶</a></h3> <h4 id="non-standard-interactive-elements">Non-standard interactive elements<a class="headerlink" href="#non-standard-interactive-elements" title="Permanent link">¶</a></h4> Where elements have functionality that is non-standard, e.g. accordions, tab-menus, popups, modals etc., they should have descriptive aria-attributes. Follow the guidelines described by <a href="https://www.w3.org/TR/wai-aria-practices/#aria_ex">w3.org</a>. Note: Some interactive elements can be tricky to make accessible with the Semantic UI markup. In these cases, make sure to check out the React version. An example is the Dropdown component in Semantic UI React, which comes with good accessiblity out of the box. Note that this is not the case for all the Semantic UI React components, so pay attention, and make sure to test your component. ✅ DO <div class="highlight"><pre><code> <div role="tablist" class="ui top attached tabular menu"> <a class="active item" data-tab="tab-1" role="tab" id="tab-1" tabindex="0" aria-controls="tab-panel-1" aria-selected="true" > Tab 1 title </a> <a class="active item" data-tab="tab-2" role="tab" id="tab-2" tabindex="0" aria-controls="tab-panel-2" aria-selected="false" > Tab 2 title </a> </div> <div class="ui bottom attached active tab segment" data-tab="tab-1" role="tabpanel" id="tab-panel-1" aria-labelledby="tab-1" hidden="false" > Tab panel 1 content </div> <div class="ui bottom attached tab segment" data-tab="tab-2" role="tabpanel" id="tab-panel-2" aria-labelledby="tab-2" hidden="true" > Tab panel 2 content </div> </code></pre></div> ❌ DON'T <div class="highlight"><pre><code> <div class="ui top attached tabular menu"> <a class="active item">Tab 1 title</a> <a class="item">Tab 2 title</a> </div> <div class="ui bottom attached active tab segment"> Tab panel 1 content </div> <div class="ui bottom attached tab segment"> Tab panel 2 content </div> </code></pre></div> <h4 id="interactive-elements-without-descriptive-text">Interactive elements without descriptive text<a class="headerlink" href="#interactive-elements-without-descriptive-text" title="Permanent link">¶</a></h4> Every interactive element should have a related text that describes the element. In cases where no text is available (e.g. the text is replaced by an icon), the element should have an aria-label. ✅ DO <div class="highlight"><pre><code> <button aria-label="Close"> <i class="close icon"></i> </button> </code></pre></div> With Semantic UI React: <div class="highlight"><pre><code>// Add aria-labels to interactive elements without text content. <Button icon="close" aria-label="Close" /> </code></pre></div> ❌ DON'T <div class="highlight"><pre><code> <button> <i class="close icon"></i> </button> </code></pre></div> With Semantic UI React: <div class="highlight"><pre><code>// Don't replace text content by icons without adding aria-labels. <Button icon="close" /> </code></pre></div> <h3 id="provide-keyboard-accessibility">Provide keyboard accessibility<a class="headerlink" href="#provide-keyboard-accessibility" title="Permanent link">¶</a></h3> All interactive elements should be accessible by keyboard. Standard interactive elements such as <code><input></code> and <code><button></code> come with default keyboard accessibility. This means the element is reachable and possible to trigger by keyboard. Non-standard interactive elements, such as accordions, tab-menus and dropdowns must be provided this functionality. Do this by giving the element a tabindex and make sure the event is triggered by keyboard interaction. See <a href="https://www.w3.org/TR/wai-aria-practices/#aria_ex">w3.org Design Patterns and Widgets</a> for accessibility guidelines for non-standard interactive elements. ✅ DO <div class="highlight"><pre><code>// Make sure the interactive element is also triggered by keyboard interaction $('.ui.tabular.menu .item') .on('keydown', function(event) { /* Handle tab change, including updating the aria-attributes such as aria-selected. */ }); </code></pre></div> <div class="highlight"><pre><code> <div role="tablist" class="ui top attached tabular menu"> <div class="active item" data-tab="tab-1" role="tab" id="tab-1" tabindex="0" aria-controls="tab-panel-1" aria-selected="true" > Tab 1 title </div> <div class="item" data-tab="tab-2" role="tab" id="tab-2" tabindex="0" aria-controls="tab-panel-2" aria-selected="false" > Tab 2 title </div> </div> <div class="ui bottom attached active tab segment" data-tab="tab-1" role="tabpanel" id="tab-panel-1" aria-labelledby="tab-1" hidden="false" > Tab 1 content </div> <div class="ui bottom attached tab segment" data-tab="tab-2" role="tabpanel" id="tab-panel-2" aria-labelledby="tab-2" hidden="true" > Tab 2 content </div> </code></pre></div> With Semantic UI React: <div class="highlight"><pre><code>/* Pay attention to the keyboard accessibility of Semantic UI React components! Some need to be provided this functionality, e.g. the Tab-component. */ const TabsExample = () => { const keyDownHandler = (event) => { // Trigger tab change, see the w3.org guidelines } const handleTabChange = (event, data) => { // Update dynamic aria-attributes } /* Make sure to add aria-attributes to the menu-items. These are not always provided by default by Semantic UI React. */ const panes = [ { menuItem: { key: "tab-1", content: "Tab 1", id: "tab-1", "aria-controls": "tab-panel-1", "aria-selected": true, tabIndex: 0, onKeyDown: keyDownHandler }, render: () => ( <Tab.Pane role="tabpanel" id="tab-panel-1"> Tab 1 Content </Tab.Pane> ) }, { menuItem: { key: "tab-2", content: "Tab 2", id: "tab-2", "aria-controls": "tab-panel-2", 'aria-selected': false, tabIndex: 0, onKeyDown: keyDownHandler }, render: () => ( <Tab.Pane role="tabpanel" id="tab-panel-2"> Tab 2 Content </Tab.Pane> ) }, ] return <Tab panes={panes} onTabChange={handleTabChange} /> } </code></pre></div> Note that some Semantic UI React components already come with keyboard accessibility, e.g <code><Dropdown/></code>. Still, the behavior might not be exactly as expected, so pay attention! <h3 id="use-sufficient-color-contrast">Use sufficient color contrast<a class="headerlink" href="#use-sufficient-color-contrast" title="Permanent link">¶</a></h3> The color contrast between the background and the text should satisfy the WCAG AA level. To test this, a useful tool is provided by <a href="https://webaim.org/resources/contrastchecker/">WebAIM - Contrast Checker</a>. <h2 id="read-more">Read more<a class="headerlink" href="#read-more" title="Permanent link">¶</a></h2> <a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/intro.html#introduction-fourprincs-head">https://www.w3.org/TR/UNDERSTANDING-WCAG20/intro.html#introduction-fourprincs-head</a> <a href="https://uiowa.instructure.com/courses/40/pages/accessibility-principles-pour">https://uiowa.instructure.com/courses/40/pages/accessibility-principles-pour</a> <a href="https://dequeuniversity.com/class/archive/basic-concepts1/principles/">https://dequeuniversity.com/class/archive/basic-concepts1/principles/</a> </article> </div> <script>var target=document.getElementById(location.hash.slice(1));target&&target.name&&(target.checked=target.name.startsWith("__tabbed_"))</script> </div> </main> <footer class="md-footer"> <nav class="md-footer__inner md-grid" aria-label="Footer" > <a href="../../process/" class="md-footer__link md-footer__link--prev" aria-label="Previous: Development process"> <div class="md-footer__button md-icon"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 11v2H8l5.5 5.5-1.42 1.42L4.16 12l7.92-7.92L13.5 5.5 8 11z"/></svg> </div> <div class="md-footer__title"> Previous <div class="md-ellipsis"> Development process </div> </div> </a> <a href="../commits/" class="md-footer__link md-footer__link--next" aria-label="Next: Commits, PRs & reviews"> <div class="md-footer__title"> Next <div class="md-ellipsis"> Commits, PRs & reviews </div> </div> <div class="md-footer__button md-icon"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M4 11v2h12l-5.5 5.5 1.42 1.42L19.84 12l-7.92-7.92L10.5 5.5 16 11z"/></svg> </div> </a> </nav> <div class="md-footer-meta md-typeset"> <div class="md-footer-meta__inner md-grid"> <div class="md-copyright"> <div class="md-copyright__highlight"> Copyright © 2019-2024 CERN, Northwestern University and contributors. </div> Made with <a href="https://squidfunk.github.io/mkdocs-material/" target="_blank" rel="noopener"> Material for MkDocs </a> </div> <div class="md-social"> <a href="https://github.com/inveniosoftware" target="_blank" rel="noopener" title="github.com" class="md-social__link"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6m-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3m44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9M244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8M97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1m-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7m32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1m-11.4-14.7c-1.6 1-1.6 3.6 0 5.9s4.3 3.3 5.6 2.3c1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2"/></svg> </a> </div> </div> </div> </footer> </div> <div class="md-dialog" data-md-component="dialog"> <div class="md-dialog__inner md-typeset"></div> </div> <script id="__config" type="application/json">{"base": "../../..", "features": ["navigation.tabs", "navigation.footer", "content.code.copy"], "search": "../../../assets/javascripts/workers/search.6ce7567c.min.js", "translations": {"clipboard.copied": "Copied to clipboard", "clipboard.copy": "Copy to clipboard", "search.result.more.one": "1 more on this page", "search.result.more.other": "# more on this page", "search.result.none": "No matching documents", "search.result.one": "1 matching document", "search.result.other": "# matching documents", "search.result.placeholder": "Type to start searching", "search.result.term.missing": "Missing", "select.version": "Select version"}}</script> <script src="../../../assets/javascripts/bundle.525ec568.min.js"></script> </body> </html>

CINXE.COM

Accessibility (a11y) - Turn-key research data management repository