Displaying 1 to 16 from 16 results

dialog-polyfill - Polyfill for the HTML dialog element

  •    Javascript

<dialog> is an element for a popup box in a web page, including a modal option which will make the rest of the page inert during use. This could be useful to block a user's interaction until they give you a response, or to confirm an action. See the HTML spec. This polyfill works on modern versions of all major browsers. It also supports IE9 and above.

gulp-accessibility - Gulp plugin for AccessSniff

  •    Javascript

Place this in your gulp file. View AccessSniff options for all available options.

react-menu-button - A React component wrapper around inclusive-menu-button.

  •    Javascript

react-menu-button is a React component for inclusive-menu-button meant to ease the use of accessible menu buttons in React applications. Play with examples in the storybook playground.

accessibility-for-teams - A ‘quick-start’ guide for embedding accessibility and inclusive design practices into your team’s workflow

  •    CSS

Practices for embedding accessibility and inclusive design into a team’s workflow. We focus on the issues most likely to impact government sites. These guidelines do not provide a comprehensive list of all possible issues. Your team will need additional resources and work to conduct manual audits to conform to the standards of Section 508 (which aligns with the W3C Web Content Accessibility Guidelines (WCAG) 2.0 Level AA), a law that ensures all web content is accessible to anybody with a disability.

wai-tutorials - W3C WAI’s Web Accessibility Tutorials

  •    CSS

This is the repository for the WAI tutorials, see current draft. Basically, editing files works like a Wiki.

self-focused - Helps make a single page application more friendly to screen readers.

  •    Javascript

When UI transitions happen in a SPA (or in any dynamic web application), there is visual feedback; however, for users of screen reading software, there is no spoken feedback by default. Traditionally, screen reading software automatically reads out the content of a web page during page load or page refresh. In single page applications, the UI transitions happen by rewriting the current page, rather than loading entirely new pages from a server; this makes it difficult for screen reading software users to be aware of UI changes (e.g., clicking on the navigation bar to load a new route). If the corresponding HTML node of the dynamic content can be focused programmatically, screen reading software will start speaking the textual content of that node. Focusing the corresponding HTML node of the dynamic content can be considered guided focus management. Not only will it facilitate the announcement of the textual content of the focused HTML node, but it will also serve as a guided context switch. Any subsequent “tab” key press will focus the next focusable element within/after this context. However, keeping track of the HTML nodes to be focused can be tedious, repetitive, and error-prone since there could be hundreds of nodes that need to be programmatically focused in a SPA.

web-components-good-practices - :sunglasses::ballot_box_with_check: Good Practices for build Web Components


Note: The best practices presented here are about polymer, but you can follow these recommendations for any Web Components or other type of component based on Libraries or frameworks (like React or any other). Tip: For open source projects see the Open Source Checklist.

iron-a11y-announcer - An element that helps with announcing text through screen readers.

  •    Javascript

iron-a11y-announcer is a singleton element that is intended to add a11y to features that require on-demand announcement from screen readers. In order to make use of the announcer, it is best to request its availability in the announcing element. Note: announcements are only audible if you have a screen reader enabled. This element doesn't work on Firefox (it doesn't read anything in Voice Over), since aria-live has been broken since the Quantum redesign (see the MDN docs demo) -- we tested it on Firefox 60, but it doesn't look like a regression, so it's probably broken on older versions as well.

iron-a11y-keys - A basic element implementation of iron-a11y-keys-behavior

  •    Javascript

iron-a11y-keys provides a cross-browser interface for processing keyboard commands. The interface adheres to WAI-ARIA best practices. It uses an expressive syntax to filter key presses. See: Documentation, Demo.

iron-a11y-keys-behavior - A behavior that enables keybindings for greater a11y

  •    HTML

Polymer.IronA11yKeysBehavior provides a normalized interface for processing keyboard commands that pertain to WAI-ARIA best practices. The element takes care of browser differences with respect to Keyboard events and uses an expressive syntax to filter key presses. See: Documentation, Demo.

elm-html-a11y - view helpers enforcing accessible practices

  •    Elm

Please use Accessible Html instead, unless you're using rtfeldman's elm-css package. If you're using elm-css, please use Accessible Html with CSS.

accessibility - A repo to organize the guidelines and best practices for accessibility at 18f.

  •    Ruby

This repo will contain the guidelines and best practices for 508 accessibility at 18F. The site is in draft. See the guides template repo for more information.

design-system - Design system for new Proton project

  •    HTML

Proton Design system, for all Proton Projects: https://design-system-beta.netlify.com/