"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[6057],{3905:function(e,t,n){n.d(t,{Zo:function(){return d},kt:function(){return m}});var i=n(7294);function r(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function a(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);t&&(i=i.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,i)}return n}function o(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?a(Object(n),!0).forEach((function(t){r(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):a(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function s(e,t){if(null==e)return{};var n,i,r=function(e,t){if(null==e)return{};var n,i,r={},a=Object.keys(e);for(i=0;i<a.length;i++)n=a[i],t.indexOf(n)>=0||(r[n]=e[n]);return r}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(i=0;i<a.length;i++)n=a[i],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(r[n]=e[n])}return r}var l=i.createContext({}),c=function(e){var t=i.useContext(l),n=t;return e&&(n="function"==typeof e?e(t):o(o({},t),e)),n},d=function(e){var t=c(e.components);return i.createElement(l.Provider,{value:t},e.children)},u={inlineCode:"code",wrapper:function(e){var t=e.children;return i.createElement(i.Fragment,{},t)}},p=i.forwardRef((function(e,t){var n=e.components,r=e.mdxType,a=e.originalType,l=e.parentName,d=s(e,["components","mdxType","originalType","parentName"]),p=c(n),m=r,f=p["".concat(l,".").concat(m)]||p[m]||u[m]||a;return n?i.createElement(f,o(o({ref:t},d),{},{components:n})):i.createElement(f,o({ref:t},d))}));function m(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var a=n.length,o=new Array(a);o[0]=p;var s={};for(var l in t)hasOwnProperty.call(t,l)&&(s[l]=t[l]);s.originalType=e,s.mdxType="string"==typeof e?e:r,o[1]=s;for(var c=2;c<a;c++)o[c]=n[c];return i.createElement.apply(null,o)}return i.createElement.apply(null,n)}p.displayName="MDXCreateElement"},8868:function(e,t,n){n.r(t),n.d(t,{contentTitle:function(){return d},default:function(){return f},frontMatter:function(){return c},metadata:function(){return u},toc:function(){return p}});var i=n(7462),r=n(3366),a=n(7294),o=n(3905);function s(e){var t=e.src,n=e.alt,i=e.desc,r=e.spacing,o=e.background,s={padding:r||0,background:o||"transparent"};return a.createElement("figure",null,a.createElement("img",{style:s,src:t,alt:n}),a.createElement("figcaption",{className:"text-center"},i))}var l=["components"],c={title:"Accessibility",sidebar_position:7},d=void 0,u={unversionedId:"overview/a11y",id:"overview/a11y",isDocsHomePage:!1,title:"Accessibility",description:"FlatifyCSS respects accessibility. For documentation, attributes like aria- are included with examples and there is always a note for accessibilty.",source:"@site/docs/overview/a11y.mdx",sourceDirName:"overview",slug:"/overview/a11y",permalink:"/docs/overview/a11y",editUrl:"https://github.com/amir2mi/flatifycss/tree/master/website/docs/overview/a11y.mdx",tags:[],version:"current",sidebarPosition:7,frontMatter:{title:"Accessibility",sidebar_position:7},sidebar:"tutorialSidebar",previous:{title:"Grid system",permalink:"/docs/overview/grid-system"},next:{title:"Right to left",permalink:"/docs/overview/rtl"}},p=[{value:"Assistive technologies",id:"assistive-technologies",children:[],level:2},{value:"Keyboard friendly",id:"keyboard-friendly",children:[],level:2},{value:"Reduced motion",id:"reduced-motion",children:[{value:"Background",id:"background",children:[],level:3},{value:"Transitions",id:"transitions",children:[],level:3},{value:"Animations",id:"animations",children:[],level:3}],level:2},{value:"Visual disabilities",id:"visual-disabilities",children:[{value:"Color blindness simulation",id:"color-blindness-simulation",children:[],level:3},{value:"High contrast",id:"high-contrast",children:[],level:3},{value:"Anchors",id:"anchors",children:[],level:3}],level:2}],m={toc:p};function f(e){var t=e.components,n=(0,r.Z)(e,l);return(0,o.kt)("wrapper",(0,i.Z)({},m,n,{components:t,mdxType:"MDXLayout"}),(0,o.kt)("p",null,"FlatifyCSS respects accessibility. For documentation, attributes like ",(0,o.kt)("inlineCode",{parentName:"p"},"aria-")," are included with examples and there is always a note for accessibilty."),(0,o.kt)("h2",{id:"assistive-technologies"},"Assistive technologies"),(0,o.kt)("p",null,"Where content changes dynamically, for example when you open a modal, JavaScript automatically will change the necessary ",(0,o.kt)("inlineCode",{parentName:"p"},"aria-")," HTML attribute and the screen reader will announce the changes.",(0,o.kt)("br",{parentName:"p"}),"\n","Also, documentation gives a helpful overview of how to use the ",(0,o.kt)("inlineCode",{parentName:"p"},"aria-")," attributes where it is needed."),(0,o.kt)("h2",{id:"keyboard-friendly"},"Keyboard friendly"),(0,o.kt)("p",null,"Users who prefer keyboard to navigate are important, so FlatifyCSS considers them and optimize ",(0,o.kt)("a",{parentName:"p",href:"https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible"},(0,o.kt)("inlineCode",{parentName:"a"},":focus-visible"))," for styles."),(0,o.kt)("h2",{id:"reduced-motion"},"Reduced motion"),(0,o.kt)("p",null,"Based on ",(0,o.kt)("a",{parentName:"p",href:"https://css-tricks.com/introduction-reduced-motion-media-query/"},"this article"),': "Vestibular disorders can cause your vestibular system to struggle to make sense of what is happening, resulting in loss of balance and vertigo, migraines, nausea, and hearing loss. Anyone who has spun around too quickly is familiar with a confused vestibular system."',(0,o.kt)("br",{parentName:"p"}),"\n","As web developers, we should consider this and define or reset current animation and transitions with limited movement.",(0,o.kt)("br",{parentName:"p"}),"\n","In favor of ",(0,o.kt)("a",{parentName:"p",href:"https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion"},"prefers-reduced-motion media feature"),", it is possible to know if the user wants reduced motion or not."),(0,o.kt)("p",null,"FlatifyCSS takes these facts over, inside ",(0,o.kt)("inlineCode",{parentName:"p"},"a11y.scss")," file these rules are applied:"),(0,o.kt)("h3",{id:"background"},"Background"),(0,o.kt)("p",null,"Depends on ",(0,o.kt)("a",{parentName:"p",href:"https://web.dev/prefers-reduced-motion/"},"web.dev article"),":",(0,o.kt)("br",{parentName:"p"}),"\n",'"There are decorative effects like animated gradients, parallax scrolling, background videos, and several others. While many users enjoy such animations, some users dislike them because they feel distracted or slowed down by them. In the worst case, users may even suffer from motion sickness as if it were a real life experience, so for these users reducing animations is a medical necessity."'),(0,o.kt)("p",null,"We fix the issue with: ",(0,o.kt)("inlineCode",{parentName:"p"},"background-attachment: initial;")),(0,o.kt)("h3",{id:"transitions"},"Transitions"),(0,o.kt)("p",null,"No transition is necessary for reduced motion so we reset FlatifyCSS defined transitions duration to 0:\n",(0,o.kt)("inlineCode",{parentName:"p"},"-flatify__simple-transition"),(0,o.kt)("br",{parentName:"p"}),"\n",(0,o.kt)("inlineCode",{parentName:"p"},"-flatify__long-transition"),(0,o.kt)("br",{parentName:"p"}),"\n",(0,o.kt)("inlineCode",{parentName:"p"},"-flatify__bouncing-transition")),(0,o.kt)("h3",{id:"animations"},"Animations"),(0,o.kt)("img",{width:"100",style:{float:"right"},src:"/img/docs/a11y/loading-reduced-motion.gif",alt:"Optimized reduced motion for loading component"}),(0,o.kt)("p",null,"We use ",(0,o.kt)("inlineCode",{parentName:"p"},"flatify-fade-in"),", ",(0,o.kt)("inlineCode",{parentName:"p"},"flatify-fade-in-out")," and ",(0,o.kt)("inlineCode",{parentName:"p"},"flatify-fade-out")," animations instead of primary, also it is a good practice to limit animation steps for complex animations like what we do for ",(0,o.kt)("a",{parentName:"p",href:"/docs/components/loading"},"spinner loadings"),":"),(0,o.kt)("h2",{id:"visual-disabilities"},"Visual disabilities"),(0,o.kt)("p",null,"The ",(0,o.kt)("a",{parentName:"p",href:"/docs/overview/colors"},"palette")," is wide enough to handle basic functionalities, it is up to you to consider using ",(0,o.kt)("a",{parentName:"p",href:"https://www.smashingmagazine.com/2016/06/improving-color-accessibility-for-color-blind-users/"},"the best practices for color-blind users")," while designing."),(0,o.kt)("h3",{id:"color-blindness-simulation"},"Color blindness simulation"),(0,o.kt)("p",null,"The Mozilla Firefox browser has a great ",(0,o.kt)("a",{parentName:"p",href:"https://developer.mozilla.org/en-US/docs/Tools/Accessibility_inspector/Simulation"},"accessibility panel")," that simulates ",(0,o.kt)("a",{parentName:"p",href:"https://www.color-blindness.com/types-of-color-blindness/"},"diffrent types of color blindness"),", you can easily check contrast issues and fix them besides other helpful tools like keyboard and text labels checker."),(0,o.kt)(s,{spacing:"1.5em",background:"white",src:"/img/docs/a11y/color-normal.jpg",alt:"Visual disabilities - Normal",desc:"Normal",mdxType:"Picture"}),(0,o.kt)(s,{spacing:"1.5em",background:"white",src:"/img/docs/a11y/color-no-red.jpg",alt:"Visual disabilities - No red color",desc:"No red color (Protanopia)",mdxType:"Picture"}),(0,o.kt)(s,{spacing:"1.5em",background:"white",src:"/img/docs/a11y/color-no-green.jpg",alt:"Visual disabilities - No green color",desc:"No green color (Deuteranopia)",mdxType:"Picture"}),(0,o.kt)(s,{spacing:"1.5em",background:"white",src:"/img/docs/a11y/color-no-blue.jpg",alt:"Visual disabilities - No blue color",desc:"No blue color (Tritanopia)",mdxType:"Picture"}),(0,o.kt)(s,{spacing:"1.5em",background:"white",src:"/img/docs/a11y/no-color.jpg",alt:"Visual disabilities - No color",desc:"No color",mdxType:"Picture"}),(0,o.kt)(s,{spacing:"1.5em",background:"white",src:"/img/docs/a11y/color-contrast-loss.jpg",alt:"Visual disabilities - Constrast loss",desc:"Constrast loss",mdxType:"Picture"}),(0,o.kt)("h3",{id:"high-contrast"},"High contrast"),(0,o.kt)("p",null,"FlatifyCSS colors contrast is not scored 100% you can create a special version for people with contrast loss issues (high contrast) by tweaking some percents. For example, here is the blue color variables inside ",(0,o.kt)("inlineCode",{parentName:"p"},"_config.scss")," file:"),(0,o.kt)("pre",null,(0,o.kt)("code",{parentName:"pre",className:"language-scss",metastring:'title="_config.scss"',title:'"_config.scss"'},"$BLUE: #1cb0f6;\n$BLUE_LIGHT: tint($BLUE, 40%);\n$BLUE_DARK: shade($BLUE, 15%);\n$BLUE_DARKER: shade($BLUE, 50%);\n")),(0,o.kt)("p",null,"And what is looks like:"),(0,o.kt)("img",{style:{marginBottom:20},width:"250",src:"/img/docs/a11y/default-contrast.png",alt:"Default contrast button"}),(0,o.kt)("p",null,"First with ",(0,o.kt)("a",{parentName:"p",href:"https://coolors.co/1cb0f6"},"Coolors"),", find the base color shades then choose the darker shade of it and increase the ",(0,o.kt)("inlineCode",{parentName:"p"},"shade()")," and ",(0,o.kt)("inlineCode",{parentName:"p"},"tint()")," value as percent."),(0,o.kt)("pre",null,(0,o.kt)("code",{parentName:"pre",className:"language-scss",metastring:'title="_config.scss"',title:'"_config.scss"'},"$BLUE: #0884bd;\n$BLUE_LIGHT: tint($BLUE, 60%);\n$BLUE_DARK: shade($BLUE, 50%);\n$BLUE_DARKER: shade($BLUE, 70%);\n")),(0,o.kt)("p",null,"The result will be:"),(0,o.kt)("img",{style:{marginBottom:20},width:"250",src:"/img/docs/a11y/high-contrast.png",alt:"High contrast button"}),(0,o.kt)("h3",{id:"anchors"},"Anchors"),(0,o.kt)("p",null,"By default FlatifyCSS anchors and ",(0,o.kt)("a",{parentName:"p",href:"/docs/components/buttons/button#buttons-priority"},"link buttons")," do not have borders because of designerish reasons, but if your audience is specific or you want to have a more accessible website you can change anchors basic styles with the ",(0,o.kt)("inlineCode",{parentName:"p"},"_config.scss")," file.",(0,o.kt)("br",{parentName:"p"}),"\n","Default styles for anchors are these:"),(0,o.kt)("pre",null,(0,o.kt)("code",{parentName:"pre",className:"language-scss",metastring:'title="_config.scss"',title:'"_config.scss"'},"// color\n$LINK_COLOR: $ACCENT_COLOR;\n$LINK_COLOR_HOVER: $ACCENT_COLOR_LIGHT;\n$LINK_COLOR_FOCUS: $ACCENT_COLOR_DARK;\n// text-decoration\n$LINK_DECORATION: none;\n$LINK_DECORATION_HOVER: underline 0.125em currentColor;\n$LINK_DECORATION_FOCUS: none;\n")),(0,o.kt)("p",null,"A typical link for a user with the contrast loss issue will be hard to find:"),(0,o.kt)(s,{spacing:"1.5em",src:"/img/docs/a11y/link-default.png",alt:"Default link",mdxType:"Picture"}),(0,o.kt)("p",null,"Nonetheless, we can customize links ",(0,o.kt)("inlineCode",{parentName:"p"},"color")," and ",(0,o.kt)("inlineCode",{parentName:"p"},"text-decoration")," to be more accessible: "),(0,o.kt)("pre",null,(0,o.kt)("code",{parentName:"pre",className:"language-scss",metastring:'title="_config.scss"',title:'"_config.scss"'},"// color\n$LINK_COLOR: $ACCENT_COLOR_DARK;\n$LINK_COLOR_HOVER: $ACCENT_COLOR;\n$LINK_COLOR_FOCUS: $ACCENT_COLOR_LIGHT;\n// text-decoration\n$LINK_DECORATION: underline 0.125em currentColor;\n$LINK_DECORATION_HOVER: underline 0.125em currentColor;\n$LINK_DECORATION_FOCUS: underline 0.125em currentColor;\n")),(0,o.kt)("p",null,"The result is:"),(0,o.kt)(s,{spacing:"1.5em",src:"/img/docs/a11y/link-custom.png",alt:"Custom link",mdxType:"Picture"}))}f.isMDXComponent=!0}}]);