Font sizes are defined in px and the website will not respond to the user agent's preferred font size settings (this is different from zoom, zoom works).

This is an accessibility issue: the site should not prevent the user from selecting a larger (or smaller) font by default in his user agent.

Please use em or % to define font sizes.

CommentFileSizeAuthor
#9 a11y_issue_font_sizes-2334345-9.patch166.05 KBbskibinski
#6 a11y_issue_font_sizes-2334345-6.patch50.48 KBmbroere

Comments

dennis cohn’s picture

dennis cohn commented

We will change all font sizes into em or % in our next release.

dennis cohn’s picture

dennis cohn commented
Assigned: Unassigned » dennis cohn
frankschaap’s picture

frankschaap commented

The last word on WCAG compliant text resizing is here: http://www.bitvtest.eu/articles/article/lesen/zoom-and-text-resizing.html

BarisW’s picture

BarisW commented
Component: User interface » Theme
Issue tags: +Accessibility, +dvg-sprint
mbroere’s picture

mbroere commented
Assigned: dennis cohn » mbroere
mbroere’s picture

mbroere commented
Assigned: mbroere » Unassigned
Status: Active » Needs review
StatusFileSize
new a11y_issue_font_sizes-2334345-6.patch50.48 KB

Font sizes are now in px's and rems. Browsers that doesn't support rems use the px fallback.

HTML font size is set to 10px (html {font-size:62,5%}), so we can actually use rems. Body font size is set to 16, so it is default again.

Line heights are set to %.

askibinski’s picture

askibinski commented

@bskibinski can you take a look at this?

bskibinski’s picture

bskibinski
Primary language Dutch
Location Breda, The Netherlands
commented

on it, changing to ems

bskibinski’s picture

bskibinski
Primary language Dutch
Location Breda, The Netherlands
commented
StatusFileSize
new a11y_issue_font_sizes-2334345-9.patch166.05 KB

Attached patch that converts most pixels to EM for font-sizes (some font-sizes are set in pixels because of image dimensions, so i left these alone).

Furthermore I did a big cleanup of the entire theme:

  • Converted font-size Pixels to EM
  • Converted clearfix to modern 'micro clearfix'
  • Converted quotation to " instead of ' because of drupal coding standards
  • Converted all comments to sass comments
  • Converted all colors to variables, and shorthanded.
  • Added variables for base-font-size: 18px
  • Added more breakpoint rules, because fonts would get too big (because it's EM's now, so it scales up)
  • Added sourcemapping to config.rb for easier debugging.
  • Improved comments consistent throughout all files
  • Improved spaces to [content: " "] to prevent bugs
  • Improved headings font-sizes are rounded better now (whole pixel numbers)
  • Removed a lot of residual commented code.
  • Removed redundant pixel values
  • Removed EM's from line heights
  • Removed some obsolete vendor-prefixes (border-radius, some gradients, box-sizing)

I've tested a lot of screens in DVG and there shouldn't be any differences. This patch should only improve accessibility and modernize/cleanup the theme, but it shouldn't effect the theme visually.

askibinski’s picture

askibinski commented
Assigned: Unassigned » dennis cohn

Dennis, could you take a look at this sometime?

askibinski’s picture

askibinski commented
Assigned: dennis cohn » Unassigned
Status: Needs review » Closed (won't fix)

Discussed this, and while the patch and issue or valid points, there is a major backwards compatibility issue:

Many sites use the dvg theme as a base theme, and this patch would break a lot of existing sites.
(bytheway: this is exactly the reason why Drupal 8 has chosen to create a "stable" theme which is never touched and on which you can always depend on.)

However, there is now active development in the DvG abc theme. DvG abc is the recommended startertheme (no need for a base theme) to use for DvG projects.

I have updated the documentation page about these 2 approaches.