{"id":1070,"date":"2024-07-23T18:10:37","date_gmt":"2024-07-23T18:10:37","guid":{"rendered":"https:\/\/rssfeedtelegrambot.bnaya.co.il\/index.php\/2024\/07\/23\/how-were-building-more-inclusive-and-accessible-components-at-github\/"},"modified":"2024-07-23T18:10:37","modified_gmt":"2024-07-23T18:10:37","slug":"how-were-building-more-inclusive-and-accessible-components-at-github","status":"publish","type":"post","link":"https:\/\/rssfeedtelegrambot.bnaya.co.il\/index.php\/2024\/07\/23\/how-were-building-more-inclusive-and-accessible-components-at-github\/","title":{"rendered":"How we\u2019re building more inclusive and accessible components at GitHub"},"content":{"rendered":"<p>One of GitHub\u2019s core values is <strong>Diverse and Inclusive<\/strong>. It is a guiding thought for how we operate, reminding us that GitHub serves a developer community that spans a wide range of geography and ability.<\/p>\n<p>Putting diversity and inclusivity into practice means incorporating a wide range of perspectives into our work. To that point, <strong>disability and accessibility<\/strong> are an integral part of our efforts.<\/p>\n<p>This consideration has been instrumental in crafting <a href=\"https:\/\/primer.style\/\">resilient, accessible components<\/a> at GitHub. These components, in turn, help to guarantee that our experiences work regardless how they are interacted with.<\/p>\n<p>Using GitHub should be efficient and intuitive, regardless of your device, circumstance, or ability. To that point, we have been working on improving the accessibility of our lists of issues and pull requests, as well as our information tables.<\/p>\n<p>Our list of issues and pull requests are some of the most high-traffic experiences we have on GitHub. For many, it is the \u201chomepage\u201d of their open source projects, a jumping off point for conducting and managing work.<\/p>\n<p>Our tables help to communicate, and facilitate taking action with confidence on complicated information relationships. These experiences are workhorses, helping to communicate information about branches, repositories, secrets, attestations, configurations, internal documentation, etc.<\/p>\n<h2>Nothing about us without us<a href=\"https:\/\/github.blog\/engineering\/#nothing-about-us-without-us\" class=\"heading-link pl-2 text-italic text-bold\"><\/a><\/h2>\n<p>Before we discuss the particulars of these updates, I would like to call attention to the most important aspect of the work: <strong>direct participation of, and input from daily assistive technology users<\/strong>.<\/p>\n<p>Disabled people\u2019s direct involvement in the inception, design, and development stages is indispensable. It\u2019s crucial for us to <a href=\"https:\/\/adhoc.team\/playbook-accessibility\/\">go beyond compliance<\/a> and weave these practices into the core of our organization. Only by doing so can we create genuinely inclusive experiences.<\/p>\n<p>With this context established, we can now talk about how this process manifests in component work.<\/p>\n<h2>Improvements we\u2019re making to lists of issues and pull requests<a href=\"https:\/\/github.blog\/engineering\/#improvements-were-making-to-lists-of-issues-and-pull-requests\" class=\"heading-link pl-2 text-italic text-bold\"><\/a><\/h2>\n\n<p>Lists of issues and pull requests will continue to support methods of navigation via assistive technology that you may already be familiar with\u2014making experiences consistent and predictable is a huge and often overlooked aspect of the work.<\/p>\n<p>In addition, these lists will soon be updated to also have:<\/p>\n<p>A dedicated subheading for quickly navigating to the list itself.<br \/>\nA dedicated subheading per issue or pull request.<br \/>\n<a href=\"https:\/\/www.nvaccess.org\/files\/nvda\/documentation\/userGuide.html#SingleLetterNavigation\">List and list item screen reader keyboard shortcut<\/a> support.<br \/>\nArrow keys and Home\/End to quickly move through each list item.<br \/>\nFocus management that allows using Tab to explore individual list item content.<br \/>\nSupport for Space keypresses for selecting list items, and Enter for navigating to the issue or pull request the list item links to.<\/p>\n<p>This allows a wide range of assistive technologies to efficiently navigate, and act on these experiences.<\/p>\n<h2>Improvements we\u2019re making to tables<a href=\"https:\/\/github.blog\/engineering\/#improvements-were-making-to-tables\" class=\"heading-link pl-2 text-italic text-bold\"><\/a><\/h2>\n\n<p>We are in the process of replacing one-off table implementations with <a href=\"https:\/\/primer.style\/components\/data-table\">a dedicated Primer component<\/a>.<\/p>\n<p>Primer-derived tables help provide <strong>consistency and predictability<\/strong>. This is important for <a href=\"https:\/\/www.freedomscientific.com\/SurfsUp\/Tables.htm\">expected table navigation<\/a>, but also applies for other table-related experiences, such as loading content, sorting and pagination requests, and bulk and row-level actions.<\/p>\n<p>At the time of this blog post\u2019s publishing, there are 75 bespoke tables that have been replaced with the Primer component, spread across all of GitHub.<\/p>\n<p>The reason for this quiet success has been due entirely to close collaboration with both our disabled partners and <a href=\"https:\/\/primer.style\/about\">our design system experts<\/a>. This collaboration helped to ensure:<\/p>\n<p>The new table experiences were seamlessly integrated.<br \/>\nDoing so, improved and enhanced the underlying assistive technology experience.<\/p>\n<h2>Progress over perfection<a href=\"https:\/\/github.blog\/engineering\/#progress-over-perfection\" class=\"heading-link pl-2 text-italic text-bold\"><\/a><\/h2>\n<p>Meryl K. Evans\u2019 <a href=\"https:\/\/meryl.net\/accessibility-progress-over-perfection\/\">Progress Over Perfection<\/a> philosophy heavily influenced how we approached this work.<\/p>\n<p><strong>Accessibility is never done<\/strong>. Part of our dedication to this work is understanding that it will grow and change to meet the needs of the people who rely on it. This means making positive, iterative change <a href=\"https:\/\/github.com\/orgs\/community\/discussions\/categories\/accessibility\">based on feedback from the community<\/a> GitHub serves.<\/p>\n<h2>More to come<a href=\"https:\/\/github.blog\/engineering\/#more-to-come\" class=\"heading-link pl-2 text-italic text-bold\"><\/a><\/h2>\n<p>Tables will continue to be updated, and the lists should be released publicly soon. Beyond that, we\u2019re excited about the changes we\u2019re making to improve GitHub\u2019s accessibility. This includes both our services and also <a href=\"https:\/\/github.blog\/2024-05-01-empowering-accessibility-githubs-journey-building-an-in-house-champions-program\/\">our internal culture<\/a>.<\/p>\n<p>We hope that these components, and the process that led to their creation, help you as both part of our developer community and as people who build the world\u2019s software.<\/p>\n<div class=\"post-content-cta\">\n<p>Please visit <a href=\"https:\/\/accessibility.github.com\/\">accessibility.github.com<\/a> to learn more and share feedback on our <a href=\"https:\/\/github.com\/orgs\/community\/discussions\/categories\/accessibility\">accessibility community discussion page<\/a>.<\/p>\n<\/div>\n<p>The post <a href=\"https:\/\/github.blog\/engineering\/user-experience\/how-were-building-more-inclusive-and-accessible-components-at-github\/\">How we\u2019re building more inclusive and accessible components at GitHub<\/a> appeared first on <a href=\"https:\/\/github.blog\/\">The GitHub Blog<\/a>.<\/p>","protected":false},"excerpt":{"rendered":"<p>One of GitHub\u2019s core values is Diverse and Inclusive. It is a guiding thought for how we operate, reminding us [&hellip;]<\/p>\n","protected":false},"author":0,"featured_media":0,"comment_status":"","ping_status":"","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[8],"tags":[],"class_list":["post-1070","post","type-post","status-publish","format-standard","hentry","category-github-engineering"],"_links":{"self":[{"href":"https:\/\/rssfeedtelegrambot.bnaya.co.il\/index.php\/wp-json\/wp\/v2\/posts\/1070","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rssfeedtelegrambot.bnaya.co.il\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/rssfeedtelegrambot.bnaya.co.il\/index.php\/wp-json\/wp\/v2\/types\/post"}],"replies":[{"embeddable":true,"href":"https:\/\/rssfeedtelegrambot.bnaya.co.il\/index.php\/wp-json\/wp\/v2\/comments?post=1070"}],"version-history":[{"count":0,"href":"https:\/\/rssfeedtelegrambot.bnaya.co.il\/index.php\/wp-json\/wp\/v2\/posts\/1070\/revisions"}],"wp:attachment":[{"href":"https:\/\/rssfeedtelegrambot.bnaya.co.il\/index.php\/wp-json\/wp\/v2\/media?parent=1070"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rssfeedtelegrambot.bnaya.co.il\/index.php\/wp-json\/wp\/v2\/categories?post=1070"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rssfeedtelegrambot.bnaya.co.il\/index.php\/wp-json\/wp\/v2\/tags?post=1070"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}