When any user interface component receives focus, it does not initiate a change of context.
Examples of changing context when a component receives focus include, but are not limited to:
Forms submitted automatically when a component receives focus;
New windows launched when a component receives focus;
Focus is changed to another component when that component receives focus;
Testing & Remediation How to test:
Open your website and begin tabbing through the elements (ie keyboard navigation using the Tab key). Move focus through all of the elements on the page. Be sure to check all functionalities, including form fields, modal dialog boxes, etc. Ensure that there are no elements that trigger a change of context when they receive focus.
How to remediate:
When needing functionality where a focused element triggers a change of context, use "activate" rather than "focus" as the trigger for the changes.
Questions and Answers
Nearly all elements can be given focus, and have their focus order changed using the 'tabindex' attribute. Elements on a page will be given focus in the order of their tab index. W3 Schools has a great explanation of tabindex here
To navigate a website with the keyboard, you can start by hitting the tab key. You should see an indicator on the element that has focus. If it is a link, you can hit enter to go to it. While going forward through the tab keys is done with tab, going backwards can be done by hitting the shift key in addition to the tab key.
When it comes to various input elements (radio buttons, select boxes), the arrow keys can be used on them once the element has focus.
Carousels and sliders pose accessibility issues for keyboard and screen reader users that can be challenging to adequately address by adjusting your markup. Keep in mind that all content and controls abled users can access must be made robust enough to be accessed by all users, this means (among other things) that slider controls need to have tab-navigation consideration, timing needs to be adequate enough so that all users can read slides, and UI controls need to have enough color contrast such that they can be perceived by everyone.
Any carousel or slider can contain non-accessible content, so keep these things in mind when building content:
- Do the headers flow from h1 down without skipping a level?
- Do embedded images have adequate alt tags?
- Do the links open have descriptive titles or link text?
Below are sliders that are accessible:
- Snazzy Slider by Josh Cummings - https://www.joshcummingsdesign.com/snazzy-slider
This question depends on a number of factors including size of site, desired level of conformance, your developer's understanding of accessibility techniques, etc. Accessible Web is here to help. Reach out and we can discuss your site specifically.