Choosing the correct element for the current context is a simple way to create a good foundation for your experiences.īrowsers support tabbing through link, form, button elements. This is the browser feature which powers screen readers. The accessibility tree is built off of assumptions about the elements and their structure. HTML elements communicate to the browser what kind of content they contain and how the browser should render or treat that content. Use the correct HTML element for your content Be clear in writing avoid jargon and idioms Use section headings to organize content. Components with the same functionality should work and be identified consistently. In those cases, consider creating an additional screen reader-friendly experience, or at the very least, describe the experience to users.īe as consistent and clear as possible in layout and copyīe consistent across functions, placement, and labeling. It can be difficult to make certain components (like an SVG map) into accessible experiences. If an experience cannot be made accessible, create another route for users to get that information Source: WebAim: The Basics of Good Alt Text (Ex: Whiteboard drawing of the quote “This is a quote”) If you have to use an image of text, be sure to describe the design if relevant, as well as all of the words in the image. When a talking browser lands on an image, it looks for alt text that it can read aloud if it finds none, it will often just say “image,” leaving the user in the dark as to what the image is and how it matters to the story.ĭescribe all of the elements that explain what’s happening in the image, rather than just setting the alt text to be something like, “photograph" These specialized browsers convert text to speech so that a user can hear the words on a site. Users with low vision often make use of a talking browser to “read” the web. Never rely solely on color to indicate errors. Put error messages in text that explain the error and how to fix the error. Users should always have clear instructions on what they should be inputting. Labels should never completely go away when the focus is inside of an input. Help users understand inputs, and help them avoid and correct mistakes When people use the keyboard to navigate, your product should include highly visible focus states. Your designs should never actively hide focus states. Instead, use a combination of positioning, color, and labeling to identify content.ĭesign focus states to help users navigate and understand where they are You should not rely solely on images, shape, size, visual location, orientation, or sound to indicate important instructions for operating or understanding content (ex. Pairing different values creates contrast.ĭon't rely on sensory characteristics as the sole indicator for understanding and operating content When you strip out the color information from two hues and compare the values, there may not be much difference. Pair values of colors together (not only hues) to increase contrast There should be another indicator (such as icons to accompany color coding, or an underline on linked text) so that people who cannot easily distinguish colors will be able to understand and use your content. Be especially careful of text over images.ĭon't indicate important information using color alone If your font is at least 24 px or 19 px bold, the minimum drops to 3 to 1 (though, worth noting that this is a little fuzzy because numbered sizes aren’t always reflective of the visual size type). Make sure there is enough contrast between text and its background colorĪccording to the WCAG, the contrast ratio between text and the text’s background should be at least 4.5 to 1.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |