Let\u2019s face it: building an AA or AAA-accessible product can be quite daunting. Luckily, having an accessible product isn\u2019t all-or-nothing. Even seemingly small improvements can have nice quality of life benefits for many people.<\/p>\n\n\n\n
In that spirit, here are five accessibility quick wins you can implement today.<\/p>\n\n\n\n\n\n\n
It\u2019s probably safe to assume that a different style is the most common way to communicate the current page of a site or app. However, even if those styles are clear and with great contrast ratios, they\u2019re still only a visual cue.<\/p>\n\n\n\n
So what happens if a person with limited vision cannot see that separation? How will they know what page they\u2019re on?<\/p>\n\n\n\n
Creating an accessible product is to ensure its markup communicates as clearly as its design.<\/p>\n\n\n\n
Adding Use CSS attribute selectors to style the While some people can visit a website and determine the language or locale of its content, not all people have that luxury. Again, markup must communicate the same information as the visual design \u2014 even if that information may seem implied.<\/p>\n\n\n\n Add the For apps which support multiple languages, the Whether drawing attention to actions or updates, or creating a sense of life and charm, adding motion to an app can really elevate its experience. However, some people may find that experience disorienting.<\/p>\n\n\n\n Windows and MacOS both offer a setting at the OS level for people to greatly reduce the amount of motion when using their systems. The Well, with CSS media queries, they can.<\/p>\n\n\n\n The aria-current=\"page\"<\/code> to the active navigation element is one way to ensure markup and design communicate the same information with or without assistive technologies.<\/p>\n\n\n\n<a aria-current=\"page\" href=\"\/\">Home<\/a><\/code><\/pre>\n\n\n? Bonus<\/h4>\n\n\n
aria-current=\"page\"<\/code> element to keep the visual and markup cues linked.<\/p>\n\n\n\n[aria-current=\"page\"] { \n \/* Active element styles *\/\n}<\/code><\/pre>\n\n\nQuick Win 2: Document Language<\/h3>\n\n\n
lang<\/code> attribute to the <html><\/code> tag to communicate not only the document\u2019s language, but its locale. This will help assistive technologies like screen readers understand and communicate the content. Even if the app only supports one language, this can be a nice quality of life improvement for many people.<\/p>\n\n\n\n<html lang=\"en-US\"><\/code><\/pre>\n\n\n\n<html><\/code> element is likely not the only one to need its lang<\/code> value defined. Use the lang<\/code> attribute on specific elements whose language differs from the rest of the document, like links within a language toggle menu. In this case, pair the use of lang<\/code> with the hreflang<\/code> attribute<\/a> to not only communicate the language of the link itself, but also of its destination.<\/p>\n\n\n\n<a lang=\"fi\" hreflang=\"fi\" href=\"\/\" title=\"Suomeksi\">\n <bdi>Suomeksi<\/bdi>\n<\/a><\/code><\/pre>\n\n\nQuick Win 3: Use
prefers-reduced-motion<\/code><\/h3>\n\n\nprefers-reduced-motion<\/code><\/a><\/code> setting can greatly improve the experience on a computer, but it does not extends beyond the UI of the operating system. So wouldn\u2019t it be nice if our apps could respect that same system setting and provide a more static experience for those who prefer it?<\/p>\n\n\n\nprefers-reduced-motion<\/code> media query can be used to greatly reduce or remove all motion from an app whenever the system setting is enabled.<\/p>\n\n\n\n