[4.0] blog intro image by brianteeman · Pull Request #30823 · joomla/joomla-cms

brianteeman · 2020-09-30T21:29:07Z

Summary of Changes

This PR fixes multiple issues with the blog_intro_image layout. If linked titles is ON then the image is also made into a link.

Accessibility error : Identical links next to each other
Accessibility / html error : No link name on the image link ( They are just announced by a screenreader as link without any indication of what they are a link to)
Structured data error : missing itemprop on the image link
Authentication issue : image link did not support/check the show_noauth param

Expected result AFTER applying this Pull Request

After applying this PR these issues are all resolved when the option is enabled.
There is

a new option in the global blog layout options "Link Intro Image" - the default is NO (because the default for linked article title is yes)
a new option in the blog layout menu as above
a new option in the featured layout menu as above

Documentation Changes Required

None

…k and fix the missing title on the link

ceford · 2020-10-02T15:07:58Z

I have tested this item ✅ successfully on 004c75d

All seemed to work as described. I don't know about 'the show_noauth param' thing - never met it.

On documentation: We (I) need to update the Help screens when this gets committed.

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/30823.}

chmst · 2020-10-03T13:33:55Z

All works as expected and is better than before.
An accessibility error could be: "redundant link", as there are two (or if there is a readmore three) equal links are close together.

I give a positive test because it is better than before and users must know what they do.

chmst · 2020-10-03T13:34:40Z

I have tested this item ✅ successfully on 004c75d

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/30823.}

Quy · 2020-10-03T18:28:18Z

RTC

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/30823.}

HLeithner · 2020-10-04T11:50:29Z

Do you really thing it's needed to add a new option? I mean we try to reduce useless options and this looks like a template option and not a com_content option in my opinion...

brianteeman · 2020-10-04T12:21:37Z

No its not useless!! What is useless are the current options which are not usable by a regular user. This makes them usable.

HLeithner · 2020-10-04T12:26:22Z

It's not useless because it's not useless is not really a good answer ;-)

but ok if you think it's needed to disable the link on an images (which should always be on for people which have troubles to target the title correctly or always click on the image first because it's bigger like me) then I'm ok with it.

brianteeman · 2020-10-04T12:28:49Z

Either we are serious about creating a cms that will create accessible content or we are not.

HLeithner · 2020-10-04T12:33:40Z

why is the link on an image a accessible problem? (sorry that I don't know it)

I'm happy with the rest of the pr

brianteeman · 2020-10-04T12:36:37Z

It is stated in the description

Accessibility error : Identical links next to each other
Accessibility / html error : No link name on the image link ( They are just announced by a screenreader as link without any indication of what they are a link to)

HLeithner · 2020-10-04T12:40:52Z

Accessibility / html error : No link name on the image link ( They are just announced by a screenreader as link without any indication of what they are a link to)

that's the other part of the pr that's should be fixed and is fine I think.

Accessibility error : Identical links next to each other

That's something I can't understand why it is a problem and by the way if I don't understand who should someone understand it who only want's to have a website? How should anyone think that this options is a a11y option?

can one of the links automatically be disabled for a screenreader?

brianteeman · 2020-10-04T13:09:04Z

OK Let me try to explain the multiple issues.

Firstly if you select linked titles you also get linked image. You didnt ask for that but you got it anyway. The link on the image was created without any meaningful description. This means that a screenreader would just announce "Link" for every linked image. As this is for the blog intro image then you will now have multiple links on the page that all have the same name "Link". If that is fixed by ensuring the link has a meaningful name then you hit the second problem. You now have two identical links next to each other. This is against the WCAG rules but it also means a user using any form of assistive technology has to navigate past double the number of links to get to the one that they want.

This is not about making accessibility an option or something that you have to configure. This is about making all content accessible.

In my JaB talk I talked about how we have been led down the path of responsive design where we ensured that the content was great on any device. So that our websites worked on all devices without doing anything special. This device first approach completely ignored people. A people first approach ensures that content works great for all people without doing anything special.

can one of the links automatically be disabled for a screenreader?

Not just about screenreaders. Anyone navigating a site in a linear manner eg with a keyboard also has the problem of double identical links. And no you can't do that and nor should you.

If you want to see a really typical example of why this needs to be fixed just check out the supposedly accessible template https://paswjoomla.net/joomla/

laoneo · 2020-10-08T09:26:37Z

But should then the CMS not come with a proper default and when somebody want's to change the default behavior, then make a template override? I understand @HLeithner that these tiny options are flooding the core already.

chmst · 2020-10-08T10:17:16Z

A correct default solution would be to generate the image without link. As @laoneo says. This was default until someone has made a PR for linking the image too.
But I know that, if we remove the link on the image, we soon will have a PR for linking the image - because it seems to be a natural human behaviour to klick on images in a blog, more than on headlines.

I understand @HLeithner and would like to reduce the number of params instead of increasing them. And I am sure that all users will choose to link image AND title because they don't know why this is not a11y (or don't care about a11y).

So this PR makes sure that if there is a link on the image, it at least is correct.

ghost · 2020-10-08T10:21:17Z

I am sure that all users will choose to link image AND title because they don't know why this is not a11y (or don't care about a11y)

sure too

brianteeman · 2020-10-08T10:30:45Z

We really should be making it easier for content creators to produce accessible content. Not just for the joomla UI to be accessible. If I had my preference it would be to only allow either title or image to be linked eg
Blog links ->

none
readmore
title
image

But I was pretty sure that would get rejected so I made it an option

brianteeman · 2020-10-08T10:32:01Z

I am sure that all users will choose to link image AND title because they don't know why this is not a11y (or don't care about a11y)

sure too

thats why I proposed the accessibility checker

laoneo · 2020-10-08T11:15:42Z

Linking the image was done in 2014, so the web changed quite a bit since then. I think it is fine to get rid of the links. For reference, here is the pr which added them #4134.

HLeithner · 2020-10-08T11:50:06Z

@brianteeman please simple remove the link on the image since it is a a11y problem we shouldn't confuse people with options they shouldn't use^^ if someone want's the image linked he/she should do a layout override.

And please add a comment in the source why the image doesn't have a link anymore.

brianteeman · 2020-10-08T12:15:08Z

There is nothing wrong with having the image as a link (when the code is correct). The problem is only when you have a linked image AND a linked title AND they are next to each other. So no I wont remove it. Either accept or reject this PR. It is correct as it is.

laoneo · 2020-10-08T12:32:31Z

Can we not detect that programmatically and create then proper HTML code? Is it really necessary that a human needs to define here how the output should be that it is accessible? With my little knowledge I have the impression this is something core should do correct out of the box.

brianteeman · 2020-10-08T13:33:26Z

You're a better person than me then if you can write the logic to determine this programmatically with the current options

With the proposed defaults core will do it correctly out of the box.

drmenzelit · 2020-10-15T10:17:05Z

I like this approach
https://inclusive-components.design/cards/
to make blog elements clickable.
I have it working on some pages using overrides.
Maybe something to think about.

brianteeman · 2020-10-16T13:39:07Z

Thanks @rdeutz

richard67 · 2020-10-19T18:29:39Z

installation/sql/postgresql/base.sql

 (0, 'com_templates', 'component', 'com_templates', '', 1, 1, 1, 1, 1, '', '{"template_positions_display":"0","upload_limit":"10","image_formats":"gif,bmp,jpg,jpeg,png","source_formats":"txt,less,ini,xml,js,php,css,scss,sass,json","font_formats":"woff,ttf,otf","compressed_formats":"zip"}', '', 0, 0),
-(0, 'com_content', 'component', 'com_content', '', 1, 1, 0, 1, 1, '', '{"article_layout":"_:default","show_title":"1","link_titles":"1","show_intro":"1","show_category":"1","link_category":"1","show_parent_category":"0","link_parent_category":"0","show_author":"1","link_author":"0","show_create_date":"0","show_modify_date":"0","show_publish_date":"1","show_item_navigation":"1","show_vote":"0","show_tags":"1","show_readmore":"1","show_readmore_title":"1","readmore_limit":"100","show_hits":"1","show_noauth":"0","show_publishing_options":"1","show_article_options":"1","save_history":"1","history_limit":10,"show_urls_images_frontend":"0","show_urls_images_backend":"1","targeta":0,"targetb":0,"targetc":0,"float_intro":"left","float_fulltext":"left","category_layout":"_:blog","show_category_title":"0","show_description":"0","show_description_image":"0","maxLevel":"1","show_empty_categories":"0","show_no_articles":"1","show_subcat_desc":"1","show_cat_num_articles":"0","show_base_description":"1","maxLevelcat":"-1","show_empty_categories_cat":"0","show_subcat_desc_cat":"1","show_cat_num_articles_cat":"1","num_leading_articles":"1","num_intro_articles":"4","num_links":"4","show_subcategory_content":"0","show_pagination_limit":"1","filter_field":"hide","show_headings":"1","list_show_date":"0","date_format":"","list_show_hits":"1","list_show_author":"1","orderby_pri":"order","orderby_sec":"rdate","order_date":"published","show_pagination":"2","show_pagination_results":"1","show_feed_link":"1","feed_summary":"0"}', '', 0, 0),
+(0, 'com_content', 'component', 'com_content', '', 1, 1, 0, 1, 1, '', '{"article_layout":"_:default","show_title":"1","link_titles":"1","show_intro":"1","show_category":"1","link_category":"1","show_parent_category":"0","link_parent_category":"0","show_author":"1","link_author":"0","show_create_date":"0","show_modify_date":"0","show_publish_date":"1","show_item_navigation":"1","show_vote":"0","show_tags":"1","show_readmore":"1","show_readmore_title":"1","readmore_limit":"100","show_hits":"1","show_noauth":"0","show_publishing_options":"1","show_article_options":"1","save_history":"1","history_limit":10,"show_urls_images_frontend":"0","show_urls_images_backend":"1","targeta":0,"targetb":0,"targetc":0,"float_intro":"left","float_fulltext":"left","category_layout":"_:blog","show_category_title":"0","show_description":"0","show_description_image":"0","maxLevel":"1","show_empty_categories":"0","show_no_articles":"1","show_subcat_desc":"1","show_cat_num_articles":"0","show_base_description":"1","maxLevelcat":"-1","show_empty_categories_cat":"0","show_subcat_desc_cat":"1","show_cat_num_articles_cat":"1","num_leading_articles":"1","num_intro_articles":"4","num_links":"4","show_subcategory_content":"0",
+"link_intro_image":"0","show_pagination_limit":"1","filter_field":"hide","show_headings":"1","list_show_date":"0","date_format":"","list_show_hits":"1","list_show_author":"1","orderby_pri":"order","orderby_sec":"rdate","order_date":"published","show_pagination":"2","show_pagination_results":"1","show_feed_link":"1","feed_summary":"0"}', '', 0, 0),


This new line within the params string is wrong. Will make PR to fix it.

oops - surprised we dont have tests for this

Well it doesn't cause an SQL error, so the installation at the system test for postgresql doesn't fail, and SQL code style we don't test.

Thanks for testing the PR.

This PR reverts an accidental change made in joomla#30784 to make the intro image a link only when the option is set. This is an important accessibility issue. For full testing instructions etc see the original PR where this was introduced joomla#30823

* [4.0] Intro image link This PR reverts an accidental change made in #30784 to make the intro image a link only when the option is set. This is an important accessibility issue. For full testing instructions etc see the original PR where this was introduced #30823 * auth and title

brianteeman added 8 commits September 30, 2020 21:30

change layout to use its own param "link_intro_image"

136727d

new config option

c739453

global string

30e8324

move param to blog/featured layout tab

44c0b2a

menu option blog category menu option featured

8ce64f3

update layout to use the new param AND fixing the missing noauth chec…

a63db6d

…k and fix the missing title on the link

sync api languge file

1d916cb

installation sql

004c75d

joomla-cms-bot added Language Change This is for Translators PR-4.0-dev labels Sep 30, 2020

brianteeman mentioned this pull request Sep 30, 2020

Ambiguous Link names on images joomla/cassiopeia#123

Closed

Quy removed the Language Change This is for Translators label Oct 3, 2020

Quy removed the PR-4.0-dev label Oct 3, 2020

joomla-cms-bot added the RTC This Pull Request is Ready To Commit label Oct 3, 2020

Quy added the PR-4.0-dev label Oct 3, 2020

infograf768 added the Language Change This is for Translators label Oct 8, 2020

rdeutz added the Documentation Required label Oct 16, 2020

rdeutz added this to the Joomla 4.0 milestone Oct 16, 2020

rdeutz merged commit 9271820 into joomla:4.0-dev Oct 16, 2020

joomla-cms-bot removed the RTC This Pull Request is Ready To Commit label Oct 16, 2020

brianteeman deleted the yk4-introimage-a11y branch October 16, 2020 13:39

jgerman-bot mentioned this pull request Oct 16, 2020

[4.0] blog intro image joomlagerman/joomla#1302

Closed

richard67 reviewed Oct 19, 2020

View reviewed changes

richard67 mentioned this pull request Oct 19, 2020

[4.0] Fix wrong line break in params value in postgresql/base.sql caused by PR #30823 #31164

Merged

brianteeman mentioned this pull request Nov 28, 2020

[4.0] #30784 breaks accessibility #31521

Closed

brianteeman mentioned this pull request Dec 4, 2020

[4.0] Intro image link [a11y] #31576

Merged

Uh oh!

Conversation

brianteeman commented Sep 30, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary of Changes

Expected result AFTER applying this Pull Request

Documentation Changes Required

Uh oh!

ceford commented Oct 2, 2020

Uh oh!

chmst commented Oct 3, 2020

Uh oh!

chmst commented Oct 3, 2020

Uh oh!

Quy commented Oct 3, 2020

Uh oh!

HLeithner commented Oct 4, 2020

Uh oh!

brianteeman commented Oct 4, 2020

Uh oh!

HLeithner commented Oct 4, 2020

Uh oh!

brianteeman commented Oct 4, 2020

Uh oh!

HLeithner commented Oct 4, 2020

Uh oh!

brianteeman commented Oct 4, 2020

Uh oh!

HLeithner commented Oct 4, 2020

Uh oh!

brianteeman commented Oct 4, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

laoneo commented Oct 8, 2020

Uh oh!

chmst commented Oct 8, 2020

Uh oh!

ghost commented Oct 8, 2020

Uh oh!

brianteeman commented Oct 8, 2020

Uh oh!

brianteeman commented Oct 8, 2020

Uh oh!

laoneo commented Oct 8, 2020

Uh oh!

HLeithner commented Oct 8, 2020

Uh oh!

brianteeman commented Oct 8, 2020

Uh oh!

laoneo commented Oct 8, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

brianteeman commented Oct 8, 2020

Uh oh!

drmenzelit commented Oct 15, 2020

Uh oh!

brianteeman commented Oct 16, 2020

Uh oh!

richard67 Oct 19, 2020

Choose a reason for hiding this comment

Uh oh!

brianteeman Oct 19, 2020

Choose a reason for hiding this comment

Uh oh!

richard67 Oct 19, 2020

Choose a reason for hiding this comment

Uh oh!

richard67 Oct 19, 2020

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

11 participants

brianteeman commented Sep 30, 2020 •

edited

Loading

brianteeman commented Oct 4, 2020 •

edited

Loading

laoneo commented Oct 8, 2020 •

edited

Loading