diff options
Diffstat (limited to 'doc/development/fe_guide/style/html.md')
| -rw-r--r-- | doc/development/fe_guide/style/html.md | 23 |
1 files changed, 11 insertions, 12 deletions
diff --git a/doc/development/fe_guide/style/html.md b/doc/development/fe_guide/style/html.md index e53686de1a0..18f72a9655c 100644 --- a/doc/development/fe_guide/style/html.md +++ b/doc/development/fe_guide/style/html.md @@ -6,6 +6,8 @@ info: To determine the technical writer assigned to the Stage/Group associated w # HTML style guide +See also our [accessibility page](../accessibility.md). + ## Semantic elements [Semantic elements](https://developer.mozilla.org/en-US/docs/Glossary/Semantics) are HTML tags that @@ -52,30 +54,27 @@ Button tags requires a `type` attribute according to the [W3C HTML specification <button type="button"></button> ``` -### Button role - -If an HTML element has an `onClick` handler but is not a button, it should have `role="button"`. This is [more accessible](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/button_role). - -```html -// bad -<div onClick="doSomething"></div> - -// good -<div role="button" onClick="doSomething"></div> -``` - ## Links ### Blank target +Avoid forcing links to open in a new window as this reduces the control the user has over the link. +However, it might be a good idea to use a blank target when replacing the current page with +the link makes the user lose content or progress. + Use `rel="noopener noreferrer"` whenever your links open in a new window, i.e. `target="_blank"`. This prevents a security vulnerability [documented by JitBit](https://www.jitbit.com/alexblog/256-targetblank---the-most-underestimated-vulnerability-ever/). +When using `gl-link`, using `target="_blank"` is sufficient as it automatically adds `rel="noopener noreferrer"` to the link. + ```html // bad <a href="url" target="_blank"></a> // good <a href="url" target="_blank" rel="noopener noreferrer"></a> + +// good +<gl-link href="url" target="_blank"></gl-link> ``` ### Fake links |