docs - examples page - update html semantic for accessibility purpose

[Lausselloic]

Hello,

I suggest to update the HTML semantic in docs/examples/index.md because actual one generate empty links, so it can't be understand with screen reader tools, and also can't be used for SEO.

There's also a break in title hierarchy h2-> h4. Maybe could use an unordered list for each rows, and put each example (picture, 'title', desc) into a list element. To improve the link consistency, maybe group picture and 'title' into it, and remove the title which is not really consistency, with a span with the h4 class?

What's your point of vue? I can make a PR if needed.

Here is the jsfiddle with the proposition : https://jsfiddle.net/sf4quyxm/

I propose to update from :

<div class="row bd-examples">
  <div class="col-6 col-md-4">
    <a href="{{ site.baseurl }}/examples/starter-template/">
      <img class="img-thumbnail" src="{{ site.baseurl }}/examples/screenshots/starter-template.jpg" alt="">
    </a>
    <h4>Starter template</h4>
    <p>Nothing but the basics: compiled CSS and JavaScript.</p>
  </div>

To :

<ul class="row bd-examples">
  <li class="col-6 col-md-4">
    <a href="{{ site.baseurl }}/examples/starter-template/">
      <img class="img-thumbnail" src="{{ site.baseurl }}/examples/screenshots/starter-template.jpg" alt="">
      <span class="h4">Starter template</span>
    </a>
    <p>Nothing but the basics: compiled CSS and JavaScript.</p>
  </li>

[patrickhlauke]

wouldn't be opposed to it in principle. note that it needs extra styling rule to suppress the bullet for list items - see https://jsfiddle.net/sf4quyxm/1/

[Lausselloic]

Yes my bad, I've not saved the version with CSS adaptation : https://jsfiddle.net/sf4quyxm/2/

[wuxue12]

thank you for your help!

[saxtonjoshua1]

Was there any action taken on this issue?