In some designs for web projects, I've seen that the designer wants the browser's native text-selector to be customized following the Design System. For example, by changing the background and color of a text when it is selected. I'm not sure about the accessibility issues this can cause. My first take is that if the custom CSS matches the requirements of WCAG 1.4.3 Contrast (Minimum) it would be OK, as it happens with custom outlines for focus. However, I'm not sure about the secondary issues that this could cause to users with special contrast configurations in their system and browser.
1. Would overriding the browser's native text-selector with CSS be compliant with WCAG?
2. Can it cause other accessibility issues beyond what WCAG covers?
In my SASS code, it looks like this: (from this CSS trick)
body *::selection {
color: $white;
background: $primary-color-main; /* WebKit/Blink Browsers */
}
body *::-moz-selection {
color: $white;
background: $primary-color-main; /* Gecko Browsers */
}
A minimal reproducible example (without variables):
This code changes the text-selector for all elements that are recurrent descendants of the body in any HTML code.
body *::selection {
color: white;
background: black; /* WebKit/Blink Browsers */
}
body *::-moz-selection {
color: white;
background: black; /* Gecko Browsers */
}
Custom selection styles are compatible with WCAG criteria, as long as you fulfill the general requirements for color contrast and so on.
That said, custom selection styles could still be an accessibility issue. Users sometimes specify their own selection styles to fit their own needs. Additionally, users may be confused by changes to the expected appearance of selected text.
MDN has a little more info about selection accessibility.
Customizing the text selection color is perfectly fine as long as you follow 1.4.3 Contrast (Minimum), as you noted. I've seen custom selection colors done for branding purposes and it can look really good.
There aren't any other WCAG issues with having a custom selection style but one thing you might want to check is if you turn on the OS's high contrast mode, whether PC or Mac, can you still see/read your text when it's selected? If you can't, it's not a strict WCAG failure but would certainly be a usability issue.
Also, having a custom selection style does not preclude the user from having their own customizations. I do this myself. I have a style sheet associated with my various browsers so that my customizations show up on any website I visit. I have !important in my CSS so that it will override whatever the site tries to do so I could still have my own selection style no matter how you tried to set it.
I'm helping develop a website for a GitPages workshop and I'm new to Just the Docs theme. How can you change the font size for a long title that appears in the header/home link (top left of the screenshot). For reference, here is the Github repo.
Thanks in advance!
I tried to edit files in both the _includes and _sass folders but I either wasn't able to identify the correct file or I was unsure how to properly edit these files.
I have checked the browser dev tools/inspector.
The font size is set in two places (according to my current screen size):
#media (min-width: 31.25rem)
.site-title {
font-size: 24px !important;
}
.site-title {
font-size: 18px !important;
}
GitHub repo searches:
for font-size: https://github.com/cmu-lib/portfolio_workshop/search?q=font-size
for .site-title: https://github.com/cmu-lib/portfolio_workshop/search?q=site-title
In general, the theme uses some predefined CSS classes to set the font size.
The sizes from above (18px, 24px) correspond with the
.fs-6 CSS class.
The docs suggest to use custom CSS to overwrite any default styles.
I have to send a (complex) html-mail to various receivers and desperately try to bring it to work for various email clients (at least Outlook, iOS and gmail).
I now have a version that works for Outlook and iOS, but not for gmail (Android).
Short description:
There are various css styles and media queries defined in the header.
The css class conttext (see snipped below) defines the font family, font size, and so on..
The css class conttextboldblue (see snipped below) set the attributes: color: #0000FF; (blue) font-weight: bold;
The class conttext is set to the td element and works on any platform.
The class conttextboldblue is set in span in the td and works on all platforms (including GC that I use for tests) except gmail.
If I set the style inline (last row in the snipped below), it works in gmail, but all other clients lose the styles set in conttext (font family, font size and so on).
As I worte above, it's a huge and complex email and I don't want to remove all css styles and put anything inline (further, I also need media queries).
I have searched the internet and also SO and only found, that - if a css style to td is defined, all other css styles are removed in gmail... :-(
And.. that exactly seems to be the case...
Therefore my question:
- Does anybody have a solution to bring that to work also in gmail?
Thanks for any hint!
Code snipped:
<td><span class="conttext"><br>
Some text <strong>some strong text</strong> mit <strong>some strong text</strong> some text<br>
<br>
Some text <br>
</span>
<span class="conttextboldblue">This text is NOT (only in gMail) not formatted -> conttextboldblue is just ignored</span><br>
<span style="color:blue; font-weight:bold;">This text is formatted but all other clients (iOS und Outlook) lose the formats defined in conttext!</span><br>
Not all versions of Gmail are equal, and not all of them support <style> elements. In particular, if you test in Gmail (Android or iOS) with a third party email address (like an #outlook.com address for example), you won't get support for <style> and only inline styles will work there. (I wrote a blog post about Gmail CSS support here.)
Gmail clients are also known for being picky about any misformed CSS and removing entire <style> tags if they see something they don't like. For example, having a rule like #media { #font-face { … }} will get Gmail (all clients) to remove the entire <style> element that contain these rules. (But feel free to post your entire code to get detailed feedback on this precisely.)
For these reasons, it is usually considered a best practice to inline your styles in an HTML email.
Here now my findings...
In general:
Our html email contains images (with links), special formats to text (bold, blue, red) tables, bullets, internal links and has to be sent to about 12k recipient’s, whereby we do not know, on what devices they will read the email.
A few years ago, we have optimized a similar email only for desktop (Outlook). These times are over definitely - we have to expect, that more than 50% will read the email on mobile devices (this is fact).
It’s incredible complex and time consuming to create such an email, that is at least readable without problems on desktop (Outlook) and mobiles (iOS (iOS mail app) and Android (gmail)).
Noted (main) issues (to my specific html email):
Outlook need a smaller font size and a fix width for the table and also the images to look O.K.
Outlook further need special settings for bullets, that are not compatible with the mobile clients.
Outlook and iOS (and any browser, e.g. Google Chrome) respect css-stiles (set with “class=”) and media queries - whereby I have not found a way to bring this at work with gmail. For me, it seems as gmail delete all css-settings after opening the email (maybe there is a way to bring it to work, but I gave up after a few days of try and error). The only that works (for me), is to apply styles (style =) directly to the html elements. If have found some information’s that it also works in gmail, but with (massive) limitations https://litmus.com/community/discussions/8098-media-queries-support-for-android-gmail-app-2019-verison
The mobile clients need a viewport entry and to set images and tables to 100%, else the email is scaled automatically to a not to read “micro font” (and the users have to zoom to be able to read the text)
Internal links work on Outlook and Android, but not in iOS (else iOS has good support for css and the behavior is, as it should be)
I have not found a real “solution” but (only) a workaround.
Viewport entry:
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
In the style tag it set all css for outlook (width to images and table, font size and “special” settings for bullets (wrong for the mobile clients).
ul, ol{margin-left: 20px !important;}
li {text-align:-webkit-match-parent; display:list-item;text-indent: -1em; margin-top: 5px;}
Then I set base settings for iOS mobiles in a media query
#media screen and (max-width: 1024px) {
/* Reset Spezialeinstellungen Outlook für alle Mobiles*/
ul,ol {margin-left: 0px; }
li {text-align:left; display:list-item;text-indent: 0px; margin-top: 0px;}
.HauptTabelle {
width: 100% !important;
}
This resets the outlook special settings for all iOS clients with max width of 1024px.
Then I set css for various iOS devices - example:
/*IPhone 6/7/8: 375px */
#media screen and (max-width: 375px) {
.conttext {
font-size: 20px !important;
line-height: 22px !important;
}
.Headline0Boldleft {
font-size: 20px !important;
line-height: 22px !important;
}
.headline {
font-size: 20px !important;
line-height: 22px !important;
}
.headtext {
font-size: 20px !important;
line-height: 22px !important;
}
.conttextboldblue {
font-size: 20px !important;
line-height: 22px!important;
}
.conntextbold {
font-size: 20px !important;
line-height: 22px !important;
}
}
And then, I set the attributes for Android (gmail) in addition direct to the html elements.
Example:
<td style="color: #0000FF; font-weight: bold; border: 2px solid #FF0000; padding:4px !important;" class="style1"><span class="conttextboldblue">Some text... and further code...
In this example, I set the font color to red and bold and a border.
Note: the same is defined in classes style1 (border and padding) and conttextboldblue.
So...I set the attributes double (on time inline with Style= and onetime in the css classes).
Android (gmail) only respect the "style=", whereby iOS takes the css style with priority.
So I can define further styles (e.g. font size) for iOS in media queries.
Android (gmail) seems to apply a “usable” font size automatically.
As mentioned above, this is not a solution, but a workaround for my case.
If I would have further html mails to send out in the future (what is not the case), I would invest (a lot) more time to find a real solution...
Further hints:
Validate your html code here:
https://validator.w3.org/#validate_by_upload
Note: The tool shows double assigned styles (inline and with css) as error, but it works nevertheless
Take care, that you have the correct notation to comment lines:
CSS:
/* Your comment */
HTML:
<!-- Your comment -->
(my editor has commented lines in css as html comments, what has cost me some time until I noted that...)
Load your html email in Google Chrome, press F12 (debug mode) and check it there (especially, if you have media queries in your html).
If you have media queries and GC don’t show it, something is wrong with your code.
With GC you easily can simulate mobiles and have a look, if the media queries are applied correct.
I hope, this helps somebody...
I want my website to adapt dynamic font-size for iOS. So If you change font-size in settings (Settings > General > Accessibility > Larger Text on your iPhone), your webpage font-size should adjust based on that.
I have font: -apple-system-body added in html root. And throughout the website I am using rem to adjust font-size relative to html root.
So it's working but the problem is -apple-system-body gives font-size: 16px by default which is too high for my page. I want to convert that to 10px; So my html root font-size should be 62.5% of what the system gives always.
Currently I am achieving that using javascript with something like this :
document.documentElement.style.fontSize = document.documentElement.style.fontSize * 0.625;
Was wondering if there's css only way to solve this.
You could use the css calc() function. Inside this function, you can perform operations. For example:
font-size: calc(1rem * 0.625);
For more info: https://css-tricks.com/a-complete-guide-to-calc-in-css/
Yes, set the HTML size to 62.5%. This will honour system settings (the 10px is a fallback for ancient browsers, not really needed)
html{
font-size: 10px;
font-size: 62.5%;
}
Ensure you definitely have rem or em units everywhere if you do this though.
The style of my web app is for the most part directed at users who can operate a mouse. Some focusable elements don't look so good when focused (clicked on) so these elements have custom or no outlining. Some inputs are bootstrap inputs so their focus is dictated by bootstrap.
When a user is visually disabled (not totally blind but has trouble to see) I would like to emphasize the focused elements. Usually these users have some sort of high contrast on and this can be detected in IE:
#media screen and (-ms-high-contrast: active) {
/* All high contrast styling rules */
*:focus {
/*outline-color: red !important;*/
outline-width: 5px !important;
outline-style: solid !important;
}
}
How would I go about implementing this in other browsers and would this be supported on other operating systems?
Maybe we can give the user an option for a different theme of the site but I'd rather have this automatically done based on the user's settings in the Operating System.