290 lines
18 KiB
HTML
290 lines
18 KiB
HTML
<!doctype html>
|
|
<html class="no-js">
|
|
<head><meta charset="utf-8"/>
|
|
<meta name="viewport" content="width=device-width,initial-scale=1"/>
|
|
<meta name="color-scheme" content="light dark"><meta name="generator" content="Docutils 0.17.1: http://docutils.sourceforge.net/" />
|
|
<link rel="index" title="Index" href="../genindex.html" /><link rel="search" title="Search" href="../search.html" /><link rel="next" title="Patterns" href="../patterns.html" /><link rel="prev" title="Scaling & Adaptiveness" href="adaptive.html" />
|
|
|
|
<meta name="generator" content="sphinx-4.3.0, furo 2021.07.05.beta38"/>
|
|
<title>Accessibility - GNOME Human Interface Guidelines documentation</title>
|
|
<link rel="stylesheet" type="text/css" href="../_static/pygments.css" />
|
|
<link rel="stylesheet" type="text/css" href="../_static/styles/furo.css" />
|
|
<link rel="stylesheet" type="text/css" href="../_static/styles/furo-extensions.css" />
|
|
<link rel="stylesheet" type="text/css" href="../_static/gnome.css" />
|
|
|
|
|
|
|
|
<style>
|
|
:root {
|
|
--color-code-background: #f8f8f8;
|
|
--color-code-foreground: black;
|
|
--color-brand-primary: #4a86cf;
|
|
--color-brand-content: #4a86cf;
|
|
|
|
}
|
|
@media (prefers-color-scheme: dark) {
|
|
:root {
|
|
--color-code-background: #202020;
|
|
--color-code-foreground: #d0d0d0;
|
|
|
|
}
|
|
}
|
|
|
|
/* For allowing end-user-specific overrides */
|
|
.override-light {
|
|
--color-code-background: #f8f8f8;
|
|
--color-code-foreground: black;
|
|
--color-brand-primary: #4a86cf;
|
|
--color-brand-content: #4a86cf;
|
|
|
|
}
|
|
.override-dark {
|
|
--color-code-background: #202020;
|
|
--color-code-foreground: #d0d0d0;
|
|
|
|
}
|
|
</style><link media="(prefers-color-scheme: dark)" rel="stylesheet" href="../_static/pygments_dark.css"></head>
|
|
<body dir="">
|
|
|
|
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
|
|
<symbol id="svg-toc" viewBox="0 0 24 24">
|
|
<title>Contents</title>
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
|
|
stroke-width="1.5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
|
|
<path stroke="none" d="M0 0h24v24H0z"/>
|
|
<line x1="4" y1="6" x2="20" y2="6" />
|
|
<line x1="10" y1="12" x2="20" y2="12" />
|
|
<line x1="6" y1="18" x2="20" y2="18" />
|
|
</svg>
|
|
</symbol>
|
|
<symbol id="svg-menu" viewBox="0 0 24 24">
|
|
<title>Menu</title>
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
|
|
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
|
|
class="feather feather-menu">
|
|
<line x1="3" y1="12" x2="21" y2="12"></line>
|
|
<line x1="3" y1="6" x2="21" y2="6"></line>
|
|
<line x1="3" y1="18" x2="21" y2="18"></line>
|
|
</svg>
|
|
</symbol>
|
|
<symbol id="svg-arrow-right" viewBox="0 0 24 24">
|
|
<title>Expand</title>
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
|
|
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
|
|
class="feather feather-chevron-right">
|
|
<polyline points="9 18 15 12 9 6"></polyline>
|
|
</svg>
|
|
</symbol>
|
|
</svg>
|
|
|
|
<input type="checkbox" class="sidebar-toggle" name="__navigation" id="__navigation">
|
|
<input type="checkbox" class="sidebar-toggle" name="__toc" id="__toc">
|
|
<label class="overlay sidebar-overlay" for="__navigation"></label>
|
|
<label class="overlay toc-overlay" for="__toc"></label>
|
|
|
|
|
|
|
|
<div class="page">
|
|
<header class="mobile-header">
|
|
<div class="header-left">
|
|
<label class="nav-overlay-icon" for="__navigation">
|
|
<i class="icon"><svg><use href="#svg-menu"></use></svg></i>
|
|
</label>
|
|
</div>
|
|
<div class="header-center">
|
|
<a href="../index.html"><div class="brand">GNOME Human Interface Guidelines</div></a>
|
|
</div>
|
|
<div class="header-right">
|
|
<label class="toc-overlay-icon toc-header-icon" for="__toc">
|
|
<i class="icon"><svg><use href="#svg-toc"></use></svg></i>
|
|
</label>
|
|
</div>
|
|
</header>
|
|
<aside class="sidebar-drawer">
|
|
<div class="sidebar-container">
|
|
|
|
<div class="sidebar-sticky"><a class="sidebar-brand centered" href="../index.html">
|
|
|
|
<div class="sidebar-logo-container">
|
|
<img class="sidebar-logo" src="../_static/logo.svg" alt="Logo"/>
|
|
</div>
|
|
|
|
<span class="sidebar-brand-text">GNOME Human Interface Guidelines</span>
|
|
|
|
</a><form class="sidebar-search-container" method="get" action="../search.html">
|
|
<input class="sidebar-search" placeholder=Search name="q">
|
|
<input type="hidden" name="check_keywords" value="yes">
|
|
<input type="hidden" name="area" value="default">
|
|
</form><div class="sidebar-scroll"><div class="sidebar-tree">
|
|
<ul class="current">
|
|
<li class="toctree-l1"><a class="reference internal" href="../principles.html">Design Principles</a></li>
|
|
<li class="toctree-l1"><a class="reference internal" href="../resources.html">Tools & Resources</a></li>
|
|
<li class="toctree-l1 current has-children"><a class="reference internal" href="../guidelines.html">Guidelines</a><input checked="" class="toctree-checkbox" id="toctree-checkbox-1" name="toctree-checkbox-1" type="checkbox"/><label for="toctree-checkbox-1"><i class="icon"><svg><use href="#svg-arrow-right"></use></svg></i></label><ul class="current">
|
|
<li class="toctree-l2"><a class="reference internal" href="app-naming.html">App Naming</a></li>
|
|
<li class="toctree-l2"><a class="reference internal" href="app-icons.html">App Icons</a></li>
|
|
<li class="toctree-l2"><a class="reference internal" href="pointer-touch.html">Pointer & Touch</a></li>
|
|
<li class="toctree-l2"><a class="reference internal" href="keyboard.html">Keyboard</a></li>
|
|
<li class="toctree-l2"><a class="reference internal" href="ui-icons.html">UI Icons</a></li>
|
|
<li class="toctree-l2"><a class="reference internal" href="ui-styling.html">UI Styling</a></li>
|
|
<li class="toctree-l2"><a class="reference internal" href="writing-style.html">Writing Style</a></li>
|
|
<li class="toctree-l2"><a class="reference internal" href="typography.html">Typography</a></li>
|
|
<li class="toctree-l2"><a class="reference internal" href="navigation.html">Navigation</a></li>
|
|
<li class="toctree-l2"><a class="reference internal" href="adaptive.html">Scaling & Adaptiveness</a></li>
|
|
<li class="toctree-l2 current current-page"><a class="current reference internal" href="#">Accessibility</a></li>
|
|
</ul>
|
|
</li>
|
|
<li class="toctree-l1 has-children"><a class="reference internal" href="../patterns.html">Patterns</a><input class="toctree-checkbox" id="toctree-checkbox-2" name="toctree-checkbox-2" type="checkbox"/><label for="toctree-checkbox-2"><i class="icon"><svg><use href="#svg-arrow-right"></use></svg></i></label><ul>
|
|
<li class="toctree-l2 has-children"><a class="reference internal" href="../patterns/containers.html">Containers</a><input class="toctree-checkbox" id="toctree-checkbox-3" name="toctree-checkbox-3" type="checkbox"/><label for="toctree-checkbox-3"><i class="icon"><svg><use href="#svg-arrow-right"></use></svg></i></label><ul>
|
|
<li class="toctree-l3"><a class="reference internal" href="../patterns/containers/windows.html">Windows</a></li>
|
|
<li class="toctree-l3"><a class="reference internal" href="../patterns/containers/header-bars.html">Header Bars</a></li>
|
|
<li class="toctree-l3"><a class="reference internal" href="../patterns/containers/popovers.html">Popovers</a></li>
|
|
<li class="toctree-l3"><a class="reference internal" href="../patterns/containers/utility-panes.html">Utility Panes</a></li>
|
|
<li class="toctree-l3"><a class="reference internal" href="../patterns/containers/boxed-lists.html">Boxed Lists</a></li>
|
|
<li class="toctree-l3"><a class="reference internal" href="../patterns/containers/grid-views.html">Grid Views</a></li>
|
|
<li class="toctree-l3"><a class="reference internal" href="../patterns/containers/list-column-views.html">List & Column Views</a></li>
|
|
<li class="toctree-l3"><a class="reference internal" href="../patterns/containers/selection-mode.html">Selection & Edit Modes</a></li>
|
|
</ul>
|
|
</li>
|
|
<li class="toctree-l2 has-children"><a class="reference internal" href="../patterns/nav.html">Navigation</a><input class="toctree-checkbox" id="toctree-checkbox-4" name="toctree-checkbox-4" type="checkbox"/><label for="toctree-checkbox-4"><i class="icon"><svg><use href="#svg-arrow-right"></use></svg></i></label><ul>
|
|
<li class="toctree-l3"><a class="reference internal" href="../patterns/nav/browsing.html">Browsing</a></li>
|
|
<li class="toctree-l3"><a class="reference internal" href="../patterns/nav/view-switchers.html">View Switchers</a></li>
|
|
<li class="toctree-l3"><a class="reference internal" href="../patterns/nav/tabs.html">Tabs</a></li>
|
|
<li class="toctree-l3"><a class="reference internal" href="../patterns/nav/sidebars.html">Sidebars</a></li>
|
|
<li class="toctree-l3"><a class="reference internal" href="../patterns/nav/search.html">Search</a></li>
|
|
</ul>
|
|
</li>
|
|
<li class="toctree-l2 has-children"><a class="reference internal" href="../patterns/controls.html">Controls</a><input class="toctree-checkbox" id="toctree-checkbox-5" name="toctree-checkbox-5" type="checkbox"/><label for="toctree-checkbox-5"><i class="icon"><svg><use href="#svg-arrow-right"></use></svg></i></label><ul>
|
|
<li class="toctree-l3"><a class="reference internal" href="../patterns/controls/buttons.html">Buttons</a></li>
|
|
<li class="toctree-l3"><a class="reference internal" href="../patterns/controls/menus.html">Menus</a></li>
|
|
<li class="toctree-l3"><a class="reference internal" href="../patterns/controls/switches.html">Switches</a></li>
|
|
<li class="toctree-l3"><a class="reference internal" href="../patterns/controls/text-fields.html">Text Fields</a></li>
|
|
<li class="toctree-l3"><a class="reference internal" href="../patterns/controls/checkboxes.html">Checkboxes</a></li>
|
|
<li class="toctree-l3"><a class="reference internal" href="../patterns/controls/radio-buttons.html">Radio Buttons</a></li>
|
|
<li class="toctree-l3"><a class="reference internal" href="../patterns/controls/drop-downs.html">Drop-Down Lists</a></li>
|
|
<li class="toctree-l3"><a class="reference internal" href="../patterns/controls/sliders.html">Sliders</a></li>
|
|
<li class="toctree-l3"><a class="reference internal" href="../patterns/controls/spin-buttons.html">Spin Buttons</a></li>
|
|
<li class="toctree-l3"><a class="reference internal" href="../patterns/controls/overlaid.html">Overlaid Controls</a></li>
|
|
</ul>
|
|
</li>
|
|
<li class="toctree-l2 has-children"><a class="reference internal" href="../patterns/feedback.html">Feedback</a><input class="toctree-checkbox" id="toctree-checkbox-6" name="toctree-checkbox-6" type="checkbox"/><label for="toctree-checkbox-6"><i class="icon"><svg><use href="#svg-arrow-right"></use></svg></i></label><ul>
|
|
<li class="toctree-l3"><a class="reference internal" href="../patterns/feedback/notifications.html">Notifications</a></li>
|
|
<li class="toctree-l3"><a class="reference internal" href="../patterns/feedback/toasts.html">Toasts</a></li>
|
|
<li class="toctree-l3"><a class="reference internal" href="../patterns/feedback/info-bars.html">Info Bars</a></li>
|
|
<li class="toctree-l3"><a class="reference internal" href="../patterns/feedback/progress-bars.html">Progress Bars</a></li>
|
|
<li class="toctree-l3"><a class="reference internal" href="../patterns/feedback/spinners.html">Spinners</a></li>
|
|
<li class="toctree-l3"><a class="reference internal" href="../patterns/feedback/dialogs.html">Dialogs</a></li>
|
|
<li class="toctree-l3"><a class="reference internal" href="../patterns/feedback/placeholders.html">Placeholder Pages</a></li>
|
|
<li class="toctree-l3"><a class="reference internal" href="../patterns/feedback/tooltips.html">Tooltips</a></li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
<li class="toctree-l1 has-children"><a class="reference internal" href="../reference.html">Reference</a><input class="toctree-checkbox" id="toctree-checkbox-7" name="toctree-checkbox-7" type="checkbox"/><label for="toctree-checkbox-7"><i class="icon"><svg><use href="#svg-arrow-right"></use></svg></i></label><ul>
|
|
<li class="toctree-l2"><a class="reference internal" href="../reference/keyboard.html">Standard Keyboard Shortcuts</a></li>
|
|
<li class="toctree-l2"><a class="reference internal" href="../reference/palette.html">Palette</a></li>
|
|
<li class="toctree-l2"><a class="reference internal" href="../reference/backgrounds.html">Backgrounds</a></li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</aside>
|
|
<main class="main">
|
|
<div class="content">
|
|
<article role="main">
|
|
<label class="toc-overlay-icon toc-content-icon" for="__toc">
|
|
<i class="icon"><svg><use href="#svg-toc"></use></svg></i>
|
|
</label>
|
|
<section id="accessibility">
|
|
<h1>Accessibility<a class="headerlink" href="#accessibility" title="Permalink to this headline">¶</a></h1>
|
|
<p>Accessibility guidelines are included throughout the HIG and, the pages on <a class="reference internal" href="keyboard.html"><span class="doc">keyboard interaction</span></a>, <a class="reference internal" href="pointer-touch.html"><span class="doc">pointer interaction</span></a>, and <a class="reference internal" href="ui-styling.html"><span class="doc">UI styling</span></a> are especially relevant to this topic.</p>
|
|
<section id="general-guidelines">
|
|
<h2>General Guidelines<a class="headerlink" href="#general-guidelines" title="Permalink to this headline">¶</a></h2>
|
|
<p>Good design and accessibility are mutually reinforcing, and many of the <a class="reference internal" href="../principles.html"><span class="doc">principles of good design</span></a> advocated by these guidelines enhance accessibility. Thinking carefully about how to follow those principles is one of the best ways to improve the accessibility of your application.</p>
|
|
</section>
|
|
<section id="accessible-names">
|
|
<h2>Accessible Names<a class="headerlink" href="#accessible-names" title="Permalink to this headline">¶</a></h2>
|
|
<p>All interface elements should have descriptive, accessible names. These provide the text that is read aloud by screen readers.</p>
|
|
<p>GTK provides default accessible descriptions for many UI elements, but they may need to be added in some cases. Consider overriding the defaults with more helpful or application-specific descriptions where possible.</p>
|
|
<p>Accessible names should be short and descriptive.</p>
|
|
</section>
|
|
<section id="testing-for-accessibility">
|
|
<span id="accessibility-tests"></span><h2>Testing for Accessibility<a class="headerlink" href="#testing-for-accessibility" title="Permalink to this headline">¶</a></h2>
|
|
<p>There are a number of quick and easy ways to check whether your application is accessible, and these are described in the relevant pages of the HIG. The following list brings these tests together for convenience.</p>
|
|
<p>In each case, test to ensure that your application works correctly with accessibility features, including:</p>
|
|
<ul class="simple">
|
|
<li><p>High-contrast mode. This can be enabled from GTK Inspector or globally in the Accessibility settings. All parts of the UI should be correctly rendered in the high-contrast style.</p></li>
|
|
<li><p>Large text mode. This can be enabled in the Accessibility settings. Does the UI look correct with it enabled? Can all labels be read?</p></li>
|
|
<li><p>Keyboard navigation. Use the app using only the keyboard. Can every part of the application be navigated to and interacted with? Does the UI follow the <a class="reference internal" href="keyboard.html#keyboard-nav"><span class="std std-ref">keyboard navigation guidelines</span></a>?</p></li>
|
|
<li><p>Screen reader. This can be enabled from the Accessibility settings. Is each UI element read aloud? Are the accessible names accurate? Can you turn the display off and still use the app?</p></li>
|
|
<li><p>On-screen keyboard: can your app be used while relying on the OSK for text input? Can every text entry be successfully used with it?</p></li>
|
|
</ul>
|
|
</section>
|
|
</section>
|
|
|
|
</article>
|
|
<footer>
|
|
|
|
<div class="related-pages">
|
|
<a class="next-page" href="../patterns.html">
|
|
<div class="page-info">
|
|
<div class="context">
|
|
<span>Next</span>
|
|
</div>
|
|
<div class="title">Patterns</div>
|
|
</div>
|
|
<svg><use href="#svg-arrow-right"></use></svg>
|
|
</a>
|
|
<a class="prev-page" href="adaptive.html">
|
|
<svg><use href="#svg-arrow-right"></use></svg>
|
|
<div class="page-info">
|
|
<div class="context">
|
|
<span>Previous</span>
|
|
</div>
|
|
|
|
<div class="title">Scaling & Adaptiveness</div>
|
|
|
|
</div>
|
|
</a>
|
|
</div>
|
|
|
|
</footer>
|
|
</div>
|
|
<aside class="toc-drawer">
|
|
|
|
|
|
<div class="toc-sticky toc-scroll">
|
|
<div class="toc-title-container">
|
|
<span class="toc-title">
|
|
Contents
|
|
</span>
|
|
</div>
|
|
<div class="toc-tree-container">
|
|
<div class="toc-tree">
|
|
<ul>
|
|
<li><a class="reference internal" href="#">Accessibility</a><ul>
|
|
<li><a class="reference internal" href="#general-guidelines">General Guidelines</a></li>
|
|
<li><a class="reference internal" href="#accessible-names">Accessible Names</a></li>
|
|
<li><a class="reference internal" href="#testing-for-accessibility">Testing for Accessibility</a></li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</aside>
|
|
</main>
|
|
</div><script data-url_root="../" id="documentation_options" src="../_static/documentation_options.js"></script>
|
|
<script src="../_static/jquery.js"></script>
|
|
<script src="../_static/underscore.js"></script>
|
|
<script src="../_static/doctools.js"></script>
|
|
<script src="../_static/scripts/main.js"></script>
|
|
</body>
|
|
</html> |