theme-cards icon indicating copy to clipboard operation
theme-cards copied to clipboard

Accessibility and Customization Suggestions for theme-cards

Open RonnyG2121 opened this issue 8 months ago • 1 comments

Hello, First of all, thank you for your work on the theme-cards theme for hbFramework — it’s clean and well-structured. I’m currently using the theme and would like to make a few accessibility-focused improvements and small customizations. I’d appreciate your guidance or suggestions on how best to implement the following: 1. Share buttons section: I’d like to add a heading or label before the share buttons to clearly indicate that these are links for sharing content. This would help screen reader users understand their purpose. 2. Donation links: I’d like to include donation links (e.g. Ko-fi, PayPal, etc.) in the footer or elsewhere in a clean and consistent way with the theme’s design. 3. Footer content: I would like to remove the name and description from the footer, as they are already shown elsewhere on the page and this repetition isn’t necessary for my use case. 4. Translations: I’d like to update the translations of some of the buttons for better clarity and accessibility in my language. Could you let me know the best way to override or modify these elements while keeping future theme updates in mind? I’d be happy to contribute improvements back if needed. Thanks in advance for your time and for making this theme available!

RonnyG2121 avatar May 09 '25 07:05 RonnyG2121

  1. The social share buttons do have label (the media name, maybe not sth you want), to add a heading or extra label please take a look on https://github.com/hbstack/social-share-buttons/blob/main/layouts/partials/hb/modules/social-share-buttons/index.html
  2. You can either use social links module or the footer hooks.
  3. You can override the file https://github.com/hbstack/footer/blob/main/layouts/partials/hb/modules/footer/site-info.html, just create the file on your project root with the same layout path, e.g. layouts/partials/hb/modules/footer/site-info.html.
  4. The translations are separated by modules, if you can not find the right module, you can search the element text or class on GitHub. For example, to search the On this page as the image shown below with the class names, then navigate to https://github.com/search?q=org%3Ahbstack+%22h6+d-none+d-md-block%22&type=code, then you will find the right repo to change translations (located in the i18n folder in repo), you can also ask me on GitHub. See also https://hbstack.dev/docs/join-us/#i18n-guide. Image

razonyang avatar May 09 '25 09:05 razonyang