- An extension of{' '}
-
+ An extension of{' '}
+
- Drag and drop interfaces are not well-adapted to many cases, and may - be less suitable than other form types for data operations. For - instance, drag and drop interaction relies heavily on spatial - orientation that may not be entirelty valid to all users (e.g., screen - readers as the sole source of information). Similarly, users - navigating by keyboard may not be afforded nuanced, dual-axis drag - item manipulation. -
-
- {`OUI (largely due to the great work already in react-beautiful-dnd) has and will continue to ensure accessibility where possible.
+
+ Drag and drop interfaces are not well-adapted to many cases, and
+ may be less suitable than other form types for data operations.
+ For instance, drag and drop interaction relies heavily on spatial
+ orientation that may not be entirelty valid to all users (e.g.,
+ screen readers as the sole source of information). Similarly,
+ users navigating by keyboard may not be afforded nuanced,
+ dual-axis drag item manipulation.
+
+ {`OUI (largely due to the great work already in react-beautiful-dnd) has and will continue to ensure accessibility where possible.
With that in mind, keep your users' working context in mind.`}
-
- OUI provides a strong start to building accessibility into your apps.
- The components provided strive to meet{' '}
-
- Building accessibility into your app is as important as code quality, - visual design, and performance, and it’s also important that you test - as you go. You can approach accessibility testing from three - dimensions: automated, manual, and empathetic thinking. Use automated - tests to quickly cover as much ground as possible, manual tests to - address more complicated scenarios, and empathy to fill in the gaps. -
-For a technical intro to accessibility and how OUI tackles it
-- You can aid navigation and make pages more accessible for screen - reader users by using solid headings and landmarks.{' '} - Headings are the simplest way for screen readers - to navigate pages. A good heading hierarchy: -
-Some content
-Some content
-
- Landmarks are another way for screen readers to
- navigate pages. A benefit of landmarks is that they offer more
- context on the type of content to expect than a heading. This is
- useful for tech that offers reader modes (e.g., Firefox, Safari,
- and apps like Pocket) and new form factors (e.g., smartwatches).
- Many landmarks are mapped to HTML elements, such as{' '}
-
- You can implement named landmarks with{' '}
-
- Each page requires a unique, informative title that accurately - reflects what the page does. The best page titles put the unique - content first. Effectively, they're reverse-order - breadcrumbs. -
-{'Use this format: '}
-- Focus states are an important part of design because they let - keyboard users know where focus is currently at. All browsers ship - with focus states for interactive elements, and most of the time - you shouldn’t need to alter these. OUI goes further to customize - focus states to match the Elastic brand and provide better visual - states, including color contrast. -
-
- Given that a keyboard user primarily navigates pages in one
- direction (either forward or backward), it’s important to have an
- intuitive focus order. Focus order should follow the flow of the
- page to make it easy to follow. If you’ve made a normally
- non-interactive element like a{' '}
-
- Navigating complex sites sometimes means your focus state will
- jump around (e.g., skip links, modals, typeaheads, and so on). If
- you remove an element that currently has focus without setting
- focus anywhere else, users start over at the beginning of the
- page. Unless there’s a strong reason to do otherwise, focus state
- should always return to where it was previously if the currently
- focused element disappears. For example, closing a modal might
- mean your focus is on a close button; when the modal closes, you
- should return focus to the button that opened the modal.
-
- An accessible name is the name of an HTML element as it’s exposed
- to assistive technology. An accessible name can then be read by a
- screen reader or can be targeted for an action.
-
- For most content, the accessible name comes from the element’s
- inner text, such as:{' '}
-
- Some content might require special attributes to give an element
- an accessible name. For images, you can use
- For buttons without descriptive text content, you can rely on ARIA
- to bring meaning back:
-
- Some HTML elements have associated elements that provide
- accessible names. Form elements are the most ubiquitous example: a
- checkbox doesn’t have a name by itself, but when it is associated
- with a label, assistive technologies can make the connection:
-
- Having only an accessible name, however, doesn’t always lead to
- the best UX. Take a list of available fields that someone might
- want to add to their filter (say, on the discovery page of a
- popular open source project):
-
- Here, the 3 buttons have the same accessible name. There are a few
- different patterns you can use to differentiate between repeated
- items. For example, each button below shows a possible pattern you
- can use (in order of recommended best practice):
-
- There are a lot of aspects to accessibility, and covering all the
- bases can be a lot to keep in mind. By relying on standards, you
- can minimize the amount of special casing you have to do in code,
- but you should still be cognizant of the many modalities in which
- users might use your products.
-
- While low-vision users may use many assistive technologies in
- tandem, this section focuses on zooming. Two ways that users can
- zoom the page are by increasing the base font-size with browser
- tools or by using a 3rd-party magnifier (sometimes, a physical
- magnifier) to better see the screen.
-
-
-
- Blind and low-vision users often rely on tools, such as screen
- readers and braille readers, to navigate the web. Screen and
- braille readers read the page from top to bottom. Building a page
- with a good structure, will make it quick and easy to navigate.
- Braille readers are a textual representation of what a screen
- reader would say so we can focus on screen reader compatibility.
-
- The 3 most common, desktop, screen readers, and their most common
- browser pairings are:
- Mobile is a little simpler:
- For many things, there’s no need to reinvent the wheel. If your
- component is featured in one of these two sources, feel free to
- borrow heavily!
- {children}
- You can have the most beautiful UI, but without{' '}
- consistent, easy-to-understand text, you haven’t built the best
- user experience.
-
- From here, you can edit saved objects. To get started, follow
- these steps.
-
- To add a visualization, click Add in the menu bar. No
- visualizations yet? Go to Visualize to create one.
-
- This dashboard is empty. To add a visualization, click Add in
- the menu bar. No visualizations yet? Go to the Visualize app
- to create one.
-
- Your text can be fun as long as it fits the experience—and
- doesn't get in the user's way. Clever text can become
- annoying when used for frequently performed tasks. Situations
- where the user might lose data or otherwise be frustrated are also
- not appropriate for humor.
-
- Unfortunately, I could not find any results matching your
- search. I tried really hard. I looked all over the place and
- frankly, I just couldn't find anything good. Help me,
- help you.
-
Product logos follow similar rules as app logos. Note the use of{' '}
diff --git a/src-docs/src/views/icon/logos.js b/src-docs/src/views/icon/logos.js
index f8d3687a46..e43aa77b9c 100644
--- a/src-docs/src/views/icon/logos.js
+++ b/src-docs/src/views/icon/logos.js
@@ -21,33 +21,12 @@ import {
OuiCopy,
} from '../../../../src/components';
-export const iconTypes = [
- 'logoAppSearch',
- 'logoBeats',
- 'logoBusinessAnalytics',
- 'logoCode',
- 'logoCloud',
- 'logoCloudEnterprise',
- 'logoElastic',
- 'logoElasticStack',
- 'logoElasticsearch',
- 'logoEnterpriseSearch',
- 'logoKibana',
- 'logoLogging',
- 'logoLogstash',
- 'logoMaps',
- 'logoMetrics',
- 'logoObservability',
- 'logoSecurity',
- 'logoSiteSearch',
- 'logoUptime',
- 'logoWorkplaceSearch',
-].sort();
+export const iconTypes = ['logoOpenSearch'].sort();
export default () => (
<>
'} interactive via
- JavaScript, you can enable a tab stop using{' '}
- How do I get back to where I was?
- Further reading
-
-
- Most elements
- Images and other elements
- 
'}
- Buttons without inner text
- Forms and more complex patterns
- Of note: Repeated calls to action
- Available fields
-
-
`}
- Available fields
-
-
-`}
- My favorite fruit
-
-
-
-
...
`}
- Further reading
-
-
- Low-vision
- Low-vision/blind (screen readers)
-
-
-
-
-
-
-
-
- Practical examples
-
-
- Tooling
-
-
- Spec docs
-
-
- Edit saved objects
- Edit saved objects
-