Is it possible for screen readers to audibly announce lists with the type attribute set to "a" within the <ol> element

Currently revamping a large amount of content in the thousands for a Drupal website. The content includes ordered lists with alphabetical type.
Example:
a. foo
b. bar
c. char

The screen reader is not able to read the "a." or any of the alpha bullet points. Right now, I am using two span tags - one to be hidden from the screen and the other hidden from the screen reader.

<li>
    <span class="accessibility-hide-element">B, list item text</span>
    <span aria-hidden="true">list item text</span></li>
</li>

Is there a simpler solution? Doing it this way will consume a lot of time. Thanks in advance.

htmlcssdrupalaccessibility

Answer №1

It appears that your method of styling lists is outdated, which could be why your screen reader isn't recognizing it.

The proper, up-to-date way to style lists is using CSS:

<ol style="list-style-type: lower-alpha">

For your situation, suitable values include lower-alpha and lower-latin, refer to list-style-type

I conducted tests on Windows 10 with NVDA and Firefox, and the text was read as "a. foo". Additionally, the Accessibility Tab in Firefox Developer Tools confirmed this displayed text.

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

Encountering a 404 error in the Node Js/Express contact us form interaction

I'm attempting to create a form that enables individuals to send me an email. However, I encountered a 404 error as displayed below. Even though the form itself is rendering, confirming that my index.js is functioning correctly. Do I need additional c ...

htmlnode.jsformsexpress

Center align with padding on all sides

I'm trying to align the elements so that they all line up perfectly without any extra spacing. I've used justify-content: center to center the elements, but they end up looking like this. enter image description here However, I want everything ...

htmlcss

Troubleshooting problem with Bootstrap column and grid dimensions

I have a Bootstrap page displaying a title along with 2 forms in a single row positioned above a table. The 2nd form, located at the top left above the table, is currently occupying the full width of the parent column (col-md-8) when it only needs to occup ...

htmlcsstwitter-bootstrap

Error encountered - registration form

<?php $mysqli = mysqli_connect('localhost', 'test', 'test123', 'test'); if ($mysqli->connect_errno) { echo "<p>An error occurred while trying to connect: {$mysqli->connect_error}</p>"; ...

phphtmlmysqlserver

Trouble with Bootstrap v4 toggle drop-down menu functionality detected in local environment, yet functions correctly when live on the

Today, I've encountered an issue with my Bootstrap v4 collapsible hamburger menu on my local XAMPP server. Interestingly, the menu works perfectly fine on my public website when the display is 768px wide in Chrome and Firefox. I have searched through ...

javascriptjqueryhtmlcssbootstrap-4

Align the content to the center

Currently, I am in the process of creating a profile card view and utilizing Bootstrap to achieve this. I have set up two div elements - one with the class col-lg-3 and the other with col-lg-9. However, I am facing an issue where the content within col-lg ...

htmlcssmarginpadding

Is there a method to ensure that flex children adhere to a minimum height, while still permitting them to exceed the height of their container?

This code snippet sets up a CSS layout where child elements within a container have dynamic heights. The issue arises when the contents of #child-2 spill over into #child-3, even though min-height: 100% is set on #child-2. It seems that #child-2 won't ...

htmlcssflexbox

Navigating Joomla with a Menu specifically designed for articles within a specific category

After recently starting to navigate Joomla, I've hit a roadblock with a seemingly simple task. I have multiple articles, each belonging to a specific category. My goal is to create a menu that displays all articles within a chosen category. When sele ...

phpcssjoomlajoomla3.0joomla-extensions

What is the most effective way to show an error message within the login form itself?

I'm currently dealing with a dilemma involving my login.php and login_process.php files. The login form is in the former, while the validation process occurs in the latter. I'm struggling to figure out how to display error messages on the login f ...

javascriptphphtmlsession

Align the input labels to the right

In the demonstration below, an example is provided for aligning labels to the right of an input field. Is there a way to ensure that the input field takes up 100% of the width? Additionally, can an input be replaced with a textarea or another div element w ...

htmlcss

Present user-generated incorrect HTML content without disrupting the webpage layout

My website offers users the ability to input and save text content, which can then be displayed as desired. Users have the freedom to utilize HTML tags for formatting purposes such as design, fonts, divs, tables, and more... However, when it comes to disp ...

phphtml

What is the best way to ensure a bootstrap sidebar collapses without altering the content width?

How can I create a bootstrap sidebar collapse without affecting the content width? To view my code, please visit Codepen $(document).ready(function() { $('#sidebarCollapse').on('click', function() { $('#sidebar').tog ...

csstwitter-bootstrapbootstrap-4

Using jQuery to show text upon hover using a `for` loop

I'm currently working on a webpage and incorporating a feature where hovering over specific div elements triggers the display of certain text in another div. There are 5 elements that I want to make hoverable and show text upon interaction. After imp ...

javascripthtmljquerycss

Can the CSS of an iframe be modified if the iframe is located on a different domain?

Is it feasible to modify the CSS of an iframe if the iframe is not located on the same domain? If so, what are some ways to apply and alter CSS for this situation? Any assistance would be greatly appreciated. <iframe id="frame1" width="100%" height="35 ...

javascriptjqueryhtmlcssiframe

The background-size property behaves differently on Safari compared to Chrome - it breaks in Safari but

I am currently working on an app that is temporarily hosted here. After testing in Chrome, everything seems to be functioning correctly. However, when I switch to Safari, the background image fails to display. The relevant code looks fairly simple: &l ...

htmlcssgoogle-chromesafaribackground-image

Error in Express application due to uncaught SyntaxError

I am attempting to live stream data using websockets to Chartjs, however I keep encountering the following error. main.js:1 Uncaught SyntaxError: Unexpected token <https://i.sstatic.net/9OCI1.png https://i.sstatic.net/bmGeW.gif What could be causi ...

javascripthtmlnode.jsexpresschart.js

Building a Seamless Design in React

// components/Layout/Layout.tsx const Layout = () => { return ( <div> </div> ) } export default Layout // components/Layout/Header/Header.tsx const Header = () => { return ( <header> <h2>This is Head ...

htmlreactjslayoutheader

What is the best way to vertically center text within a div?

After successfully centering my text horizontally in my div using text-align: center, I'm now faced with the challenge of centering it vertically. Despite my attempts with vertical-align: middle;, I haven't been able to achieve the desired result ...

htmlcssvertical-alignmenttext-alignment

The 'background-size:cover' property does not function properly on iPad devices

Greetings! I have been working on developing a parallax website, and everything seems to be running smoothly across all browsers except for iPad. It appears that the background-size: cover property is not functioning properly on this device. Below is the ...

htmlioscssipad

When using AngularJS ng-controller, the HTML href does not effectively call any div elements

As I was working with HTML and using AngularJS ng-controller, I encountered an error in the URL where a slash appeared. For example, localhost:8080/test/#/m1. Can someone please provide guidance on how to resolve this issue? <style> a{ } ...

htmlcssangularjs