html table presentation role

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

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]  -->

© 2023 Email on Acid Privacy Policy CCPA Terms and Conditions

• 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, 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.

<img src=”decorative-image.jpg” alt=”” role=”presentation”>

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.

<div class=”styling-container” role=”presentation”>

<!– 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.

<div class=”spacer” role=”presentation”></div>

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 role=”presentation”>

    <li>Item 1</li>

    <li>Item 2</li>

    <li>Item 3</li>

</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 role=”presentation”>

    <!– 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”.

<div aria-live=”assertive”>

    <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.

Leave a Reply Cancel reply

Save my name, email, and website in this browser for the next time I comment.

• Quick Links

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>

Table of Contents

• 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.

Similar Posts

WAI-ARIA: Role=Alert

  A message with important, and usually time-sensitive, information. Description A type of live region with important, and usually time-sensitive, information. See related alertdialog and status. Alerts are used to convey messages to alert the user. In the case of audio warnings this is an accessible alternative for a hearing-impaired user. The alert role goes…

WAI-ARIA: Role=Tabpanel

Description A container for the resources associated with a tab, where each tab is contained in a tablist. Authors SHOULD associate a tabpanel element with its tab, either by using the aria-controls attribute on the tab to reference the tab panel, or by using the aria-labelledby attribute on the tab panel to reference the tab….

WAI-ARIA: Role=Window

Description A browser or application window. Elements with this role have a window-like behavior in a graphical user interface (GUI) context, regardless of whether they are implemented as a native window in the operating system, or merely as a section of the document styled to look like a window. Note: In the description of this role,…

WAI-ARIA: Role=Option

A selectable item in a select list. Description A selectable item in a select list. Authors MUST ensure elements with role option are contained in, or owned by, an element with the role listbox. Options not associated with a listbox might not be correctly mapped to an accessibility API. Elements with the role option have an…

WAI-ARIA: Role=Directory

A list of references to members of a group, such as a static table of contents. Description A list of references to members of a group, such as a static table of contents.Authors SHOULD use this role for a static table of contents, whether linked or unlinked. This includes tables of contents built with lists,…

WAI-ARIA: Role=Landmark

A perceivable section containing content that is relevant to a specific, author-specified purpose and sufficiently important that users will likely want to be able to navigate to the section easily and to have it listed in a summary of the page. Such a page summary could be generated dynamically by a user agent or assistive…

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

Leave a Reply Cancel reply

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

Save my name, email, and website in this browser for the next time I comment.

• Skip to main content
• Select language
• Skip to search

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

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:.

• 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

• Español – América Latina
• Português – Brasil
• Tiếng Việt

HTML tables are used for displaying tabular data with rows and columns. The decision to use a <table> should be based on the content you are presenting and your users' needs in relation to that content. If data is being presented, compared, sorted, calculated, or cross-referenced, then <table> is probably the right choice. If you simply want to lay out non-tabular content neatly, such as a large group of thumbnail images, tables are not appropriate: instead, create a list of images and style the grid with CSS .

In this section, we are going to discuss all the elements that make up the table, along with some accessibility and usability features you should consider as you present tabular data. While Learn HTML isn't fundamentally about CSS, and there is an entire course dedicated to learning CSS , we will cover some table-specific CSS properties.

Table elements, in order

The <table> tag wraps the table content, including all the table elements. The implicit ARIA role of a <table> is table ; assistive technologies know this element is a table structure containing data arranged in rows and columns. If the table maintains a selection state, has two-dimensional navigation, or allows the user to rearrange cell order, set role="grid" . If the rows of the grid can be expanded and collapsed, use role="treegrid" instead.

Inside the <table> , you'll find the table headers ( <thead> ), table bodies ( <tbody> ), and, optionally, table footers ( <tfoot> ). Each of these is made up of table rows ( <tr> ). Rows contain table header ( <th> ) and table data ( <td> ) cells which, in turn, contain all the data. In the DOM, before any of this, you may find two additional features: the table caption ( <caption> ) and column groups ( <colgroup> ). Depending on whether or not the <colgroup> has a span attribute, it may contain nested table column ( <col> ) elements.

The table's children are, in order:

• <caption> element
• <colgroup> elements
• <thead> elements
• <tbody> elements
• <tfoot> elements

We'll cover the <table> elements' children, which are all optional but recommended, then take a look at rows, table header cells, and table data cells. The <colgroup> will be covered last.

Table caption

Being a native, semantic element, <caption> is the preferred method of giving a name to a table. The <caption> provides a descriptive, programmatically associated table title. It is visible and available to all users by default.

The <caption> element should be the first element nested in the <table> element. Including it lets all users know the purpose of the table immediately without having to read the surrounding text. Alternatively, you can use aria-label or aria-labelledby on the <table> to provide an accessible name as the caption. The <caption> element has no element-specific attributes.

The caption appears outside the table. The location of the caption can be set with the CSS caption-side property, which is a better practice than using the deprecated align attribute. This can set the caption to the top and bottom. The left and right side positioning, with inline-start and inline-end , are not yet fully supported. Top is the default browser presentation.

Preferably, data tables should have clear headers and a caption, and be simple enough to be almost self-explanatory. Bear in mind that not all users have the same cognitive abilities. When the table is "making a point", or otherwise needs interpretation, provide a brief summary of the main point or function of the table. Where that summary is placed depends on its length and complexity. If brief, use it as the inner text of the caption. If longer, summarize it in the caption, and provide the summary in the paragraph preceding the table, associating the two with the aria-describedby attribute. Putting the table in a <figure> and putting the summary in the <figcaption> is another option.

Data sectioning

The content of tables is made up of up to three sections: zero or more table headers ( <thead> ) , table bodies ( <tbody> ), and table footers ( <tfoot> ). All are optional, with zero or more of each being supported.

These elements don't help or hinder the accessibility of the table, but they are useful in terms of usability. They provide styling hooks. For example, the header contents can be made sticky , while the <tbody> contents can be made to scroll. Rows not nested in one of these three containing elements are implicitly wrapped in a <tbody> . All three share the same implicit role rowgroup . None of these three elements has any element-specific attributes.

What we have so far:

The <tfoot> element was originally specified to come right after the <thead> and before the <tbody> for accessibility reasons, which is why you may come across this non-intuitive source order in legacy codebases.

Table content

Tables can be divided into table headers, bodies, and footers, but none of these really does anything if the tables do not contain table rows, cells, and content. Each table row, <tr> contains one or more cells. If a cell is a header cell, use <th> . Otherwise, use <td> .

User-agent stylesheets generally display the content in a <th> table header cell as centered and bold. These default styles, and all styling, are best controlled with CSS instead of the deprecated attributes that used to be available on individual cells, rows, and even the <table> .

There were attributes to add padding between cells and within cells, for borders, and for text alignment. Cellpadding and cellspacing, which define the space between the content of a cell and its border, and between the borders of adjacent cells, should be set with the CSS border-collapse and border-spacing properties, respectively. Border-spacing will have no effect if border-collapse: collapse is set. If border-collapse: separate; is set, it's possible to hide empty cells completely with empty-cells: hide; . To learn more about styling tables, here's an interactive slidedeck of table-related CSS styles .

In the examples, we've added a border on the table and each individual cell with CSS to make some features more apparent:

In this example, we have a caption, a table header, and a table body. The header has one row containing three header <th> cells, thereby creating three columns. The body contains three rows of data: the first cell is a header cell for the row, so we use <th> instead of <td> .

The <th> cell has semantic meaning, with implicit ARIA roles of columnheader or rowheader . It defines the cell as the header for the column or row of table cells, depending on the value of the enumerated scope attribute. The browser will default to col or row if scope is not explicitly set. Because we have used semantic markup, the 1956 cell has two headers: Year and Lou Minious. This association tells us that "1956" is the "year" of graduation for "Lou Minious". In this example, as we can see the entire table, the association is visually apparent. Using <th> provides the association even when the header column or row has scrolled out of view. We could have explicitly set <th scope="col">Year</th> and <th scope="row">Lou Minious</th> but with a simple table like this, the enumerated default values work. Other values for scope include rowgroup and colgroup , which are useful with complex tables.

Merging cells

Similar to MS Excel, Google Sheets, and Numbers, it is possible to join multiple cells into a single cell. This is done with HTML! The colspan attribute is used to merge two or more adjacent cells within a single row. The rowspan attribute is used to merge cells across rows, being placed on the cell in the top row.

In this example, the table header contains two rows. The first header row contains three cells spanning four columns: the middle cell has colspan="2" . This merges two adjacent cells. The first and last cells include rowspan="2" . This merges the cell with the cell in the adjacent row, immediately beneath it.

The second row in the table header contains two cells; these are the cells for the second and third columns in the second row. No cell is declared for the first or last column as the cell in the first and last columns in the first row span two rows.

In cases where a cell is defined by multiple header cells with associations that cannot be set by the scope attributes alone, include the headers attribute with a space-separated list of the associated headers. As this example is a more complex table, we explicitly define the scope of the headers with the scope attribute. To be even clearer, we added the headers attribute to each cell.

The headers attributes were possibly not necessary in such a simple use case, but they are important to have in your toolbelt as your tables grow in complexity. Tables with complex structures, such as tables where headers or cells are merged or with more than two levels of column or row headers, require explicit identification of associated header cells. In such complex tables, explicitly associate each data cell with each corresponding header cell with a list of space-separated id values of all the associated headers as the value of the headers attribute.

The headers attribute is more commonly found on <td> elements, but is also valid on <th> .

That said, complex table structures can be difficult for all users, not just screen reader users, to understand. Cognitively and in terms of screen reader support, simpler tables, with few to no spanned cells, even without adding scope and headers, are more easily understood. They're also easier to manage!

Styling tables

There are two relatively obscure elements that were briefly mentioned: the column group, <colgroup> , element and its only descendant, the empty <col> column element. The <colgroup> element is used to define groups of columns, or <col> elements, within a table.

If used, the column grouping should be nested in the <table> , immediately after the <caption> and before any table data. If they span more than one column, use the span attribute.

The content outline order for a table is generally as follows, with <table> and <caption> being the two elements that should be included:

Neither <colgroup> nor <col> has semantic meaning in terms of helping to make the table more accessible, but they do allow for limited column styling, including setting a width for the column with CSS.

<col> styles will style a column as long as there are no <td> or <th> styles that override that styling. For example, when <colspan> is used to merge cells in some rows of a table but not all, you can't be sure that a selector such as tr > *:nth-child(8) , which selects the 8th child of every row, will highlight the 8th column in full or will highlight the 8th column for several rows, but with a smattering of 9th and 10th column cells, depending on what row or column cells were merged.

Unfortunately, only a few properties are supported, the styles aren't inherited into the cells, and the only way of using the <col> element in targeting cells is with a complex selector including the :has() relational selector .

If both the <table> and the <colgroup> have a background color, the background-color of the <colgroup> will be on top. The order of drawing is: table, column groups, columns, rowgroups, rows, with cells last and on top, as shown in the schema of table layers . The <td> and <th> elements are not descendants of <colgroup> or <col> elements, and do not inherit their styling.

To stripe a table, CSS structural selectors come in handy. For example, tbody tr:nth-of-type(odd) {background-color: rgba(0 0 0 / 0.1);} will add a translucent black to each odd row in the body of the table, letting any background effects that are set on <colgroup> show through.

Tables are not responsive by default. Rather, they are sized according to their content by default. Extra measures are needed to get table layout styling to effectively work across a variety of devices. If you are changing the CSS display property for table elements , include ARIA role attributes. While that may sound redundant, the CSS display property can affect the accessibility tree in some browsers.

Presenting data

Table elements have semantic meanings that are used by assistive technologies to enable navigating through the rows and columns without getting 'lost'. The <table> element should not be used for presentation. If you need a heading over a list, use a header and a list . If you want to lay out content in many columns, use multi-column layout . If you want to lay out content in a grid, use CSS grid . Only use a table for data. Think of it this way: if your data requires a spreadsheet in order to be presented at a meeting, use <table> . If you would like to use the features available in presentation software like Keynote or Powerpoint, you probably need a description list .

While sorting table columns is the purview of JavaScript, marking up your headers to let users know the column is sortable is the purview of HTML. Let your users know the table columns are sortable with iconography showing ascending, descending, or unsorted. The column currently sorted should include the aria-sort attribute with the enumerated value of the sort direction. The <caption> can politely announce updates to sort order via aria-live and a span that is dynamically updated, and which is visible to screen reader users. As the column is sortable by clicking on the header content, the header content should be a <button> .

If you're not presenting tabular data, don't use a <table> . If you do use a table for presentation, set role="none" .

Many developers use tables to lay out forms but there is no need to. But you do need to know about HTML forms, so we will cover that next.

Check your understanding

Test your knowledge of tables.

Which element is used to mark up cells that are headings?

Which information is likely to be suitable for layout with a table?

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License , and code samples are licensed under the Apache 2.0 License . For details, see the Google Developers Site Policies . Java is a registered trademark of Oracle and/or its affiliates.

Last updated 2022-12-08 UTC.

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

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.

HTML Tutorial

Html graphics, html examples, html references, html tables.

HTML tables allow web developers to arrange data into rows and columns.

Define an HTML Table

A table in HTML consists of table cells inside rows and columns.

A simple HTML table:

Table Cells

Each table cell is defined by a <td> and a </td> tag.

td stands for table data.

Everything between <td> and </td> are the content of the table cell.

Note: A table cell can contain all sorts of HTML elements: text, images, lists, links, other tables, etc.

Advertisement

Each table row starts with a <tr> and ends with a </tr> tag.

tr stands for table row.

You can have as many rows as you like in a table; just make sure that the number of cells are the same in each row.

Note: There are times when a row can have less or more cells than another. You will learn about that in a later chapter.

Table Headers

Sometimes you want your cells to be table header cells. In those cases use the <th> tag instead of the <td> tag:

th stands for table header.

Let the first row be table header cells:

By default, the text in <th> elements are bold and centered, but you can change that with CSS.

HTML Exercises

Test yourself with exercises.

Add a table row with two table headers.

The two table headers should have the value "Name" and "Age".

Start the Exercise

HTML Table Tags

For a complete list of all available HTML tags, visit our HTML Tag Reference .

Video: HTML Tables

Styling Tables Filter Table Sort Table Responsive Table Zebra Striped Table

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]

Top Tutorials

Top references, top examples, get certified.

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 .

What is html in computer science?

HTML, short for HyperText Markup Language, is a fundamental programming language used in computer science to structure the content of websites. It serves as the backbone of the World Wide Web, allowing web browsers to interpret and display text, images, videos, and other multimedia elements. HTML provides a standardized format for creating and presenting web pages, enabling users to navigate through information seamlessly.

What is HTML in computer science?

HTML, the acronym for HyperText Markup Language, is a programming language used in computer science to structure and organize the content of web pages. It provides a standardized syntax to define the layout, presentation, and functionality of websites.

1. What is the purpose of HTML?

HTML’s primary purpose is to define the structure and layout of web pages, including headings, paragraphs, images, hyperlinks, tables, forms, and more.

2. How does HTML work?

HTML uses a series of markup tags to structure the content of a webpage. These tags are interpreted by web browsers to understand how to display the various elements of the page.

3. Is HTML a programming language or markup language?

HTML is a markup language rather than a traditional programming language. It focuses on defining the structure and presentation of content, whereas programming languages are used to create software applications.

4. Who invented HTML?

HTML was invented by British computer scientist Tim Berners-Lee in 1989 while working at CERN, the European Organization for Nuclear Research.

5. What are the basic HTML tags?

Some of the basic HTML tags include , , , ,

HTML can display graphics and videos by using the tag for images and the tag for videos. It supports various image and video formats.

7. Is HTML case-sensitive?

HTML is not case-sensitive, meaning that uppercase and lowercase letters have no impact on the functioning of HTML tags. However, it is considered a best practice to use lowercase letters for consistency and readability.

8. Can HTML be used for web development?

HTML is a fundamental language in web development. While it defines the structure and presentation of web pages, it often works in conjunction with CSS (Cascading Style Sheets) and JavaScript to provide more dynamic and interactive web experiences.

9. Can HTML be used in mobile app development?

While HTML can be used in mobile app development, it is typically combined with other technologies like CSS and JavaScript within frameworks such as Cordova or React Native to create hybrid or cross-platform mobile applications.

10. Does HTML support animation?

HTML supports basic animations through the use of CSS and JavaScript. CSS animations allow for the gradual transition of HTML elements, while JavaScript enables more complex animations and interactions.

11. Is HTML constantly evolving?

Yes, HTML is constantly evolving. The latest version, HTML5, introduced many new features and improvements, including enhanced multimedia support, canvas for graphics, APIs for 2D/3D rendering, and better accessibility options.

12. Can HTML be used for data input and processing?

HTML includes various form elements, such as , , and , which can be used to collect user input. However, for advanced data processing, a server-side language like PHP or JavaScript may be used in conjunction with HTML.

HTML plays a vital role in computer science, enabling the creation and presentation of web content. By mastering the basics of HTML, one can begin their journey in web development and gain a deeper understanding of how websites are built and structured.

Leave a Comment Cancel Reply

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

Save my name, email, and website in this browser for the next time I comment.

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 role presentation by illustrating how they change a browser's accessibility tree.

Image Examples

When role presentation is applied to an image, the image is completely hidden from assistive technologies. In fact, in the case of image, role="presentation" is equivalent to aria-hidden="true" . On the other hand, when a heading is presentational, the heading semantic is removed and the inner text of the heading is exposed as plain text. Illustrating these affects in terms of how they alter the accessibility tree reveals how these two results are entirely consistent.

The resulting accessible tree is shown below. Note that none of the spacer <img> elements are present.

• [text] Other Histories of Architecture
• [text] Ancient Roman Architecture
• [text] 19th Century Italian Architecture
• [text] Modern Buildings more than 100 Years Old
• [text] Modern Building Design

role="presentation" hides the image from the accessibility API and does not publish the alt attribute contents.

The first header element is absent from the accessible tree for the above example, but its text appears. The second header element is present as a heading . The img element is not exposed at all:

• [text] Presentation role overrides Header role
• [text] Another header

Be aware that the markup <img role="presentation" alt="non-empty alt text"…> is in fact contradictory: Declaring a role of presentation says that the image is for layout, is decorative and meaningless, whereas the non-empty alt text implies that the image is meaningful. It is recommended that authors instead use empty alt text ( alt="html table presentation role" ) where they use role="presentation" .

Table example

All table specific elements (table, tr, td, etc.) are eliminated from the tree by inheriting the presentation role, but other elements and textual content in the table cells are exposed:

• [text] Some text
• [text] Paragraph
• [name] meaningful image

• Contact Overview

CENTER FOR NATIVE AMERICAN AND INDIGENOUS RESEARCH

• 6th Annual Research Symposium

FRIDAY: ELEVATING TRIBAL KNOWLEDGE EXCHANGE

Friday, May 17th 11 AM - 12 PM

Elevating tribal knowledge exchange: honoring cnair fellows, affiliates, community and tribal college scholars , research posters, mini-presentations, and round tables , research fellows, faculty, graduate students, undergraduate students from northwestern, tribal colleges and local partnership organizations will be sharing and presenting their indigenous-focused work, mini-presentations/poster sessions (1st floor music room) .

11:00 AM - 11:15 AM - Anti-Colonial Dramaturgy: Indigenous Temporality in Dramaturgical Practice

• Presenter: Sierra Rosetta (Lac Courte Oreilles), PhD Student,  Theatre
• Keywords: Anti Colonial dramaturgy, practice, theory, NAIS, methods

11:30 A M -   Weave to Stitch: Indigenous Studies as a Critical Lens   (Pre-recorded presentation) 

• Presenter: Coredlia Rizzo (PhD Candidate, Performance Studies) 
• Keywords:   Indigenous methodologies, object performance, queer muxe

11:45 AM -   Indigenous Research Methods, Nexus Research and Rights-Based Approaches

(Pre-recorded presentation) 

• Presenter: Reynaldo Morales Cardenas (Assistant Professor, Medill School of Journalism) 
• Keywords: Indigenous, journalism, nexus

Research Poster

11 AM -12 PM  - Indigenous Methods and Reparative Creativity from Prison

Presenters: Stateville Cohort 3 Students, RTVF 398: Indigenous Studies and the Moving Image

• Northwestern Prison Education Program - The students in the third cohort of the Northwestern Prison Education Program at the Stateville Correctional Center are strong academics who will receive a Bachelor of Science degree upon completing the program. The RTVF 398 course is taught by Michael Anthony Turcios who is Faculty in RTVF and a CNAIR affiliate. 
• Keywords: Speculative creativity, Indigenous methods, reparative stories, incarceration

Roundtables (1st Floor Tea Room)

1. what is an indigenous book: reflections from student research, student presenters:.

• Alivia Britton (Odawa/Potawatomi)
• Toubby Chau, Naomi Gizaw
• Athena GoingSnake (Cherokee Nation/Muscogee Creek)
• Stephanie Marin
• Faculty chair: Professor Kelly Wisecup (English/CNAIR affiliate)

Keywords: Indigenous literatures; archives and exhibits; pedagogy; student presentations

Roundtables (2nd floor ballroom), 2.  exploring native student affairs: navigating roles and realities.

Presenters:

• Aaron Golding (Seneca), Associate Director, MSA, Northwestern University
• Alexis Syrette (Ojibwe, Odawa, Mohawk), Assistant Director, Native American Support Program, UIC
• Bobbi Skenandore (Oneida Nation), Program Coordinator, Indigenous Student Center, University of Wisconsin-Madison
• Andrea Wilkerson (Aamjiwnaang First Nation of Sarnia), Assistant Director of Native American Student Enrichment and Belgoning, University of Michigan 

Keywords: Supporting Indigenous Students Outside the Classroom

3.  historical repertoires then & now: against the grain theatre's operatic indigenous activism.

• Keary Watts (Department of Theatre at Northwestern)
• Caroline Gleason-Mercier (Specialist in women-composed opera)
• & Tracy C. Davis (Barber Professor Performing Arts) 

Keywords: performance; historical repertoires; indigenous arts; opera; theatre; Northern-led performance practice; activism

4. Community Engaged Research Roundtable - Feinberg School of Medicine Partners 

Presenters: Gregory Phillips II (Feinberg School of Medicine) &  Edith Freeze (Pachacamak Foundation) 

•  Keywords: Community Engagement; Public Health; LGBTQ
• Keywords: Environmental Stewardship, Indigenous Wisdom, Microplastic Pollution Community, Engagement Sustainable Practices

5. Native American and Indigenous Studies & History Roundtable 

Presenters: Reese Rosental Saporito (Legal Studies, Science in Human Culture, and Native American and Indigenous Studies) & Juliana Sexauer (JD-Ph.D. Student, Religious Studies)

• Keywords: discovery doctrine, land, Puritanism, law
• Keywords: Education, Native Studies Reform, Decolonizing Teaching

6.    Airing our "Dirty" Laundry: Talking about Resilience

• Jeff Feng (Manoomin Collective Postdoc)
• Kimberly Marion Suiseeya (Associate Professor, Political Science)
• Jennifer Michals (Manoomin Collective Project Manager)
• Aaron Packman (Professor, Environmental Engineering) 

Keywords: Resilience, Climate Justice, Sovereignty

Internet Explorer Alert

It appears you are using Internet Explorer as your web browser. Please note, Internet Explorer is no longer up-to-date and can cause problems in how this website functions This site functions best using the latest versions of any of the following browsers: Edge, Firefox, Chrome, Opera, or Safari . You can find the latest versions of these browsers at https://browsehappy.com

• Publications
• HealthyChildren.org

Shopping cart

Order Subtotal

Your cart is empty.

Looks like you haven't added anything to your cart.

Career Resources

• Philanthropy
• About the AAP
• Infant Feeding for Persons Living With and at Risk for HIV in the United States: Clinical Report
• Research on HIV transmission through breastfeeding spurs update to AAP guidance
• Breastfeeding for People with HIV: AAP Policy Explained
• American Academy of Pediatrics Shifts Position on Breastfeeding for People with Human Immunodeficiency Virus
• News Releases
• Policy Collections
• The State of Children in 2020
• Healthy Children
• Secure Families
• Strong Communities
• A Leading Nation for Youth
• Transition Plan: Advancing Child Health in the Biden-Harris Administration
• Health Care Access & Coverage
• Immigrant Child Health
• Gun Violence Prevention
• Tobacco & E-Cigarettes
• Child Nutrition
• Assault Weapons Bans
• Childhood Immunizations
• E-Cigarette and Tobacco Products
• Children’s Health Care Coverage Fact Sheets
• Opioid Fact Sheets
• Advocacy Training Modules
• Subspecialty Advocacy Report
• AAP Washington Office Internship

Online Courses

• Live and Virtual Activities
• National Conference and Exhibition
• Prep®- Pediatric Review and Education Programs
• Journals and Publications
• NRP LMS Login
• Patient Care
• Practice Management
• AAP Committees
• AAP Councils
• AAP Sections
• Volunteer Network
• Join a Chapter
• Chapter Websites
• Chapter Executive Directors
• District Map
• Create Account
• News from the AAP
• Latest Studies in Pediatrics
• Pediatrics OnCall Podcast
• AAP Voices Blog
• Campaigns and Toolkits
• Spokesperson Resources
• Join the AAP
• Exclusive for Members
• Membership FAQs
• AAP Membership Directory
• Member Advantage Programs
• Red Book Member Benefit
• My Membership
• Join a Council
• Join a Section
• National Election Center
• Medical Students
• Pediatric Residents
• Fellowship Trainees
• Planning Your Career
• Conducting Your Job Search

Making Career Transitions

• COVID-19 State-Level Data Reports
• Children and COVID-19 Vaccination Trends
• Practice Research in the Office Setting (PROS)
• Pediatrician Life and Career Experience Study (PLACES)
• Periodic Survey
• Annual Survey of Graduating Residents
• Child Population Characteristics Trends
• Child Health Trends
• Child Health Care Trends
• Friends of Children Fund
• Tomorrow’s Children Endowment
• Disaster Recovery Fund
• Monthly Giving Plans
• Honor a Person You Care About
• Donor-Advised Funds
• AAP in Your Will
• Become a Corporate Partner
• Employment Opportunities
• Equity and Inclusion Efforts
• RFP Opportunities
• Board of Directors
• Senior Leadership Team
• Constitution & By-Laws
• Strategic Plan

Log In to Your Account

Access your account, the AAP Member Directory, transcripts and more. Already logged in? Find your Account here.

Collaborate

Connect with other AAP members and explore the AAP communities you belong to.

Become a Member

Not a member yet? Learn more about the benefits of AAP membership.

What's New at the AAP

Research on hiv transmission through breastfeeding spurs update to aap guidance, 33rd edition of the red book is now available. order today, register for the 2024 national conference and exhibition, aap announces candidates for president-elect, learning opportunities.

Continuing Medical Education from AAP helps you stay current in practice and provides tools and resources for every stage of your career.

Live & Virtual Events

Neonatal resuscitation program®.

From your time as a medical student to becoming a pediatric resident and beyond, there are resources and opportunities only available through AAP.

Physician Health & Wellness

Equity, Diversity, and Inclusion

From the beginning, the American Academy of Pediatrics has been guided by its mission to ensure the health and well-being of all children. This includes promoting nurturing, inclusive environments and actively opposing intolerance, bigotry, bias, and discrimination. 

Our Equity Agenda  

Global Health

We work for every child's future. The AAP's global mission is to attain optimal physical, mental, and social health and well-being for all children around the world. 

Our Global Initiatives

You have the power to change a life. The AAP is dedicated to the health of all children and the pediatric professionals who care for them. Your gift today makes that possible. 

More AAP Resources

Journals & publications.

The American Academy of Pediatrics is the leading publisher, globally, in the field and practice of Pediatrics.

shopAAP is the official store of the American Academy of Pediatrics. All purchases directly benefit and support the health and well-being of all infants, children, adolescents, and young adults. Find a new look and feel now on shopAAP!

• CPA NEW SYLLABUS 2021
• KCSE MARKING SCHEMES
• ACTS OF PARLIAMENT
• UNIVERSITY RESOURCES PDF
• CPA Study Notes
• INTERNATIONAL STANDARDS IN AUDITING (ISA)
• Teach Yourself Computers

KNEC / TVET CDACC STUDY MATERIALS, REVISION KITS AND PAST PAPERS

Quality and Updated

KNEC, TVET CDACC NOTES AND PAST PAPERS

DIPLOMA MATERIALS

• KNEC NOTES –  Click to download
• TVET CDACC PAST PAPERS – Click to download

CERTIFICATE MATERIALS

• KNEC CERTIFICATE NOTES – Click to download

Microsoft Dynamics 365 Blog

Microsoft and LinkedIn release the 2024 Work Trend Index on the state of AI at work  

For our fourth annual Work Trend Index, out today, we partnered with LinkedIn for the first time on a joint report so we could provide a comprehensive view of how AI is not only reshaping work, but the labor market more broadly.

2024 release wave 1 kicks off with hundreds of AI-powered capabilities for Microsoft Dynamics 365 and Microsoft Power Platform  

Introducing microsoft copilot for finance: transform finance with next-generation ai in microsoft 365  , microsoft copilot for sales and copilot for service are now generally available  .

• Business Decision Makers
• News and product updates
• Dynamics 365 Business Central

Work smarter with Microsoft Copilot in Dynamics 365 Business Central  

In the quickly changing world of AI, Microsoft Dynamics 365 Business Central is leading the way with innovations that have equipped more than 30,000 small and medium-sized businesses to succeed. Powered by next-generation AI, Microsoft Copilot in Dynamics 365 Business Central introduces new ways to streamline workflows, boost productivity, and unlock creativity.

• Dynamics 365 Field Service

Enabling fast, flexible, cost-effective service with Microsoft Copilot in Dynamics 365 Field Service  

Fast, efficient service, it’s what everybody wants. And today’s field service organizations are answering the call by adopting next-generation AI technologies that can help them be more flexible and responsive to customers while also driving revenue, reducing overtime, and ensuring more predictable arrival and completion times.

• Thought leadership
• Dynamics 365 Guides

Early adopters of Microsoft Copilot in Dynamics 365 Guides recognize the potential for productivity gains  

The integration of Microsoft Copilot into Dynamic 365 Guides brings generative AI to this mixed reality solution. Copilot for Dynamics 365 Guides transforms frontline operations, putting AI in the flow of work, giving skilled and knowledge workers access to relevant information where and when they need it.

• Dynamics 365 Customer Insights

2024 release wave 1: Transforming experiences with Microsoft Copilot and Dynamics 365  

In this extraordinary age of AI, we find ourselves on the brink of a profound revolution. Companies are looking for generative AI to solve longstanding problems around customer connection, loyalty, and seller productivity.

Microsoft unveils AI features for manufacturers at Hannover Messe 2024  

At Hannover Messe, the world’s leading industrial trade fair, organizations across engineering, digital technologies, energy, and more will gather to demonstrate solutions for high-performance, sustainable industries. Microsoft is honored to attend this year’s event to showcase how Microsoft Dynamics 365 helps manufacturers.

Introducing new Microsoft Copilot capabilities to optimize Dynamics 365 Field Service operations    

Delivering exceptional service is key for building customer preference and loyalty. Today, we’re introducing new capabilities for Microsoft Copilot in Dynamics 365 Field Service that help service managers and technicians efficiently find the information they need to resolve issues right the first time while keeping customers updated at every step of the process.

• Dynamics 365 Customer Service​

AI-powered innovations enhance customer service with 2024 release wave 1  

We’re excited to announce the general availability of new and enhanced experiences in Microsoft Dynamics 365 Customer Service as part of our 2024 release wave 1 cadence. This release focuses on extending Microsoft Copilot capabilities by infusing generative AI into customer, agent, and supervisor experiences.

New pricing for Microsoft Dynamics 365 effective October 2024  

Today, we’re announcing the first pricing update for Microsoft Dynamics 365 in more than five years. Since our last pricing update, Dynamics 365 has transformed customer relationship management (CRM) and enterprise resource planning (ERP) with connected applications for every line of business—across marketing, sales, customer service and field service, finance, operations, and supply chain—and each year, we release hundreds of new features and enhancements designed to help people work smarter, reclaim time, and collaborate seamlessly.

• Dynamics 365 Sales

New Microsoft Dynamics 365 and Microsoft Copilot innovations for supply chain, sales, and service join the 2024 release wave 1  

Sellers, service agents, and supply chain professionals share a common goal: delivering quality goods and services to customers on time, every time. Today, we’re announcing new experiences for Microsoft Dynamics 365 that help professionals across business functions to collaboratively solve challenges, streamline workflows, and focus on what matters most—key factors for transformative customer experiences.

Revolutionizing marketing workflows with Copilot in Dynamics 365 Customer Insights  

In the ever-evolving landscape of generative AI, a copilot isn't just a companion that makes tasks that you’re already doing at work easier, but it's quickly becoming a transformative force reshaping the very core of how things are done.

• Analyst reports

Forrester TEI study shows 315% ROI when modernizing customer service with Microsoft Dynamics 365 Customer Service  

We are pleased to share the results of a March 2024 Forrester Consulting Total Economic Impact (TEI) Study commissioned by Microsoft. Forrester calculates Dynamics 365 Customer Service delivered benefits of $14.70 million over three years to a composite organization.

Explore the next wave of AI innovation at the Microsoft Business Applications Launch Event  

Join Microsoft product leaders and engineers on April 10, 2024 for an in-depth look at the latest AI features and capabilities in Dynamics 365 and Microsoft Power Platform.

Découvrir, comprendre, créer, partager

Bijoux et littérature

Quand l'écrivain frappe le mot, le joaillier cisèle des matériaux tout aussi précieux. Mettre en regard leurs ouvrages respectifs offre de nouvelles clefs pour aborder littérature et monde du bijou. Un dossier qui éclaire les côtes d’un continent au confluent de deux disciplines artistiques qui ont beaucoup à dire et à se dire.

Bienvenue sur Les Essentiels

Le nouveau site des ressources culturelles et pédagogiques de la bibliothèque nationale de france.

Déchiffrer les hiéroglyphes avec Champollion , suivre les pas d' Ulysse , vivre l'aventure du roi Arthur , en apprendre plus sur les estampes japonaises , la presse ou la laïcité : nos dossiers vous invitent à mieux comprendre les cultures et les sociétés. Un portail enrichi régulièrement !

1 008 articles

14 050 images

En ce moment

L'Invention de la Renaissance   : l'humaniste, le prince et l'artiste

Entre le 14 e et le 16 e siècle, l’Europe connaît un renouveau intellectuel, artistique et scientifique sans précédent. Désignée plus tard sous le nom d’«   humanisme   », une culture s’invente, marquée par un nouveau rapport au savoir et un retour aux sources gréco-latines. Plongez dans l'Italie des humanistes à l'occasion de l'exposition présentée sur le site Richelieu de la Bibliothèque nationale de France jusqu'au 16 juin 2024.

Notre sélection