CSS&HTML: Accessibility

ARIA, aria-label, tabindex, role html property. Widget roles: https://www.w3.org/TR/wai-aria-1.0/roles#widget_roles

15 flashcards · Programming Languages · by lakesare

  1. What does ARIA stand for?

    Accessible Rich Internet Applications ARIA stands for ‘Accessible Rich Internet Applications’ and can help make your website more accessible to people with disabilities such as hearing or visual impairment.

  2. What is role attribute for?

    When an element doesn't use a semantic tag - it doesn't have a default role, and adding role speaks to screen readers about what it is. Here are all the roles: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques#Landmark_roles

  3. What elements can be brought into focus: either with a user tabbing around the page or via the focus() method in Javascript?

    There are six HTML elements which, by default, are focusable: <a> elements with an href attribute <button> elements <input> elements that are not type="hidden" <select> elements <textarea> elements

  4. What is role='presentation' for?

    The presentation role is used to remove semantic meaning from an element and any of its related child elements. If used with an image, equivalent to aria-hidden="true". If you imagine someone using a screen reader, think of the elements that they would not want read out. One example is an element that might contain a visual decoration, or is an empty element simply serving an image or background color.

  5. What's the difference between a span used as a button: And a span used as a button, but with role="button"?

    Former will just read the text if focused via the screenreader. Latter will be able to get focused and activated on tab. Links: https://www.youtube.com/watch?v=qdB8SRhqvFc

  6. There are two types of aria- attributes: states and properties. Name: one state aria-attribute, and one property aria-attribute.

    An example of an ARIA attribute that is a state is aria-checked. This is used to show the state of elements that are emulating interactive elements, such as checkboxes and radio buttons, but are not the native elements themselves (e.g. custom UI elements built with div and span tags). An example of an ARIA attribute that is a property is aria-label. This is used when a label for a form element is not visible on the page (perhaps because it makes no sense to make it visible, or if the design dic…

  7. When can negative tabindex be useful?

    For modals. We don't want tab to focus on a modal But we want to focus inside of the container As we have covered, a negative tabindex value will remove the element from tab focus, but can add elements to programmatic focus. A great example of when this is useful is modals. Modal containers are typically unfocusable elements like <div> or <section>. When a modal window is open, we may want to move focus to it so that screen readers will read out its content. But, we don’t want the modal contain…

  8. What does tabindex=0 html attribute do?

    Will place the element in the default focus order, determined by its position in the source HTML.

  9. When can tabindex=0 be useful?

    It can be applied to elements that are not typically focusable, and will add them to the natural focus order as if they were. A tabindex equals to exactly zero will place the element in the default focus order, determined by its position in the source HTML.

  10. What does tabindex=-1 html attribute do?

    Negative tabindex value will remove the element from tab focus, but can add elements to programmatic focus. A negative tabindex, for example -1, will omit the element from the focus order entirely. A user navigating the page using a keyboard will not be able to access the element at all.

  11. What can usually be used instead of aria-label or aria-labelledby? for images for buttons for form controls

    for images - alt attribute for buttons - their text content for form controls - <label> tag

  12. If we have a button element, and we add the onClick handler - browser will do the black magic for us, and understand spacebar as a click too!

    Links: https://www.youtube.com/watch?v=CZGqnp06DnI&list=PLNYkxOF6rcICWx0C9LVWWVqvHlYJyqw7g&index=26

  13. What will the screen-reader read?

    No, Bing! Link.

  14. How to make outline only appear when user navigates via the keyboard?

    Apply styling to the :focus-visible pseudoselector. It's not widely supported right now, so we should use a polyfill https://github.com/WICG/focus-visible.

  15. Name 4 ways to handle modals.