Accessibility is not a barrier to innovation<\/h2>\n
Accessibility will not force you to make a product that is ugly, boring, or cluttered. It will introduce a set of constraints to incorporate as you consider your design. These design constraints will give you new ideas to explore that will lead to better products for all of your users.<\/p>\n
As you read through these guidelines, consider that we don\u2019t want to design for our design peers.<\/p>\n
![\"\"](\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/11\/image1.png\")
<\/p>\n
Eager to escape the tech bubble for a weekend, Designer Dude<\/a> and his circle of start-up friends went to Yosemite, where he spent most of his time dribbbling<\/a> on a slack<\/a>-line<\/a> near their basecamp<\/a>.<\/p>\n Design for the diverse set of users who will interact with your products.<\/p>\n Design for everyone<\/p><\/div>\n This can include people who are blind, color blind, or have low vision, those who are Deaf or have hearing difficulties, people with mobility impairments which may be temporary or permanent, or people with cognitive disabilities. Design for people who are young, old, power users, casual users, and those who just enjoy a quality experience.<\/p>\n Embrace these accessibility guidelines as you would any set of design constraints. They are part of the challenge of creating amazing products.<\/p>\n This helps users who are unable to, or have difficulty with, distinguishing one color from another. This includes people who are color blind (1 in 12 men, 1 in 200 women), have low vision (1 in 30 people), or are blind (1 in 188 people).<\/p>\n Use color to highlight or complement what is already visible.<\/strong><\/p>\n In this example shown in grayscale, how many fields would you say are in an error state?<\/p>\n How many fields are in an error\u00a0state?<\/p><\/div><\/center><\/p>\n Most who see this in grayscale say the answer is one, the \u201chuman verification\u201d field. That is because the triangle with the exclamation mark inside indicates that something is amiss.<\/p>\n Now look at this same screen in color. How many fields are in an error state?<\/p>\n Turning on the color reveals a different story altogether<\/p><\/div><\/center><\/p>\n With color the answer becomes, \u201call four\u201d.<\/p>\n There are many acceptable ways to make this form visually accessible. You could put the red triangle icon in all of the error fields. You could use text to indicate and explain why a given field is in error. You could use tooltips, thick borders, bold text, underlines, italics, etc. The choices are infinite, but the only rule is to use more than color alone.<\/p>\n How would you<\/em> design this signup form so that color isn\u2019t the only visual means of showing a field with an error?<\/p>\n Update: It turns out that the accessibility issue described above in the PayPal example is caused by the LastPass plugin in my browser. Thanks to Tony Amidei (@subface<\/a>) from PayPal for pointing this out to me. As designed, the triangle icons should always appear on fields in an error state.<\/p>\n According to the WCAG<\/a>, the contrast ratio between text and a text\u2019s background should be at least 4.5 to 1. If your font is at least 24 px or 19 px bold, the minimum drops to 3 to 1.<\/p>\n This guideline helps users with low vision, color blindness, or worsening vision see and read the text on your screen.<\/p>\n This means that when text is 24 px, 19 px bold, or larger, the lightest gray you can use on a white background is #959595.<\/p>\n #959595 text on a white background<\/p><\/div><\/center><\/p>\n For smaller text, the lightest gray you can use on a white background is #767676. If you have a gray background, the text needs to be darker.<\/p>\n #767676 text on a white background<\/p><\/div><\/center><\/p>\n There are some great tools that can help you find an accessible color palette for your designs including Color Safe<\/a>. There is also WebAIM\u2019s Color Contrast Checker<\/a>, which will let you test colors you have already chosen.<\/p>\n Logos or elements currently in a disabled state are exempt from this standard. This includes inactive buttons or menu items. Placeholder or ghost text for form fields are not<\/strong> exempt from this standard.<\/p>\n Here is an example from a popular blogging site with text contrast that is below standards. Only the contrast of the giant letter \u201cM\u201d meets standards.<\/p>\n Only the letter M meets minimum contrast standards<\/p><\/div><\/center><\/p>\n The following example from the BBC shows a UI with passing color combinations. You can tell they are actively looking to pass contrast ratios since their lightest gray is #767676.<\/p>\n An example of passing color contrast\u00a0usage<\/p><\/div>\n I am proud to work with the Salesforce Design Systems team, where they embraced color contrast guidelines for the Salesforce1 mobile application.<\/p>\n Passing colors in Salesforce1<\/p><\/div><\/center><\/p>\n Explore using high contrast color combinations. Designers who have gone through this exercise are often surprised by how much they prefer higher contrast designs. I am confident you too will find that displaying text using the minimum allowable contrast will not detract from your products.<\/p>\n Check out Projectors Don\u2019t Lie<\/a> and Accessible Interface Design<\/a> for more on color contrast.<\/p>\n Let\u2019s take a moment to give thanks for the reset style sheet and all of the utility it has given the modern web designer. Without reset style sheets, it would be much more difficult to create a consistent experience across different devices and browsers.<\/p>\n Let\u2019s now take a moment to blame reset style sheets for playing a role in one of the most widespread accessibility blunders on the Internet.<\/p>\n :focus {outline: 0;}<\/em><\/p>\n This single line of CSS makes it nearly impossible for a sighted user to use a website with just a keyboard. Fortunately, since the initial CSS resets were released, many popular ones including Eric Meyer\u2019s<\/a> have been updated to remove un-styling of the\u00a0:focus pseudo-class.<\/p>\n The intent of un-styling focus was noble enough: remove default focus styles with the intention that designers and developers will replace them with something that is both visible and matches the style of their web pages. It\u2019s easy enough to dislike the grey dashed border focus on IE and Firefox or the blue halo in Chrome.<\/p>\n Default visual focus states for Chrome and\u00a0Firefox<\/p><\/div>\n The problem is, most websites do not create their own focus styles. These focus indicators, which are fundamental to the success of keyboard users, are largely absent on the web.<\/p>\n As a quick exercise to experience a website that doesn\u2019t always provide visual focus, open a tab and visit the website for the company who makes your mobile phone. Press the Tab key repeatedly to navigate through the page. Do you see a visual focus indicator as you navigate? Maybe you see this for some links on the page but not all? Consider the effect this has on someone who only uses a keyboard to interact with the web.<\/p>\n If you\u2019re on a Mac, you may need to enable Full Keyboard Access under System Preferences > Keyboard > Shortcuts. It\u2019s at the bottom.<\/p>\n <\/p>\n If you remove default focus, replace it with something that is *better* than what your browser provides.<\/p>\n In the example below, the BBC uses a color bar to indicate which section\u2019s link is in focus.<\/p>\n Twitter uses a combination of default focus and a tooltip to show keyboard focus. The icon also goes from gray to green. That\u2019s three separate visuals to indicate focus for keyboard users.<\/p>\n When providing your own focus states, just be sure to remove the default state so that you don\u2019t get something looking like this example where Chrome\u2019s blue rectangle overlaps this menu\u2019s blue pill.<\/p>\n While ugly, this isn\u2019t \u201ccaused\u201d by accessibility<\/p><\/div><\/center><\/p>\n In recent years we have experienced a de-evolution in form fields. Modern designs have foregone traditional identifying attributes and interactive affordances in favor of a more minimalist approach. Today\u2019s forms lack two specific items that are vital for accessibility: clearly defined boundaries and visible labels.<\/p>\n Below is an example of a traditional text input. It is a rectangle with a defined boundary. It can be filled with color, but does not have to be filled. There is also a visible label, which in this example sits to the left of the field.<\/p>\n A modest text input\u00a0field<\/p><\/div><\/center><\/p>\n Clearly defined boundaries for form fields are important for users with mobility impairments and those with cognitive disabilities. Knowing the location and size of the click target is important for people using a standard or adaptive pointing device<\/a>. Users with cognitive disabilities may have difficultly finding and interacting with fields without common visual cues.<\/p>\n Below is an example of a search field from a popular note-taking app.<\/p>\n Where would I click if I wanted to enter in a search term? The cursor was removed for emphasis.<\/p><\/div>\n There is only one input on this screen. Can you guess the boundaries of the form field? Clicking anywhere on the words, \u201csearch notes\u201d, will place you inside of the input.<\/p>\n Here is another example form fields without boundaries from a popular blogging platform. Below there are two input fields on the page. Where on the screen can I click in order to enter the \u201cTell your story\u2026\u201d text area?<\/p>\n Where does one click to tell their\u00a0story?<\/p><\/div>\n Here is the same screen shot with a blue rectangle added to show the boundaries of the text area. If you click anywhere below this region, nothing happens.<\/p>\n If you click outside of the blue box, nothing will\u00a0happen<\/p><\/div>\n Below is another example of a note-taking design. This also does not use traditional input visuals, but provides users with disabilities more information. The title of the note goes between the two horizontal lines, and the user can click anywhere between the bottom two lines to begin typing their note.<\/p>\n Non-standard, but still with enough cues for users with disabilities<\/p><\/div><\/center><\/p>\n Can you think of some other options for these designers? How would you design a note taking or blog publishing app?<\/p>\n Labels tell the user the purpose of the field, maintain their usefulness when focus is placed inside of the field and remain even after completing the field. Placeholder text is a poor replacement for a visual label.<\/p>\n They are typically of low contrast. Of the seven examples below, only one has enough contrast to meet our needed 4.5:1 ratio.<\/p>\n Only the \u201cSearch Twitter\u201d placeholder has the minimum required contrast\u00a0level.<\/p><\/div>\n Placeholder text goes away. In the examples below, what am I supposed to enter into the text field? For the JetBlue example should I enter my username, my email address, or my TrueBlue number? For the Caviar example, should I \u201cGet Started\u201d by typing in my favorite food, a preferred restaurant, or my address? Are the price fields for min and max, over and under, or before and after?<\/p>\n Without labels, it may be difficult to know what to type in an\u00a0input.<\/p><\/div>\n <\/p>\n Here is a more accessible way of designing the Price compound field shown above. We will see the labels, min and max, even after we fill in the fields.<\/p>\n Compound fields with visible\u00a0labels<\/p><\/div><\/center><\/p>\n Q: When is a menu no longer a\u00a0menu? This question is at the core of today\u2019s biggest web accessibility problems. In order to understand this fully, consider the W3C\u2019s Authoring Practices for Design Patterns<\/a>. This is the guide for how to build an accessible version of many of today\u2019s common design patterns including menus, modals, autocompletes, trees, tabsets, and many others.<\/p>\n Each of these patterns have a specific set of expected HTML semantics, keyboard behaviors and ARIA<\/a> attribute usage. These ARIA attributes instruct screen reader users on how to interact with a component when using the keyboard. They also provide status updates while the user is interacting with a component. For instance, they instruct people interacting with a menu to use the arrow keys to move up and down the list.<\/p>\n Meet the humble autocomplete typeahead.<\/p>\n A autocomplete typeahead<\/p><\/div><\/center><\/p>\n Here is the same typeahead, but with icons next to each list item.<\/p>\n In this autocomplete, icons are used for object disambiguation.<\/p><\/div>\n These are essentially the same exact UI pattern. The user types into an input field. A box of results filtered on the entered text appears below. The user can then use the arrow keys or mouse to locate and select an item from the list.<\/p>\n The example below is an autocomplete with an identity crisis. Not only can the user filter and select an item from a list, they can choose to edit or delete each list item by clicking on the pencil or trash can icon. The addition of these two buttons is what gives this autocomplete an identity crisis.<\/p>\n An autocomplete with a hidden feature set that cannot be communicated to assistive technology through standard techniques.<\/p><\/div><\/center><\/p>\n This causes accessibility problems in part because it breaks form with the standard keyboard interaction model for an autocomplete. Assistive technology cannot always communicate the identity, operation, and state of confused components, as the W3C\u2019s WAI has not defined a specification for communicating this type of UI.<\/p>\n The same rule holds true for menus. In the examples below from Virgin America, while very similar visually, only the drop down on the right is an actual \u201cmenu\u201d. The one on the left is a non-modal dialog.<\/p>\n The \u201cFrom\u201d dropdown is a menu. The \u201cGuests\u201d dropdown is a non-modal dialog as defined by the W3C\u2019s\u00a0WAI.<\/p><\/div>\n <\/p>\n A menu is a widget that offers the user a list of choices. As soon as we offer multiple choices per row, as the example on the left does, we no longer have a menu. This changes the keyboard interaction model from using arrow keys, to using the tab key. It changes how keyboard focus is handled and where it goes once the dropdown is closed.<\/p>\n Unlike in the example above with autocompletes, non-modal dialogs can fortunately be made accessible. Know the difference between them and the effect it has on the user experience. Understand how minor design changes could lead to changes in a user\u2019s interaction model. This will enable you to choose the appropriate pattern for your product.<\/p>\n This principle mainly serves people with motor-related disabilities. This includes keyboard-only users who have vision, and those who use speech recognition tools like Dragon NaturallySpeaking<\/a> to interact with web pages. Keyboard users and assistive technologies like Dragon rely on actionable items being visible on the screen. If a link or button cannot be seen by Dragon, it cannot be verbally \u201cclicked\u201d. If a keyboard-only user cannot see that a button exists on a page, how can we expect them to navigate to the empty space where it will ultimately appear?<\/p>\n Below is a screen shot from Gmail with Dragon Naturally Speaking showing an overlay with hyperlinks identified by number. The user can now speak a number out loud and activate a link. What happens if a link isn\u2019t visible until a region is hovered upon? We would have numbers showing next to empty spaces.<\/p>\n![\"\"](\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/11\/Image-2.png\")
Don\u2019t use color as the only visual means of conveying information<\/h2>\n
![\"\"](\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/11\/image-3.png\")
![\"\"](\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/11\/Image4-.png\")
Ensure sufficient contrast between text and its background<\/h2>\n
![\"\"](\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/11\/1rlBm6vidbbXu26efnYZWqA.png\")
<\/a>![\"\"](\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/11\/1rOaDGp5GtLG8Fn79pa34Gg.png\")
<\/a>![\"\"](\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/11\/image5.png\")
<\/a><\/p>\n
![\"\"](\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/11\/image6.png\")
<\/a>![\"\"](\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/11\/1o6kxU1Gm4SaOPpTmhPOg0A.png\")
<\/a>Provide visual focus indication for keyboard\u00a0focus.<\/h2>\n
![\"\"](\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/11\/1ADqQnz8LvA2ACpAsYrQH9w.png\")
<\/a>![\"\"](\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/11\/1j7NH2HQiSo8Ly7KOgGx-nA.png\" "\\"\\"")
<\/a><\/p>\n![\"\"](\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/11\/0_BNrgAFEkXG8HxbA1.png\")
<\/a><\/center><\/p>\n![\"\"](\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/11\/image8.png\")
<\/a><\/center><\/p>\n![\"\"](\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/11\/image9.png\")
<\/a>Be careful with\u00a0forms.<\/h2>\n
Forms without\u00a0Borders<\/h3>\n
![\"\"](\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/11\/image10.png\")
<\/a>![\"\"](\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/11\/image-11.png\")
<\/a>![\"\"](\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/11\/1T8z2EeDpJz49Xg9SuYlhXw.png\")
<\/a>![\"\"](\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/11\/1BTZJzKyh_QDGMQoRReWlzw.png\")
<\/a>![\"\"](\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/11\/1pElu7shS8G92yqrOTE4Waw.png\")
<\/a>Forms without\u00a0Labels<\/h3>\n
![\"\"](\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/11\/1kHRRhIPx8yb-TanFha3Ggg.png\")
<\/a>![\"\"](\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/11\/1zTDCz2B_Se005nG2pYO47w.png\")
<\/a>![\"\"](\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/11\/1AhJDVHKxgvgdjoKqb6ta4g.png\")
<\/a>Avoid component identity\u00a0crises.<\/h2>\n
\nA: When it\u2019s a non-modal dialog.<\/em><\/p>\n![\"\"](\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/11\/image12.png\")
<\/a>![\"\"](\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/11\/image13.png\")
<\/a>![\"\"](\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/11\/image14.png\")
<\/a>![\"\"](\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/11\/167YpMl-31t9q3WYBnVSpZQ.png\")
<\/a>Don\u2019t make people hover to find\u00a0things<\/h2>\n
![\"\"](\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/11\/image15.jpeg\")
<\/a>