![]() ![]() If you want your website to have a consistent look and feel across multiple browsers, it would be worth investing the time to define focus styles. However, focus indicators look different across browsers. If you don’t define focus anywhere at all, you will at least be able to rely on the native browser indicators. The most common browsers (Firefox, Chrome, Internet Explorer and Safari) all have default focus indicators for most (if not all) elements built into the browser. You can navigate most of the web with the keyboard using the Tab, arrow, and Enter/Return keys. You can hit Enter or Return to activate the link. Every time you hit Tab, the outline moves to the next element in the focus order (which is usually the order in which each element appears in the code). You should see yellow outlines around some of the items in the header, like the logo and the social media icons. Want to see how it works? Reload this page, and then hit the Tab key a few times. Showing an outline around an element helps everyone who is a) using a keyboard to navigate and b) can also see the screen. Things triggered by hover, like tooltipsĪgain, if you can interact with an element with a mouse, you should be able to use the keyboard to interact with it, too.Form Fields / Controls (text fields, select boxes, radio buttons, etc.).Here are a few of the many things that should be focusable on any website: All of them need to have a focus indicator of some sort to make them look different from the surrounding elements. What’s Focusable on a Web Page?Ī number of different elements on a web page can (and should!) be focusable. WCAG is the most commonly agreed upon accessibility standard, and an increasing number of countries have laws which require that public-facing websites meet the WCAG standard. It should also be noted that “focus visible” is a requirement for a site to be considered accessible under the Web Content Accessibility Guidelines (WCAG). I personally like to be able to tab through a web form while I’m filling it out rather than clicking on each field. Or an administrator who does a lot of data entry. A power user could be someone like a web developer, who spends all day writing code. They may use something like a mouth stick to operate a standard keyboard, or a switch, which simulates a keyboard. For example, people who don’t have enough fine motor control in their hands to use a mouse. Screen readers are almost entirely controlled using the keyboard. Screen reader users are often blind, but not always! People with low vision or cognitive disabilities (like dyslexia) also use screen readers to help them understand content on the web. Who doesn’t navigate websites with a mouse, you ask? As it turns out, a lot of people use the keyboard as their primary means of using the web, including: And if you’re using a keyboard, anything you interact with should have visible focus. A rule of thumb: if you can interact with an element with the mouse, you should also be able to use the keyboard to perform the same actions. Most all focusable elements are interactive – form fields, links, buttons, tooltips, etc. Only one element on a page can be focused at a time, and it should be obvious. They’re visual markers which show (indicate) which element on a web page is focused. These outlines are called focus indicators. Here’s another hint: if you decide to get rid of the blue outlines, make sure to replace them with something else! There’s a whole subset of users who rely on these outlines to tell them where they are on the page. Here’s a hint: by default, browsers use the :focus css pseudo class to give outlines to form fields and other elements when the elements are selected. Have you ever noticed the blue outlines that sometimes show up around buttons or form fields when you’re filling out a form? What about when you click on a menu item? Have you ever tried to make those outlines disappear? Give Your Site Some Focus! Tips for Designing Useful and Usable Focus Indicators Get a handle on accessible design! Follow these tips for designing effective Focus Indicators, to ensure every element of your site’s design is accessible. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |