Alt text for Images, Banners and Slides for better accessibility and SEO

[manavluhar]

Description (*)

• SEO Fieldset in Page Builder Image / Banner / Slide

• Banner SEO in frontend

• Slider SEO in Frontend

• Image is already having SEO functionality

Story

• 746 Alt text for Images

Fixed Issues (if relevant)

1. magento/magento2-page-builder#746: Alt text for Images

Manual testing scenarios (*)

• By going inside Admin Panel -> CONTENT -> Pages -> Edit Home page open Content section and click on Edit with Page Builder button.
  • Add New Banner/Add New Slider -> Hover on the Banner Area / Edit Slide -> Click On ⚙️[Edit] Here admin can find Search Engin Optimization Fieldset.
  • Inside Search Engin Optimization Fieldset Alternative Text and Title Attribute fields will be there.
  • After filling required fields, One can check by going to the Storefront -> Home page and inspect Banner / Slide / Image and check that Alternative Text and Title Attribute will be there which makes PageBuilder content accessible and SEO optimized

    Questions or comments

Checklist

• [x] Pull request has a meaningful description of its purpose
• [x] All commits are accompanied by meaningful commit messages
• [x] All new or changed code is covered with unit/integration tests (if applicable)
• [ ] README.md files for modified modules are updated and included in the pull request if any README.md predefined sections require an update
• [x] All automated tests passed successfully (all builds are green)

[manavluhar]

@magento run all tests

[magento-automated-testing[bot]]

The requested builds are added to the queue. You should be able to see them here within a few minutes. Please re-request them if they don't show in a reasonable amount of time.

[manavluhar]

@magento run Functional Tests B2B, Functional Tests CE, Unit Tests

[magento-automated-testing[bot]]

The requested builds are added to the queue. You should be able to see them here within a few minutes. Please re-request them if they don't show in a reasonable amount of time.

[manavluhar]

@magento run Functional Tests B2B

[magento-automated-testing[bot]]

The requested builds are added to the queue. You should be able to see them here within a few minutes. Please re-request them if they don't show in a reasonable amount of time.

[manavluhar]

@magento run Unit Tests

[magento-automated-testing[bot]]

The requested builds are added to the queue. You should be able to see them here within a few minutes. Please re-request them if they don't show in a reasonable amount of time.

[sidolov]

@magento run Unit Tests

[magento-automated-testing[bot]]

The requested builds are added to the queue. You should be able to see them here within a few minutes. Please re-request them if they don't show in a reasonable amount of time.

[manavluhar]

Sure @sidolov will do that! 🙌

[manavluhar]

@magento run all tests

[magento-automated-testing[bot]]

The requested builds are added to the queue. You should be able to see them here within a few minutes. Please re-request them if they don't show in a reasonable amount of time.

[manavluhar]

@magento run Functional Tests B2B, Functional Tests CE, Functional Tests EE, Unit Tests

[magento-automated-testing[bot]]

The requested builds are added to the queue. You should be able to see them here within a few minutes. Please re-request them if they don't show in a reasonable amount of time.

[sdzhepa]

UPDATE on 11 Nov 2021

This PR requires additional discussion with PO

• images already have ALT attributes
• adding ALT attribute allowed only to the <image> tag, but not for <div> https://www.w3schools.com/tags/att_alt.asp

Admin Side

New Section "Search Engine Optimization" was added to the Banner and Slider PageBuilder content types. The section contains new fields/settings: "Alternative Text" and " Title Attribute"

• Was tested that these options exist and Admin users can edit them.
• Was tested these attributes are available(shown) on the Storefront

Banner

Slider(available per each slide)

Storefront Side

Banner

Slider(available per each slide)

[sidolov]

@magento run all tests

[magento-automated-testing[bot]]

The requested builds are added to the queue. You should be able to see them here within a few minutes. Please re-request them if they don't show in a reasonable amount of time.

[sidolov]

@magento run all tests

[magento-automated-testing[bot]]

The requested builds are added to the queue. You should be able to see them here within a few minutes. Please re-request them if they don't show in a reasonable amount of time.

[sidolov]

@magento run all tests

[magento-automated-testing[bot]]

The requested builds are added to the queue. You should be able to see them here within a few minutes. Please re-request them if they don't show in a reasonable amount of time.

[sidolov]

@magento run all tests

[magento-automated-testing[bot]]

The requested builds are added to the queue. You should be able to see them here within a few minutes. Please re-request them if they don't show in a reasonable amount of time.

[sidolov]

@magento run all tests

[magento-automated-testing[bot]]

The requested builds are added to the queue. You should be able to see them here within a few minutes. Please re-request them if they don't show in a reasonable amount of time.

[sidolov]

@magento run Functional Tests B2B,Unit Tests

[magento-automated-testing[bot]]

The requested builds are added to the queue. You should be able to see them here within a few minutes. Please re-request them if they don't show in a reasonable amount of time.

[sdzhepa]

QA Passed after reworking of PR

Were tested next Page Builder entities: Banner, Image, Slider Were tested when this entity inside Row and Tab "containers"

• image tag has added alt attribute
• for div was used aria-label instead.

Additional was performed testing using Screen Reader: All alternative text for all these entities can be read by screen reader

Note: Looks like implementation is done, only some failed functional tests. Fails look like related to the incorrect locators. So i assume no code changes just fix test. But in case if any code changes will be performed to change implementation/logic pls ping me for one more testing round

[sidolov]

@magento run all tests

[magento-automated-testing[bot]]

The requested builds are added to the queue. You should be able to see them here within a few minutes. Please re-request them if they don't show in a reasonable amount of time.

[sidolov]

@magento run Functional Tests B2B,Functional Tests CE,Functional Tests EE,WebAPI Tests

[magento-automated-testing[bot]]

The requested builds are added to the queue. You should be able to see them here within a few minutes. Please re-request them if they don't show in a reasonable amount of time.

[sidolov]

@magento run Functional Tests B2B,Functional Tests CE,Functional Tests EE

[magento-automated-testing[bot]]

The requested builds are added to the queue. You should be able to see them here within a few minutes. Please re-request them if they don't show in a reasonable amount of time.

[sidolov]

@magento run Functional Tests B2B,Functional Tests CE,Functional Tests EE

[magento-automated-testing[bot]]

The requested builds are added to the queue. You should be able to see them here within a few minutes. Please re-request them if they don't show in a reasonable amount of time.

[sidolov]

@magento run all tests

[magento-automated-testing[bot]]

The requested builds are added to the queue. You should be able to see them here within a few minutes. Please re-request them if they don't show in a reasonable amount of time.

[sidolov]

@magento run Functional Tests B2B,Functional Tests CE,Functional Tests EE

[magento-automated-testing[bot]]

The requested builds are added to the queue. You should be able to see them here within a few minutes. Please re-request them if they don't show in a reasonable amount of time.

[sidolov]

@magento run Functional Tests B2B,Functional Tests CE,Functional Tests EE

[magento-automated-testing[bot]]

The requested builds are added to the queue. You should be able to see them here within a few minutes. Please re-request them if they don't show in a reasonable amount of time.

[sidolov]

@magento run Functional Tests B2B,Functional Tests CE

[magento-automated-testing[bot]]

The requested builds are added to the queue. You should be able to see them here within a few minutes. Please re-request them if they don't show in a reasonable amount of time.

[sidolov]

@magento run Functional Tests B2B,Functional Tests CE

[magento-automated-testing[bot]]

The requested builds are added to the queue. You should be able to see them here within a few minutes. Please re-request them if they don't show in a reasonable amount of time.

[magento-automated-testing[bot]]

The requested builds are added to the queue. You should be able to see them here within a few minutes. Please re-request them if they don't show in a reasonable amount of time.

[magento-automated-testing[bot]]

The requested builds are added to the queue. You should be able to see them here within a few minutes. Please re-request them if they don't show in a reasonable amount of time.

[sidolov]

@magento import pr to magento-commerce/magento2-page-builder