Is there any difference in accessibility between hovering over "<li>" and "<a>" elements?

As I worked on enhancing the accessibility of a website, I couldn't help but notice that in the hover state, it's the <li> element that is triggered, not the <a>.

Is this something worth worrying about?

I'm inclined to believe that it would be more effective if the hover state was applied to the <a> element since that is the target. However, strangely enough, W3 doesn't provide much guidance on this matter.

On the other hand, the W3 — Fly-out Menus tutorial suggests that it should actually be the <ul> element that contains the hover state, which does seem logical from a design standpoint (considering padding and other factors).

htmlcsshoveraccessibilityhtml-lists

Answer №1

Ensure that the list's hover state serves as a visual cue rather than actual content to avoid any issues.

It's crucial to have a properly structured hyperlink, ensuring it is keyboard operable for accessibility purposes. The link should be able to gain/lose focus with the TAB key and support activation through pressing ENTER. Additionally, make sure the hyperlink has a meaningful accessible name, usually aligned with the link text or implemented as an image alt attribute. These elements are more vital for accessibility compared to the hover effect.

If the focus, clicking, or keyboard input actions apply to the list or list items, this goes against the ARIA and HTML-AAM specifications. Lists and list items should not be operable in this manner. It's acceptable to add a hover effect to the wrapping element of the hyperlink if necessary, but clicking/activation behaviors should be restricted to the hyperlink itself.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Halting manual scrolling and directing the scroll to a specific position

How can I implement a feature on my website that automatically scrolls to a specific point when the user tries to scroll (mousewheel, touch event, or cursor keys) instead? I'm not sure what this functionality is called, but you can see it in action o ...

javascriptjqueryhtml

Navigating through Polymer's cascading style sheets

Encountering an issue while attempting to access a Polymer defined CSS variable in a Jekyll SCSS/CSS file. The integration of Polymer Elements' "Paper Styles" for colors is done by including <link rel="import" href="/bower_components/paper-styles/ ...

csssasspolymer

The layout consists of two divs: one with a fixed height, while the other dynamically adjusts to occupy the

I am facing an issue with two div elements within a parent container. One div has a fixed height, and the other should fill up the remaining space in the parent container. The height of the parent container is dynamic and can vary between 100px, 200px, or ...

htmlcss

Retrieve the video URL from Facebook within a WebView

Is there a way to download videos from Facebook using the video URL obtained from a Webview? I have attempted different methods to achieve this without success. 1.Link 1 2.Link 2 I tried extracting the video tag from the HTML in the Webview, however, cl ...

androidhtmlfacebookvideowebview

Spacing issue with Angular Material causing layout problems

I've been attempting to implement 'space between center' in a row, but it doesn't seem to be working as intended: <div layout="row" layout-sm="column" layout-align="space-between center" hide-xs> <div layout="colum ...

htmlangularjsangular-materialfrontend

CSS fluid image gallery

I've been facing some challenges with creating a responsive image gallery. Despite using CSS and Bootstrap, I haven't had success with implementing it using the img tag or as a background. My goal is to achieve something similar to this: An ima ...

htmlcssimagebootstrap-4

Multiple callbacks triggered by jQuery CSS transitions

I am experiencing an issue with my menu animation. I am curious as to why the slideDown transition is occurring twice. You can view the JSFiddle here. <ul class=top-menu"> <li>Item 1</li> <li>Item 2</li> <ul cl ...

jqueryhtmlcss

CSS: Create a form with two input fields where the left field is adjustable in width and the right field fills up

------------- -------------------------------------------------- | some unique text | | some more original content, varying length | ------------- -------------------------------------------------- |<---------------------- 100% width ------------------ ...

css

Ensuring optimal display with adaptable video dimensions

I am attempting to adjust the size of an embedded Vimeo video on a web page. Currently, the video is responsive, and I would like to maintain its responsiveness. However, it appears too large on the desktop version of the website (mobile size looks good). ...

htmlcssvideohtml5-video

What is the most effective way to showcase the value of a field nested within an object?

I am struggling to frame my question correctly and finding the right information on Google. Therefore, I will provide a simple example instead. If you can assist me by answering my question or guiding me in the right direction, I would greatly appreciate i ...

c#html.net

The issue with jqBootstrapValidation is that it fails to display customized data-validation-required-message

I'm attempting to implement jqBootstrapValidation, but I keep seeing the default message instead of my custom one. Could it be that I forgot to include a <div> here? <div class="control-group"> <div class="controls"> <div c ...

javascriptjqueryhtmltwitter-bootstraptwitter-bootstrap-3

How can divs be styled to mimic the behavior of tables in IE6 using just CSS and HTML?

Can div elements be styled to resemble tables in IE 6 using just CSS and HTML? Unfortunately, the display properties like table, table-row, or table-cell do not work in IE 6 If it is feasible, what strategies can be employed? ...

htmlcssinternet-explorer

.click event listener and .toggle method malfunctioning

Resolved I finally figured out the issue - turns out I was using the wrong jQuery library for these functions. After a quick search on Google's hosted libraries page, I found the correct one (jquery 1.11.3) and now everything is working perfectly. Tha ...

jqueryhtml

Adjusting the position of a background image with Bootstrap

problem I am struggling with the layout of this design. My goal is to center an image of an app within these boxes, ensuring that it overlaps both the top and bottom of the background for sections containing text. I have experimented with various techniqu ...

htmlcssbootstrap-4

Creating a div anchor tag within a component in React

Forgive me if this question has already made its rounds on the internet, but I can't seem to get anything to work in my favor. I was under the assumption that all you had to do was append the # + div id at the end of a URL to navigate to a specific d ...

javascripthtmlreactjs

Choose all stylus/css imports except for those with a specific ending

How can a rule be correctly written in a .styl file to import all files from selected folders except those that contain the -ie suffix (e.g. bar-ie.style)? What is the best way to achieve this? The code below is not functioning as expected: import([&apos ...

cssregeximportstylus

Having trouble aligning modal to the left in Bootstrap 4 and MVC 5

I am currently working on a project where I am using a modal window to display an iframe. The webpage within the iframe is quite wide, so I have adjusted the width accordingly. However, the modal itself is situated in the center of the screen, causing the ...

htmlcssbootstrap-4modal-dialogbootstrap-modal

Building a table with the appendChild() method

I'm a beginner in the world of programming and I've been given a task to create a table of objects. I managed to do it using a certain method, but now I'd like to try creating it using the appendChild method. function addObject() { var ...

javascripthtmlhtml-tableappendchild

Photo Label fails to adjust size correctly when loading two sources (png and webp)

Currently, I have been working on a website that showcases a 3D book: https://i.sstatic.net/oC1nL.png The challenge I am facing is to ensure support for both png and webp images across all browsers. Initially, when I load just one image, everything works ...

htmlcssimage

Utilizing jQuery to Extract HTML Data Attributes

Is there a way to access and extract the values stored in the data attributes with jQuery? <div class="sm-tot" data-ts-speed="500" data-ts-interval="4000" data-ts-newVal="5000" > ...

jqueryhtml