Skip to content

Commit 5da83a1

Browse files
julien-deramondjulien-deramond
authored
Merge branch 'ouds/main' into ouds/main-next-bootstrap
2 parents 8a23f90 + 99f651c commit 5da83a1

File tree

6 files changed

+532
-11
lines changed

6 files changed

+532
-11
lines changed

‎site/content/docs/0.0/getting-started/accessibility.md‎

Lines changed: 97 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,4 +8,100 @@ aliases:
88
toc: true
99
---
1010

11-
{{< callout-soon "page" >}}
11+
OUDS Web provides an easy-to-use framework of ready-made styles, layout tools, and interactive components, allowing developers to create websites and applications that are visually appealing, functionally rich, and accessible out of the box.
12+
13+
## Overview and limitations
14+
15+
The overall accessibility of any project built with OUDS Web depends in large part on the author's markup, additional styling, and scripting they've included. However, provided that these have been implemented correctly, it should be perfectly possible to create websites and applications with OUDS Web that fulfill [<abbr title="Web Content Accessibility Guidelines">WCAG</abbr> 2.1](https://www.w3.org/TR/WCAG/) (A/AA/AAA), [Section 508](https://www.section508.gov/), and similar accessibility standards and requirements.
16+
17+
### Structural markup
18+
19+
OUDS Web's styling and layout can be applied to a wide range of markup structures. This documentation aims to provide developers with best practice examples to demonstrate the use of OUDS Web itself and illustrate appropriate semantic markup, including ways in which potential accessibility concerns can be addressed.
20+
21+
### Interactive components
22+
23+
OUDS Web's interactive components<!--—such as modal dialogs, dropdown menus, and custom tooltips—--> are designed to work for touch, mouse, and keyboard users. Through the use of relevant [<abbr title="Web Accessibility Initiative">WAI</abbr>-<abbr title="Accessible Rich Internet Applications">ARIA</abbr>](https://www.w3.org/WAI/standards-guidelines/aria/) roles and attributes, these components should also be understandable and operable using assistive technologies (such as screen readers).
24+
25+
Because OUDS Web's components are purposely designed to be fairly generic, authors may need to include further <abbr title="Accessible Rich Internet Applications">ARIA</abbr> roles and attributes, as well as JavaScript behavior, to more accurately convey the precise nature and functionality of their component. This is usually noted in the documentation.
26+
27+
<!--### Color contrast
28+
29+
Some combinations of colors that currently make up OUDS Web's default palette—used throughout the framework for things such as button variations, alert variations, form validation indicators—may lead to *insufficient* color contrast (below the recommended [WCAG 2.1 text color contrast ratio of 4.5:1](https://www.w3.org/TR/WCAG/#contrast-minimum) and the [WCAG 2.1 non-text color contrast ratio of 3:1](https://www.w3.org/TR/WCAG21/#non-text-contrast)), particularly when used against a light background.
30+
31+
Unlike Bootstrap, in OUDS Web **contrasts are locked to ensure they meet [WCAG 2.1 accessibility standards for color contrast](https://www.w3.org/TR/WCAG21/#contrast-minimum)** when using [`.text-*`]({{< docsref "/utilities/colors" >}}) and [`.bg-*` utilities]({{< docsref "/utilities/background" >}}), by defining `color` and `background-color` altogether. Please refer to [our theme colors]({{< docsref "/customize/color-palette" >}}) to have a full preview of OUDS Web color palette’s reached WCAG level.-->
32+
33+
### Visually hidden content
34+
35+
Content which should be visually hidden, but remain accessible to assistive technologies such as screen readers, can be styled using the `.visually-hidden` class. This can be useful in situations where additional visual information or cues (such as meaning denoted through the use of color) need to also be conveyed to non-visual users.
36+
37+
<!--```html
38+
<p class="text-danger">
39+
<span class="visually-hidden">Danger: </span>
40+
This action is not reversible
41+
</p>
42+
```-->
43+
44+
For visually hidden interactive controls, such as traditional "skip" links, use the `.visually-hidden-focusable` class. This will ensure that the control becomes visible once focused (for sighted keyboard users). **Watch out, `.visually-hidden-focusable` is a standalone class, and must not be used in combination with the `.visually-hidden` class.**
45+
46+
```html
47+
<a class="visually-hidden-focusable" href="#content">Skip to main content</a>
48+
```
49+
50+
### Reduced motion
51+
52+
OUDS Web includes support for the [`prefers-reduced-motion` media feature](https://www.w3.org/TR/mediaqueries-5/#prefers-reduced-motion). In browsers/environments that allow the user to specify their preference for reduced motion, most CSS transition effects in OUDS Web<!-- (for instance, when a modal dialog is opened or closed, or the sliding animation in carousels)--> will be disabled, and meaningful animations <!--(such as spinners) -->will be slowed down.
53+
54+
On browsers that support `prefers-reduced-motion`, and where the user has *not* explicitly signaled that they'd prefer reduced motion (i.e. where `prefers-reduced-motion: no-preference`), OUDS Web enables smooth scrolling using the `scroll-behavior` property.
55+
56+
### Focus visibility
57+
58+
OUDS Web includes [WICG's `:focus-visible` polyfill](https://github.com/WICG/focus-visible) to ensure an enhanced focus visibility for keyboard users while shutting down focus styles on active state.
59+
60+
{{< scss-docs name="focus-visibility" file="scss/_reboot.scss" >}}
61+
62+
OUDS Web provides `focus-visible()` mixin to ensure a proper visible focus state:
63+
64+
{{< scss-docs name="focus-visible" file="scss/mixins/_focus.scss" >}}
65+
66+
This visible focus state is defined by an outer outline and an inner box shadow. Colors are switched in a dark context. Here are the basic variables that define this visible focus:
67+
68+
{{< scss-docs name="focus-visible-variables" file="scss/_variables.scss" >}}
69+
70+
<!--Each component then specifies its own visible focus style when needed, for example [carousels]({{< docsref "/components/carousel#with-indicators" >}}).
71+
72+
{{< scss-docs name="focus-visible-carousel" file="scss/_carousel.scss" >}}-->
73+
74+
<!--#### Under a fixed header
75+
76+
When using a fixed (or sticky) header, tabbing backward often hides focused element under the header. OUDS Web sets `scroll-padding-top` property for such case. This feature is configurable in two ways:
77+
78+
1. `$scroll-offset-top` variable defines the offset,
79+
2. and [`$enable-fixed-header` allows to drop this rule]({{< docsref "/customize/options" >}}) if you don't use a fixed header.
80+
81+
{{< scss-docs name="scroll-offset" file="scss/_reboot.scss" >}}-->
82+
83+
### Minimum target size
84+
85+
OUDS Web provides `target-size()` mixin to ensure a minimum target size, adding a centered pseudo-element with a minimum size —defaulting to `44px` to pass [WCAG 2.1 "Target Size" Success Criterion (2.5.5)](https://www.w3.org/WAI/WCAG21/Understanding/target-size.html)— alongside a few arguments to fit specific needs (e.g. different width and height, using `::after` instead of `::before`, etc.).
86+
87+
{{< scss-docs name="target-size" file="scss/mixins/_target-size.scss" >}}
88+
89+
### Maximum line length
90+
91+
When writing a paragraph, it is commonly admitted that a line should have 80 characters as a maximum. This phenomenon is carefully explained in the [C20 technique: Using relative measurements to set column widths](https://www.w3.org/TR/2016/NOTE-WCAG20-TECHS-20161007/C20).
92+
93+
<!--For more information, please [read text utilities]({{< docsref "/utilities/text#line-length" >}}).-->
94+
95+
## Additional resources
96+
97+
- [Web Content Accessibility Guidelines (WCAG) 2.1](https://www.w3.org/TR/WCAG/)
98+
- [The A11Y Project](https://www.a11yproject.com/)
99+
- [MDN accessibility documentation](https://developer.mozilla.org/en-US/docs/Web/Accessibility)
100+
- [Tenon.io Accessibility Checker](https://tenon.io/)
101+
- [Color Contrast Analyser (CCA)](https://www.tpgi.com/color-contrast-checker/)
102+
- ["HTML Codesniffer" bookmarklet for identifying accessibility issues](https://github.com/squizlabs/HTML_CodeSniffer)
103+
- [Microsoft Accessibility Insights](https://accessibilityinsights.io/)
104+
- [Deque Axe testing tools](https://www.deque.com/axe/)
105+
- [Orange accessibility guidelines](http://a11y-guidelines.orange.com/)
106+
- [Introduction to Web Accessibility](https://www.w3.org/WAI/fundamentals/accessibility-intro/)
107+
- [`:focus-visible` on MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible)

‎site/content/docs/0.0/getting-started/introduction.md‎

Lines changed: 203 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,4 +11,206 @@ aliases:
1111
toc: true
1212
---
1313

14-
{{< callout-soon "page" >}}
14+
<!--## About Orange Brand
15+
16+
As OUDS Web is based on Bootstrap, you'll find in OUDS Web **all** the Bootstrap's components and their variants, but with an Orange branded look.
17+
18+
Among those inherited components and variants, some exist in Orange Unified Design System and fully respect its design specifications and some don't. Those ones should not be used in your projects to ensure a consistent user experience throughout our Orange web services.
19+
20+
As for maintainability reasons we have to keep them in this documentation, we tagged them under a `<details><summary>` with incompatibility design callouts. They inform you of what should not be used from an Orange design point of view. They suggest, when available, a replacement solution and/or a link to the Orange Unified Design System website to see other possibilities. We tried to hide them as much as possible while keeping the variants in our documentation.
21+
Thanks for taking this information into account.
22+
23+
Design incompatibility callouts message example:
24+
25+
{{< design-callout-alert >}}
26+
This checkbox variant should not be used because it does not respect the Orange Unified Design System specifications.
27+
28+
From the Orange Unified Design System point of view, checkboxes should be represented like in our [Checks component]({{< docsref "/forms/checks-radios" >}}). You can also refer to the [Checkbox guidelines](https://system.design.orange.com/0c1af118d/p/88ab5b-forms/b/599459/i/48901789) on on the Orange Unified Design System website.
29+
{{< /design-callout-alert >}}
30+
31+
In the same spirit, some recommendation design callouts will inform you of specific Orange Unified Design System recommendations.
32+
33+
Design recommendation callouts message example:
34+
35+
{{< design-callout-alert info >}}
36+
To display basic tables, Orange Unified Design System recommends using these compact tables.
37+
{{< /design-callout-alert >}}-->
38+
39+
## Quick start
40+
41+
Get started by including OUDS Web's production-ready CSS and JavaScript via CDN without the need for any build steps. See it in practice with this [OUDS Web CodePen demo](https://codepen.io/louismaximepiton/pen/NWZdZJm).
42+
43+
<br>
44+
45+
1. **Create a new `index.html` file in your project root.** Include the `<meta name="viewport">` tag as well for [proper responsive behavior](https://developer.mozilla.org/en-US/docs/Web/HTML/Viewport_meta_tag) in mobile devices.
46+
47+
```html
48+
<!doctype html>
49+
<html lang="en">
50+
<head>
51+
<meta charset="utf-8">
52+
<meta name="viewport" content="width=device-width, initial-scale=1">
53+
<title>OUDS Web demo</title>
54+
</head>
55+
<body>
56+
<h1>Hello, world!</h1>
57+
</body>
58+
</html>
59+
```
60+
61+
2. **Include OUDS Web's CSS and JS.** Place the `<link>` tag in the `<head>` for our CSS, and the `<script>` tag for our JavaScript bundle (including Popper for positioning dropdowns, popovers, and tooltips) before the closing `</body>`. Learn more about our [CDN links](#cdn-links).
62+
63+
```html
64+
<!doctype html>
65+
<html lang="en">
66+
<head>
67+
<meta charset="utf-8">
68+
<meta name="viewport" content="width=device-width, initial-scale=1">
69+
<title>OUDS Web demo</title>
70+
<link href="{{< param "cdn.css" >}}" rel="stylesheet" integrity="{{< param "cdn.css_hash" >}}" crossorigin="anonymous">
71+
</head>
72+
<body>
73+
<h1>Hello, world!</h1>
74+
<script src="{{< param "cdn.js_bundle" >}}" integrity="{{< param "cdn.js_bundle_hash" >}}" crossorigin="anonymous"></script>
75+
</body>
76+
</html>
77+
```
78+
79+
You can also include [Popper](https://popper.js.org/docs/v2/) and our JS separately. If you don't plan to use dropdowns, popovers, or tooltips, save some kilobytes by not including Popper.
80+
81+
```html
82+
<script src="{{< param "cdn.popper" >}}" integrity="{{< param "cdn.popper_hash" >}}" crossorigin="anonymous"></script>
83+
<script src="{{< param "cdn.js" >}}" integrity="{{< param "cdn.js_hash" >}}" crossorigin="anonymous"></script>
84+
```
85+
86+
3. **Hello, world!** Open the page in your browser of choice to see your OUDS Web page. <!--Now you can start building with OUDS Web by creating your own [layout]({{< docsref "/layout/grid" >}}), adding dozens of [components]({{< docsref "/components/buttons" >}}), and utilizing [our official examples]({{< docsref "/examples" >}}).-->
87+
88+
## CDN links
89+
90+
As reference, here are our primary CDN links.
91+
92+
{{< bs-table >}}
93+
| Description | URL |
94+
| --- | --- |
95+
| CSS | `{{< param "cdn.css" >}}` |
96+
| JS | `{{< param "cdn.js_bundle" >}}` |
97+
{{< /bs-table >}}
98+
99+
<!--You can also use the CDN to fetch any of our [additional builds listed in the Contents page]({{< docsref "/getting-started/contents" >}}).-->
100+
101+
## Next steps
102+
103+
- Read a bit more about some [important global environment settings](#important-globals) that OUDS Web utilizes.
104+
- Read about what's included in OUDS Web<!-- in our [contents section]({{< docsref "/getting-started/contents/" >}}) and the list of [components that require JavaScript](#js-components) below-->.
105+
<!--- Need a little more power? Consider building with OUDS Web by [including the source files via package manager]({{< docsref "/getting-started/download#package-managers" >}}).-->
106+
<!--- Looking to use Boosted as a module with `<script type="module">`? Please refer to our [using Boosted as a module]({{< docsref "/getting-started/javascript#using-boosted-as-a-module" >}}) section.-->
107+
108+
<!--## JS components
109+
110+
Curious which components explicitly require our JavaScript and Popper? If you're at all unsure about the general page structure, keep reading for an example page template.
111+
112+
- Accordions for extending our Collapse plugin
113+
- Alerts for dismissing and Close button tooltip
114+
- Buttons for toggling states and checkbox/radio functionality
115+
- Carousel for all slide behaviors, controls, and indicators
116+
- Close button for displaying and positioning tooltip
117+
- Collapse for toggling visibility of content
118+
- Dropdowns for displaying and positioning (also requires [Popper](https://popper.js.org/docs/v2/))
119+
- Footer for extending our Collapse plugin to implement responsive behavior
120+
- Modals for displaying, positioning, scroll behavior, and Close button tooltip
121+
- Navbar for extending our Collapse and Offcanvas plugins to implement responsive behaviors, and Close button tooltip (Offcanvas only)
122+
- Navs with the Tab plugin for toggling content panes
123+
- Offcanvases for displaying, positioning, scroll behavior, and Close button tooltip
124+
- Orange navbar for minimizing the header
125+
- Quantity selector for incrementing/decrementing number value
126+
- Scrollspy for scroll behavior and navigation updates
127+
- Toasts for displaying, dismissing, and Close button tooltip
128+
- Tooltips and popovers for displaying and positioning (also requires [Popper](https://popper.js.org/docs/v2/))-->
129+
130+
## Required script
131+
132+
OUDS Web includes [WICG's `:focus-visible` polyfill](https://github.com/WICG/focus-visible) to ensure an enhanced focus visibility for keyboard users while shutting down focus styles on active state.
133+
134+
{{< callout warning >}}
135+
However, if you don't need or want to use OUDS Web's JavaScript files, you'll still need to use the polyfill.
136+
{{< /callout >}}
137+
138+
```html
139+
<script src="{{< param "cdn.focus_visible" >}}" integrity="{{< param "cdn.focus_visible_hash" >}}" crossorigin="anonymous"></script>
140+
```
141+
142+
## Important globals
143+
144+
OUDS Web employs a handful of important global styles and settings, all of which are almost exclusively geared towards the *normalization* of cross browser styles. Let's dive in.
145+
146+
### HTML5 doctype
147+
148+
OUDS Web requires the use of the HTML5 doctype. Without it, you'll see some funky and incomplete styling.
149+
150+
```html
151+
<!doctype html>
152+
<html lang="en">
153+
...
154+
</html>
155+
```
156+
157+
### Viewport meta
158+
159+
OUDS Web is developed *mobile first*, a strategy in which we optimize code for mobile devices first and then scale up components as necessary using CSS media queries. To ensure proper rendering and touch zooming for all devices, add the responsive viewport meta tag to your `<head>`.
160+
161+
```html
162+
<meta name="viewport" content="width=device-width, initial-scale=1">
163+
```
164+
165+
You can see an example of this in action in the [quick start](#quick-start).
166+
167+
### Box-sizing
168+
169+
For more straightforward sizing in CSS, we switch the global `box-sizing` value from `content-box` to `border-box`. This ensures `padding` does not affect the final computed width of an element, but it can cause problems with some third-party software like Google Maps and Google Custom Search Engine.
170+
171+
On the rare occasion you need to override it, use something like the following:
172+
173+
```css
174+
.selector-for-some-widget {
175+
box-sizing: content-box;
176+
}
177+
```
178+
179+
With the above snippet, nested elements—including generated content via `::before` and `::after`—will all inherit the specified `box-sizing` for that `.selector-for-some-widget`.
180+
181+
Learn more about [box model and sizing at CSS Tricks](https://css-tricks.com/box-sizing/).
182+
183+
### Resource Hints
184+
185+
[Resource hints](https://html.spec.whatwg.org/#linkTypes) are meant to optimize browser loading strategy, by either preloading assets, prefetching DNS or preconnecting to domains — but please use them carefully and **only to hint resources you'll really be using soon**.
186+
It should be used for critical resources only.
187+
188+
#### `preconnect` to CDNs
189+
190+
```html
191+
<link rel="preconnect" href="https://cdn.jsdelivr.net" crossorigin="anonymous">
192+
```
193+
194+
### Reboot
195+
196+
For improved cross-browser rendering, we <!--use [Reboot]({{< docsref "/content/reboot" >}}) to -->correct inconsistencies across browsers and devices while providing slightly more opinionated resets to common HTML elements.
197+
198+
## OUDS Web community
199+
200+
Stay up-to-date on the development of OUDS Web and reach out to the community with these helpful resources.
201+
202+
- Ask questions and explore [our GitHub Discussions](https://github.com/Orange-OpenSource/Orange-Boosted-Bootstrap/discussions).
203+
- Chat with the core team and fellow OUDS Web users on internal Orange communication tools.
204+
205+
## Bootstrap Community
206+
207+
Stay up-to-date on the development of Bootstrap and reach out to the community with these helpful resources.
208+
209+
- Read and subscribe to [The Official Bootstrap Blog]({{< param blog >}}).
210+
- Ask questions and explore [Bootstrap GitHub Discussions](https://github.com/twbs/bootstrap/discussions).
211+
- Discuss, ask questions, and more on [the Bootstrap community Discord](https://discord.gg/bZUvakRU3M) or [Bootstrap subreddit](https://www.reddit.com/r/bootstrap/).
212+
- Chat with fellow Bootstrappers in IRC. On the `irc.libera.chat` server, in the `#bootstrap` channel.
213+
- Implementation help may be found at Stack Overflow (tagged [`bootstrap-5`](https://stackoverflow.com/questions/tagged/bootstrap-5)).
214+
- Developers should use the keyword `bootstrap` on packages that modify or add to the functionality of Bootstrap when distributing through [npm](https://www.npmjs.com/search?q=keywords:bootstrap) or similar delivery mechanisms for maximum discoverability.
215+
216+
You can also follow [@getbootstrap on Twitter](https://twitter.com/{{< param twitter >}}) for the latest gossip and awesome music videos.

0 commit comments

Comments
 (0)