Free Python Course ➞ Mini-course for beginners and experienced coders. 4 cool projects in the portfolio, live communication with the speaker. Click and see what you can learn in this course.
Learn More
Accessibility Driven Team Lead at SpurIT and Google Developer Expert in web technologies. I organize events at @a11yminsk, as well as @MinskCSS and @MinskJS. My work focuses on improving the accessibility of web applications and promoting modern web technologies.
Links play a vital role on the internet, providing navigation and access to information. They serve as a link between pages, allowing users to easily navigate websites and find the resources they need. There are different types of links: internal links, which lead to other pages on the same website, and external links, which direct to resources on other websites. Link optimization is important for SEO, as high-quality and relevant links can improve a website's ranking in search engines. Proper use of anchor text, choosing appropriate URLs, and creating a link structure will help improve the user experience and increase website visibility. It is also important to consider mobile responsiveness and page load speed, as these factors affect the perception of links and the overall performance of a website.
Recently, I noticed that the screen reader doesn't recognize tables in the Chrome browser. Even though the tables are formatted using standard HTML tags such as table, tbody, and tr, and contain td cells without additional styling or role changes, they are not parsed correctly. The standard table structure remains: table > tbody > (tr > td*3)*3. This creates problems for users who rely on assistive technologies and highlights the importance of proper semantic markup and accessibility support in web development.
What is the essence of the problem?
Ensuring tables are accessible requires adhering to two key principles. First, use semantic markup correctly so screen readers can interpret the data structure correctly. This includes using the `
| ` elements to denote headings and content. Second, it is important to provide alternative text descriptions for complex tables so that users with visual impairments can understand the information they contain. By following these guidelines, you will significantly improve the accessibility of your tables for all users. |
|---|
To improve the accessibility of a table and its identification, it is recommended to give it a name. This can be done using the aria-label attribute, which is intended for screen readers. This approach will provide a more convenient perception of data for users with disabilities.
Install a header cell so that screen reader users can easily identify which element they are on. This improves the accessibility of your content and ensures a more intuitive interaction with the interface. Proper use of headings helps not only users with visual impairments, but also anyone who uses assistive technologies to navigate your website.
One day, I came across a certain data set. This data block turned out to be quite interesting and required careful analysis. I began to explore its structure and content to understand how exactly it could be used. As I worked with the data, I discovered many patterns and relationships that opened up new possibilities for its application. Examining this data block was an important step in my research process, providing me with valuable information and insights that I was able to use in subsequent projects.
I assumed the structure was created using div elements and expected the screen reader to read the cells in the order Open, Close, High, Low. In this case, the div with Open and Close would be read first, followed by the div with High and Low. However, the screen reader interpreted the table row by row, reading the values in the order Open, High, Close, Low. This led to confusion in the perception of the information.
I examined the code and discovered that the table was marked up using the table tag, which explains why it was not being read in the expected order. However, another question arose: why didn't the screen reader indicate that it was reading a table? When inspecting the Accessibility Tree, I noticed that the element had role=»layouttable» set. This can lead to accessibility issues, as screen readers may misinterpret the content structure. It is important to configure roles and attributes correctly to ensure that information is properly perceived by users with disabilities.
The role=»layouttable» parameter is not mentioned in the official specification. There are currently no updates for Chrome regarding this attribute. In Firefox, all tables are marked with the standard role=»table» attribute, indicating the lack of similar capabilities for layouttable. It is important to monitor updates in documentation and browsers to stay informed about possible changes in ARIA attribute support.
How to make a screen reader read a table
As a result of our own investigation and discussion in the Accessibility Community chat, it was It has been established that the absence of tags in a table causes the browser to perceive it as a layout table. In this case, the browser automatically adds the role=»layouttable» attribute, which makes the table inaccessible to screen readers. This means that users with disabilities will not be able to correctly perceive the information contained in the table. To ensure content accessibility, it is important to use the correct HTML tags for tables, which will preserve their functionality and improve the user experience for all users.
This article is based on Glafira's discussion on Twitter. It examines key points that attract the audience's attention. The author shares her thoughts and observations, emphasizing the importance of the topic and current issues faced by users. Various aspects are discussed, ranging from personal experience to social trends. This approach allows for a deeper understanding of the situation and the formation of one's own opinion. Glafira's thread provides an excellent basis for analyzing and discussing contemporary challenges and opportunities, making it a valuable resource.
If a table lacks the attribute but has a specified border width (e.g., border=»1″), the table is treated as a table element and is correctly read by screen readers. This is important for content accessibility, as properly formatted tables allow users with disabilities to access the information they need. Proper use of attributes in HTML tables not only improves the perception of data, but also contributes to better indexing of web pages in search engines.
Please note that if the cellpadding or border attributes are not specified in the HTML document structure, but the border property is set in CSS, the table will remain in the layout table format. This may affect the display and styling of the table, since CSS properties do not change the semantic structure of the document. It is important to keep in mind that for correct display of tables, the appropriate attributes and styles should be applied to ensure the optimal perception of the content for both users and search engines.
If you want the screen reader to correctly display your tables in Google Chrome, be sure to use attributes for proper semantic formatting. This will help improve the accessibility of your content for users with disabilities. Make sure that tables have appropriate titles and descriptions so that the screen reader can correctly interpret the information.
It is important to specify the value of the scope attribute to improve the accessibility of tables. If the title refers to a column, the value should be «col», and if to a row, the value should be «row». This will help users with disabilities better navigate the data structure and improve the page's SEO ranking by improving the semantics of the content.
The webaim.org website provides a description of how screen readers work with tables. Screen readers, as assistive technologies for users with visual impairments, provide access to information presented in tables. Effective screen reader performance depends on the proper structuring of tables in HTML.
It's important to use semantic elements such as <table>, <tr>, <th>, and <td> to ensure the correct perception of data. Table headings should be clearly marked, which allows screen readers to correctly interpret and read the content. Additionally, you should avoid information redundancy and strive to maintain a clear and logical presentation of data. This will allow users to more effectively engage with the content and improve the overall accessibility of information on your site.
Optimizing tables for screen readers not only improves the user experience but also contributes to higher SEO rankings, since accessible content is valued by search engines.
Screen readers analyze the markup and structure of a table to determine whether it is a data table or a layout table. Therefore, it is critical that data table markup elements such as <table>, <thead>, <tbody>, and <tr> are never used in tables for layout purposes. This ensures that information is correctly perceived by users using assistive technologies and improves content accessibility for everyone.
According to Twitter user @zavsievich, if you don't specify a role for a table with the role=»table» attribute, Chrome still notifies the screen reader of the table's presence. As a result, the table's child elements will be correctly processed, allowing the screen reader to navigate the table structure correctly. This highlights the importance of correctly using HTML semantics to ensure content accessibility.
You'll find a wealth of interesting and useful content on our blog. We regularly publish articles to help you understand a variety of topics. Explore our content to expand your knowledge and skills. We strive to provide relevant and high-quality information that will be useful to every reader. Don't miss the opportunity to deepen your knowledge by reading our materials.
- How to properly layout HTML tables
- "Blind people also order taxis": how Android applications are made for those who don't see
- How animal robots: seals, cats, and dogs - help in the treatment of dementia and autism
- How to adapt a website to different resolutions
