role presentation html table

Email on Acid

Why Should I Set My Table Role As ‘Presentation’?

Table of content

Why are table roles important for accessibility?

This is only the beginning

9 Steps You Must Take to Create an Accessible Email
Email Accessibility Best Practices
Which Code Should I Include in Every Email?
Email Accessibility: How to Captivate and Connect with Every Subscriber [Webinar Recap]

Do More in Less Time with Email on Acid

Stop switching back and forth between platforms during pre-deployment and QA. With Sinch Email on Acid you can find and fix problems all in one place. Double check everything from content to accessibility and deliverability. Plus, with accurate Email Previews on more than 100 of the most popular clients and devices, you can confidently deliver email perfection every time.

Start for Free

Author: The Email on Acid Team

The Email on Acid content team is made up of digital marketers, content creators, and straight-up email geeks. Connect with us on LinkedIn , follow us on Facebook , and tweet at @EmailonAcid on Twitter for more sweet stuff and great convos on email marketing.

Latest Articles

sun with shades and an email envelope mouth

Summer Email Subject Lines to Make Your Strategy Sizzle

What is Email on Acid and What are the Alternatives?

Notes from the Dev: Use the Word Rendering Engine to Enhance Outlook Emails

Subscribe to our emails

Please complete this required field.
I have read and agree to the Email on Acid Terms of Service. *
I have read and agree to the Email on Acid Privacy Policy. *

Check your inbox monthly for your EOA Newsletter!

Send me the Email on Acid newsletter. I expressly agree to receive the newsletter and know that I can easily unsubscribe at any time.

Campaign Precheck
Inbox Display
Email Accessibility
Email Analytics
Email Testing
Image Validation
Enterprise Solutions
White Label Previews
White Papers
Case Studies
Customer Feedback
Help Center
Custom Demo

© Email On Acid 2022. 5500 Greenwood Plaza Blvd, Suite 220, Greenwood Village, CO 80111. View our Terms of Service , Privacy Policy , or CCPA . Drop us a line at +1 (844) 568-0111 or hit us up at [email protected] -->

Privacy Overview
Strictly Necessary Cookies

This website uses cookies so that we can provide you with the best user experience possible. Cookie information is stored in your browser and performs functions such as recognizing you when you return to our website and helping our team to understand which sections of the website you find most interesting and useful. We also use cookies to assist in marketing and advertising efforts to provide you with useful information related to our products and services.

You can adjust all of your cookie settings through your browser settings.

Strictly Necessary Cookie should be enabled at all times so that we can save your preferences for cookie settings.

If you disable this cookie, we will not be able to save your preferences. This means that every time you visit this website you will need to enable or disable cookies again.

Understanding the HTML Role ‘Presentation’ and Its Impact on Accessibility

Post author: Geoff Graham
Post category: HTML
Post last modified: December 18, 2023
Post comments: 0 Comments

In the HTML, the ‘role=”presentation” attribute conveys that it is for presentational purposes only and does not have a semantic meaning. Explore the intricacies of HTML role presentation and its associated elements in this article.

In HTML, the role=”presentation” characteristic explicitly implies that the element is purely presentational or decorative and does not bring any semantic meaning. This characteristic is, in particular, useful for elements that can be blanketed for styling or format purposes but no longer contribute to the shape or means of the file.

When an element is assigned role=”presentation”, it informs assistive technology, which includes screen readers, that the content within that element ought to be dealt with as decorative and should not be presented to users in a manner that indicates it has a selected role or which means.

HTML Role Presentation: Importance of Accessibility in Web Development

Accessibility in web development is paramount because it ensures that digital content is usable and perceivable using people with diverse abilities.

The HTML role presentation contributes appreciably to accessibility by facilitating net pages that can be navigable and understandable for everyone, including those using display readers or different assistive devices.

Builders can carry semantics by assigning appropriate roles to factors, enhancing overall consumer enjoyment, and making the internet more inclusive. In precis, the role attribute in HTML is a powerful device that aids in creating handy and well-established internet content.

Understanding the Accessibility Tree

The Accessibility Tree (or “a11y tree”) is a critical idea in internet improvement, specifically within the context of making accessible websites. It is a hierarchical illustration of the shape and homes of a web page, specially designed to be interpreted through assistive technology.

The Accessibility Tree complements the DOM (Document Object Model) by supplying extra information about the semantics and accessibility roles of the report.

In the context of HTML, the Accessibility Tree reflects the relationships and roles of HTML elements, permitting assistive technology like display readers to bring significant statistics to users with disabilities.

For instance, a heading element (<h1> to <h6>) in HTML no longer simplest defines the document’s shape but conveys hierarchical information to the Accessibility Tree, assisting display readers in imparting content in a dependent and understandable way.

The role characteristic in HTML plays a huge role in shaping the Accessibility Tree.

Role of the role=”presentation” attribute within the accessibility tree.

The role=”presentation” attribute is particularly beneficial, while developers must encompass non-semantic factors for styling or layout roles without affecting the file’s standard meaning.

Using role=” presentation,” developers sign to assistive technology that the element is not intended to convey extensive records and has to be handled as ornamental or presentational.

In conclusion, understanding the Accessibility Tree and utilizing the role attribute, specifically with the role=”presentation” price , empowers developers to create internet content that isn’t the best structurally sound but also on hand to customers with various wishes.

Presentational Roles and Their Significance

HTML role presentation talks about using the role attribute to define elements that might be, in basic terms, presentational or ornamental.

The role=”presentation” attribute explicitly tells assistive technologies that the associated HTML element needs to be handled as having no semantic meaning, ensuring that it no longer contributes to the Accessibility Tree’s structural or informative components.

Presentational Roles and Their Significance

Presentational roles, mainly role=”presentation”, allow developers to encompass factors for styling or format roles without deceptive assistive technologies or affecting the record’s meaning. It affords a way to split the visual presentation of content from its underlying structure.

This is for helping developers create visually attractive designs without compromising accessibility.

Historical context and evolution of role=” presentation” usage.

The role=”presentation” attribute’s ancient context originates in the evolution of web development practices.

In the early days of the web, builders regularly used HTML factors in more presentational than semantic ways, leading to confusion for assistive technologies. For instance, builders may use a <div>; element for styling roles without conveying any semantic that means.

To deal with this issue, the WAI-ARIA (Web Accessibility Initiative – Accessible Rich Internet Applications) specification introduced the role attribute, and the value “presentation” turned into, in particular, added to indicate that an element had no semantic role.

As web development standards and best practices evolve, the significance of setting apart content material structure from presentation becomes more apparent. The adoption of role= ”presentation” grew to ensure that assistive technology may want to.

This may be as it should be interpreted: net content enhances the overall accessibility of websites. In modern net improvement, using presentational roles is considered a precise practice, selling a clean separation of worries among content shape and visual presentation.

The Role of ARIA in Hiding Semantics

Accessible Rich Internet Applications (ARIA) is a set of attributes introduced to enhance the accessibility of applications . These are mainly those advanced using JavaScript, Ajax, and dynamic technologies. ARIA presents a way to supplement HTML semantics by conveying additional information to assistive technology.

One key aspect of ARIA is its role in modifying the presentation of particular elements while preserving their semantic meaning. Role= “presentation” and aria-hidden=”real” are two commonly used attributes for this motive. The choice among them depends on the developer’s purpose — whether they want to deliver that an element is presentational.

Comparison of role=”presentation” and aria-hidden=”true” attributes.

The role=”presentation” characteristic is carried out to HTML elements to imply that they have no explicit semantic meaning. This is to split visual styling from the report’s structural semantics. On the opposite hand, the aria-hidden=”authentic” attribute is to hide elements from assistive technology.

When aria-hidden=”actual” is implemented in a component, it alerts screen readers and other assistive technologies. The alert is that the content material inside that element must be ignored and not provided to users. The role=”presentation” is specifically for factors that are meant to be in basic terms presentational.

On the other hand, aria-hidden=”real” is a broader attribute for any element to hide from assistive technology.

Common Uses of the role=”presentation” Attribute

In web development, the HTML role presentation attribute becomes a valuable tool, explicitly indicating that an HTML element should be treated purely as presentational or decorative, devoid of semantic significance.

This attribute is beneficial when developers want to decorate the visual presentation of content without introducing misleading information for assistive technology.

Here are some everyday use instances for the role=” presentation” attribute:

1.) Decorative Images:

Decorative snapshots used for classy roles often do not contribute to the content material . By applying role=”presentation” to the related <img> element, developers inform display screen readers and other assistive technologies that the image is only ornamental and is not applicable.

2.) Styling Containers:

Div elements or other containers are in basic terms for styling purposes and have no semantic significance. Applying role=” presentation” to these elements guarantees they do not intrude with the Accessibility Tree, preserving a clean separation between visual styling and record structure.

<!– Content for styling purposes only –>

</div>

3.) Spacer or Separator Elements:

When builders use non-semantic elements to create spacing, html role presentation is to clarify their reason for assistive technology.

Impact of role=” presentation” on specific HTML elements

1.) lists (ul, ol):.

Applying role=” presentation” to lists suggests that the listing gadgets do not convey a semantic order or hierarchy. This can be useful whilst builders use lists for layout roles in preference to representing a significant sequence.

</ul>

2.) Tables:

People use tables for layout or presentation rather than displaying tabular information.By applying role=”presentation” to a table, builders ensure screen readers recognize that the desk is not conveying records relationships.

<!– Table content for layout purposes only –>

</table>

Therefore, the role=”presentation” attribute is a powerful device for web developers to beautify visible layouts without compromising accessibility.

Limitations and Considerations

The role=”presentation” attribute is usually effective in instructing browsers and assistive technology. This is to deal with an element as merely presentational. There are concerns that builders have to be aware of:

1.) Interactive or Focusable Elements:

Browsers may overlook the role=”presentation” attribute in certain cases when applied to interactive elements. For example, assigning role=”presentation” to a button or hyperlink might lead the browser to recognize it as interactive.

Also, display screen readers may additionally announce it as such. Developers must work cautiously while using role=”presentation” on factors customers would engage with for steady behavior.

<!– The role=”presentation” may not prevent interaction behavior –>

<button role=”presentation”>Click me</button>

2.) Global ARIA States:

Certain global ARIA states, such as aria-stay and aria-busy, can affect the effectiveness of HTML role presentation. For instance, if an element with role=”presentation” is inside a region with aria-live=”assertive”, it would display reader customers.

Developers should consider the broader context and how global ARIA states might influence the visibility of factors with role=”presentation”.

<span role=”presentation”>This message will be announced.</span>

3.) WAI-ARIA Authoring Practices:

Seeking advice from the WAI-ARIA Authoring Practices pointers and specifications is essential. This is for the maximum up-to-date hints on using ARIA attributes, along with role=”presentation”.

As net standards evolve, new considerations and first-rate practices might also emerge, and builders need to live knowledgeable about adjustments.

<!– Always refer to the latest WAI-ARIA Authoring Practices guidelines –>

<div role=”presentation”>Content following best practices</div>

Therefore, while role=” presentation” is a valuable device for reinforcing internet accessibility, builders need to be privy to its barriers in unique contexts, along with interactive factors and global ARIA states.

See Also: How to Make a Quiz in HTML? What to do?

The Role Attribute: Categories and Usage

The HTML role presentation is flexible, supplying several classes to define the motive or element. These classes consist of:

1.) Abstract Roles:

Outline abstract standards with roles not limited to specific elements. For instance, use role=”variety” to define variety input and role=”institution” to group elements.

2.)Widget Roles:

Widget roles are for interactive consumer interface factors. Examples include role=”button” for clickable buttons and role=”textbox” for input fields.

3.)Document Structure Roles:

Define record shape and semantics. Examples include role=”article” for representing independent content material and role=”navigation” for navigation menus.

4.)Landmark Roles:

Landmark roles become aware of particular regions of a page, assisting navigation for users. Examples include role=”header” for the header phase and role=”major” for the principle content material vicinity.

To use the role attribute effectively, remember the following guidance:

1.) semantic html first:.

Whenever possible, depend upon semantic HTML factors instead of adding roles. HTML5 introduces elements like <nav> <article>, and <phase> that deliver meaning.

2.) Use Roles for Custom Elements:

When growing custom additives or interactive elements that do not have native HTML equivalents, use suitable ARIA roles to bring their motive to assistive technologies.

3.) Avoid Overusing Presentation Roles:

While role=” presentation” is beneficial in simple terms and decorative factors, it’s crucial to apply it judiciously. Ensure that it honestly adds price to accessibility without compromising the overall shape of the file.

By understanding the kinds of roles and adhering to excellent practices, builders can leverage the role attribute to enhance accessibility.

See Also: Understanding Data Formats: Plain Text, XML, HTML, JSON, and Beyond

In conclusion, the role attribute in HTML is a pivotal device in internet development, presenting a way to enhance accessibility and convey essential facts to assistive technologies.

We explore its diverse packages, together with the categorization into Abstract, Widget, Document Structure, and Landmark roles, every serving precise purposes in defining the character of HTML factors.

We look at scenarios wherein the role=”presentation” characteristic proves beneficial without compromising the semantic integrity of their content material. However, it is vital to recognize the limitations, such as the capability to disregard the attribute for positive interactive factors.

See Also: Achieve Stylish HTML Tables without CSS: Border Techniques and Examples

Encouragement to prioritize accessibility in web design.

As we navigate the dynamic landscape of net development, the overarching subject matter is prioritizing accessibility. By adhering to excellent practices and staying in the loop about evolving requirements, developers contribute to an extra-inclusive digital realm.

See Also: Troubleshooting HTML Audio Autoplay Not Working

Hi, I’m Geoff. I design. I develop. I do lots of things in between. What that really boils down to is that I make websites.

Tools & Resources

Campus Directory
Human Resources
University Policies
Auraria Library
Strauss Health Sciences Library

Schools & Colleges

College of Architecture and Planning
College of Arts & Media
Business School
School of Education & Human Development
College of Engineering, Design and Computing
College of Liberal Arts and Sciences
School of Public Affairs
CU Anschutz Medical Campus
School of Dental Medicine
Graduate School
School of Medicine
College of Nursing
Skaggs School of Pharmacy and Pharmaceutical Sciences
Colorado School of Public Health

CU Campuses

CU Colorado Springs

ACTION REQUIRED: Web Accessibility Compliance

The new Colorado accessibility law, HB21-1110, affects university websites and will go into effect July 1, 2024. This means that university website owners/content managers must ensure your website content meets the minimum web accessibility standards before July 1.

Accessible Tables

Data tables .

The primary function of a data table is to display tabular information in the form of a grid with column and rows. Below is an example of a simple data table:

Scope Attribute

In data tables, the scope attribute gives context to the data for an unsighted user. It tells the browser and the screen reader what header an individual cell is associated with. For this reason, when using data tables it is always recommended to employ the scope attribute so as to make the data more clear to users who may not be able to actually see it. In the example below, applying the scope attribute to the header row: Name, Age, Birthday and the header column: by birth, by marriage will associate any cells with those headers. With the scope attribute applied, the screen reader would then firstly announce any headers and then any data within the cell, thus giving it context.

1. In the Content Block Widget, select the create a table icon and then table wizard. If you do not see the icon on the tool list, you may need to expand the list by selecting all tools: 2. Click on the accessibility tab on the upper right, you can then determine the headers or rows for your table. The drop down selector at the bottom will let you associate the scope attribute to any of the above selected rows or columns. In the first example below, we have selected 1 header row and associated that row with the scope attribute: 3. In the second example, we have selected one header column and associated that column with the scope attribute: Layout Tables

Layout tables might be used to organize and layout content of a page. However for accessibility reasons, this use has fallen somewhat out of favor. Because screen readers announce data in a linear order, it is usually not recommended to use layout tables to organize content of a page and instead use CSS or other methods to organize and arrange content. If you do decide to use a layout table, you should always make sure the linearity makes sense. The example below highlights how layout tables might be problematic, the intent of this layout table is to be read as: "Basement Toilets Must Flush Up!"

However the screen reader will actually read this table as: "Basement Up Toilets Flush Must", we can see the reason why when the actual structure of the table is revealed and how it is presented in linear order:

Presentation Role

In some instances, particularly with layout tables, one option to make them more accessible may be to add something like the role=presentation attribute. Adding the presentation role to an element makes it so that the screen reader will not read out structural html elements such as the header, table row or table column, but still read the content of those elements. Because these structural elements can be somewhat distracting or overwhelming when announced, the presentation role can be used to simplify how data is presented in a less distracting or overwhelming manner. Here is an example of implementing the presentation role on the html of a table:

<table role = presentation > <tr> <th>Name</th> <th>Favorite Food</th> </tr> </table>

Office of Information Technology
CU Denver University Communications
CU Anschutz University Communications
Brand guidelines
Editorial style guide
Web services
Feedback form
In-person training

DigitalA11Y

Your Accessibility Partner

WAI-ARIA: role=presentation

An element whose implicit native role semantics will not be mapped to the accessibility API.

Description

An element whose implicit native role semantics will not be mapped to the accessibility API. See synonym none.

Note regarding the ARIA 1.1 none role.§

In ARIA 1.1, the working group introduced none as a synonym to the presentation role, due to author confusion surrounding the intended meaning of the word “presentation” or “presentational.” Many individuals erroneously consider role=”presentation” to be synonymous with aria-hidden=”true”, and we believe role=”none” conveys the actual meaning more unambiguously.

Until implementations include sufficient support for role=”none”, web authors are advised to use the presentation role alone role=”presentation” or redundantly as a fallback to the none role role=”none presentation”.

The intended use is when an element is used to change the look of the page but does not have all the functional, interactive, or structural relevance implied by the element type, or may be used to provide for an accessible fallback in older browsers that do not support WAI-ARIA.

Example use cases:

An element whose content is completely presentational (like a spacer image, decorative graphic, or clearing element);
An image that is in a container with the img role and where the full text alternative is available and is marked up with aria-labelledby and (if needed) aria-describedby;
An element used as an additional markup “hook” for CSS; or
A layout table and/or any of its associated rows, cells, etc.

For any element with a role of presentation and which is not focusable, the user agent MUST NOT expose the implicit native semantics of the element (the role and its states and properties) to accessibility APIs. However, the user agent MUST expose content and descendant elements that do not have an explicit or inherited role of presentation. Thus, the presentation role causes a given element to be treated as having no role or to be removed from the accessibility tree, but does not cause the content contained within the element to be removed from the accessibility tree.

Role=Presentation Example 1

For example, according to an accessibility API, the following markup elements would appear to have identical role semantics (no role) and identical content.

1. [role=”presentation”] negates the implicit ‘heading’ role semantics but does not affect the contents.

2. There is no implicit role for span, so only the contents are exposed.

3. Depending on styling and other factors, this role declaration is redundant in some implementations.

4. In all cases, the element contents are exposed to accessibility APIs without any implied role semantics.

The presentation role is used on an element that has implicit native semantics, meaning that there is a default accessibility API role for the element. Some elements are only complete when additional descendant elements are provided. For example, in HTML, table elements (matching the grid role) require tr descendants (the row role), which in turn require th or td children (the gridcell, columnheader, rowheader roles). Similarly, lists require list item children. The descendant elements that complete the semantics of an element are described in WAI-ARIA as required owned elements.

When an explicit or inherited role of presentation is applied to an element with the implicit semantic of a WAI-ARIA role that has required owned elements, in addition to the element with the explicit role of presentation, the user agent MUST apply an inherited role of presentation to any owned elements that do not have an explicit role defined. Also, when an explicit or inherited role of presentation is applied to a host language element which has required children as defined by the host language specification, in addition to the element with the explicit role of presentation, the user agent MUST apply an inherited role of presentation to any required children that do not have an explicit role defined.

In HTML, the img element is treated as a single entity regardless of the type of image file. Consequently, using role=”presentation” or role=”none” on an HTML img is equivalent to using aria-hidden=”true”. In order to make the image contents accessible, authors can embed the object using an object or iframe element, or use inline SVG code, and follow the accessibility guidelines for the image content.

For any element with an explicit or inherited role of presentation and which is not focusable, user agents MUST ignore role-specific WAI-ARIA states and properties for that element. For example, in HTML, a ul or ol element with a role of presentation will have the implicit native semantics of its li elements removed because the list role to which the ul or ol corresponds has a required owned element of listitem. Likewise, although an HTML table element does not have an implicit native semantic role corresponding directly to a WAI-ARIA role, the implicit native semantics of its thead/tbody/tfoot/tr/th/td descendants will also be removed, because the HTML specification indicates that these are required structural descendants of the table element.

Note: Only the implicit native semantics of elements that correspond to WAI-ARIA required owned elements are removed. All other content remains intact, including nested tables or lists, unless those elements also have a explicit role of presentation applied.

For example, according to an accessibility API, the following markup elements would appear to have identical role semantics (no roles) and identical content.

1. [role="presentation"] negates the implicit 'list' and 'listitem' role semantics but does not affect the contents .

2. There is no implicit role for "foo", so only the contents are exposed.

Note: There are other WAI-ARIA roles with required children for which this situation is applicable (e.g., radiogroups and listboxes), but tables and lists are the most common real-world cases in which the presentation inheritance is likely to apply.

For any element with an explicit or inherited role of presentation, user agents MUST apply an inherited role of presentation to all host-language-specific labeling elements for the presentational element. For example, a table element with a role of presentation will have the implicit native semantics of its caption element removed, because the caption is merely a label for the presentational table.

Authors SHOULD NOT provide meaningful alternative text (for example, use alt=”” in HTML) when the presentation role is applied to an image.

In the following code sample, the containing img and is appropriately labeled by the caption paragraph. In this example the img element can be marked as presentation because the role and the text alternatives are provided by the containing element.

In the following code sample, because the anchor (HTML a element) is acting as the treeitem, the list item (HTML li element) is assigned an explicit WAI-ARIA role of presentation to override the user agent’s implicit native semantics for list items.

Presentational Roles Conflict Resolution

There are a number of ways presentational role conflicts are resolved.

Host languages elements, having implicit presentational roles for which no roles, may be applied, MUST never be exposed to in the accessibility tree. With this exception, user agents MUST always expose global WAI-ARIA states and properties to accessibility APIs. In this case, the user agent ignores the presentation role and exposes the element according to its implicit native semantics. However, user agents MUST ignore any non-global, role-specific WAI-ARIA states and properties, unless it is on an inherited presentational role where an explicit role is applied.

For example, aria-haspopup is a global attribute and would always be applied; aria-level is not a global attribute and would therefore only apply if the element was not in a presentational state.

Here [role=”presentation”] is ignored due to the global aria-haspopup property.

Explicit roles on a descendant or owned element override the inherited role of presentation, and cause the owned element to behave as any other element with an explicit role. If the action of exposing the implicit role causes the accessibility tree to be malformed, the expected results are undefined and the user agent MAY resort to an internal recovery mechanism to repair the accessibility tree.

If an element with a role of presentation is focusable, or otherwise interactive, user agents MUST ignore the normal effect of the role and expose the element with implicit native semantics, in order to ensure that the element is both understandable and operable.

User agents MUST always expose global WAI-ARIA states and properties to accessibility APIs, even if an element has an explicit or inherited role of presentation. In this case, the user agent ignores the presentation role and exposes the element according to its implicit native semantics. However, user agents MUST ignore any non-global, role-specific WAI-ARIA states and properties, unless it is on an inherited presentational role where an explicit role is applied.

HTML Example

Html example 2, html example 3.

1. [role=”presentation”] is ignored due to the global aria-haspopup property.

2. [role=”presentation”] negates the both the implicit ‘heading’ and the non-global level.

Characteristics

Superclass Role

Inherited States and Properties

aria-atomic
aria-busy (state)
aria-controls
aria-current (state)
aria-describedby
aria-details
aria-disabled (state)
aria-dropeffect
aria-errormessage
aria-flowto
aria-grabbed (state)
aria-haspopup
aria-hidden (state)
aria-invalid (state)
aria-keyshortcuts
aria-labelledby
aria-relevant
aria-roledescription
author (if role discarded by error conditions)

Semantic HTML

No HTML element equivalent.

WAI-ARIA 1.2 Specification Refer to the notes from the WAI-ARIA 1.2 specification for more information on role=presentation
HTML5 Accessibility Chops: notes on using ARIA by TPGi

Explore more on DigitalA11Y Insights

Description A document structural element. Roles for document structure support the accessibility of dynamic web…

Description A form widget that allows the user to make selections from a set of…

A form of widget that performs an action but does not receive input data. Note:…

Description A structure that labels or summarizes the topic of its related section. Note: sectionhead is…

Description A renderable structural containment unit in a document or application. Note: section is an abstract…

Raghavendra Satish Peri empowers enterprises with his expertise in digital accessibility and marketing. Through his impactful work, he collaborates with both small businesses and large enterprises, spearheading digital transformation initiatives. Raghavendra is the author behind the influential Accessibility Blog hosted at DigitalA11Y.com , where he delves into the intricate realm of digital accessibility and its significance. Passionate about fostering change within the tech landscape, Raghavendra actively inspires local tech communities through engaging meetups and mentorship. He is the driving force behind HelloA11Y.com , a vibrant platform that unites accessibility professionals, developers, and enthusiasts, propelling the adoption of accessible practices. Beyond the digital realm, Raghavendra seeks diverse experiences. You might find him exploring various cuisines at local cafes and restaurants or immersing himself in thought-provoking audio books. His insights and musings also find a home on his Personal Blog at raghava.in , where he shares his thoughts and experiences with a wider audience.

WAI-ARIA: Role=Alertdialog

A type of dialog that contains an alert message, where initial focus goes to an element within the dialog. Description A type of dialog that contains an alert message, where initial focus goes to an element within the dialog. See related alert and dialog. Alert dialogs are used to convey messages to alert the user….

WAI-ARIA: Role=Blockquote

A section of content that is quoted from another source. Description A section of content that is quoted from another source. Characteristics Superclass Role section Related Concepts <blockquote> in [HTML] Inherited States and Properties Semantic HTML The HTML alternative for role=”blockquote” is the <blockquote> tag. Reference

WAI-ARIA: Role=Spinbutton

Description A form of range that expects the user to select from among discrete choices. A spinbutton typically allows the user to select from the given range through the use of an up and down button on the keyboard. Visibly, the current value is incremented or decremented until a maximum or minimum value is reached….

WAI-ARIA: Role=Application

A structure containing one or more focusable elements requiring user input, such as keyboard or gesture events, that do not follow a standard interaction pattern supported by a widget role. Description A structure containing one or more focusable elements requiring user input, such as keyboard or gesture events, that do not follow a standard interaction…

WAI-ARIA: Role=MenuItem

A presentation of menu that usually remains visible and is usually presented horizontally Description An option in a set of choices contained by a menu or menubar. Authors MAY disable a menu item with the aria-disabled attribute. If the menu item has its aria-haspopup attribute set to true, it indicates that the menu item may…

WAI-ARIA: Role=None

An element whose implicit native role semantics will not be mapped to the accessibility API. Description New in ARIA 1.1 An element whose implicit native role semantics will not be mapped to the accessibility API. See synonym presentation. Note: Note regarding the ARIA 1.1 none role.§ In ARIA 1.1, the working group introduced none as a synonym to the presentation…

One Comment

Role presentation on a DIV or SPAN element is one that confuses me. In the post you state ‘3. Depending on styling and other factors, this role declaration is redundant in some implementations. Sample Content ‘. However you have not given an example of when, styling and other factors’ cause it is to not be redundant, and how this applies.

I often see the presentation role placed on DIVs and SPANs of a webpage and would like to understand when this has an effect on the end user, and why.

Thanks. Laurence

Using the presentation role

Working examples:, additional resources, description.

Use the presentation role to remove semantic meaning from an element and any of its related child elements. For example, a table used for layout purposes could have the presentation role applied to the table element to remove any semantic meaning from the table element and any of its table related children elements, such as table headers and table data elements. Non-table related elements should retain their semantic meaning, however.

Possible effects on user agents and assistive technology

Example 1: , aria attributes used, related aria techniques , compatibility.

TBD: Add support information for common UA and AT product combinations

Document Tags and Contributors

NeedsContent
Section 508

Skip to main navigation
Skip to main content
Continue about your business

Black Lives Matter, contribute.

Tim Wright dot Org

The difference between role=”presentation” and aria-hidden=”true”.

In dealing with role="presentation" and aria-hidden="true" you may find that they both have deceptively similar functions when it relates to how they interact with assistive technology (screen readers). Before we dig into the difference between these two attributes we first need to learn a little bit about how accessibility in a Web browser works and this thing called: The Accessibility Tree

The Accessibility Tree

The accessibility tree is a mapping of objects within an HTML document that need to be exposed to assistive technology (if you’re familiar with the DOM , it’s a subset of the DOM ). Anything that communicates aspects of the UI or has a property or relationship that needs to be exposed, gets added to the tree. This happens automatically for most elements when you use a strong semantic HTML structure, but you can also add or remove objects programmatically with accessibility hooks like: role="presentation" and aria-hidden="true" (and some CSS properties). In a nutshell, this means… if I have a text input on a page, a screenreader will be able to interact with it, because it has been added into the accessibility tree.

If role="presentation" and aria-hidden="true" do the same thing and interact with the accessibility tree the same way, then what’s the difference? Why do we even need both of them?

It’s true, that both these attributes will remove objects from the accessibility tree, but they act at different levels and report varying semantics to assistive technology.

Presentational Roles

Most of the documentation you’ll find online about the role="presentation" attribute mentions removing spacer images,and layout tables. Well that’s not very helpful in 2016, because we don’t use spacer images anymore and table layouts have long since been removed from our minds. If that’s true, then what good is this attribute?

Presentational roles are used when elements need to be in the DOM, but the semantics of them are inaccurate or unnecessary. We’re basically telling a screen reader that the semantics of an element are wrong, so ignore them. Which is why the example <table role="presentation"> is often used to present it to the world.

In the below example you’ll see an unordered list that is using role="presentation" to remove it’s semantics:

Below, is that gets reported to assistive technology. Note that the <span> elements could also be <div> because neither have a semantic meaning.

Something important to notice here is that all children of the original <ul> have had their semantics removed as well. The exception to this is the link in the second list item. Using role="presentation" will not remove and content or semantic definition from focusable elements. That means your links, buttons, and inputs will remain as they should, along with all the content. There are some elements, like images, that will get completely removed from the tree when this attribute is applied (you’d use it when it doesn’t make sense for an image to have alternative text so it can be removed from the tree).

This is an important distinction to make when comparing to aria-hidden="true" , which is a little more aggressive in how it interacts with the accessibility tree.

ARIA Hiding

Completely hiding an element from a screen reader is pretty common in a couple different situations:

A UI element is detrimental or unimportant to assistive technology (you see this a lot with icons – for better or worse)
You’re mimicking the visual UI (like menus opening and closing)

The aria-hidden attribute has two states: true and false and they correspond to an element’s state within the accessibility tree. aria-hidden="true" means the element is removed from the tree, and aria-hidden="false" means the element is present in the tree; the default state for an element is “false”. Elements can be added or removed in the HTML or programmatically in JavaScript and combined with other accessibility attributes to create robust interactions with assistive technology.

If you’re changing an element’s hidden state from true to false, this should always happen within JavaScript to provide a fallback for someone browsing with JavaScript turned off. If an element’s state is “hidden” and it will always remain hidden, it’s fine to add aria-hidden="true" right into the HTML.

The code block below shows two examples. One is hidden via the HTML , and the other within JavaScript to show a toggle interaction ( you can also check it out in this pen ):

Using aria-hidden="true" will completely remove all elements, child elements, and content from the accessibility tree regardless of the default semantic nature and they will remain removed until the aria state is changed to false it functions in much the same way as CSS’s display:none . This is where it differs from role="presentation" .

When you’re thinking about removing an element from the accessibility tree first think, “Am I removing the element all together or just the semantics?” If you do that, it will be sure to lead you down the right path and make your UI all the more pleasurable for assistive technology to consume.

Resources and Further Reading

The Accessibility and DOM Tree
The Presentational Role
aria-hidden (state)
Practical ARIA examples
Back to main navigation
Back to main content

DEV Community

Posted on Sep 27, 2019

Document Structure Roles: Table Roles (Introduction to WAI-ARIA Part 3)

In the first section of this series, i'll be talking about roles. today's article is about aria's table roles. if you missed my landmark roles post , go check it out.

Document structure roles add context to structural page content that is not interactive. Some of these roles are redundant if you use semantic HTML to write your markup. Document structure roles differ from landmark roles in that they describe smaller areas that organize content rather than the large sections landmark roles indicate.

Table Roles

The roles for tables all have corresponding semantic HTML elements, which are preferable to using the following roles on more generic elements. Remember, always use semantic HTML when possible! As a side note, tables are for displaying data in a tabular manner (rows and columns). Please don't use tables as a way to lay out your page. Learning to use CSS grid will benefit you and your users much more!

role="table"

The table role indicates that the data is contained within a non-interactive table structure. That is to say, it organizes data into columns and rows. An element with the table role must contain elements with the row role. The <table> element has an implicit role="table" attribute.

role="rowgroup"

A rowgroup role denotes a group of rows within a table. This corresponds with the <thead> (or table head), <tbody> (or table body), and <tfoot> (or table footer) elements. An element with the rowgroup role must be contained within an element with the table or grid role. (We'll discuss the grid role in the widgets section of this series.)

A row role denotes a row within a table. This directly corresponds with the <tr> (or table row) element. Elements with the row role must be contained by an element with the table , grid , treegrid , or rowgroup role.

role="columnheader"

The columnheader role denotes the element's contents as the header for a column of data. The <th> (or table header) element has an implicit role of columnheader . An element with the columnheader role must be a descendant of an element with the row role.

role="rowheader"

The rowheader role establishes the relationship between that cell and all the cells within the same row. The <th> (or table header) element also denotes an element with the implicit role of rowheader . An element with the rowheader role must be contained within an element with the row role.

role="cell"

The cell role denotes the element's contents as data in a table cell. The <td> (or table data) element has an implicit role of cell . An element with the row role must belong to an element with the row role.

Let's wrap up this week's lesson!

As far as tables go, as long as you're using semantic HTML, you don't really need to add these ARIA roles. However, learning about them can give you an appreciation for how much work semantic HTML does for you.

Next week, we'll continue learning about document structure roles!

Top comments (0)

Templates let you quickly answer FAQs or store snippets for re-use.

Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment's permalink .

Hide child comments as well

For further actions, you may consider blocking this person and/or reporting abuse

Introducing VASA 1: Microsoft's Cutting-Edge AI Model

Brainvault Technologies - Apr 29

Latest Python Features That Every Developer Should Know

Cache Merrill - May 2

Implementing Very Basic Dark/Light Modes with CSS Variables and JavaScript 🌓

Muhammad Ayoub Khan - May 3

Configure NextJs Custom Server with NodeJs

codegirl - May 12

We're a place where coders share, stay up-to-date and grow their careers.

Ohio State nav bar

The Ohio State University

BuckeyeLink
Find People
Search Ohio State

Using role=”presentation” on HTML tables for special cases

Html table example with role=”presentation” on it.

In this example, screen readers should not treat the data table as a table because role=”presentation” removes those table semantics. For this technique to work the role=”presentation” has to be in the table element itself, not on a wrapper div. Upon testing, NVDA and Narrator comply and treat it as normal text without saying anything about the table rows or cells. Layout tables are a case where you might use role=”presentation” to make the table not look like a true data table to screen readers.

Railroads in Columbus Union Station table example

For comparision here’s the same table example but with role=”presentation” removed:.

Accessibility Guidelines

Accessibility role, name & value.

User interface components need a role, a name and sometimes a value, to ensure that people using assistive technologies are able to use them. Examples of assistive technologies are screen readers, switch controls and speech recognition software.

There are two cases where we can't use a good HTML element with built-in accessibility features, even though we want to:

There is no native HTML element for what we are trying to achieve.
There are technical limitations that prevents us using the semantically correct element.

In both cases, we need to build a custom control. An important accessibility principle is that a custom control needs a role, a name and sometimes a value.

How do we make sure that custom components have a role, a name and a value?

Screenshot from the Uber web site navigation, showing Company as a dropdown menu.

In our last section, Button and Links , we learned that a dropdown menu button should be coded as a <button> . What if our framework does not allow us to do that? If it forces us to use an <a> instead? If the navigation component in the library we are using, is built with <a> s? Then we need to add a role.

This is done with the role="button" attribute. Now users of assistive technologies can understand what the custom control is. A <button> has the role="button" built in, so to write <button role="button"> is redundant.

The custom control needs a name. In our example, the name is the content of the element, Company . As long as we have written our element like <div role="button">Company</div> , we have a good name. This is also known as the accessible name. The accessible name for our <div> is Company . Good.

That was too easy. In the following login form, we have several components – a logo, a heading, a label, a dropdown, an input and a button.

We are taking a closer look at the label, dropdown and the input. Visually there is no clear distinction between the dropdown and the input. The dropdown is coded with a <select> , which is a correct element for this case. However, it has no name:

It has a name attribute . This is not the same as an accessible name. This is confusing. The article What is an accessible name? explains this further. The name attribute is for computers. In a <form> , it is used as a reference when the data is submitted. This name countryCode will not help any users. It will not be picked up by assistive technologies.

To give this <select> an accessible name, we must use the attribute aria-label. Normally, we would have connected a visual label to the <select> component. In this case, there is only one visual label for both the components.

This is a <select> with an accessible name:

Some components have a value or a state. An accordion is open or closed. This information has to be accessible.

Screenshot of an accordion panel on Uber. One question is closed and one is open.

An accordion is considered a custom component. There is no standard HTML element to use here. Each accordion header should be a <button> or role="button" :

<div role="button">When do I get charged for a ride?</div>

Good. It has the role of a button. It also has a name, the content of the div. To give this button a value, we need to tell assistive technologies that it is closed. This is done with aria-expanded="false" :

<div role="button" aria-expanded="false">When do I get charged for a ride?</div>

Now, our accordion header has a role, name and a value.

COLOR PICKER

Contact Sales

If you want to use W3Schools services as an educational institution, team or enterprise, send us an e-mail: [email protected]

Report Error

If you want to report an error, or if you want to make a suggestion, send us an e-mail: [email protected]

HTML ARIA role="presentation"

Fastest entity framework extensions.

An element whose implicit native role semantics will not be mapped to the accessibility API.

Got any HTML Question?

Advertise with us
Cookie Policy
Privacy Policy

Get monthly updates about new articles, cheatsheets, and tricks.

Writing and remediating accessible tables in HTML documents

Published March 2, 2023 Updated July 25, 2023

When leveraged correctly, tables are an efficient way to provide large amounts of data in a user-friendly format. When structured incorrectly however, tables can be a significant challenge to users relying on assistive tools.

What makes a table accessible

For a table to be considered accessible, it should consist of linear data that titled by header cells, and ideally include a caption. Supplementary features such as colour banding, summaries, captions, and other explanatory notes can also be used to further enhance a table's accessibility.

Conversely, a table that is lacking structure, is marked up incorrectly, or otherwise has a non-linear reading order is considered an accessibility barrier and would be significantly difficult to parse using assistive tools such as screen readers.

How screen readers parse tables

When navigating to a table, screen readers provide the user basic information on the table's structure, such as the number of rows and columns it contains as well as the table's caption and summary, if present.

The following is an example of how the desktop screen reader, NVDA, parses a simple table. If this is the first time you hear a screen reader, note that the speech rate was lowered for this recording; typical users configure them to a dramatically faster speech rate.

As the screen reader moves through cells, it announces the cell's header before its contents. This highlights the importance of keeping header cells and their related data linear. In other words, data cells shouldn't be merged, split, or otherwise left empty as doing so would break the linear order.

Layout tables

A layout table is used for design. The goal is typically to create a grid-like arrangement rather than use the table to present actual data. The practice is commonly-seen in word processors and on old legacy websites, before the advent of CSS. As a design tool, tables provide an easy way to align content to a grid; cells can be split, merged, or resized to suit most needs.

While modern screen readers have become adepts at distinguishing between data and layout tables, the preferred approach is to utilize modern, accessible CSS techniques such as the grid and flex layouts, or using floats where appropriate.

Accessibility impacts of layout tables

When a table is used to layout a design, the table's reading order may not reflect the code's order. This can cause the reader to move through the content in an erratic way that doesn't follow the on-screen flow.

In the following example, notice how a screen reader would parse the table and how the order differs from the content's natural flow.

Layout tables can also be misidentified as data tables, which would cause screen readers to announce every cell as the user moves through the contents, potentially causing confusion and making navigation difficult.

By design, tables also retain their layout when resized; you wouldn't want your cells to shift around and break the intended order. This also means that tables don't reflow their layout to fit the viewport; they can only compress or expand. When a table requires a larger viewport than is available, the contents will break into multiple lines or cause horizontal scrolling.

Minimizing the impact of layout tables in HTML

When a screen reader inspects a table with the goal of determining whether its used to present data or for layout, it does so with a series of checks and by searching for certain giveaways like header cells, captions, and summaries.

Tables can also be assigned a role of presentation, which strips it of its semantic value. In other words, it treats the table as if it were non-semantic element, such as an empty container.

Tables can contain a header row, a header column, or both.

Table headers in HTML

Headers in complex tables.

A table is generally deemed complex when its data is not linear, typically due to multiple rows of headers, or when cells have been split or merged together. In some cases, tables may also be nested in another table.

As a general rule, and one I enforce very strongly, complex tables should be avoided and instead broken down into smaller linear tables. In cases where this may not be possible, header cells will have to be manually associated to their respective data cells. This can be a grueling task, particularly if you lack the supporting tools.

To assign header cells, each header is provided an ID. This is then, with the headers attribute, associated to data cells.

Empty cells and state indicators

In general, care should be taken to avoid leaving empty cells in a data table. Some screen readers will opt to skip empty cells, breaking the linear flow of data. Instead, provide useful information to the user. If the cells contains no value, opt for a text value of "0" or "Null".

It should be noted that some screen readers will also fail to announce cells that only contain a dash.

Avoid populating a cell to indicate a state. Using a cell as a makeshift checkbox or using "X" is not descriptive to users relying on screen readers and assistive devices. Use explicit, descriptive text such "Pass", "Included" to provide a state or condition.

A table caption is a short, introductory title that appears before the table and provides context or a brief description of the contents found within. Table captions often include a reference number such as "Table 1", though this is not required.

Adding a caption

In HTML, the caption element must be introduced immediately following the table's opening tag.

Notes and explanatory text

If your table contains an explanatory note, it should be found in the caption as it is typically provided before the table itself in order to provide context to the user.

Colour and design considerations

Colour is a great way to visually highlight key points of data, but care should be taken that it is not solely used to provide information or context. Some users may find it difficult to differentiate between certain hues, or see colours differently. Solely relying on Using green and red to indicate a passing or failure state could be problematic to users with deuteranomaly .

To facilitate scanning, the use of colour-banded rows or columns is a practical enhancement as long as the chosen background colours provide sufficient contrast with the text.

Structure elements

Tables can be structured in three content sections: the head, body, and footer.

The head of a table normally consists of header rows and is marked with the <thead> element. The body, where the data cells reside, is indicated with the <tbody> element. Finally, the footer is where you'll typically find elements such as totals and calculations. The footer is marked with the <tfoot> element.

These elements do not impact accessibility and are primarily used for styling tables and in printing. While it is generally good practice to include them, they can be omitted with little to no impact in most cases.

Other resources

Using id and headers attributes to associate data cells with header cells in data tables.

World Wide Web Consortium (W3C)

HTML table advanced features and accessibility

Mozilla Developer Network

How to Display SQL Data in HTML

Looking for ways to present your SQL data in HTML? Get practical tips, code snippets and examples to help you create data-rich web pages.

In today's data-driven world, the ability to present data from a database on a web page is not just a convenience; it's a necessity.

SQL databases are powerful repositories of structured data, but their true value lies in accessibility. By displaying its data in HTML format, we bridge the gap between raw data and user-friendly presentation, enabling access to information across web platforms.

In an era where attention spans are fleeting and information overload is rampant, the presentation of data plays a pivotal role. A user-friendly format enhances comprehension, engagement, and usability, fostering an environment where insights can be made and actions can be confidently taken.

This article will cover several key steps, starting with retrieving data from the SQL database. We'll then dive into constructing HTML structures to accommodate this data, ensuring clarity and elegance in presentation.

Let’s jump in!

Recap: What is HTML?

Before we dive deeper into displaying SQL data, let's quickly recap what HTML is all about. HTML, or Hypertext Markup Language, is the backbone of the World Wide Web. It's a markup language used to structure and present content on web pages.

HTML consists of a series of elements, represented by tags enclosed in angle brackets (e.g., <h1> for headings, <p> for paragraphs, <img> for images, etc.). These elements define the structure and semantics of the content, allowing web browsers to render and display it properly.

One of the key strengths of HTML is its ability to create hyperlinks, enabling users to navigate between different web pages or resources. This interconnectivity is what makes the web, well, a "web" of information.

HTML also plays nicely with other technologies like CSS (Cascading Style Sheets) for styling and JavaScript for adding interactivity and dynamic behavior to web pages.

Recap: What is SQL?

Now, let's take a look at SQL, or Structured Query Language. SQL is a programming language designed specifically for managing and manipulating relational databases.

At its core, SQL allows you to perform various operations on databases, such as creating tables, inserting, updating, and deleting data, as well as querying and retrieving information from the database.

SQL queries are written in a specific syntax that follows a set of rules and keywords. For example, the SELECT statement is used to retrieve data from one or more tables, while the INSERT statement is used to add new data to a table.

SQL is widely used in various industries and applications that rely on data storage and retrieval, including e-commerce platforms, social media networks, financial systems, and more.

Getting Started

Have you ever found yourself in a situation where you needed to present SQL data to non-technical users or stakeholders? If so, you know how daunting it can be to make sense of those cryptic-looking database outputs. That's where the magic of HTML comes into play – it allows you to transform raw data into visually appealing and user-friendly displays.

Displaying SQL data in HTML isn't just about making things look pretty (although that's a nice bonus). It's also about ensuring that the information is easily accessible, understandable, and can be navigated effortlessly. Think of it as the bridge between the technical backend and the user-facing frontend.

So, what are the steps involved in this process? Let's break it down:

Retrieving SQL Data

Before we can even think about displaying the data, we need to fetch it from the database. This typically involves three main steps:

Connecting to the database using an appropriate programming language like PHP or Python. This establishes a communication channel between your application and the database.
Writing SQL queries to fetch the desired data. This is where you put your SQL skills to work, creating queries that retrieve the specific information you need.
Storing the retrieved data in a suitable data structure for processing. Depending on the language and framework you're using, this could be an array, an object, or even a dedicated data structure like a result set.

Adding HTML Structure

With the data in hand, it's time to start building the HTML structure that will house it.

1. Creating the basic HTML skeleton

This will include the necessary tags ( <html> , <head> , <body> , etc.) which are included in any HTML page.

2. Design the layout

to accommodate the data. This could be a simple table , a more complex grid system, or even a custom layout tailored to your specific needs.

3. Plan for dynamic content insertion

Since we'll be populating the HTML with data from our SQL queries, we need to leave placeholders or create dynamic elements that can be updated on the fly.

Displaying SQL data in HTML Tables

For many use cases, displaying SQL data table format is a simple and effective solution. Here's how it's done:

1. Define table headers and rows

Use the <th> tag for table headers and the <tr> tag for rows.

2. Populate the table cells with SQL data

Iterate through your data structure (e.g., an array or result set) and populate the table cells ( <td> ) with the corresponding values.

Using PHP, server-side:

3. Style the table

Add some CSS magic to make your table look visually appealing – adjust colors, fonts, borders, and more.

Adding JavaScript for Interactivity

While HTML tables are great for displaying data, sometimes you need a little extra oomph to make the experience truly engaging. That's where JavaScript comes in.

JavaScript can enhance the functionality of HTML tables by enabling dynamic interactions and user-friendly features. Through JavaScript, tables can become more than just static displays of data; they can offer dynamic sorting, filtering, and pagination, providing users with a more intuitive and efficient experience.

By leveraging JavaScript libraries or writing custom scripts, you can implement various functionalities to augment table usability.

For example, sorting functionality allows users to rearrange table rows based on specific columns, making it easier to locate and analyze data.

Filtering functionality enables users to narrow down the displayed data based on predefined criteria, improving data visibility and analysis.

Pagination functionality breaks large datasets into smaller, manageable chunks, facilitating easier navigation and reducing page clutter.

Furthermore, JavaScript can enable interactive features such as row highlighting on hover, cell editing, and even data visualization within table cells. These interactive elements enhance user engagement and facilitate data interpretation.

Handling Data Security and Efficiency

While making your data look good is important, it's equally crucial to ensure that the underlying processes are secure and efficient. Here are some best practices for securing SQL queries and data transmission:

1. Always sanitize user input

Sanitizing user input involves validating and cleaning any data that is received from users before incorporating it into SQL queries. This helps prevent malicious code injection attacks such as SQL injection, where attackers exploit vulnerabilities by inserting SQL commands into input fields.

Techniques for sanitization include validating input formats, escaping special characters, and using parameterized queries to separate data from SQL commands.

2. Use prepared statements

Prepared statements, also known as parameterized queries, are pre-compiled SQL statements where placeholders are used for dynamic input values. These placeholders are later replaced with user-provided data when the query is executed.

Prepared statements help mitigate SQL injection attacks by ensuring that user input is treated as data rather than executable code. This prevents attackers from altering the structure of the SQL query.

3. Encrypt sensitive data to protect against SQL injection attacks and other vulnerabilities

Encryption adds an extra layer of protection to sensitive data by converting it into an unreadable format that can only be deciphered with the appropriate decryption key.

By encrypting sensitive data, even if an attacker manages to bypass other security measures and gain access to the database, the encrypted data remains unintelligible.

Techniques such as using SSL/TLS for secure data transmission and implementing strong encryption algorithms for data-at-rest encryption can safeguard data both in transit and at rest, reducing the risk of unauthorized access and data breaches.

By implementing these best practices, you can fortify your SQL data handling processes against security threats and ensure optimal efficiency in data transmission and storage.

Optimizing SQL queries for performance

Inefficient queries can slow down your application and frustrate users. Learn techniques like indexing, query caching, and query optimization to keep things running smoothly.

We covered a lot of ground, from retrieving SQL data to building HTML structures, implementing tables, adding interactivity with JavaScript, and ensuring data security and efficiency.

Displaying data in HTML is a crucial skill for anyone working with web applications or data-driven platforms. It not only makes information more accessible and user-friendly but also enhances the overall experience for your users.

Build & Style HTML Tables — No Coding Skills Required .

Josh Hartman

I'm Josh, the founder of HTML Tables and eklipse Development , a Webflow Professional Partner. I've always loved seamless web experiences and take pride in merging code with creative design. Aside from this website, I'm currently building How Much Concrete , a state-of-the-art concrete calculator. Beyond the digital realm, I love the outdoors & fitness. Find me on a trail or in the gym!

Tables, Tips & Tricks

How to make an hmtl table with rounded corners, can i learn javascript without html and css, how to put two youtube videos side by side in html.

Subscribe for the latest.

Updates, best practices, tips, and tricks—straight to your inbox. No spam, we promise .

AI + Machine Learning , Announcements , Azure AI Content Safety , Azure AI Studio , Azure OpenAI Service , Partners

Introducing GPT-4o: OpenAI’s new flagship multimodal model now in preview on Azure

By Eric Boyd Corporate Vice President, Azure AI Platform, Microsoft

Posted on May 13, 2024 2 min read

Tag: Copilot
Tag: Generative AI

Microsoft is thrilled to announce the launch of GPT-4o, OpenAI’s new flagship model on Azure AI. This groundbreaking multimodal model integrates text, vision, and audio capabilities, setting a new standard for generative and conversational AI experiences. GPT-4o is available now in Azure OpenAI Service, to try in preview , with support for text and image.

Azure OpenAI Service

A person sitting at a table looking at a laptop.

A step forward in generative AI for Azure OpenAI Service

GPT-4o offers a shift in how AI models interact with multimodal inputs. By seamlessly combining text, images, and audio, GPT-4o provides a richer, more engaging user experience.

Launch highlights: Immediate access and what you can expect

Azure OpenAI Service customers can explore GPT-4o’s extensive capabilities through a preview playground in Azure OpenAI Studio starting today in two regions in the US. This initial release focuses on text and vision inputs to provide a glimpse into the model’s potential, paving the way for further capabilities like audio and video.

Efficiency and cost-effectiveness

GPT-4o is engineered for speed and efficiency. Its advanced ability to handle complex queries with minimal resources can translate into cost savings and performance.

Potential use cases to explore with GPT-4o

The introduction of GPT-4o opens numerous possibilities for businesses in various sectors:

Enhanced customer service : By integrating diverse data inputs, GPT-4o enables more dynamic and comprehensive customer support interactions.
Advanced analytics : Leverage GPT-4o’s capability to process and analyze different types of data to enhance decision-making and uncover deeper insights.
Content innovation : Use GPT-4o’s generative capabilities to create engaging and diverse content formats, catering to a broad range of consumer preferences.

Exciting future developments: GPT-4o at Microsoft Build 2024

We are eager to share more about GPT-4o and other Azure AI updates at Microsoft Build 2024 , to help developers further unlock the power of generative AI.

Get started with Azure OpenAI Service

Begin your journey with GPT-4o and Azure OpenAI Service by taking the following steps:

Try out GPT-4o in Azure OpenAI Service Chat Playground (in preview).
If you are not a current Azure OpenAI Service customer, apply for access by completing this form .
Learn more about  Azure OpenAI Service  and the  latest enhancements.
Understand responsible AI tooling available in Azure with Azure AI Content Safety .
Review the OpenAI blog on GPT-4o.

Let us know what you think of Azure and what you would like to see in the future.

Provide feedback

Build your cloud computing and Azure skills with free courses by Microsoft Learn.

Explore Azure learning

AI + Machine Learning , Announcements , Azure AI , Azure AI Studio , Azure OpenAI Service , Events

New models added to the Phi-3 family, available on Microsoft Azure chevron_right

AI + Machine Learning , Announcements , Azure AI , Azure AI Content Safety , Azure AI Services , Azure AI Studio , Azure Cosmos DB , Azure Database for PostgreSQL , Azure Kubernetes Service (AKS) , Azure OpenAI Service , Azure SQL Database , Events

From code to production: New ways Azure helps you build transformational AI experiences chevron_right

AI + Machine Learning , Azure AI Studio , Customer stories

3 ways Microsoft Azure AI Studio helps accelerate the AI development journey chevron_right

AI + Machine Learning , Analyst Reports , Azure AI , Azure AI Content Safety , Azure AI Search , Azure AI Services , Azure AI Studio , Azure OpenAI Service , Partners

Microsoft is a Leader in the 2024 Gartner® Magic Quadrant™ for Cloud AI Developer Services chevron_right

Join the conversation, leave a reply cancel reply.

Your email address will not be published. Required fields are marked *

I understand by submitting this form Microsoft is collecting my name, email and comment as a means to track comments on this website. This information will also be processed by an outside service for Spam protection. For more information, please review our Privacy Policy and Terms of Use .

I agree to the above

Breaking News

Iain Armitage was 9 when ‘Young Sheldon’ began. Now, he’s saying goodbye to his biggest role yet

Iain Armitage, left, and Jim Parsons sitting in directors' chairs on a TV set looking at one another.

Show more sharing options
Copy Link URL Copied!

If this story began with a narrator, it would go something like this: Seven years ago, just a few weeks from making his debut as the face of “Young Sheldon,” the prequel to CBS’s blockbuster comedy “The Big Bang Theory,” Iain Armitage was a spirited, baby-faced 9-year-old dangling upside down on a pair of gymnastic rings at a park in Studio City during a break from his very grown-up gig.

That’s how this reporter first met Armitage. He was a kid who skipped and hopped across the park pavement and carefully set up a deck of cards to finesse a magic trick. But even at this tender age, he already had a list of credits that included HBO’s “Big Little Lies,” where he played the son of Jane Chapman (Shailene Woodley) who sets off some mommy tension after he’s accused of bullying a classmate, as well as the Brie Larson-led family drama “The Glass Castle” (2017) and the Netflix movie “Our Souls at Night” (2017).

But Armitage’s career-making turn in “Young Sheldon,” the coming-of-age sitcom focused on the childhood of Sheldon Cooper, the egotistical and socially awkward theoretical physicist memorably portrayed by Jim Parsons in “Big Bang Theory,” is coming to a close. The series premiered in fall 2017, becoming the No. 1 new comedy that season, and remained one of the network’s strong performers throughout its run. It even spawned a spin-off, “George & Mandy’s First Marriage,” which will launch this fall. (The series centers on Sheldon’s brother, George Cooper Jr., a.k.a. Georgie (Montana Jordan) and Mandy McAllister (Emily Osment) as they build a life together in 1990s Texas.)

‘Big Little Lies’ vet Iain Armitage enters the ‘Big Bang Universe’ with prequel ‘Young Sheldon’

Sept. 8, 2017

Now, Armitage is a couple month’s shy of his 16th birthday, his voice is deeper, and he’s swapped gymnastic rings for pilot lessons. And he’s saying goodbye to Sheldon, a character he’s played for nearly half his life, with Thursday’s series finale of “Young Sheldon.”

The final two episodes of the series, which aired back-to-back and are now available to stream on Paramount+, followed the Cooper family as they grappled with the death of their patriarch, George (Lance Barber), and prepared for his funeral; and Sheldon making the move to California to attend Caltech, where he’ll meets his “ Big Bang Theory ” pals Leonard, Raj and Howard.

Over a video call from New York, Armitage discussed his growth as an actor, watching Sheldon reach Caltech, and life after “Young Sheldon.” This interview has been edited and condensed for clarity.

Then and now: Iain Armitage, left, and Jim Parsons on the set of "Young Sheldon" in 2017, left, and in 2024.

“Young Sheldon” was not your first professional onscreen role, but it’s been your longest. How do you feel you’ve grown as an actor across the seven seasons?

It’s funny to think about because, especially with this show, I’ve fallen into such a rhythm with this character. I’ve been doing it for seven years, so it doesn’t really feel that much like a massive acting challenge anymore because, up until three weeks ago, I was doing it every day, for five days. I go through hair and makeup, I slip on those shoes and I’m in character. The more interesting thing, to me at least, will be when I next act. How does that look?

Does this feel like the right time for you to say goodbye to Sheldon?

Yeah. For so many people on our set, myself included, it was very hard to say goodbye. But I think it would have been hard to say goodbye if it had happened tomorrow or in 10 years. I don’t necessarily think that for me it was this massive letting go where I was so mournful it was happening right now. At the end of the day, as much as I love it, and as fun as it has been, it is a job. And all jobs like this do come to an end. I’m looking forward to what happens next.

What was the reaction like at the table read for the finale? When you got that final script, did you want to read it right away or did you put it off?

We don’t do table reads, because we’re cool. I think we did three table reads in the first season and then we stopped. Everyone was trying to kind of get the first copy of the last script just to have said, “Oh, I’ve read it. Oh, it’s really hard.” I didn’t buy into that game. I think I was one of the last people to read it, not because I was trying to put it off, but more just because I waited to get the scripts at the normal time. Reading it definitely was strange. And it did feel like an ending. But there’s going to be an incredible new spinoff with Georgie and Mandy [the characters played by Jordan and Osment, respectively]. It’s not really an ending, it’s a beginning in a way.

Fans of the original series know that a pivotal turning point in Sheldon’s life was the death of his father, George, who died of a heart attack as we see in this show. How was it to face that moment as Sheldon?

It was interesting the way it hit me because it wasn’t how I expected. I expected to be sad or kind of touched by how long we’ve gotten to know this character. But for me, it’s less about George and more about Lance. Lance is such a wonderful guy. It was more hard having him not be on set for the finale for certain scenes. We had that dinner scene without him. He brings such a light to the set ... and he’s got such a big personality.

A boy in a black tuxedo looks at a man's photograph on easel surrounded by flowers.

Sheldon is someone who’s very literal and matter of fact, not really likely to express emotions or know how to deal with social situations or relationships. What struck you about how he was processing his father’s death?

In the scene where the family gets the news that George has died, I was very impressed with myself that I managed to keep my cool because everyone was crying. It was very hard. We love Lance so much. He made it better; he was on set that day and for one of the rehearsals, he peeked in through the window. He had a very fun time with his own death. It was interesting because, for one of the takes, I tried to sink down the chair and not quite cry, but start to get emotional, and [“Young Sheldon” co-creator] Steve Molaro very quickly was like, “No, don’t. Not even second. It’s almost more heartbreaking if we don’t see any emotion on your face. You’re completely lost.” When I watched the replay on the monitors at video village, where the writers sit, I instantly saw what he meant. There was one take where I did it the way he wanted; I think he [Steve] started crying a little bit . I understood it after seeing it.

Obviously, Jim Parsons and Mayim Bialik are featured in the episode and we see deeper into their future. He’s writing about his memories of this time of his life, not really interested in his son’s imminent hockey game.

I love it. Throughout our earlier seasons, they would sprinkle some older Sheldon lore throughout the voice-overs of certain episodes. And Miss Mayim, she also guest voiced at least one of them. I love getting to see that because it’s a really nice reminder that this older Sheldon that’s narrating this history that we’re seeing has grown so much and come such a long way and is a dad now and kind of has a softer way of looking back on his own dad and of growing up and his family. He’s still Sheldon, but he’s definitely very different from himself as an 8- to 14-year-old in the show. No one’s the same as when they’re that age. So I liked that.

A woman in a hockey jersey stands with her arm out while looking at a man in a robe in front of a laptop.

In the finale, Sheldon decides he’ll get baptized for his mom’s peace of mind. What did that moment reveal to you about Sheldon?

That wet suit they had me wear — they had me try on about 10 of those things and I was so mad. It took like four hours, never mind. But about the actual scene: I really like it just because it was Sheldon being emotionally intelligent without realizing or knowing it because all he was doing was something for his mom, ... it just shows his love for his mom, at the end of the day. They went through a couple iterations of that moment. I haven’t actually seen the final episode yet, but she said something along the lines of, “Are you gonna leave too?” You could just see her face was so devastated. It was such a beautiful moment. I loved her [Zoe Perry’s] performance so much.

‘The Big Bang Theory’ finale: The end of an era in TV programming?

It doesn’t take a rocket scientist — or geeky physicists, for that matter — to realize that the conclusion of “The Big Bang Theory,” the most-watched comedy on television and a centerpiece of one of TV’s most profitable nights, is a blow to CBS.

May 16, 2019

There’s that moment just before Sheldon sets out to California where he’s taking in his childhood home one last time. He says he’s doing it so he can remember it when he’s older. Did you do the same? Were you wistful about taking it all in one last time?

A little bit, but at the same time, if I’m being completely honest, I don’t think I have the mental capability to keep track of all the different lasts. Because every single day on set for the final three months, everyone was like, “Oh, this is the last ...” and it’s this random thing. The funniest was when it would be something that we’d never done before. Like Miss Emily Osment held a party at her house on Sunday, which was wonderful. And somebody’s like, “This is the last time we’re gonna be hanging out at Emily Osment’s house on a Sunday.”

The final scene from the finale of “Young Sheldon.”

People always pay attention to the final words of a series finale. Sheldon has the final words, as he’s arrived at Cal t ech, and someone asks if he’s lost. He says, “No. I’m exactly where I’m supposed to be.”

I think it’s nice because it was definitely an on-the-nose scene, in a way; he’s at Caltech very much setting up what’s to come with “The Big Bang.” He has a long way to go. There’s an episode of “Big Bang,” where Leonard’s talking about when he first moved into the apartment and how the elevator broke and Sheldon being so much worse off than now in “Big Bang.” I like seeing that because it kind of shows that, no, he wasn’t exactly where it needed to be. I think the people that he has with him in “Big Bang” will really help them out. It’s a really nice line, but he’s definitely got a long way to go.

Was that actually the final shot you did?

That was not. By design, the final scene we shot was the dinner scene, unfortunately, without Lance, although he was there on set. We went around the table and wrapped everybody one by one. They wrapped me last. That was the first time I cried about the ending. And I sort of just sat there. There were a lot of people in this little dining room. I just looked around and was like, “Wow, I’ve known these people for seven years.” Some of them are newer additions to our “Young Sheldon” crew family, but it was pretty wonderful to get to look around and see everyone and that was the kind of first time I really felt emotional about the ending. I was a bit late to the party. But I was like, “OK, I’m at peace with this. ”

A man stands with a his hand on the shoulder of a woman sitting at a table.

I imagine the next day it didn’t feel like it was completely over yet because you’re still in the press bubble of it all.

Yeah, it sort of lingered on. The next day, I got to go to Warner Bros. [studio lot] again. I gave a tour.

Wait. What?

I’m not even joking. I have an entire tour guide outfit, complete with Warner Bros. baseball camp. I gave a tour and now I have the Warner Bros. tour guide book of information that I’ve been memorizing. When we go back there in a few weeks, I hope to give another tour or a few.

With the series finale , the question is always where do you hope your character goes from here? This being a prequel, you have an idea of where things go. Did having that sense of Sheldon’s end game make the process of saying goodbye to the character any easier?

It was odd because, unlike with a lot of shows like this, if there was no “Big Bang,” that would feel like a very unsatisfying ending, because, what does that mean? He’s at Caltech, his dad’s just died, and his family is no longer moving to Houston, probably. George is sort of the breadwinner of the family. There’s so many unanswered questions that end up slowly over 12 seasons [of “The Big Bang Theory”] getting answered and made reference to. It’s really beautiful that we have that.

How about how are you feeling about this next chapter?

I’m excited. I’m getting my student pilot’s license in two months, maybe. On my 16th birthday, I’ll be able to solo fly legally. And I’m doing a bunch of fun extracurricular stuff. I’m learning languages and doing a lot of travel. I do want to continue acting very much. And I do want to go to college very much. I have a lot of fun things that I’m looking forward to. But right now, I have the luxury of at least feeling like I have all the time in the world, which is nice.

Are you thinking about the kind of projects you would like to do?

I love an action movie or maybe a superhero movie. It’d be fun to do something with martial arts. I’d like to do something physical for once. “Sheldon” is so mental. I’d love to do a drama too. And, of course, on this spin-off, all the cast has been sort of offered some sort of role or place on the show — there’s the possibility, at the very least, of maybe coming back, which would be really fun. But I’m also just excited to sit back and watch Montana [Jordan] and Miss Emily [Osment] do their thing. They’re both so talented.

It’s been reported that a third season of “Big Little Lies” is on the horizon. Any talks of you being in that?

I’d love to so much. I haven’t formally received any offers yet. But I know that myself — and I’m sure all the other people involved — would be so happy to do another season. I think the main thing for me is that our incredible director, Jean-Marc Vallée, unfortunately passed away the Christmas before last, in the prime and peak of his life, so unexpectedly; he was very much the beating heart of the show. I’m interested to see how they’re going to do a third season if they do one.

These 8 ‘Bluey’ episodes could hint at what’s next for the beloved show

May 1, 2024

Larry David CURB YOUR ENTHUSIASM Season 12 - Episode 10

‘Curb Your Enthusiasm’ finale and its ‘Seinfeld’ moment: ‘A joke 26 years in the making’

April 8, 2024

Young Royals S3. (L to R) Edvin Ryding as Willlhelm, Omar Rudberg as Simon in Young Royals S3. Cr. Courtesy of Netflix © 2023

Creator of ‘Young Royals’ explains the finale and why it’s ‘beautiful for things to end’

March 19, 2024

The complete guide to home viewing

Get Screen Gab for everything about the TV shows and streaming movies everyone’s talking about.

You may occasionally receive promotional content from the Los Angeles Times.

Yvonne Villarreal is a senior television writer for the Calendar section and co-host of “The Envelope” podcast.

More From the Los Angeles Times

TIRES. Shane Gillis as Shane in Episode 101 of TIRES. Cr. Courtesy of Netflix © 2024

Review: In Shane Gillis’ Netflix show ‘Tires,’ the humor doesn’t veer far from juvenile

May 23, 2024

Kuhoo Verma, from left, Jennifer Aniston, Adam Sandler and Melanie Laurent in the movie "Murder Mystery 2."

Women and people of color drive ratings for streaming films, UCLA diversity report finds

Actor Walton Goggins is photographed at El Compadre restaurant in Los Angeles on May 14, 2024.

Being bad is good for Walton Goggins, whose turn in ‘Fallout’ has kept his star rising

Michael Imperioli as Christopher, left, and Drea de Matteo as Adriana in an episode of "The Sopranos" in 2004.

20 years later, we still can’t get over this ‘Sopranos’ death

Whatever Happened To Costco's All-American Chocolate Cake?

A slice of chocolate cake on a plate next to a whole cake

Costco is notorious for discontinuing customers' favorite items. It previously axed its cherished kosher hot dog brand , and, again, its beloved hand-dipped ice cream bars . The hit list goes on. Unfortunate to land on that list, too, was the prized All-American Chocolate Cake — and the move didn't go unnoticed. Presently, a whopping 8,500 plus signatures have been amassed on a Change.org petition titled "Ask Costco to bring back the "All-American Chocolate Cake." But if numbers speak, Costco has done a tremendous job of turning a deaf ear.

It was 2020 when Costco did the unthinkable and suspended the All-American Chocolate Cake. Once a 7-pound, fudge-forward staple for birthdays and barbecues, this masterpiece was discontinued never to return. Some suspect that the cake suffered collateral damage due to the COVID-19 pandemic, when a huge shift toward home baking saw the price of flour increase as people took things literally into their own hands. Social distancing also made big get-togethers far less likely. Consequently, the demand for Costco's baked goods likely dwindled, including that for its massive, party-sized All-American Chocolate Cake.

But others think otherwise. A Redditor who claims to be a part of the pioneering team for this cake dared to say it wasn't a "best-selling" product, which, come to think of it, may have been true compared to more profitable goods. In such cases, Costco would replace popular products with "more popular products," they divulged. Perhaps a more straightforward explanation is that the All-American Chocolate Cake "cost more money to make," as put across by another user on Reddit .

The All-American Chocolate Cake was great for all occasions

There are many good qualities to draw from Costco's All-American Chocolate Cake — the most evident being its unapologetically chocolatey nature. This delicacy was a weak spot for cocoa aficionados. It was made with chocolate, covered in chocolate frosting , and garnished with chocolate shavings. The frosting, particularly, was an outstanding feature, winning Reddit praise. On commenter called it the "best chocolate frosting ever. Like brownie batter." A combination of these elements was enough to impress upon anyone its richness, creating return customers in just a few bites.

The cake offered a generous serving, too. At 7 pounds, it weighed about as much as a newborn baby! Even Costco's 10-inch Chocolate Mousse Cake weighs 5 pounds at most, and it's a hearty serving of cake in itself. It seems that Costco didn't skimp on chocolate flavor nor size when it came to its All-American Chocolate Cake — as if it were giving us as much as it could before it plucked it from our sights.

On top of that, this cake was incredibly versatile. As one petitioner detailed on Change.org, "It was perfect for birthdays, anniversaries, Mother's Days, Father's Days, any party or celebration dessert! It was definitely our go to deliciousness!" Perhaps for now, customers can alleviate their cravings with the miniature All-American Chocolate Cakes that have recently made their way onto the Costco bakery scene or by baking our death by chocolate cake recipe . But until they bring back the OG cake, our minds will never rest.

This Wiki page is edited by participants of the HTML Accessibility Task Force. It does not necessarily represent consensus and it may have incorrect information or information that is not supported by other Task Force participants, WAI, or W3C. It may also have some very useful information.

RoleAttribute

1.1 Introduction
1.2.1 Role Attribute Original Limited Proposal
1.2.2 Additional Considerations
1.3.1 Rob Burns (HTML WG member)
1.3.2.1 XHTML role attribute module
1.3.2.2 Mac OS X AXRoles (accessibility api)
1.3.3 TV Raman (Google, etc.)
1.4.1.1 XHTML Metainformation Vocabulary
1.4.1.2 Items from the XHTML Role Module
1.4.1.3 ARIA 1.0 Pre-Defined Roles
1.4.2.1 Relation to alt text replacement

A Role Attribute for HTML5

Introduction.

Use cases for a role attribute for HTML5, include:

accessibility,
device adaptation,
server-side processing, and
complex data description.

Proposal for a "role" attribute for HTML5

Role attribute original limited proposal.

source: Gregory J. Rosmaita, post to w3c-wai-pf (2008-08-13)

Recently, the "curly brackets" hack of identifying a graphical image by its use or type by inserting a generic identifier / descriptor in curly braces as the @alt value for an IMG, has been added to the HTML5 working draft.

Not only is the "curly bracket" technique insufficient, it constitutes both an abuse of the alt attribute and does not satisfy the WCAG requirement that alt text contains a textual equivalent of the image.

Therefore, i would like PF to FORMALLY propose to the HTML WG that:

the "curly brackets" verbiage concerning alt be removed from the HTML5 draft;
role="logo" or type="logo"
role="layout" or type="layout"
role="link" or type="link"
role="button" or type="button"
that alt remain what it was intended to be -- a REQUIRED terse textual equivalent for static images, in accordance with the usage guidance provided by WCAG, ATAG, and UAAG, and in line with the alt inherited from HTML 4.01. Furthermore, a conscientious author who desires to provide both human-parseable and machine-processable information about the IMG needs a means of communicating a textual equivalent to the user as well as a means of providing machine-parsable information.
if type is used to indicate the function of the image for machine processing, then the IMG MUST contain either aria-role="presentation" or aria-role="image" ; if aria-role="presentation" is used, then the use of null alt constitutes valid use; if aria-role="image" is used, however, empty alt values or the lack of an alt attribute for the IMG are to be considered validation errors.

Additional Considerations

that a role attribute be added to HTML5 as a global attribute, in the same manner that title was introduced in HTML4.
that a pre-defined list of roles for individual elements -- in specific, the OBJECT, EMBED, and media-specific elements introduced in HTML5 -- be specified in HTML5 to provide a common baseline / consistency for authors, implementors and developers of "mainstream" and assistive technologies;

Comments on the Original role for HTML5 Proposal

Rob burns (html wg member).

Thanks for initiating this issue. It's high priority in my view.

I think role is exactly the appropriate place for this data. As more and more photographs are taken with digital cameras it is very easy to tag them as role='photo' from the internal metadata of the image format. The only exceptions that would require manual role metadata assignment would be scanned photographs or photographs that are photographs taken with a digital camera but taken of a physical print format of another role. For example, someone might take a photograph of a diagram, a bar chart, or geographic map. To me these are the types of role an image might serve as (whether from a photograph or generated wholly from software). So some suggestions:

mathexpression

Things like chart might also be broken down into greater detail like: orgchart , barchart , linegraph , etc.

A reference list of role keywords

Xhtml role attribute module.

complementary
contentinfo

consult also:

XHTML Vocabulary namespace
ARIA 1.0 Predefined Roles
XHTML Role Modeule (Editor's Draft 2008-10-18)

Mac OS X AXRoles (accessibility api)

popupbutton
radiobutton

less relevant to HTML:

TV Raman (Google, etc.)

Only change I'd recommend in what you describe for @role:

Rather than making it specific to the IMG tag, define a set of role values for image-type things, e.g. logo, pencil-drawing, picture, photo, whatever (a small handful) -- and add this to the legal values that might appear as the right-hand-side of role. This is more generally useful -- e.g. when you have a DIV that contains a bunch of "stuff" that is supposed to make up a logo. The attribute would still be usable on IMG as you describe -- it would just be usable more generally.

Role Attribute Genericized Proposal

Synchronization with the xhtml role vocabulary, xhtml metainformation vocabulary.

The XHTML Metainformation Module defined as part of XHTML+RDFa specifies the following vocabulary items for use in the rel and rev attributes.

alternate designates alternate versions for a resource.
appendix refers to a resource serving as an appendix in a collection.
bookmark refers to a bookmark - a link to a key entry point within an extended document.
cite refers to a resource that defines a citation.
chapter refers to a resource serving as a chapter in a collction.
contents refers to a resource serving as a table of contents.
copyright refers to a copyright statement for the resource.
glossary refers to a resource providing a glossary of terms.
help refers to a resource offering help.
icon refers to a resource that represents an icon.
index refers to a resource providing an index.
last refers to the last resource in a collection of resources.
license refers to a resource that defines the associated license.
meta refers to a resource that provides metadata.
next refers to the next resource (after the current one) in an ordered collection of resources.
p3pv1 refers to a P3P Policy Reference File P3P .
prev refers to a previous resource (before the current one) in an ordered collection of resources.
role indicates the purpose of the resource. See the XHTML Role Vocabulary for roles in this vocabulary space, and the XHTML Role Module for information on extending the collection of roles.
section refers to a resource serving as a section in a collection.
stylesheet refers to a resource serving as a stylesheet for a resource.
subsection refers to a resource serving as a subsection in a collection.
start refers to the first resource in a collection of resources.
up refers to a resource "above" in a hierarchically structured set.

Items from the XHTML Role Module

The following values are defined for use in the role attribute as specified in the XHTML Role Attribute Module:

banner contains the prime heading or internal title of a page.
secondary indicates that the section supports but is separable from the main content of resource.
contentinfo has meta information about the content on the page or the page as a whole.
definition indicates the definition of a term or concept.
main acts as the main content of the document.
navigation indicates a collection of items suitable for navigating the document or related documents.
note indicates the content is parenthetic or ancillary to the main content of the resource.
search indicates that the section provides a search facility.

ARIA 1.0 Pre-Defined Roles

A message with an alert or error information.
A separate window with an alert or error information.
A software unit executing a set of tasks for its users.
Allows for user-triggered actions.
A control that has three possible values, (true, false, mixed).
A table cell containing header information for a column.
Combobox is a presentation of a select, where users can type to locate a selected item.
Descriptive content for a page element which references this element via describedby.
A dialog is a small application window that sits above the application and is designed to interrupt the current processing of an application in order to prompt the user to enter information or require a response.
A list of references to members of a single group.
Content that contains related information, such as a book.
A grid contains cells of tabular data arranged in rows and columns (e.g., a table).
A gridcell is a table cell in a grid. Gridcells may be active, editable, and selectable. Cells may have relationships such as controls to address the application of functional relationships.
A group is a section of user interface objects which would not be included in a page summary or table of contents by an assistive technology. See region for sections of user interface objects that should be included in a page summary or table of contents.
A heading for a section of the page.
An img is a container for a collection elements that form an image.
Interactive reference to a resource (note, that in XHTML 2.0 any element can have an href attribute and thus be a link)
Group of non-interactive list items. Lists contain children whose role is listitem.
A list box is a widget that allows the user to select one or more items from a list. Items within the list are static and may contain images. List boxes contain children whose role is option.
A single item in a list.
A region where new information is added and old information may disappear such as chat logs, messaging, game log or an error log. In contrast to other regions, in this role there is a relationship between the arrival of new items in the log and the reading order. The log contains a meaningful sequence and new information is added only to the end of the log, not at arbitrary points.
A marquee is used to scroll text across the page.
Offers a list of choices to the user.
A menubar is a container of menu items. Each menu item may activate a new sub-menu. Navigation behavior should be similar to the typical menu bar graphical user interface.
A link in a menu. This is an option in a group of choices contained in a menu.
Defines a menuitem which is checkable (tri-state).
Indicates a menu item which is part of a group of menuitemradio roles.
A selectable item in a list represented by a select.
An element whose role is presentational does not need to be mapped to the accessibility API.
Used by applications for tasks that take a long time to execute, to show the execution progress.
A radio is an option in single-select list. Only one radio control in a radiogroup can be selected at the same time.
A group of radio controls.
Region is a large perceivable section on the web page.
A row of table cells.
A table cell containing header information for a row.
A line or bar that separates and distinguishes sections of content.
A user input where the user selects an input in a given range. This form of range expects an analog keyboard interface.
A form of Range that expects a user selecting from discrete choices.
This is a container for process advisory information to give feedback to the user.
A header for a tabpanel.
A list of tabs, which are references to tabpanels.
Tabpanel is a container for the resources associated with a tab.
Inputs that allow free-form text as their value.
A numerical counter which indicates an amount of elapsed time from a start point, or the time remaining until an end point.
A toolbar is a collection of commonly used functions represented in compact visual form.
A popup that displays a description for an element when a user passes over or rests on that element. Supplement to the normal tooltip processing of the user agent.
A form of a list having groups inside groups, where sub trees can be collapsed and expanded.
A grid whose rows can be expanded and collapsed in the same manner as for a tree.
An option item of a tree. This is an element within a tree that may be expanded or collapsed.

Possible non-text media relevant role keywords

layout or spacer
illustrative (indicates the image is merely an illustration of the surrounding text, adding no more meaning to the surrounding text)
albumphoto (a photo presented along with a collection of photos as an album or slideshow, either presented entirely within the same document or a collection of related documents)
satelliteimage
visualization (mathematic visualization like fractals, topological, etc)
chart (including graphs such as: bar chart, line graph, pie chart, organizational chart, bar chart)
geomap (a map of geography as opposed to a site map or other diagram)
text (styled text: the equivalent semantic markup should be presented OBJECT element contents, though obviously not when using the plaintext only alt attribute)
mathexpr (similar to richtext since few UAs support math XML vocabularies)
musicscore (similar to richtext since few UAs support music XML vocabularies)
livecam (for stills generated from a live webcam)
musicaccomp
spokenequivalent
interactive (for interactive multipmedia, e.g., an applet or flash based game)
camera (like photo for video to distinguish camera originated video from digitally generated video)
livecam (also for video stream as opposed to stills)

Each role keyword might correspond to different specific advice for alt text for a resource, allowing authors a simplified two-step process to providing text equivalents For example, some role keywords might require no alt text or text equivalent whatsoever. While on the other hand, something like role='portrait' might specify a list of the names of the individuals in the portrait from left to right (for ltr text): e.g., alt='Mona Lisa").

Relation to alt text replacement

The following table shows the relation of the alt text to the role keyword. Authors must include at least one of the following keywords on the element for each embedded resource. In some cases a null value for the alt text can be automatically inferred by UAs from the author designated role and conformance checkers can alert authors when the role and alt attributes are inconsistently specified. Conformance checkers can also provide focussed guidance to authors based on the role attribute keywords. The role attribute must always be specified, while the alt attribute might sometimes be null (note the various required, recommended and optional categories for alt text are only suggested as one possible approach the role attribute makes possible; these could all be required for strictness).

HTML5 Issue Collection and Requirements Drafting Index
XTech Wiki: Issues Which Cut Across Specific Working Groups & Domains
PF Working Group Member-Confidential Space
PF Working Group Public Web Space
Accessibility

ARIA: presentation role
ARIA: presentation role. The presentation role and its synonym none remove an element's implicit ARIA semantics from being exposed to the accessibility tree. The content of the element will still be available to assistive technologies; it is only the semantics of the container — and in some instance, required associated descendants — which ...
Email Table Attributes and Email Accessibility
Setting table roles to "presentation" uses Assistive Rich Internet Applications (ARIA) to tell screen readers how to interpret the table, so it can read it in a way that makes sense for the subscriber. If the tables are not set to "presentation," the screen reader will interpret the table as data, which means it will read out the HTML ...
What is the purpose of the "role" attribute in HTML?
The role attribute in HTML is used to provide semantic information to assistive technologies, such as screen readers, about the function of an element. This question explores the meaning and benefits of using role, as well as some common examples and pitfalls. Learn how to use role to enhance the accessibility and usability of your web pages.
Understanding the HTML Role 'Presentation' and Its Impact on Accessibility
Impact of role=" presentation" on specific HTML elements. 1.) Lists (ul, ol): Applying role=" presentation" to lists suggests that the listing gadgets do not convey a semantic order or hierarchy. This can be useful whilst builders use lists for layout roles in preference to representing a significant sequence.
Accessible Tables
In some instances, particularly with layout tables, one option to make them more accessible may be to add something like the role=presentation attribute. Adding the presentation role to an element makes it so that the screen reader will not read out structural html elements such as the header, table row or table column, but still read the ...
WAI-ARIA: role=presentation • DigitalA11Y
For example, a table element with a role of presentation will have the implicit native semantics of its caption element removed, because the caption is merely a label for the presentational table. Authors SHOULD NOT provide meaningful alternative text (for example, use alt="" in HTML) when the presentation role is applied to an image. Example 3
Hiding Semantics with the presentation Role
Common Uses of Role presentation. Three common uses of role presentation are: Hiding a decorative image; it is equivalent to giving the image null alt text. Suppressing table semantics of tables used for layout in circumstances where the table semantics do not convey meaningful relationships.
Using the presentation role
Description. Use the presentation role to remove semantic meaning from an element and any of its related child elements. For example, a table used for layout purposes could have the presentation role applied to the table element to remove any semantic meaning from the table element and any of its table related children elements, such as table headers and table data elements.
The Difference Between role="presentation" and aria-hidden="true"
The aria-hidden attribute has two states: true and false and they correspond to an element's state within the accessibility tree. aria-hidden="true" means the element is removed from the tree, and aria-hidden="false" means the element is present in the tree; the default state for an element is "false". Elements can be added or removed in ...
Document Structure Roles: Table Roles (Introduction to WAI-ARIA Part 3)
Document structure roles differ from landmark roles in that they describe smaller areas that organize content rather than the large sections landmark roles indicate. Table Roles The roles for tables all have corresponding semantic HTML elements, which are preferable to using the following roles on more generic elements.
Using ARIA
Using ARIA is a guide for web developers on how to apply the Accessible Rich Internet Applications (ARIA) standard to HTML elements. It explains the role, state, and property attributes that enhance the accessibility and interactivity of web content. It also provides examples of common ARIA patterns and best practices.
Using role="presentation" on HTML tables for special cases
HTML table example with role="presentation" on it. In this example, screen readers should not treat the data table as a table because role="presentation" removes those table semantics. For this technique to work the role="presentation" has to be in the table element itself, not on a wrapper div. ...
Accessibility Role, Name and Value
An accordion is considered a custom component. There is no standard HTML element to use here. Each accordion header should be a <button> or role="button": Good. It has the role of a button. It also has a name, the content of the div. To give this button a value, we need to tell assistive technologies that it is closed.
HTML Tutorial => role="presentation"
role="presentation" is an HTML attribute that tells assistive technologies to ignore the structure or role of an element. Learn how and when to use it with examples and tips.
Writing and remediating accessible tables in HTML documents
Writing and remediating accessible tables in HTML documents. Published March 2, 2023 Updated July 25, 2023. ... Tables can also be assigned a role of presentation, which strips it of its semantic value. In other words, it treats the table as if it were non-semantic element, such as an empty container. ...
Using ARIA
2.4 Fourth Rule of ARIA Use. Do not use role="presentation" or aria-hidden="true" on a focusable element . Using either of these on a focusable element will result in some users focusing on 'nothing'. Do not do this: < button role=presentation >press me</ button >.
Presentation Role Examples
Presentation Role Examples. PLEASE IGNORE THIS PAGE FOR NOW: This page is WIP that is just a mixed up pile of copy/pasted content, a few forward looking paragraphs/notes, etc.It is not worth reading for any purpose at this time. Issue 182 describes the purpose of and tracks the work associated with completing this page.. The following examples explain the various effects of the rules for using ...
How to Display SQL Data in HTML
HTML Tables. Create semantic, responsive & accessible HTML tables to represent your tabular data. Set CSS properties, generate the code and copy & paste into your project. ... In an era where attention spans are fleeting and information overload is rampant, the presentation of data plays a pivotal role. A user-friendly format enhances ...
Introducing GPT-4o: OpenAI's new flagship multimodal model now in
OpenAI, in partnership with Microsoft, announces GPT-4o, a groundbreaking multimodal model for text, vision, and audio capabilities. Learn more.
Tables Tutorial
Caption & Summary: A caption identifies the overall topic of a table and is useful in most situations. A summary provides orientation or navigation hints in complex tables. Some document formats other than HTML, such as PDF, provide similar mechanisms to markup table structures. Word processing applications may also provide mechanisms to markup ...
Iain Armitage says goodbye to his role on 'Young Sheldon'
Iain Armitage was 9 when 'Young Sheldon' began. Now, he's saying goodbye to his biggest role yet. Iain Armitage, left, and Jim Parsons on the set of "Young Sheldon.". The series finale ...
Whatever Happened To Costco's All-American Chocolate Cake?
But if numbers speak, Costco has done a tremendous job of turning a deaf ear. It was 2020 when Costco did the unthinkable and suspended the All-American Chocolate Cake. Once a 7-pound, fudge ...
RoleAttribute
if type is used to indicate the function of the image for machine processing, then the IMG MUST contain either aria-role="presentation" or aria-role="image"; if aria-role="presentation" is used, then the use of null alt constitutes valid use; if aria-role="image" is used, however, empty alt values or the lack of an alt attribute for the IMG are ...